JavaScript - Help With Menu Hover Effect

Hi everyone,
I was wondering if jQuery or mootools has a set of scripts that creates a page slide effect with a stationary menu? What I mean is instead of loading a page when you click a link, all pages of the website are loaded at first, and then when a link is clicked, the corresponding page slides onto the screen. The navigation menu remains unchanged (except for dropdown menus) throughout everything.
This is a perfect example of what I'm looking for:
www.mimeartist.com
Can anyone point me to the right direction? I tried to search for this but didn't come up with too many great results, and I searched the jQuery documentation and wasn't able to find a slider feature.
Thanks.

Hello all,

Firstly apologies for my javascript ignorance - I'm not a programmer, just someone thrust into programming since there's no-one else at my company who can do it.

I found a nice js script online for a drop-down menu where the drop downs both expand to their full size and fade-in (very quickly) from transparent.

The script in action can be seen on the script writer's site he http://sandbox.leigeber.com/dropdown-menu/index.html

and the script is:
Code:

var menu=function(){
	var t=15,z=50,s=6,a;
	function dd(n){this.n=n; this.h=[]; this.c=[]}
	dd.prototype.init=function(p,c){
		a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
		for(i;i<l;i++){
			var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
			h.onmouseover=new Function(this.n+'.st('+i+',true)');
			h.onmouseout=new Function(this.n+'.st('+i+')');
		}
	}
	dd.prototype.st=function(x,f){
		var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
		clearInterval(c.t); c.style.overflow='hidden';
		if(f){
			p.className+=' '+a;
			if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
			if(c.mh==c.offsetHeight){c.style.overflow='visible'}
			else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
		}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
	}
	function sl(c,f){
		var h=c.offsetHeight;
		if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
			if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
			clearInterval(c.t); return
		}
		var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
		c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
		c.style.height=h+(d*f)+'px'
	}
	return{dd:dd}
}();

with Code:

var menu=new menu.dd("menu");
menu.init("menu","menuhover");

used on my html page to call the script.


I'm using the script exactly as written and exactly as it is on the dude's demo page for it. However, some of my sub-menu items are wider than their parent items and in IE7 this means they are bound to the width of the parent until the animations have finished, and then pop-out to their full width (NB not an issue in FF3).

I'm actually not too fussed about either the fade in or expand out effects (they'd be nice, but not at the expense of the IE7 bug) so I simply wanted to know what I should do to the script to turn off the effects, or make them instant - ie reduce the length of the effect to as short as possible.

I understand I can get rid of the bug by specifying a width for the ul element in my css, but I'd rather not do that if I can help it.

I'd appreciate anyone's insight on this.

Thanks
Tom

Hi there,

I am looking to make a javascript hover menu. Like the main hover menus at websites like...

http://www.godaddy.com

and

http://www.mediatemple.com

How can i do this? Are there any tutorials? And is javascript the best language to do this in, or ajax or web2.0 ?

Hi guys,

I am having an issue changing a piece of Javascript and hoped you guru's could help?I am not awful with Javascript but it is fair to say I am still at the beginning of my learning! I can't find the correct answer in forums and tutorials and you guys are literally my last hope! Here it is ....

I have a drop-down menu on a website I am working on which is made up of HTML, CSS and a little bit of Javascript. At the moment it is set so that when the user hovers over the menu it operates the drop-down. This obviously does not work for iPads etc as there is no mouse to hover. I want to keep my menu but alter the Javascript so the menu drops when clicked instead.

Here is my code:

Javascript

Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

HTML

Code:

<div id="menuPadding">
	<div id="menu">
<ul id="nav">
<li id="m1"><a href="">HOME</a></li>
<li id="m2">ABOUT US 					       
<ul>
<li><a href="">Our Values</a></li>
<li><a href="">Facilities</a></li>
<li><a href="">Arena</a></li>
<li><a href="">Jobs</a></li>
</ul>
</li>
<li id="m3">SUCCESS 					       
<ul>
<li><a href="">Jobs</a></li>
<li><a href="">Results</a></li>
<li><a href="">Awards</a></li>
<li><a href="">Testimonials</a></li>
</ul>
</li>
</div>
</div>

CSS

Code:

#menu {
	margin-top: 16px;
	width: 879px;
	height: 30px;
	z-index: 1000;
	font-family: Verdana, Geneva, sans-serif;
	font-size:11px;
	font-weight:bold;
}

