hover only works partly with slideshow using jquery

**WebSurfer** · 09-15-2012, 03:38 PM

Hello everybody,
I found a strange behaviour on my slideshow. The slideshow itself actually works, including the captions that I put on top of the slideshow using css.
I now want to remove the captionbar when hovering a certain element. But it only works with the first picture.

I have put the code below and you can test it here
Any help or workaround is appreciated.
Thank you very much in advance.

HTML Code:

<html>
  <head>
    <title></title>
    <meta content="">
    <style>
#slideshow {
    position:relative;
   }

#slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.6;
    background-color: #006600;
}

#slideshow DIV.active {
    z-index:10;
    opacity:1.0;
}

#slideshow DIV.last-active {
    z-index:9;
}

#slideshow DIV IMG {
    height: 566px;
    display: block;
    border: 0;
}
#captionbar {
    background-color: #006600;
    color: #FFFFFF;
    font-family: ProximaNlt,Verdana,sans;
    font-size: 40px;
    font-weight: normal;
    height: 80px;
    line-height: 80px;
    opacity: 0.6;
    padding-left: 30px;
    width: 950px;
    z-index: 5;
}
#hover {
font-size: 18px;
margin: 20px;
background-color: yellow;
}
</style>	
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="fadingslideshow.js"></script>
<script type="text/javascript" src="fadetopbars.js"></script>
</head>
<body>
  <div id="hover">HOVER HERE</div>
  <div id="slideshow">
	<div class="active">
	    <div id="captionbar">Caption for image 1</div>
	    <img src="http://www.makems.com/graphic/beach-34.jpg" alt="Slideshow Image 1" />
	</div>
	<div>
	    <div id="captionbar">Caption for image 2</div>
	    <img src="http://www.makems.com/graphic/beach-36.jpg" alt="Slideshow Image 2" />
	</div>

	<div>
	    <div id="captionbar">Caption for image 3</div>
	    <img src="http://www.makems.com/graphic/beach-37.jpg" alt="Slideshow Image 3" />
	</div>
	<div>
	    <div id="captionbar">Caption for image 4</div>
	    <img src="http://www.makems.com/graphic/beach-38.jpg" alt="Slideshow Image 4" />
	</div>    
      </div>
      
      </body>
</html>

Code:

function slideSwitch() {
    var $active = $('#slideshow DIV.active');

    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

    // use this to pull the divs in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV:first');

    // uncomment below to pull the divs randomly
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 3000 );
});

Code:

jQuery(function($){
$("#hover").hover(function() 
{
  $('#captionbar').animate({"opacity": "0"}, "fast");
}, function() {
  $('#captionbar').animate({"opacity": "0.6"}, "slow");
}); 
});

**bernie1227** · 09-16-2012, 02:01 AM

The link appears to be broken.

**WebSurfer** · 09-16-2012, 02:22 AM

You mean the "here"? No, it's working... little slow sometimes, sorry

**bernie1227** · 09-16-2012, 02:32 AM

Where are you calling the function to make the caption disappear?

**jscheuer1** · 09-16-2012, 08:18 AM

For the purposes of javascript often (usually even) there can only be one element per page with a given id. If there's more than one the browser will either do nothing and throw an error, or pick the first one and ignore the rest. If you changed it to a class, that would work. So will this:

Code:

jQuery(function($){
$("#hover").hover(function() 
{
  $('#slideshow div div').animate({"opacity": "0"}, "fast");
}, function() {
  $('#slideshow div div').animate({"opacity": "0.6"}, "slow");
}); 
});

**WebSurfer** · 09-22-2012, 12:28 AM

Yes, John, you are right again. And thank you very much for this one, too.
But I have to admit that I don't really understand why it now works. The page is still using more than one element with ID. Nothing in the HTML had to be changed. Why is it a difference to select the DOM with this selector $('#slideshow div div') instead of this one $('#captionbar') ?

If you like, would you explain it, please?

**jscheuer1** · 09-22-2012, 01:33 AM

It's just the way browser script interpreters work. In javascript there can be only one element per page with a given id. If you changed them all to class="captionbar" and used $('.captionbar') as the selector, that would work too.

It's a little more confusing because you're using jQuery which uses css-like selectors. In pure javascript though it's a little clearer:

Code:

document.getElementById('captionbar') // returns one element or none if none is found -
 //if more than one, you either get an error or only the first one

In browsers that support it (most):

Code:

document.getElementsByClassName('captionbar') // returns a node list with one or however many there are in it,
 //or an empty node list if none found

Notice that the ByClassName method is Elements - plural, while ById is singular - Element.

The reason that $('#slideshow div div') also works is that it selects all divs that are children of divs that are children of the element with the id slideshow. Again, that would be however many or none. Only in the case of jQuery all results of its css-like selectors are objects that also act like arrays. With an id selector you get an object/array with only one member or none if none found, or, as I say - only the first or an error if there are more than one. With all other selectors, you get an object/array with as many as are found that qualify. This can be an empty object/array if none qualify, otherwise it will have as many members as qualify.

I don't know how I can make it any clearer except perhaps to add that it is a technicality, a rule that has been incorporated into javascript since the beginning and that still survives in jQuery - "Only one element per page may have a given id". This actually comes in handy in some situations, and can almost always be worked around when it becomes inconvenient.

**WebSurfer** · 09-22-2012, 06:51 PM

You made it absulutely clear. Now I got it. I was too much focusing css. Jquery and JS have their own rules, of course.
And I have to mention it again, that it is incredible how fast you respond with qualifying answers to not only my questions. No wonder that you are on first place with answers and getting thanked etc...
Thank you so much for all your support!!