Rebinding question
in Using jQuery
•
12 years ago
Hi,
I am working on a drupal website for my personal portfolio, the website itself is in a grid format and the nodes or articles are of varying heights and fixed widths.
The height value itself is stored in each node:
- <?php print $node->field_imgheight[0]['value']; ?>.
The DOM for each node is set up as follows:
- <div id="node-<?php print $node->nid; ?>" class="node">
- <div class="boxgrid caption node-inner" style="height:<?php print $node->field_imgheight[0]['value']; ?>px; ">
- <div class="boxcaption cover-<?php print $node->nid; ?>">
- <h3><?php print $title; ?></h3>
- <div class="desc">
- <?php print $content; ?>
- </div>
- </div>
- </div>
The problem I am having is in creating a caption overlay which slides up when the user hovers over a node. As the nodes are varying heights I have decided to call the height value and calculate how much the caption should move up by.
At the moment I have this in the head of the node.tpl.php file:
- <script type="text/javascript">
- $(document).ready(function(){
- // Get the height value of the image node
- var nodeh = <?php print $node->field_imgheight[0]['value']; ?>;
- var captu = nodeh - 103;
- var captv = nodeh - 25;
- // Set the default value for the caption
- $(".cover-<?php print $node->nid; ?>", this).stop().animate({top:+captv+'px'},{queue:false,duration:1});
- //Caption Sliding (Partially Hidden to Visible)
- $('.boxgrid.caption').hover(function(){
- $(".cover-<?php print $node->nid; ?>", this).stop().animate({top:+captu+'px'},{queue:false,duration:320});
- }, function() {
- $(".cover-<?php print $node->nid; ?>", this).stop().animate({top:+captv+'px'},{queue:false,duration:320});
- });
- });
- </script>
This works perfectly for the content immediately loaded onto the page, however I have an endless page and if I load new content the jQuery does not work. I guess because the new content is not bound to the javascript.
I cannot for the life of me work out how to rebind the scripts to the new content.
I have tried the following:
- $(".boxcaption").live('click',function(){
- $(this).parent().children("*[class^=cover]").stop().animate({top:+captu+'px'},{queue:false,duration:320});
- });
So moving up the tree and then looking for classes that contain the word 'cover', however the result of this is that it takes the node height <?php print $node->field_imgheight[0]['value']; ?>; value from the last node loaded...instead of it's unique value.
I know its a long winded question, but if anyone has any ideas about how to go about correcting this, or has any input or futher reading, then that would be amazing. I would really love to see this site go live, I've been chipping away at it for months now....
Thanks for you time
Ross
1