#menuPadding {
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
	text-align:center;
	z-index: 1000;
}

#menuPadding ul {
	height: 29px;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 5px 0px;
z-index: 1000;
}

#menuPadding ul li {
/*	display: inline;*/
	line-height: 29px;
	padding:0px;
	margin-left:1px;
	display:block;
	float:left;
	font-weight:bold;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a {
	text-align:center;
z-index: 1000;
}

#menuPadding ul li li {
	padding:0px;
	margin:0px;
z-index: 1000;
}

#menuPadding ul li li a {
	text-align:left;
	padding-left:14px;
	text-transform:uppercase;
z-index: 1000;
	font-size:90%;
}

#menuPadding ul li li a.notupper {
	text-transform:none;
z-index: 1000;
}

/* coloured menus */
#menuPadding ul li#m1 {
	background:#FF0000;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m1 li {
	background:#FF0000;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m2 {
	background:#0099CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m2 li {
	background:#0099CC;
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m2 li a {
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m3 {
	background:#999999;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m3 li {
	background:#999999;
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m3 li a {
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m4 {
	background:#9966CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m4 li {
	background:#9966CC;
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m4 li a {
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m5 {
	background:#AAC619;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m5 li {
	background:#AAC619;
	width:230px;
	padding-right:20px;
z-index: 1000;
}

#menuPadding ul li#m5 li a {
	width:230px;
z-index: 1000;
}

#menuPadding ul li#m6 {
	background:#FF9900;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m6 li {
	background:#FF9900;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m7 {
	background:#FF0099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m7 li {
	background:#FF0099;
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li a {
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li li {
	font-size:87%;
z-index: 1000;
}

#menu li ul ul { /* third-and-above-level lists */
	margin: -30px 0 0 216px;
z-index: 1000;
}

#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
z-index: 1000;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
z-index: 1000;
}

#menuPadding ul li#m8 {
	background:#660099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m8 li {
	background:#660099;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m9 {
	background:#A80017;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m9 li {
	background:#A80017;
	width:146px;
z-index: 1000;
}

#menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited {
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a:hover {
	color:#000;
z-index: 1000;
}

/* suckerfish */
#menu, #menu ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;color:#fff;
}

#menu a {
	display: block;
	width: 96px;
}

#menu li { /* all list items */
	float: left;
	width: 96px; /* width needed or else Opera goes nuts */
	border-top:1px solid #fff;
}

#menu li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 106px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	font-size:90%;
}

#menu li ul ul { /* third-and-above-level lists */
/*	margin: -1em 0 0 96px;*/
	font-size:110%;	
}

#menu li li { 
	font-size:100%;
	color:#fff;
}


#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

I realise that this must be quite an easy thing for you guys but - as I said - I am at the beginning of my learning and it is confusing the hell out of me! All of the things I have tried have not worked! Any help would be truly appreciated!

Thanks in advance!

Sorry if I'm describing this wrong. But I was wondering if there was any premade dropdown menu which opens based on what position you are on the page.

For example, when I'm on the top of the page and hover the mouse over the dropdown menu, the menu opens upward instead of downward because the navigation is mid-screen. But if I was to be more than halfway across the screen and still see the navigation as it was on top of the screen and hover the mouse over it, the dropdown menu opens downward as oppose to up.

I hope I explained that right or at least if it sounds right to someone. Any help would be greatly appreciated. If you could direct me to a resource you may know of.

Thank you for your time.

I am using ASP.NET and AJAX here.

basically what I want is a nice little slide effect to show the next batch of images in a mini slide show. Example:

<< prev [image1] [image2] [image3] [image4] Next >>

<< prev [image5] [image6] [image7] [image8] Next >>


so when the user presses next or previous, it will SLIDE to the left/right.

the databinding is done at the server side end and in an update panel so it does an async postback when they press next/prev.

how can I go about doing this type of effect?

