Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Events problems in tabbed browsing

    I am a relatively newbie to javascript, but I have relatively descent knowledge of other languages, and maybe this is just being new to javascript, but this is my problem. I have a series of icons displayed on a page like so:
    .
    .
    .
    .
    .
    .
    .
    .
    Then I have is so that when one hovers over new icon, the old div corresponding to the old icon, is style.display: none; and the new one corresponding to the new icon is displayed using inline. This works perfectly i.e. no problems, except when a try to place any event, created dynamically, or otherwise, inside the element in the main display divs. When ever this happens and i try to say mouse over an object, it immediately jumps to the eighth icon and its corresponding div. If I remove the event it works fine, but if i both try to remove the event and icon(+ all of its corresponding elements) is does not work. Any Ideas?

    Here is the html:
    Code:
    <html>
    
    <head>
    
    	<title> Tabs </title>
    
    	<link rel = "stylesheet" type = "text/css" href = "tabs.css" />
    
    	<script type = "text/javascript" src = "tabs.js"></script>
    
    </head>
    
    <body onload = "initialize()">
    
    	<div id = "menucontainer">
    
    		<ul>
    
    			<li id = "descb1" class = "menudescribe" style = "visibility: visible;">Home</li>
    			<li id = "b1" class = "icon" style = "opacity: .7; filter:alpha(opacity=100); border-style: solid; border-right-style: none; background-color: #80cc99; z-index: 1"></li>
    
    			<li id = "descb2" class = "menudescribe" >Sponsors</li>
    			<li id = "b2" class = "icon"></li>
    
    			<li id = "descb3" class = "menudescribe" >About Us</li>
    			<li id = "b3" class = "icon"></li>
    
    			<li id = "descb4" class = "menudescribe" >Pictures</li>
    			<li id = "b4" class = "icon"></li>
    
    			<li id = "descb5" class = "menudescribe" >Team Activity</li>
    			<li id = "b5" class = "icon"></li>
    
    			<li id = "descb6" class = "menudescribe" >Calendar</li>
    			<li id = "b6" class = "icon"></li>
    
    			<li id = "descb7" class = "menudescribe" >Contact Us</li>
    			<li id = "b7" class = "icon"></li>
    			
    			<li id = "descb8" class = "menudescribe" >Links</li>
    			<li id = "b8" class = "icon"></li>
    
    			<div id = "divb1" class = "content" style = "display:inline;">
    
    				Home
    
    				<img id = "leftarrow" src = "Image Gallery Pics/leftarrow.png"/>
    
    			</div>
    
    			<div id = "divb2" class = "content">
    
    				Sponsors
    
    			</div>
    
    			<div id = "divb3" class = "content">
    
    				About Us
    
    			</div>
    
    			<div id = "divb4" class = "content">
    
    				Pictures
    
    			</div>
    
    			<div id = "divb5" class = "content">
    
    				Team Activities
    
    			</div>
    
    			<div id = "divb6" class = "content">
    
    				Upcoming Events
    
    			</div>
    
    			<div id = "divb7" class = "content">
    
    				Email
    
    			</div>
    
    			<div id = "divb8" class = "content">
    
    				Links
    
    			</div>
    
    		</ul>
    
    	</div>
    
    </body>
    
    </html>
    And here is the javascript:
    Code:
    function leftin()
    {
    
    	elleftarrow.src = "Image Gallery Pics/leftarrowblink.png";
    
    	stumble();
    
    }
    
    function leftout()
    {
    
    	elleftarrow.src = "Image Gallery Pics/leftarrow.png";
    
    }
    
    function stumble()
    {
    
    	alert('words2');
    
    }
    
    function menuhover(n)
    {
    
    	alert(n);
    
    	lasticon.style.borderStyle = "none";
    	lasticon.style.backgroundColor = "#FFFFFF";
    	lasticon.style.opacity = .7;
    	lasticon.style.filter = 'alpha(opacity = 70)';
    	lasticon.style.borderRightStyle = 'solid';
    	lasticondiv.style.display = "none";
    	lasticondesc.style.visibility = "hidden";
    
    	document.getElementById('b' + n).style.borderStyle = "none";
    	document.getElementById('b' + n).style.backgroundColor = "#FFFFFF";
    	document.getElementById('b' + n).style.opacity = .7;
    	document.getElementById('b' + n).style.filter = 'alpha(opacity = 70)';
    	document.getElementById('b' + n).style.borderRightStyle = 'solid';
    	document.getElementById('divb' + n).style.display = "inline";
    	document.getElementById('descb' + n).style.visibility = "visible";
    
    	lasticon = document.getElementById('b' + n);
    	lasticondesc = document.getElementById('descb' + n);
    	lasticondiv = document.getElementById('divb' + n);
    
    }
    
    function initialize()
    {
    
    	// Assign all global variables here with the var type preceding it within the two '=' lines
    	// ==================================================================================================================================================
    	var intTtlicons = 8;
    	lasticon = document.getElementById('b1');
    	lasticondesc = document.getElementById('descb1');
    	lasticondiv = document.getElementById('divb1');
    	elleftarrow = document.getElementById('leftarrow');
    	// ==================================================================================================================================================
    
    	elleftarrow.onmouseover = leftin;
    	elleftarrow.onmouseout = leftout;
    
    	document.getElementById('b1').onmouseover = new Function("menuhover(1)");
    	document.getElementById('b2').onmouseover = new Function("menuhover(2)");
    	document.getElementById('b3').onmouseover = new Function("menuhover(3)");
    	document.getElementById('b4').onmouseover = new Function("menuhover(4)");
    	document.getElementById('b5').onmouseover = new Function("menuhover(5)");
    	document.getElementById('b6').onmouseover = new Function("menuhover(6)");
    	document.getElementById('b7').onmouseover = new Function("menuhover(7)");
    }
    Note: the leftin and leftout are just for testing purposes; the stumble was used to see if a function could 'stumble' the program and indirectly avoid the 'last icon' problem
    Last edited by qazino; 12-08-2010 at 04:40 AM. Reason: poor format


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •