|
JavaScript - Js Drop Down Menu, Getelementbyid, & Cross-browser Issues
I have been working for days it seems, trying to resolve many issues with a js drop down menu. I am attempting to place a hyperlinked image into a js drop down menu and have been successful in firefox, but I cannot seem to hyperlink the image in ie, saf, chr, and opera. The website's location is http://crescentcay.com/04_index.html and I'll list the code below. By clicking on 'location' in drop down under the nav bar's 'welcome' a new flash movie is inserted by the getelementbyid function. It seems that the hyperlink is all that changes from browser to browser, and again, this works for me in firefox but not in any other browser. Thanks for your help in advanced.
function mopen(subCat){ window.clearTimeout(); var identifier; var subCat; if (subCat = '0'){ identifier = 'sddm'; } else if (subCat = '1'){ identifier = 'sddm_alt'; } subCat = typeof(subCat) == "undefined" ? "" : subCat; var mopen=new Array() mopen[0]= '<div id="locale"><a href="javascript:menu(6)" rel="nofollow" target="_top" onClick="javascript:bt_alt_loc(0)" onMouseOver="javascript:bt_alt_loc(0);javascript:mcancelclosetime();" onMouseOut="javascript:bt_alt_loc(1);javascript:mclosetime();"><img src="images/buttons_02_a_up.jpg" alt="Location" name="Home" width="75" height="35" border="0" onload=""></a></div>' mopen[1]= '<div id="locale"><a href="javascript:menu(6)" rel="nofollow" target="_top" onClick="javascript:bt_alt_loc(0)" onMouseOver="javascript:bt_alt_loc(0);javascript:mcancelclosetime();" onMouseOut="javascript:bt_alt_loc(1);javascript:mclosetime();"><img src="images/buttons_02_a_up.jpg" alt="Location" name="Home" width="75" height="35" border="0" onload=""></a></div>' document.getElementById(identifier).innerHTML = mopen[subCat]; } function bt_alt_loc(bt_lc_a){ var bt_lc_a; var bt_lc_a_b; var bt_desc; if (bt_lc_a = '0'){ bt_lc_a_b = '1'; bt_desc = 'dn'; } else if (bt_lc_a = '1'){ bt_lc_a_b = '0'; bt_desc = 'up'; } document.getElementById("locale").innerHTML = '<div id="locale"><a href="javascript:menu(6)" rel="nofollow" target="_top" onClick="javascript:bt_alt_loc(' + bt_lc_a + ')" onMouseOver="javascript:bt_alt_loc(' + bt_lc_a + ');javascript:mcancelclosetime();" onMouseOut="javascript:bt_alt_loc(' + bt_lc_a_b + ');javascript:mclosetime();"><img src="images/buttons_02_a_' + bt_desc + '.jpg" alt="Location" name="Home" width="75" height="35" border="0" onload=""></a></div>' } function mclose(){ document.getElementById("sddm").innerHTML = '' } var closetimer = 0; function mclosetime(){ closetimer = window.setTimeout(mclose, 500); } function mcancelclosetime(){ if(closetimer){ window.clearTimeout(closetimer); closetimer = null; } } Similar TutorialsI am in the process of developing a form for the company intranet and i've recently added in code to capture the enter key event to prevent the page from automatically submitting. Along with this, i added code to move the focus to the next element in the tab index. When used in IE, the code works perfectly, but when i use it in firefox or chrome the focus jumps to the same box every time. I don't know what i'm doing wrong am i'm hoping someone can help me figure this out. You can test the page at http://implicitarts.com/fandfwork/Lo...l/default.aspx To start, go to the box for duty amount or freight charges and press enter The following code is what I used to handle this event. Code: function handleKeyPress2(e,control)
{
var evt = e ? e : window.event;
var bt = control.id;
if (bt)
{
if (evt.keyCode == 13)
{
//bt.click();
jumptoNext(control, e);
stopEvent(e);
return false;
}
}
}
function jumptoNext(field, event)
{
for (i = 0; i < field.form.elements.length; i++)
if (field.form.elements[i].tabIndex == field.tabIndex + 1)
{
field.form.elements[i].focus();
if (field.form.elements[i].type == "text") field.form.elements[i].select();
break;
}
}
function stopEvent(e)
{
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
Hi there, I am trying to come out with a Cross-Browser JavaScript codes to drag & drop some pictures. It seems to work well in IE, but when I tried it in Non-IE type of browsers (Safari, Chrome, Firefox), it did not come out that good... I would be very happy if anyone can enlighten me on the reasons why the script misbehave in Non-IEs. To try, you need to create a not-too-big-sized jpeg image and name it "x.jpg". Many thanks ! Chris ================================= <html> <head> <style> .drag{position:relative;cursor:hand} </style> <script language="JavaScript1.2"> var dragapproved=false var z,x,y var temp1, temp2; // ------------------------------------------------------------------------- function MouseEvent(e) { // Class used to standardize Cross-Browser event object. if (!e) { e = window.event; // IE this.target = e.srcElement; this.button = e.button; this.X = e.clientX; this.Y = e.clientY; } else { // Non-IE this.target = e.target; this.button = e.button; this.X = e.pageX; this.Y = e.pageY; } } // ------------------------------------------------------------------------- function move(e) { var e = new MouseEvent(e); if (e.button <= 1 && dragapproved) { z.pixelLeft = temp1 + e.X - x; z.pixelTop = temp2 + e.Y - y; return false } } // ------------------------------------------------------------------------- function startDrag(e) { var e = new MouseEvent(e); if (e.target.className=="drag") { dragapproved=true; z=e.target.style; temp1=z.pixelLeft; temp2=z.pixelTop; x=e.X; y=e.Y; document.onmousemove=move; } } // ------------------------------------------------------------------------- function stopDrag() { dragapproved = false; } // ------------------------------------------------------------------------- document.onmousedown=startDrag document.onmouseup=stopDrag </script> </head> <!-- ========================================================================== --> <body> <img src="x.jpg" class="drag"><br> </body> </html> Hi everyone. I'm pretty new to JS. I'm trying to make a drop down menu that hides the li's on load and then when the user clicks on the main li the sub li's appear. I also want to change the background color of this text on mouseOver. Having some trouble. Any help would be appreciated. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
ul {
list-style-type: none
}
ul li {
width: 300px
}
a {
text-decoration: none;
padding: 8px;
margin: 5px;
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#DA6712
}
a:hover {
font-weight:bold
}
</style>
<script type="text/javascript" src="jquery-1.2.6(2).js"></script>
<script type="text/javascript">
function showItems()
{
getElementById(hidden1).style.backgroundColor = "#dddddd";
}
function hideItems()
{
}
$(document).ready(function()
{
$('#hidden1,#hidden2').hide();
$("ul").mouseover(showItems);
$("ul").mouseout(hideItems);
});
</script>
</head>
<body>
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul id="hidden1">
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul id="hidden2">
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Help</a></li>
</ul>
</body>
</html>
In IE7 (and I'm assuming 6), this page has issues with the drop-downs: http://tcp-dev.dreamhosters.com/ When you hover over "About," "Programs" or "Get Involved," the menus fly out fine but then stay open. (I know there's an issue with the transparent PNGs; I'll be fixing that later). For some reason, the menu works fine on inside pages such as this one: http://tcp-dev.dreamhosters.com/about/ but IE7 throws a JS error (there's not JS error on the homepage, strangely). I'm using the Menubar WordPress plugin (http://www.dontdream.it/wp-menubar-3-documentation) to generate these menus along that runs off of Suckerfish. Optimally, I'd like to get rid of the JS error and get the menus to work the same throughout. Any ideas? Hello all, I've got a cross browser issue with two javascript codes I'm using within a website: http://www.thewursteditions.com Someone just pointed out today that they don't see my gallery (galleria javascript) nor my rollover on the size guide. The site works great on the iphone, firefox, and safari, but not in Internet Explorer. I really have no idea what the issue could be as I don't do this too often but I would greatly appreciate any of your help! Thanks Hi, I doing my project in Netbeans, and I have this .java page, that sets and gets a html form where there are textboxes and drop down lists, as far as I know, although getElementById() is a javascript code, it can be used in my .java page, but I do not know how to implement it. What I'm supposed to do is to get the values from the drop down list and save them to a database that I've already have. Code: HtmlPage page = null; page.getElementById(id); but because I do not know what should the id be since the .java page is not a jsp page and the drop down list values cannot be retrieved directly. Need help here, thanks. Is there a method for breaking out of frames that's truly cross-browser compatible? I've seen a ton of examples on how to do this, but I'm not sure which method works the best. Thanks! So I was reading up on how to load and parse an XML file into an html page and I found through w3 a great tutorial with sample code: http://www.w3schools.com/xml/xml_dom.asp It appears to work fine on their website but when I try it from my desktop it doesn't work. So what I have is an html file with contents: Code: <html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
And then the xml file named "note.xml": Code: <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> I have no idea what I am missing or not seeing that is causing this not to work but if anyone knows I would appreciate the input. For the record I have tried this in chrome and ie. ok, so i am working on a type of Option Box that is heavily formatted with CSS and animated using JS $fx() The $fx framework works fine on all browsers, and i have only used fairly simple code, and yet my page functions perfectly on Chrome and Safari. but will not work in Firefox or IE (Firefox does nothing, and IE has a couple of css issues and doesnt work either...) http://calumk.com/else/blogpoststuff...ng_Option_Box/ if anyone could help me i would really appreciate it. (obviously view in Chrome or safari to see how it is meant to respond) Hi I have spent some time writing a javascript online calculator. The calculator works on Safari and Firefox but not on IE or Opera. I am sure there are multiple errors in the code but have gone as far as my limited self taught experience will take me. Any help will be greatly appreciated! Here's the code I have put together. Thanks David [code] <html> <head> <script> function bettype(elm) { var bettype = elm.options[elm.selectedIndex].value; if(bettype == "qualifyingbet") { var betamount = document.form.betamount.value; var betodds = document.form.betodds.value; var betcommission = document.form.betcommission.value; var layodds = document.form.layodds.value; var laycommission = document.form.laycommission.value; var betstakereturn = parseFloat(betamount) document.form.betstakereturn.value = (betstakereturn.toFixed(2)); var betwincommissioncharged = parseFloat(betamount)*parseFloat(betodds-1)*parseFloat(betcommission/100) document.form.betwincommissioncharged.value = (betwincommissioncharged.toFixed(2)); var betreturn = parseFloat((betodds-1)*parseFloat(betamount))-parseFloat(betwincommissioncharged)+parseFloat(betstakereturn) document.form.betreturn.value = (betreturn.toFixed(2)); var betprofit = parseFloat(betreturn)-parseFloat(betamount) document.form.betprofit.value = (betprofit.toFixed(2)); var layamount = parseFloat(betreturn)/parseFloat(layodds-laycommission/100) document.form.layamount.value = (layamount.toFixed(2)); var layliability = parseFloat(layamount)*parseFloat(layodds-1) document.form.layliability.value = (layliability.toFixed(2)); var netprofit = parseFloat(betprofit)-parseFloat(layliability) document.form.netprofit.value = (netprofit.toFixed(2)); var percentretained = 100+parseFloat(netprofit/betamount*100) document.form.percentretained.value = (percentretained.toFixed(2)); } else if(bettype == "freebetstakereturned") { var betamount = document.form.betamount.value; var betodds = document.form.betodds.value; var betcommission = document.form.betcommission.value; var layodds = document.form.layodds.value; var laycommission = document.form.laycommission.value; var betstakereturn = parseFloat(betamount) document.form.betstakereturn.value = (betstakereturn.toFixed(2)); var betwincommissioncharged = parseFloat(betamount)*parseFloat(betodds-1)*parseFloat(betcommission/100) document.form.betwincommissioncharged.value = (betwincommissioncharged.toFixed(2)); var betreturn = parseFloat((betodds-1)*parseFloat(betamount))-parseFloat(betwincommissioncharged)+parseFloat(betstakereturn) document.form.betreturn.value = (betreturn.toFixed(2)); var betprofit = parseFloat(betreturn) document.form.betprofit.value = (betprofit.toFixed(2)); var layamount = parseFloat(betreturn)/parseFloat(layodds-laycommission/100) document.form.layamount.value = (layamount.toFixed(2)); var layliability = parseFloat(layamount)*parseFloat(layodds-1) document.form.layliability.value = (layliability.toFixed(2)); var netprofit = parseFloat(betprofit)-parseFloat(layliability) document.form.netprofit.value = (netprofit.toFixed(2)); var percentretained = parseFloat(netprofit/betamount*100) document.form.percentretained.value = (percentretained.toFixed(2)); } else if(bettype == "freebetstakenotreturned") { var betamount = document.form.betamount.value; var betodds = document.form.betodds.value; var betcommission = document.form.betcommission.value; var layodds = document.form.layodds.value; var laycommission = document.form.laycommission.value; var betstakereturn = 0 document.form.betstakereturn.value = (betstakereturn.toFixed(2)); var betwincommissioncharged = parseFloat(betamount)*parseFloat(betodds-1)*parseFloat(betcommission/100) document.form.betwincommissioncharged.value = (betwincommissioncharged.toFixed(2)); var betreturn = parseFloat((betodds-1)*parseFloat(betamount))-parseFloat(betwincommissioncharged)+parseFloat(betstakereturn) document.form.betreturn.value = (betreturn.toFixed(2)); var betprofit = parseFloat(betreturn) document.form.betprofit.value = (betprofit.toFixed(2)); var layamount = parseFloat(betreturn)/parseFloat(layodds-laycommission/100) document.form.layamount.value = (layamount.toFixed(2)); var layliability = parseFloat(layamount)*parseFloat(layodds-1) document.form.layliability.value = (layliability.toFixed(2)); var netprofit = parseFloat(betprofit)-parseFloat(layliability) document.form.netprofit.value = (netprofit.toFixed(2)); var percentretained = parseFloat(netprofit/betamount*100) document.form.percentretained.value = (percentretained.toFixed(2)); } else { window.alert("Please select a bet type!"); } } </script> </head> <body> 1. Select bet type<br> 2. Enter bookmaker and betting exchange details<br> 3. Apply betting exchange details<br> 4. Results for your information </span> <table width="100%" align="center"> <tr align="center"> <td> <table border="1" width="445"> <tr align="center"> <td> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <form name="form"> <select name="betoption" id="betoption" style="width:273px;"> <option value="typeofbet">Type of Bet. Please Select</option> <option value="qualifyingbet">Qualifying Bet</option> <option value="freebetstakereturned">Free Bet Stake Returned</option> <option value="freebetstakenotreturned">Free Bet Stake Not Returned</option> </select> </td> </tr> </table> </td> </tr> <tr> <td> <table border="0"> <tr align="center"> <td colspan="3"> Bet (Bookmaker) Details </td> </tr> <tr> <td width="140" align="center"> Bet Amount: £ </td> <td width="140" align="center"> Bet Odds: </td> <td width="140" align="center"> Bet Commission: % </td> </tr> <tr> <td width="140" align="center"> <input type="text" name="betamount" value="0" onfocus="(value='')" size="5" maxlength="5"> </td> <td width="140" align="center"> <input type="text" name="betodds" value="0" onfocus="(value='')" size="5" maxlength="5"> </td> <td width="140" align="center"> <input type="text" name="betcommission" value="0" onfocus="(value='')" size="5" maxlength="5"> </td> </tr> </table> </td> </tr> <tr> <td> <table border="0"> <tr align="center"> <td colspan="4"> Lay (Betting Exchange) Details </td> </tr> <tr> <td width="210" align="center"> Lay Odds: </td> <td width="210" align="center"> Lay Commission: % </td> </tr> <tr> <td width="212" align="center"> <input type="text" name="layodds" value="0" onfocus="(value='')" size="5" maxlength="5"> </td> <td width="212" align="center"> <input type="text" name="laycommission" value="0" onfocus="(value='')" size="5" maxlength="5"> </td> </tr> <tr> <td width="212" align="center"> Lay Amount: £ </td> <td width="212" align="center"> Lay Liability: £ </td> </tr> <tr> <td width="212" align="center"> <input type="text" name="layamount" size="5" readonly="readonly"> </td> <td width="212" align="center"> <input type="text" name="layliability" size="5" readonly="readonly"> </td> </tr> </table> </td> </tr> <tr> <td> <table border="0"> <tr align="center"> <td colspan="2" align="center"> For Your Information </td> </tr> <tr> <td width="212" align="center"> Net Profit: £ </td> <td width="212" align="center"> Percentage retained: % </td> </tr> <tr> <td width="212" align="center"> <input type="text" name="netprofit" size="5" readonly="readonly"> <td width="212" align="center"> <input type="text" name="percentretained" size="5" readonly="readonly"> </td> </tr> </table> <input type="hidden" name="betstakereturn" value="0" size="5" > <input type="hidden" name="betwincommissioncharged" value="0" size="5" > <input type="hidden" name="betreturn" size="5" > <input type="hidden" name="betprofit" size="5" > <table border="0"> <tr align="center"> <td width="212" align="center"> <button type="reset" value="Reset">Reset</button> </td> </form> <td width="212" align="center"> <input type="submit" value="Calculate" onclick="bettype(betoption);"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html> [code] Just curious if anyone has a crossbrowser version of the Popup Image Viewer script that's in the Post a JavaScript section. Seems that all of the ones in there (original and modifications) are browser specific, whereas I need something that will work for all browsers, or at least IE and firefox.
The topic of event handler management has been covered in many places in the past. One location is in the contest by PPK. The winning submission by John Resig has a few problems, and the commentary on the site seems to gravitate to the implementation by Dean Edwards after the analysis of the Resig code. I was also able to find a few more implementations on stackoverflow from: Bill Ayakatubby and Marco Demaio. Outside of the JavaScript frameworks, what is generally done for supporting event functionality? There are numerous options each with their own benefits and drawbacks. I'm uncertain of which one to use myself. Is there an undeclared de facto? I have a video (.wmv) that has markers in it one can access these markers in video players like "Windows Media Player" at "view" -> "file markers" I want to embed the video object in an HTML page and be able to let the user jump to these markers via JavaScript or such. I managed to do this with Internet Explorer ודןמע JavaScript but I can't get any other browser to access these markers or any timeline function for that matter. I need to be able to do so cross browser. any ideas? Hi all, I am having trouble with an onmouseout event on a div tag. I have read about bubbling a little, and put to use some information I found on the internet, but I still can't overcome a few problems. What I am trying to achieve is that the addStyleDiv function will only call the addStyle function if the user mouses out of the 'rollover' div. As the code stands, the addStyleDiv function is called when any element within the div is moused out (this is expected--bubbling) and the addStyleDiv function handles these instances properly. However, when mousing out of the rollover div, the rollover div is never the source element that triggers the onmouseout event. There is no empty space in the rollover div, that is, it is entirely filled with elements, so that could be part of the problem, but shouldn't bubbling cause the event to be triggered twice-once for the internal element and once for the div itself? I would also be interested in knowing if the method by which I am handling the events is reliable on most browsers or if someone with more expertise can offer a suggestion to increase cross browser compatibility. Thanks a million in advance. HTML Code: <div id="rollover" onmouseout="addStyleDiv(event,'feat_main');">
<ul id="featured">
<li class="medical" onmouseover="addStyle('feat_medical');"><a href="equipment/medical">Medical</a></li>
<li class="fabrication" onmouseover="addStyle('feat_fabrication');"><a href="services/metal_fabrication">Fabrication</a></li>
<li class="capsnap" onmouseover="addStyle('feat_capsnap');"><a href="equipment/capsnap">CapSnap™</a></li>
<li class="hurricane" onmouseover="addStyle('feat_hurricane');"><a href="equipment/parts_washing/hurricane">Hurricane</a></li>
<li class="media" onmouseover="addStyle('feat_media');"><a href="video">Media</a></li>
</ul>
<div id="flyout" >
<ul id="feat_main">
<h1>Midbrook</h1>
standard page no rollover
</ul>
<ul id = feat_medical>
<h1>Medical</h1>
</ul>
<ul id = feat_fabrication>
<h1>Fabrication</h1>
</ul>
<ul id = feat_capsnap>
<h1>CapSnap</h1>
</ul>
<ul id="feat_hurricane">
<h1>Hurricane</h1>
</ul>
<ul id = feat_media>
<h1>Media</h1>
</ul>
</div>
</div>
JS Code: function addStyleDiv(e, x)
{
if (!e) var e = window.event;
var tg=(window.event) ? e.srcelement : e.target;
if (tg.id != 'rollover')
{
alert('leaving '+tg.tagName + ' '+tg.id);
return;
}
/*These next two lines are NEVER reached no matter what*/
alert('It must have finally seen rollover');
addStyle('feat_main');
}
function addStyle(x){
removeAllStyle();
document.getElementById(x).style.display="block";
}
function removeAllStyle()
{
removeStyle('feat_main');
removeStyle('feat_hurricane');
removeStyle('feat_fabrication');
removeStyle('feat_capsnap');
removeStyle('feat_medical');
removeStyle('feat_media');
}
Hi I am trying to develop a Qwerty Shifter http://www.cross-browser.com/toys/qwertyshifter.html by handling keyboard events. I want to display a textbox and as user type any text it changes at once means as user types "a" it display "s" "b" changes "n" for internet explorer I have script function InputEventKeyPress(event){ window.event.keyCode = shifter (window.event.keyCode); } //Key press function shifter (keyAscii) { switch (keyAscii){ //CAPITAL LETTERS A - Z case 65 : return 83; break; //A case 66 : return 78; break; //B case 67 : return 86 ; break; //C } } Hi there Am trying out Cross Browser Marquee II by Dynamic Drive and it works great. However between the end of each scroll and the beginning of the repeat scroll, there's a large blank space. I would like to minimise this space so that the beginning repeats fairly quickly after the end. Not used to js so not sure how to do this. The page I am working on currently is at: http://www.mrjindustrial.com.au/scro..._concrete.html Thanks, hope someone can help. I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it... I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same.... My live demo is here! Thank you for any help and/or advice in advance, Best Regards, Tim I found this script on a tutorial site but it had no summary of browser compatibility or any other issues. I know absolutely nothing about javascript and, although it works fine when I test it, I would appreciate it very much if someone else would review this page and give me feedback. Code: <head>
<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>
</head>
<body>
<!--links-->
<a href="JavaScript:;" onClick="showIt('divID1')" ">link1</a>
<a href="JavaScript:;" onClick="showIt('divID2')" ">link2</a>
<a href="JavaScript:;" onClick="showIt('divID3')" ">link3</a>
<a href="JavaScript:;" onClick="showIt('divID4')" ">link4</a>
<!--layers-->
<div id="divID1" style="display:none;">content1</div>
<div id="divID2" style="display:none;">.content2</div>
<div id="divID3" style="display:none;">..content3</div>
<div id="divID4" style="display:none;">...content4</div>
</body>
Here is a demo of it in action: http://www.mousegrey.com/layers.html |
|||||||