jQuery Forum

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:

1. <?php print $node->field_imgheight[0]['value']; ?>.

The DOM for each node is set up as follows:

1. <div id="node-<?php print $node->nid; ?>" class="node">
2. <div class="boxgrid caption node-inner" style="height:<?php print $node->field_imgheight[0]['value']; ?>px; ">  
3.          <div class="boxcaption cover-<?php print $node->nid; ?>">
4. <h3><?php print $title; ?></h3>
5. <div class="desc">
6. <?php print $content; ?>           
7.              </div>
8. </div>
9. </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:

1. <script type="text/javascript">
2. $(document).ready(function(){
3. // Get the height value of the image node
4. var nodeh = <?php print $node->field_imgheight[0]['value']; ?>;
5.         var captu = nodeh - 103;
6. var captv = nodeh - 25;
7. // Set the default value for the caption
8. $(".cover-<?php print $node->nid; ?>", this).stop().animate({top:+captv+'px'},{queue:false,duration:1});
9. //Caption Sliding (Partially Hidden to Visible)
10. $('.boxgrid.caption').hover(function(){
11. $(".cover-<?php print $node->nid; ?>", this).stop().animate({top:+captu+'px'},{queue:false,duration:320});
12. }, function() {
13. $(".cover-<?php print $node->nid; ?>", this).stop().animate({top:+captv+'px'},{queue:false,duration:320});
14. });
15. });
16. </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:

1. $(".boxcaption").live('click',function(){    
2.       $(this).parent().children("*[class^=cover]").stop().animate({top:+captu+'px'},{queue:false,duration:320});
3. });

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