PDA

View Full Version : Slideshow Image Rendering



BorderTerroir
11-01-2011, 11:12 AM
1) Script Title:
:: Ultimate Fade-in slideshow (v2.4)
:: HV Menu v5.5

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm

3) Describe problem:
I would like to combine the HV Menu with a slideshow for the home page of our village website. The problem is the slideshow images render over the menu drop downs.

Is it possible to make the menu items appear over the slideshow?

John

jscheuer1
11-01-2011, 12:53 PM
This might not work with all pages or might cause a problem while working on others. But if you have just the hv and ufade scripts, it should be fine. Add this style section to the head:


<style type="text/css">
.hvmenu, .hvmenu * {
position: relative;
z-index: 1100 !important;
}
</style>

And add this script as the very last thing before the closing </body> tag:


<script type="text/javascript">
;(function($){
$(window).load(function(){
var hv;
$('div').each(function(){
if(this.innerHTML === 'Home'){//set to 'Text to show' of very first hvmenu item (Menu1)
hv = $(this.parentNode);
return false;
}
});
while((hv = hv.addClass('hvmenu').next('div'))){
if(!hv.size()){break;}
}
});
})(jQuery);

</script>
</body>

</html>

If your first menu item isn't 'Home', change it where indicated in the above code.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

BorderTerroir
11-01-2011, 02:38 PM
That's worked a treat, many thanks. :)

jscheuer1
11-01-2011, 03:06 PM
I was playing around with this a bit more. Are you using descriptions in your slideshow, and/or is your document in standards mode? If so there are some issues with IE. To fix those, use a standards invoking DOCTYPE for the page and this modified menu_com.js file:

Reference Removed. Use the one from Post #6 in this thread:

http://www.dynamicdrive.com/forums/showpost.php?p=264070&postcount=6

BorderTerroir
11-01-2011, 03:56 PM
I will be using descriptions when I get some pictures of the village to publish.

Here's my doctype declaration;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

This is really useful, thanks again.

This is the website as it looks at present
www.kellington.net

John

BTW Where's the 'Resolved' button?

jscheuer1
11-01-2011, 07:33 PM
Yep, that's standards invoking, so all you should need to do is use the updated menu_com.js file. I decided to update it again though. You no longer need:


<script type="text/javascript">
;(function($){
$(window).load(function(){
var hv;
$('div').each(function(){
if(this.innerHTML === 'Home'){//set to 'Text to show' of very first hvmenu item (Menu1)
hv = $(this.parentNode);
return false;
}
});
while((hv = hv.addClass('hvmenu').next('div'))){
if(!hv.size()){break;}
}
});
})(jQuery);

</script>

Just the style. Here's the updated update, I'm removing the one from my last post:

4170