JavaScript - Help With Expanding Menu - Adding Color To Menu Items

Hey,

I'm having trouble with this site http://bit.ly/hL0u0w...

If you go to the services section you will see a sub navigation on the left of the box. The idea of this is to have sub sections within the main headings that expand/collapse when selected. Insted when any one link is clicked the whole menu expands and not just the related sub sections.

This is the javascript

Quote:
<script type="text/javascript">
$(document).ready (function() {
$('#link1').click(function() {
$('.slide').slideToggle('fast'); });
$('.close').click(function() {
$('.slide').slideUp('fast'); });

$(document).ready (function() {
$('#link2').click(function() {
$('.slide').slideToggle('fast'); });
$('.close').click(function() {
$('.slide').slideUp('fast'); });
});
$(document).ready (function() {
$('#link3').click(function() {
$('.slide').slideToggle('fast'); });
$('.close').click(function() {
$('.slide').slideUp('fast'); });
});
});
</script>

and here is the html

Quote:
<div id="subnav4">
<ul class="navigation4 pagination">

<li class="tab4"><a rel="1" id="link1" href="#">heading 1</a></li>
<li style="display: none;" class="dome slide"><a href="#">corporate id</a></li>
<li style="display: none;" class="dome slide"><a href="#">branding</a></li>
<li style="display: none;" class="dome slide"><a href="#">brochures</a></li>
<li style="display: none;" class="dome slide"><a href="#">direct mail</a></li>

<li class="tab4"><a id="link2" href="#">heading 2</a></li>
<li style="display: none;" class="dome slide"><a href="#">email marketing</a></li>
<li style="display: none;" class="dome slide"><a href="#">websites</a></li>


<li class="tab4"><a id="link3" href="#">heading 3</a></li>
<li style="display: none;" class="dome slide"><a href="#">advertising</a></li>
<li style="display: none;" class="dome slide"><a href="#">audiovisual</a></li>

<li class="tab4"><a id="heading 3" href="#">exhibitions</a></li>

</ul>
</div>
Hope someone can help with this!

Many 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

I would like to create a 2-level menu similar to the one use in: http://www.pagina12.com.ar/diario/principal/index.html
It is done with CSS?
Thanks!

Hi all. I am creating a website and it utilizes the Apple Touch Icon:

Code:

<link rel="apple-touch-icon" href="/customIcon.png"/>

Basically, I want to be able to change the bolded part from a drop down menu. Like, the user would select a certain item in the drop down menu and it would change the bolded part to a different link (the one corresponding to the drop down menu selection). Any ideas?

Hi, I really need urgent help. I am using a javascript on a DotNetNuke CMS site to allow the user to choose text/background colour, basically it changes stylesheets. Here is the code that I have used: http://www.dynamicdrive.com/dynamici...etswitcher.htm and here is my example: http://lrptintranet.com.dnnmax.com/ - you can see the colour image buttons top right under the main menu. The style sheet changer seems to work on the top menu level items but as soon as you choose a submenu the javascript doesn't seem to work. I don't know anything at all about javascript - can anyone offer any advice how I can get this working on the sub menu pages?

Not sure how easy this is, but I would like to have 4 checkboxes that effect the items shown in a drop down menu.

For example:
[x] School #1
[x] School #2
[ ] School #3

The drop down (select) box will only show the majors that are offered at the checked schools. I know this involves either hiding or showing the certain elements of the drop down menu, but I'm not well versed in JS.

Thanks in advance.

Hi,

I created a simple menu:

Code:

<html>

