...

View Full Version : Events problems in tabbed browsing



qazino
12-08-2010, 04:32 AM
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:

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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum