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/dynamici...nslideshow.htm
http://www.dynamicdrive.com/dynamici...menu/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:

Code:

<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:

Code:

<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/s...70&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:

Code:

<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:

Attachment 4170

Thread: Slideshow Image Rendering

Thread Tools

Search Thread

Slideshow Image Rendering

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions