jquery hover function in views template (drupal 6)

Question

I have a views template called: views-view-fields--video--block-1.tpl.php

Inside that file i have:

<script type="text/javascript">
  $(document).ready(function() {
    $('.last-vid-poster').hover(function() {
        $(this).parents('.last-vid-block').find('a.play_button').fadeIn('slow');
      }, function() {
        $(this).parents('.last-vid-block').find('a.play_button').fadeOut('slow');
      }
    );
  });
</script>

<?php

print '<div class="last-vid-block">';

print '<div style="float: left; margin-right: 8px;">'. $fields['field_video_embed']->content.'</div>';

print '<h3 class="video-block">'. $fields['title']->content .'</h3>';

$hover_play = l('<img src="/' . path_to_theme() . '/img/play-button.png" />', 'node/' . $row->nid, array('attributes' => array('class' => 'play_button', 'style' => 'display: none'), 'html' => true));

print $hover_play;

print '</div>'; // vgrid

?>

As you can see in my JS code at the top of the template, i'm printing $hover_play when user hovers over .last-vid-block .imagecache object, so it fades In then fades Out, that works, yeah.

But the problem is -> i have in that views block 4 nodes with that markup, so when i hover over just one .last-vid-block .imagecache that $hover_play shows on all 4 objects... How to separate them - if i hover just 1st object $hover_play shows only at 1st object etc... Thanks in advance!

ATTENTION! Edited js code at the top! It works as intended, is there any erros in that code?

Answer 1

The original issue was that you were targeting all play buttons at once with your JS, the second problem that came up in the comments below is that your play button is on top of your .imagecache object and your .play_button is taking away the mouse focus, thus firing "hover out"

Try this:

<script type="text/javascript">
  $(document).ready(function() {
    $('.last-vid-block').hover(function() {
      $(this).find('a.play_button').fadeIn('slow');
    }, function() {
        $(this).find('a.play_button').fadeOut('slow');
      }
    );
  });
</script>

The downside to this, however, is that if you hover over the title on the right side (outside of the .imagecache) object, your still going to get the fade in/out effect triggered...

If that is not what you want then you could try altering the template:

<script type="text/javascript">
  $(document).ready(function() {
    $('.last-vid-poster').hover(function() {
      $(this).find('a.play_button').fadeIn('slow');
    }, function() {
        $(this).find('a.play_button').fadeOut('slow');
      }
    );
  });
</script>

<?php

print '<div class="last-vid-block">';

print '<div class="last-vid-poster" style="float: left; margin-right: 8px;">';

print $fields['field_video_embed']->content;

$hover_play = l('<img src="/' . path_to_theme() . '/img/play-button.png" />', 'node/' . $row->nid, array('attributes' => array('class' => 'play_button', 'style' => 'display: none'), 'html' => true));

print $hover_play;

print '</div>';

print '<h3 class="video-block">'. $fields['title']->content .'</h3>';


print '</div>'; // vgrid

?>

Answer 2

Your binding is too wide. You should use context

<script type="text/javascript">
  $(document).ready(function() {
    $('.last-vid-block').each(function() {
      var $block = $(this);
      $('.imagecache', $block).hover(
        function() {
          $('a.play_button', $block).fadeIn('slow');
        }, function() {
          $('a.play_button', $block).fadeOut('slow');
        }
      );
    });
  });
</script>

It's better to place the js into views-view--video--block.tpl.php (you should check the exact name) as in your current scenario the code is executed #videos times.