<head>
<style type="text/css">
table {width:400px;height:35px;border-collapse:collapse;border:1px solid #000}
td {text-align:center;padding:3px;cursor:pointer;font:bold 12px Verdana;color:#FFFFFF;background-color:#555}
</style>
</head>

<body>
<table border="1" bordercolor="#000">
<tbody>
<tr>

<td onClick="parent.location='home.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Home</td>

<td onClick="parent.location='news.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">News</td>

<td onClick="parent.location='articles.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Articles</td>

</tr>
</tbody>
</table>
</body>

</html>

Was wondering if you knew of a way to keep the button on the mouse-over style for as long as a user is on the page they clicked. This would mean that if a user clicked on a page named 'News', the 'News' button would stay in the mous-over style to indicate which page they were on.


Regards
Rain Lover

Hi there, I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers.

My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon.

I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated.

Here is the existing function which tells a link to be active or selected:

Code:

var Lst;

function CngClass(obj){
 if (Lst) Lst.className='.topnav';
 obj.className='selected';
 Lst=obj;
}

and here is the menu code:

Code:

<ul class="topnav">
	<li><a href="#">Home</a></li>
	
	<li><a onclick="CngClass(this);" href="#">Top Link 2</a>
		<ul>
			 <li><a onclick="CngClass(this);" href="#">Cookies</a></li>
			 <li><a onclick="CngClass(this);" href="#">Events</a></li>
			 <li><a onclick="CngClass(this);" href="#">Forms</a></li>
			 <li><a onclick="CngClass(this);" href="#">Games</a></li>
			 <li><a onclick="CngClass(this);" href="#">Images</a></li>
			 <li><a onclick="CngClass(this);" href="#">Navigations</a>
				<ul>
					<li><a onclick="CngClass(this);" href="#">CSS</a></li>
					<li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
					<li><a onclick="CngClass(this);" href="#">JQuery</a></li>
				</ul>
			</li>
			 <li><a onclick="CngClass(this);" href="#">Tabs</a></li>
		</ul>
	</li>
	<li><a onclick="CngClass(this);" href="#">Tutorials</a>
		<ul>
			 <li><a onclick="CngClass(this);" href="#">HTML</a></li>
			 <li><a onclick="CngClass(this);" href="#">CSS</a></li>
			 <li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
			 <li><a onclick="CngClass(this);" href="#">Java</a>
				<ul>
					<li><a onclick="CngClass(this);" href="#">JSP</a></li>
					<li><a onclick="CngClass(this);" href="#">JSF</a></li>
					<li><a onclick="CngClass(this);" href="#">JPA</a></li>
					<li><a onclick="CngClass(this);" href="#">Contact</a></li>
				</ul>
			</li>
			 <li><a onclick="CngClass(this);" href="#">Tabs</a></li>
		</ul>
	</li>
	<li><a onclick="CngClass(this);" href="#">Contact</a></li>
	<li><a onclick="CngClass(this);" href="#">Upload script</a></li>
</ul>

Thanks for any help or advice.

I'm still very new to Javascript, like really new. I'm trying to use this sliding menu script, and I want to have multiple menus on the same page. Problem is, I can't get multiple ID's for the menus to work, so if I click one menu's slider button, then it will always only affect the first menu, regardless of which I click.

Here's where I think I need to modify the code, at the top:


Code:

<script type="text/javascript">

var sliderIntervalId = 0;
var sliderHeight = 232;
var sliding = false;
var slideSpeed = 10;
function Slide()

And where the ID value is defined:



Code:

function SlideUpRun()
{

slider = document.getElementById('exampleSlider'),


slider = document.getElementById('slider2');

if(sliderHeight <= 0)
{
sliding = false;
sliderHeight = 0;
slider.style.height = '0px';
clearInterval(sliderIntervalId);

Obviously, these are just snippets of the whole code, I didn't know if less/more is needed to be shwon.

Can anyone help on this? I just need to know how to separate it, so I can add multiple menus to the same page.

Hi,

I have this design, where the menu is a JavaScript that makes the content page flow in from the right. As a standard there are only 4 menu objects, but I need a fifth one.

I have tried to add another myself, and change everything i thought important in the javascript.js, but it just doesn't work. The javascript screws up, so I am clearly missing something.

Therefore i'm hoping that someone inhere, can help me adding it. Below are the index, javascript and stylesheet included.

If I'm not making myself clear, please let me know and I will try to explain it better

Thanks
walkie


index.htm
Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Identity</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
</head>

<body>
	<div id="leftSide">
    	<!--Site Title-->
    	<div id="title">
        	<!--Main Title-->
        	<h1><span></span>Identity</h1>
            <!--Caption/Sub Title-->
            <span class="titleSubText">the portfolio of john smith</span>
        </div>
        <div id="arrowWrapper"><div id="arrow"></div></div>
    	<div id="buttonsWrapper">
        
        	<!--About Button-->
        	<div id="aboutButtonWrapper">
            	<div class="navButton" id="aboutButton"></div>
                <div class="navCaption" id="aboutCaption">
                	<!--About Button: Label-->
                	<span class="navCaptionText">about</span><br />
                    <!--About Button: Sub-Label-->
                	<span class="navSubCaptionText">who I am</span>
                </div>
            </div>
            
        	<!--Portfolio Button-->
        	<div id="portfolioButtonWrapper">
            	<div class="navButton" id="portfolioButton"></div>
                <div class="navCaption" id="portfolioCaption">
                    <!--Portfolio Button: Label-->
                	<span class="navCaptionText">portfolio</span><br />
                    <!--Portfolio Button: Sub-Label-->
                	<span class="navSubCaptionText">my work</span>  
                </div>
			</div>
            
        	<!--Services Button-->
        	<div id="servicesButtonWrapper">
            	<div class="navButton" id="servicesButton"></div>
                <div class="navCaption" id="servicesCaption">
                	<!--Services Button: Label-->
                	<span class="navCaptionText">services</span><br />
                    <!--Services Button: Sub-Label-->
                	<span class="navSubCaptionText">what I do</span>                  
                </div>
            </div>
            
        	<!--Contact Button-->
        	<div id="contactButtonWrapper">
            	<div class="navButton" id="contactButton"></div>
                <div class="navCaption" id="contactCaption">
                	<!--Contact Button: Label-->
                	<span class="navCaptionText">contact</span><br />
                    <!--Contact Button: Sub-Label-->
                	<span class="navSubCaptionText">get in touch</span>                  
                </div>
            </div>
            
        </div>
    </div>
    
    <div id="contentPanelWrapper">
		<div id="contentPanelEdge"></div>
        
        
        <!--Wrapper That Contains 'About' Content-->
        <div class="content" id="aboutContent">
        	<!--Title-->
        	<div class="contentTitle">about</div>
            <!--Body Text-->
            <div id="aboutText">
            	<h3>Who I Am</h3><br />
            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum,
            	dolor leo sagittis nunc, at pharetra ligula urna ut ligula. Morbi ac erat ante, in feugiat libero. Quisque nec mauris neque.
            	Quisque sit amet condimentum turpis. Sed at arcu eu augue venenatis viverra. Vivamus odio nulla, facilisis et commodo at,
            	sagittis id neque.</p><br />
                <p>Nulla facilisi. Quisque non tellus justo, at tempor nisl. Fusce eleifend augue euismod sem varius
            	pulvinar. Etiam rutrum magna in quam ultrices sit amet dictum nulla commodo.</p>
            </div>
		</div>
        
        
        <!--Wrapper That Contains 'Portfolio' Content-->
        <div class="content" id="portfolioContent">
        	<!--Title-->
        	<div class="contentTitle">portfolio</div>
            <!--Image Slider-->
            <div id="portfolioSlider">
            	<div id="sliderToolbar">
                	<div class="sliderButton" id="prevButton"></div>
                    <div class="sliderButton" id="nextButton"></div>
                </div>
            	<div id="imageWrapper">
            		<ul id="imgList">
						<!--Portfolio Images Go Here (See Documentation)-->
            			<li><a class="sliderImage" href="images/portfolio/img1-large.jpg"><img alt="" src="images/portfolio/img1-small.jpg" /></a></li>
                		<li><a class="sliderImage" href="images/portfolio/img2-large.jpg"><img alt="" src="images/portfolio/img2-small.jpg" /></a></li>
                		<li><a class="sliderImage" href="images/portfolio/img3-large.jpg"><img alt="" src="images/portfolio/img3-small.jpg" /></a></li>
                		<li><a class="sliderImage" href="images/portfolio/img4-large.jpg"><img alt="" src="images/portfolio/img4-small.jpg" /></a></li>
                	</ul>
                </div>
            </div>
		</div>
        
        
        <!--Wrapper That Contains 'Services' Content-->
        <div class="content" id="servicesContent">
        	<!--Title-->
	  		<div class="contentTitle">services</div>
            <!--Service 1 Column-->
            <div class="serviceColumn" id="serviceColumn1">
            	<h3>Identity Design</h3><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                at pharetra ligula urna ut ligula.</p>
            </div>
            <!--Service 2 Column-->
            <div class="serviceColumn" id="serviceColumn2">
            	<h3>Web Design</h3><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                at pharetra ligula urna ut ligula.</p>
            </div>
            <!--Service 3 Column-->
            <div class="serviceColumn" id="serviceColumn3">
            	<h3>Icon + UI Design</h3><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                at pharetra ligula urna ut ligula.</p>
       	    </div>
		</div>
        
        
        <!--Wrapper That Contains 'Contact' Content-->
		<div class="content" id="contactContent">
        	<!--Title-->
  		<div class="contentTitle">contact</div> 
      		<div id="contactFormWrapper">
            	<!--Contact Form-->
       	  		<form id="contact" method="post" action="mail.php">
           	  		<input type="text" id="name" name="name" value="name" />
              		<input type="text" id="email" name="email" value="email" /><br /><br />
              		<textarea id="message" name="message" rows="" cols="">message</textarea>
              		<input type="image" id="submit" src="images/sendButtonDis.png" disabled="disabled" />
          		</form>
                <div id="successMessage"></div>
      		</div>
  	    </div>
        
        
	</div>
        
</body>
</html>

javascript.js
Code:

numImages=0;
currentImage=1;
currentPanel="none";

$(document).ready(function(){		
						   
	// Initializes FancyBox Lightbox
	$("a.sliderImage").fancybox({
		'zoomSpeedIn':200, 
		'zoomSpeedOut':200, 
		'overlayShow':true,
		'padding':4
	});
	
	SelectButton("none");
	$("#arrow").fadeOut(0);
	
	if (navigator.appVersion.indexOf("MSIE 7.0")!=-1){
		$("input").css({"height":13});
		$("#name").css({"width":155});
	};
	
	$("#title").click(function(){
		ShowPanel("none");
	});
						   
	// Handles Formatting the Portfolio Slider
	$("#imgList").children().each(function(){
		numImages++;									   
	});
	$("#imageWrapper").css({"width":(numImages*541)});
	
	// Handles Function of the Portfolio Slider
	$("#prevButton").click(function(){
		if (currentImage==1){
			currentImage=numImages;
		} else {
			currentImage--;
		};
		$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
	});
	$("#nextButton").click(function(){
		if (currentImage==numImages){
			currentImage=1;
		} else {
			currentImage++;
		};
		$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
	});
		
	// Handles Rollover and Click For the Nav Buttons
	$("#aboutButton").mouseenter(function(){
		SelectButton("about");
	});
	$("#portfolioButton").mouseenter(function(){
		SelectButton("portfolio");
	});
	$("#servicesButton").mouseenter(function(){
		SelectButton("services");
	});
	$("#contactButton").mouseenter(function(){
		SelectButton("contact");
	});
	$("#aboutButton,#portfolioButton,#servicesButton,#contactButton").mouseleave(function(){
		SelectButton("none");
	});
	$("#aboutButton").click(function(){
		ShowPanel("about");								 
	});
	$("#portfolioButton").click(function(){
		ShowPanel("portfolio");								 
	});
	$("#servicesButton").click(function(){
		ShowPanel("services");								 
	});
	$("#contactButton").click(function(){
		ShowPanel("contact");								 
	});
	
	// Handles Contact Form Behavior	
	$("#name").focus(function(){
		$("#name").css({"background-color":"#FFFFFF"});
		if ($("#name").val()=="name"){
			$("#name").val("");
			$("#name").css({"color":"#444444"});
		};
	});
	$("#name").blur(function(){
		if ($("#name").val()==""){
			$("#name").val("name");
			$("#name").css({"color":"#888888"});
			$("#name").css({"background-color":"#ffdddd"});
		};
	});
	$("#email").focus(function(){
		$("#email").css({"background-color":"#FFFFFF"});
		if ($("#email").val()=="email"){
			$("#email").val("");
			$("#email").css({"color":"#444444"});
		};
	});
	$("#email").blur(function(){
		if ($("#email").val()==""){
			$("#email").val("email");
			$("#email").css({"color":"#888888"});
			$("#email").css({"background-color":"#ffdddd"});
		};
		if ($("#email").val().indexOf("@")==-1 || $("#email").val().indexOf(".")==-1){
			$("#email").css({"background-color":"#ffdddd"});
		};
	});
	$("#message").focus(function(){
		$("#message").css({"background-color":"#FFFFFF"});
		if ($("#message").val()=="message"){
			$("#message").val("");
			$("#message").css({"color":"#444444"});
		};
	});
	$("#message").blur(function(){
		if ($("#message").val()==""){
			$("#message").val("message");
			$("#message").css({"color":"#888888"});
			$("#message").css({"background-color":"#ffdddd"});
		};
	});
	$("#submit").mousedown(function(){
		$("#submit").attr({"src":"images/sendButtonSel.png"});
	});
	$("#submit").mouseup(function(){
		$("#submit").attr({"src":"images/sendButton.png"});	
	});
	$("#submit").mouseout(function(){
		$("#submit").attr({"src":"images/sendButton.png"});								
	});
	$("#name,#email,#message").keyup(function(){
		if ($("#name").val()!="" && $("#name").val()!="name" && $("#email").val()!="" && $("#email").val()!="email" && $("#email").val().indexOf("@")>-1 && $("#email").val().indexOf(".")>-1 && $("#message").val()!="" && $("#message").val()!="message"){
			EnableSubmitButton();
		} else {
			DisableSubmitButton();
		};
	});
	$("#submit").click(function(){
		DisableSubmitButton();
		var dataString="name=" + $("#name").val() + "&email=" + $("#email").val() + "&message=" + $("#message").val();
		$.ajax({  
			type: "POST",  
			url: "mail.php",  
			data: dataString,  
			success: function() {  
				ResetForm();
				$("#successMessage").fadeIn(10);
				setTimeout('$("#successMessage").fadeOut(1000);',2000);
			}
		});
		return false; 
	});

});

function EnableSubmitButton(){
	$("#submit").attr({"disabled":""});
	$("#submit").attr({"src":"images/sendButton.png"});
};

function DisableSubmitButton(){
	$("#submit").attr({"disabled":"disabled"});
	$("#submit").attr({"src":"images/sendButtonDis.png"});
};

function ResetForm(){
	DisableSubmitButton();
	$("#name, #email, #message").css({"background-color":"#FFFFFF"});
	$("#name, #email, #message").css({"color":"#888888"});
	$("#name").val("name");
	$("#email").val("email");
	$("#message").val("message");
};

function ShowPanel(panel){
	currentPanel=panel;
	SelectButton(panel);
	$(".content").fadeOut(250);
		switch(panel){
			case "none":
				$("#contentPanelWrapper").animate({"left":"100%"},500);
				$("#arrow").fadeOut(50)
			break;
			case "about":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#aboutContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":22},150,function(){$("#arrow").fadeIn(50)});
			break;
			case "portfolio":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#portfolioContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":98},150,function(){$("#arrow").fadeIn(50)});
			break;
			case "services":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#servicesContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":170},150,function(){$("#arrow").fadeIn(50)});
			break;
			case "contact":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#contactContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":243},150,function(){$("#arrow").fadeIn(50)});
			break;
		};
};

function SelectButton(button){
	if (currentPanel!="about"){
		$("#aboutCaption").animate({"left":50},{queue:false, duration:250});
		$("#aboutCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#aboutButton").css({"background-position":"0px 0px"});
	};
	if (currentPanel!="portfolio"){
		$("#portfolioCaption").animate({"left":50},{queue:false, duration:250});
		$("#portfolioCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#portfolioButton").css({"background-position":"0px -64px"});
	};
	if (currentPanel!="services"){
		$("#servicesCaption").animate({"left":50},{queue:false, duration:250});
		$("#servicesCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#servicesButton").css({"background-position":"0px -128px"});
	};
	if (currentPanel!="contact"){
		$("#contactCaption").animate({"left":50},{queue:false, duration:250});
		$("#contactCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#contactButton").css({"background-position":"0px -192px"});
	};
	switch(button){
		case "none":
		break;
		case "about":
			$("#aboutCaption").animate({"left":70},{queue:false, duration:250});
			$("#aboutCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#aboutButton").css({"background-position":"65px 0px"});
		break;
		case "portfolio":
			$("#portfolioCaption").animate({"left":70},{queue:false, duration:250});
			$("#portfolioCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#portfolioButton").css({"background-position":"65px -64px"});
		break;
		case "services":
			$("#servicesCaption").animate({"left":70},{queue:false, duration:250});
			$("#servicesCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#servicesButton").css({"background-position":"65px -128px"});
		break;
		case "contact":
			$("#contactCaption").animate({"left":70},{queue:false, duration:250});
			$("#contactCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#contactButton").css({"background-position":"65px -192px"});
		break;
	};

};

have a scenario where I show a drop-down-with-few-items in a JSP page, to the user.
The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I cannot use the title attribute option as its not compatible with my web browser

Hi everyone,

Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc.

My problem is:
Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels.
I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu.

So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything.

Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect.

Thanks.

ps i can post the js code if wanted

Hi Exprts,

I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS.

Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all.

Please suggest me any solutions for this. Thank you in advance.

Hi all, this is my first post so forgive me for any errors but i'll try and give all the information i can. i use Xara Designer Pro and i have used a 3rd party software to create a html menu however i have a html loading screen on my site and the menu always appears on top of the screen and while the screen is loading, this is the only thing that appears on top everything else is fine, i have put this to the people on the xara forums and the opinion is that its probably the JS file that the menu is using that is telling it to appear on top. i was wondering what i should look for to determin this problem or if someone could take a look at it for me? i'll upload the JS here and see if anyone can help. my site is at www.pcevo.co.uk however you need to CTRL + F5 to refresh wihtout the cache to see the loading screen if you are on a fast connection.