I really like the lightbox2 effect (http://www.huddletogether.com/projec...tbox2/#example) but I need help doing what I'm trying to do, for some reason I cannot get it to work, maybe you have a better recommendation?

I have one large image, its a tear out of a magazine, I want the initial image to be the entire page, but I want the user to be able to click on the text area of the page and have that enlarge so the viewer can read it clearly. Any ideas?

Thank you,

Dustin

I want to add the the faded effect to the slide pics that I make them change by timer and I don't know how to add the faded effect and make it work on IE and Firefox.

I need to have an image hyperlinked to a js function that fades text elswhere on the page. I imagine it looks something like <a href="(some js function or somethingrather"><img src="theimg.png"></a>, but how do I do it exactly? I would like code that I can just copy and paste in my header that is set to fade a specific line of text, and be able to hyperlink and image to initiate the js. Please help.

Carson
www.carsonkahn.com

Hi,

Does anyone knows how to use this effect using javascript?

http://www.modonline.com/

Really appreciate if someone can help me.

Thank You,
Nadun

Hey guys, I'm new to the forum and thought I should sign up to learn a little more.

I am trying to work on a lightbox for my personal portfolio site which opens up numerous images in one lightbox that you can scroll through. However, I want thumbnails below the main image too. The following link shows exactly what I mean, just click on one of the images...

http://www.weareunit.com/index.php?p=3D

Thanks

Hi friends,

Im new with JS.
How to make the roll over effect in JS.
An image, on roll over, the big size of the same image needs to appear.

regards

anoop

Greetings everyone; Jesse here. Long time reader, first time poster.

I have a personal website, currently in development, located at: http://www.jesselang.ca

If you click the right-facing arrows along the right side you'll open a side-bar column, clicking a left-facing arrow will then close the side-bar.

This functionality is "OK" at best.

What I would like to see is clicking the right-facing arrow causes the current sidebar to fade-in, and simultaneously have the arrow flip to a left-facing icon; the idea being to add a toggle function to the arrows.

The code I'm using at the moment is shown below, this string works for me because it only allows 1 sidebar container to be displayed at a time... which is ideal.
Code:

<script type="text/javascript">
	lastone='empty'; 
	function showIt(lyr) 
	{if (lastone!='empty') lastone.style.display='none'; 
	lastone=document.getElementById(lyr); 
	lastone.style.display='block';}
</script>

The respective html looks something like this:
Code:

<a onclick="javascript:showIt('interestcontainer')" class="arrow"><span>show interests sidebar</span></a>

The coresponding html for the container to display looks like this. This code also shows the "hide container" button:
Code:

<div id="interestcontainer" style='display:none;'>
        <h4>interests<a onclick="interestcontainer.style.display='none';" class="back"><span>back</span></a></h4>

And the CSS looks like this:
Code:

a.arrow{
	display:block;
	float:right;
	background:url(../images/ico-arrow.gif) top no-repeat;
	text-decoration:none;
	overflow:hidden;
	width:13px; 
	height:11px;
	margin-left:3px;}

------------------

Would it be asking to much to have someone help me achieve the following functionality?
-load page with all side containers hidden
-display only 1 side container at a time
-fadein and fadeout effects
-same button displays and hides
-button swaps images for displat/hide commands

Again, my code can be seen at:
http://www.jesselang.ca
http://jesselang.ca/files/style.css


I'd very much appreciate the help.

Thank you in advance.
*j

Hi, I'm kind of new to javascript and am an undergraduate studying a FdSc in web tech which encompasses all of these kind of languages (PHP, Python, HTML, CSS, Javascript and so on). Javascript is the one that I'm focusing on first and whilst I have a solid understanding of the mark up languages I'm struggling to combine the two. For the simple stuff like like the theory behind variables, functions and so on it's not a problem, but what is a problem is duplicating this kind of effect as seen on www.yidio.com

The feature with the vertical menu that changes when you hover over a TV show name which then changes the content (i.e. the image and text - essentialy the HTML content) is bloody neat in my opinion and I'd like to be able to re-create it.

I've also noticed the same effect is in place on the boxes at www.ebuyer.com and on the story navigation menu at www.sciencedaily.com.

How can I do this? I have all the HTML and CSS source code in place but just no javascript. I've approached my lecturers about it and they've told me about jquery and javascript libraries but this still doesn't help me in being able to achieve this effect. would someone be able to explain and help me?

Thanks

Nick C

I've been doing some research on javascript's impact on the time it takes for a page to load, as defined by firebug's "Net" tab's "onload" demarcation (the red line). It seems that aside from dynamic data that's not part of the HTML, enabling javascript always slows down the page. I've checked wikipedia, yahoo, digg, even google; a javascript-enabled loading of each site shows a later onload() event compared to loading the same site without javascript enabled.

My question:
Can anyone think of a site that loads faster with javascript than it does without javascript?