1

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?
1
+50

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

?>
| improve this answer | |
  • Thank you very much! But now when i hover over a.play_button that button fades.. – Alexander Kim Oct 4 '12 at 4:55
  • I'm not sure. Your code above shows only part of the problem. Can you add the rendered HTML to the question? Also -- do you have a link to the page? – tmsimont Oct 4 '12 at 14:44
  • beta.ruh.kz a block called "СВЕЖЕЕ ВИДЕО" – Alexander Kim Oct 4 '12 at 15:14
  • ah the problem is that the link is on top of the imagecache object, so when it appears it takes away the "focus" of the mouse and jQuery reads that as "hover out" -- i will update my answer above – tmsimont Oct 4 '12 at 15:19
  • thanks, +50 given to you! Also didn't understand why you have removed .parents will it work without that? – Alexander Kim Oct 5 '12 at 11:34
1

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.

| improve this answer | |
  • Thanks, but when i hover over a.play_button it fades. It should not fade when i hover over a.play_button, how to make that? – Alexander Kim Oct 4 '12 at 9:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.