Unable to get simple jquery script to work on WordPress page

Question

I am trying to use the jQuery plugin HCaptions on a WordPress website that I'm developing, so that when the mouse hovers over an image some information will appear over the image. I've been able to enqueue the script within the theme's function-extras.php file and I can see that the script has loaded along with all the other scripts, however the script isn't handling the hover event as desired. At this stage I've just copied and pasted the suggested default code from the HCaptions repository but have referenced my own image as follows:

<a href="#myToggle" class="panel">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/test-feature-image.jpg" />
</a>
<div id="myToggle" class="cap-overlay hide">
    <h5>Cupcakes</h5>
    <div class="content">
        Name: cupcakes.png<br />
        Photography: Ryun Shofner<br />
        <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> 
        <a href="javascript:void(0)" class="button small"><i class="icon-remove"></i> Delete</a>
    </div>
</div>

The site I'm working on can be accessed at www.heartinhand.com.au. Any suggestions greatly appreciated.

Emw · Accepted Answer · 2015-04-23 04:12:07Z

1

You have a script error here:

$(window).load(function(){
  $('.hcaption').hcaptions();
});

Try changing it to this:

jQuery(document).ready(function($){
  $('.hcaption').hcaptions();
});

This is because the jQuery library included in WordPress is set to "noconflict" mode for compatibility reasons.

Your image also needs the hcaption class and data attribute, like this:

<a href="#" data-attribute="#myToggle" class="hcaption panel">

edited Apr 23, 2015 at 4:12

answered Apr 23, 2015 at 4:05

Emw

1,66515 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

oldo.nicho Over a year ago

Cheers @Mike, I can now see that when I hover over the image that a number of different styling parameters are changing for #myToggle so that's great. However the hidden div is still not being revealed. Any further suggestions? Thanks!

Emw Over a year ago

In your bootstrap.min.css, remove the !important tag from the .hide class (display:none rather than display:none!important)

Emw Over a year ago

Also, HCaptions has an issue for this with bootstrap, they say remove the 'hide' class from your overlay div since Bootstrap defines it - github.com/ryun/HCaptions/issues/4 ... That's probably a better longterm option than modifying bootstrap, YMMV

oldo.nicho Over a year ago

Excellent @Mike. That appears to fix the problem and as suggested bootstrap is left unmodified. I'm now finding that the majority of the text that I'd like to appear is hidden. Is it because of overflow: hidden? I basically want the panel that appears to be of the same dimensions as the image, but it is only 24px high...

Emw Over a year ago

Sounds like a good follow-up question for jQuery/CSS folks; it's outside the scope of getting the script working in jQuery

|

Collectives™ on Stack Overflow

Unable to get simple jquery script to work on WordPress page

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related