|
JavaScript - Showhide Div Question
Hey Guys,
While I've been lurking around the forums in CSS and Flash this is my first post regarding Javascript. I'm setting up a navigation that displays its sub-links once you click the Navigation option, and am trying to tweak the code. The Site: http://www.psychreview.net Where to Look: The top right navigation. It works correctly, but they layer on top of each other - I'd like the user to click one of the toggles, and have the toggle show the right div AND hide the other two divs. The Javascript: (I use three functions because eventually I'll be swapping the images you click while the div's are active). Code: // JavaScript Document
function toggle1(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_home.png">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_home.png">';
}
}
function toggle2(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_publications.png">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_publications.png">';
}
}
function toggle3(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_resources.png">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_resources.png">';
}
}
The html: Code: <!-- Navigation -->
<div id="nav">
<!-- Navigations Links -->
<a href="javascript:toggle1('nav_home_contents', 'imageDivLink');"><img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_home.png"></a>
<a href="javascript:toggle2('nav_publications_contents', 'imageDivLink');"><img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_publications.png"></a>
<a href="javascript:toggle3('nav_resources_contents', 'imageDivLink');"><img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_resources.png" class="padding"></a>
</div>
<!-- Navigation Drop Downs -->
<div class="nav_contents" id="nav_home_contents">
<ul>
<li><a href="http://www.psychreview.net/about/mission">About Us: Mission</a></li>
<li><a href="http://www.psychreview.net/about/about-the-authors">About Us: About the Authors</a></li>
<li><a href="#">ReView SpotLight</a></li>
</ul>
<ul>
<li><a href="#">Moment in ReView</a></li>
<li><a href="http://www.psychreview.net/contact-us">Contact Us</a></li>
<li class="spacer"> </li>
</ul>
</div>
<div class="nav_contents" id="nav_publications_contents">
<ul>
<li><a href="http://www.psychreview.net/search">Search Publications</a></li>
<li><a href="#">Featured Article</a></li>
<li><a href="http://www.psychreview.net/publications/free-articles">Free Articles</a></li>
</ul>
<ul>
<li><a href="http://www.psychreview.net/publications/request-a-topic">Request A Topic</a></li>
<li><a href="http://www.psychreview.net/publications/for-contributing-authors">For Contributing Authors</a></li>
<li class="spacer"> </li>
</ul>
</div>
<div class="nav_contents" id="nav_resources_contents">
<ul>
<li><a href="http://www.psychreview.net/resources/other-online-resources">Other Online Resources</a></li>
<li><a href="#">Definition of Terms</a></li>
<li class="spacer"> </li>
</ul>
</div>
Every time the user clicks one of the toggles, I want it to not only show the right div, but hide the other two. Any suggestions? Thanks guys. Similar Tutorialshttp://dannycremers.com/Untitled-3.html so far i've created this but i have one little thing i can't figure out one example: open the menu1 and menu2 links -> open the tab1a and tab1b links you'll see both TEXT MENU1 TAB1 and TEXT MENU2 TAB1 will open i don't want this.. i only want the last clicked link to be visible i managed to accomplish this in the seperate menu links (for example when you first open tab1a and then tab2a you'll only see the TEXT MENU1 TAB2 link) any ideas how i can solve this? thanks! DC (sorry for the slightly confusing numbering) Hello. I have a submit-button: When clicked after validation i want the div containing button to hide and at the same time a new div to appear. With this code i can make the div with button disappear, but i cant get the hidden div to show up instead. Where am i going wrong? Im not too familiar with js.. JAVASCRIPT <!--script to close-button--> <script type="text/javascript" > function showHide(elementid){ if (document.getElementById(elementid).style.display == 'none'){ document.getElementById(elementid).style.display = ''; } else { document.getElementById(elementid).style.display = 'none'; } } <!--NOT WORKING script that should open-div--> function showhide(elementid){ if (document.getElementById(elementid).style.display == 'block'){ document.getElementById(elementid).style.display = 'none'; }else{ document.getElementById(elementid).style.display = 'block'; } } </script> CSS #info-visible { position: absolute; z-index: 1000; left: 200px; top: 100px; width: auto; height: auto; border: 2px solid #888; background: #000099; } #target { display: none; position: absolute; z-index: 1000; left: 500px; top: 100px; width: 400px; height: 400px; border: 2px solid #888; background: #009900; } HTML <div id="info-visible" > <p>visible div</p> <FORM NAME="submission" onSubmit="return myfunction()" action="javascript:showHide('info-visible'); showHide('target')" > <INPUT NAME="textfield" TYPE="TEXT"> <INPUT TYPE="SUBMIT" > </FORM> </div> <div id="target"><p>hidden div</p></div> Greetings. I"m having trouble trying to create a crossbrowser vertical menu with "showhide" submenus. When moving cursor above the submenu in Opera browser, it sometimes disappears. See here. I only guess it's because of hidden divs which however listen to the onmouseout event The code: Code: <script language="javascript">
<!--
function rolldown(number){
/*close others*/
for (i=1;i<=11;i=i+1){
var id='m' + i;
if(i != number){ document.getElementById(id).style.display='none';}
}
/*open this*/
var id='m' + number;
document.getElementById(id).style.display='inline';
}
-->
</script>
And the menu sections and submenus go like this: Code: <li onmouseover="rolldown(1);" class="m1"><a href="home.php">home</a>
</li>
<div id="m1" class="m1" onmouseover="rolldown(1);" onmouseout="javascript:document.getElementById('m1').style.display='none';">
<a href="1.php">1</a>
<br /><a href="2.php">2</a>
</div>
I tried to resolve the issue by destroying the divs' innerHTML, but the fun is it still works in my firefox but opera now even doesn't show the submenus. See here. My code for the latter changed to this: Code: function rolldown(number){
/*close others*/
for (i=1;i<=11;i=i+1){
var id='m' + i;
if(i != number){
document.getElementById(id).style.display='none';
document.getElementById(id).innerHTML='';
}
}
/*open this*/
if(number!=0){
var id='m' + number;
//definition of concrete submenus
switch(number)
{
case 1:
var htmlstring='<a href="a1.php">a1</a><br /><a href="a2.php">a2</a>';
break;
case 2:
var htmlstring='<a href="b1.php">b1</a><br /><a href="b2.php">b2</a>';
break;
default:
var htmlstring='';
}
document.getElementById(id).innerHTML=htmlstring;
document.getElementById(id).style.display='inline';
}
}
Can you help solve this whatever way? Thank you!! Ok i have been working on this for a while now. I have to have 3 fish swim across the screen in both direction. I have tried a few things but nothing is working. Can someone please explain to me what I am doing wrong. here is my code for you guys to look at it. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fish tank</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// <![CDATA[
var fishPos = new Array(3);
fishPos[0] = "fish1.gif";
fishPos[1] = "fish2.gif";
fishPos[2] = "fish3.gif";
var fillPosition = 10;
for(var i = 0; i < 50; ++i) {
horizontal[i] = fillPosition;
fillPosition += 10;
}
function fishSwim(fishNumber) {
document.getElementById("fishPos").style.left = horizontal + "px";
++fishPos[fishNumber];
if (fishPos[fishNumber] == 49)
fishPos[fishNumber] = 0;
}
function startSwimming() {
setInterval(fish1Swim, 100);
}
// ]]>
</script>
</head>
<body onload="startSwimming();">
<p><span id="fish1" style=
"position:absolute; left:10px; top:10px"><img src="fish1.gif" alt="Image of a fish" /></span></p>
<p><span id="fish2" style=
"position:absolute; left:10px; top:120px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
<p><span id="fish3" style=
"position:absolute; left:10px; top:250px"><img src="fish2.gif" alt="Image of a fish" /></span></p>
</body>
</html>
I am really not understanding and in my book it only give me a page to read about the animation. I am still new to it. Thanks for looking hello all ive been asked to create a javascript slideshow.... and i don't really understand it that much i know a little javscript but not much........ is thier any helpful sites that i can use to teach you step by step to make a javascript slide show???? also if don't want loads of code to be used, i want the code to be clean insted of loads and loads of code what is just unessary. i will be linking the javascript file to the html file so i need to keep the code to a min LOL CHEERS You are given a mathematical expression containing integers and the basic operations: *,+,-, /. Find the number of unique results that can be obtained by parenthesizing the expression differently. i.e., by changing the order of evaluation of the operations. Note that all operations are integer operations. For example, if the input is 2 ∗ 3 + 6/2, your output should be 4. Plzz help me with this qs......... Hi all I am doing an assigment and have gotten to the end and cannot get the unordered list to work. If I try having my </script> tag below the </ul> it does not display anything If i have it above it will only display the varible names or what ever I type between the <li> </li> tag and not the varible assigment. num1,2,3,4 being the varible name. ie. </script> <ul> <li>num1</li> I have tryed <li>+num2+</li> also tryed <li>(num3)</li> also tryed <li>'num4'</li> also tryed and does not display </ul> </head> </html> The following does not display any thing <ul> <li>num1</li> I have tryed <li>+num2+</li> also tryed <li>(num3)</li> also tryed <li>'num4'</li> also tryed </ul> </script> </head> </html> I need to get the <li></li> to display not what I type in there but the assigment of the varible name I put in there.,or the output the varible calculation produces. Hope that was easy to understand lol Any advise would be awesome, cheers Shayne Darcy. Could someone please take a look at my code? It's a simple quiz with one multiple choice question and one fill in the blank. When the user clicks on 'submit' I tried to show some kind of response with correct/incorrect images next to the question. It works with the multiple choice question, but not with the fill in the blank. How can I get the fill in the blank question to work. It always shows the answer as being wrong. Thank you. Quote: answer_list = [ ['False'], ['body','hips','knees'] // Note: No comma after final entry ]; response = []; function setAnswer(question, answer) { response[question] = answer; } function CheckAnswers() { var correct = 0; var flag, resp, answ; for (var i = 0; i < answer_list.length; i++) { flag = false; for(var j=0; j<answer_list[i].length; j++){ resp = response[i].toLowerCase(); answ = answer_list[i][j].toLowerCase(); ################################################################################################# if (response[0] == answer_list[0]) { flag = true; document.myquiz.a1c.style.backgroundImage="url('correct.gif')"; } else{ document.myquiz.a1c.style.backgroundImage = "url('incorrect.gif')"; document.myquiz.a1c.value = " ANS: False. Position the head snugly against the top bar of the frame and then bring the foot board to the infant's feet."; } if (response[1] == answer_list[1]) { flag = true; document.myquiz.a1d.style.backgroundImage="url('correct.gif')"; } else{ document.myquiz.a1d.style.backgroundImage = "url('incorrect.gif')"; } ################################################################################################### } if (flag) { correct++; } } document.writeln("You got " + correct + " of " + answer_list.length + " questions correct!"); } </SCRIPT> </HEAD> <FORM name="myquiz"> <B>1. When measuring height/length of a child who cannot securely stand, place the infant such that his or her feet are flat against the foot board.</B> <label><INPUT TYPE=radio NAME=question0 VALUE="True" onClick="setAnswer(0,this.value)">True</label> <label><INPUT TYPE=radio NAME=question0 VALUE="False" onClick="setAnswer(0,this.value)">False</label> <textarea rows="2" cols="85" name="a1c" style="background-repeat:no-repeat"></textarea> <B>2. When taking a supine length measurement, straighten the infant's <INPUT id="test" TYPE=text NAME=question1 size=10 onChange="setAnswer(1, this.value)">, <INPUT id="test" TYPE=text NAME=question1 size=10 onChange="setAnswer(1, this.value)">, and <INPUT id="test" TYPE=text NAME=question1 size=10 onChange="setAnswer(1, this.value)">.</B> <textarea rows="2" cols="85" name="a1d" style="background-repeat:no-repeat"></textarea> <INPUT TYPE="button" NAME="check" VALUE="Check Answers" onClick=CheckAnswers()> </FORM> </div> </FONT> </BODY> </HTML> I'm not sure if this is the correct forum or not, but here goes. I want to make a very simple XUL document. Just a simple basic window to be opened up, but, i want the XUL to Load and Render an HTML File. I'm not sure about what function(s) to call to achieve this, can anyone give me any ideas to go on? here's what i have so far use my JavaScript Function called LoadFromDisk(FileName), if the file is there or the load is sucessfull, it can be stored as a variable. And then i have a single Division in the XUL document called RenderWindow. From there i set the innerHTML of the RenderWindow to the data that was loaded from the disk. Is this the right way? thanks Hello, i haven't understood how to find the id from buttons, links, button images to auto click yet for example, i want to CLICK HERE how can i do that? how i find the id (I Own firefox with firebug and know basic html) it will be something like javascript:document.GetElementById('id').click(); right? but just want to know how to find or create ids on sites for auto click thanks I was asked to redo a menu for this site: http://www.listlabs.com/index.php It was originally an imaged based menu, but they wanted it all changed to css/html. I used quickmenu and it used JS to produce the arrows at the top of each menu item. Now to my question... I'm trying to program the menu items to stay active when on the current page. At first, it looks correct, but if you hover back over the menu, it changes back to the inactive state. Any help would be great! Thanks. Thinking in Objects 4 objects w/constructors/overloads min 3 properties on each min 3 methods total was just wondering if anyone had any good links or tutorials to get me started on my first javascript assignment Hi all together! I have downloaded a javascript obfuscator and checked it out. It seems as it takes my code an put it together with a new function "function(x)" in the eval()-statement. But what does this "function(x)"? I do not understand it... And why is all putted in the eval()-Statement? Can someone help me? -- START-- eval( ( function(x){ var d=""; var p=0; while(p<x.length) { if(x.charAt(p)!="`") { d+=x.charAt(p++); } else { var l=x.charCodeAt(p+3)-28; if(l>4) { d+=d.substr(d.length-x.charCodeAt(p+1)*96-x.charCodeAt(p+2)+3104-l,l); } else { d+="`"; p+=4 } } } return d } ) (" ...MY OLD JAVA SCRIPT... ") ) -- END-- Hi Everybody, I'd be grateful if you could help me out. I need to change the CSS by changing the id when a link is clicked. The id is in the body tag and by default it is named 'first'. i.e <body id="first">. If I click on the link named 'Change id to Second', this should change to <body id="Second">. If I further click on the link named "Change id to Second" this should change to <body id="Third">. My code below works (I have stripped this down to make sense), but only when I click one of the links for the first time. If I am to click the second/ third link, nothing happens: Code: <html>
<head>
<script type="text/javascript">
function changeFirst() {
document.getElementById('blanky').id = 'first';
document.getElementById('second').id = 'first';
document.getElementById('third').id = 'first';
}
function changeSecond() {
document.getElementById('blanky').id = 'second';
document.getElementById('first').id = 'second';
document.getElementById('third').id = 'second';
}
function changeThird() {
document.getElementById('blanky').id = 'third';
document.getElementById('first').id = 'third';
document.getElementById('second').id = 'third';
}
</script>
</head>
<body id=first><!-- I need to change this id -->
<p>Hello, the id above should change when the following links are clicked</p>
<a onclick="changeFirst()">Change id to First</a>
<a onclick="changeSecond()">Change id to Second</a>
<a onclick="changeThird()">Change id to Third</a>
</body>
</html>
Any help will be greatly appreciated. Cheers hi, if i have an array of "hop", "skip", "jump" "run", how do i prompt the user to enter a number between 1 and 4 to bring back one of the array list without using an if or switch statement... the code i have so far is: numbers= new Array(); numbers[0]="hop"; numbers[1]="skip"; numbers[2]="jump"; numbers[3]="run"; thanks I'm in a computer coding class, and I'm having a bit of trouble with Javascript. I'm not looking for anyone to do my homework for me, but any hints you could give me as to why this code isn't working would be greatly appreciated. Basically, I need an empty text box where the user enters their guess as to my age. The user enters their guess, and then gets an answer as to whether their guess is right, too high, or too low. The page looks right, but I can't get the function to work. Thank you... <html> <head> <script> function howoldami(age) if(age=23) { alert("You guessed right!"); } else if { (age>23) alert("I'm not that old."); } else { alert("I'm not that young."); } </script> </head> <body> <form> Guess My Age!<input name="age"><br> <input type=button value=Guess! onclick="howoldami(age.value)"> </form> </body> </html> I'm using the following javascript for my main navigation. Quote: var mastertabvar=new Object() mastertabvar.baseopacity=0 mastertabvar.browserdetect="" function showsubmenu(masterid, id){ if (typeof highlighting!="undefined") clearInterval(highlighting) submenuobject=document.getElementById(id) mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : "" hidesubmenus(mastertabvar[masterid]) submenuobject.style.display="block" instantset(mastertabvar.baseopacity) highlighting=setInterval("gradualfade(submenuobject)",50) } function hidesubmenus(submenuarray){ for (var i=0; i<submenuarray.length; i++) document.getElementById(submenuarray[i]).style.display="none" } function instantset(degree){ if (mastertabvar.browserdetect=="mozilla") submenuobject.style.MozOpacity=degree/0 else if (mastertabvar.browserdetect=="ie") submenuobject.filters.alpha.opacity=degree } function gradualfade(cur2){ if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1) cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99) else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100) cur2.filters.alpha.opacity+=10 else if (typeof highlighting!="undefined") //fading animation over clearInterval(highlighting) } function initalizetab(tabid){ mastertabvar[tabid]=new Array() var menuitems=document.getElementById(tabid).getElementsByTagName("li") for (var i=0; i<menuitems.length; i++){ if (menuitems[i].getAttribute("rel")){ menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu if (menuitems[i].className=="selected") showsubmenu(tabid, menuitems[i].getAttribute("rel")) menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){ showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel")) } } } } Can someone please show me how to add an ".onmouseout" function so that when a user rolls out of any of the top level navigation the submenu defaults to the navigation for the current page? http://www.mohrdesigns.com Thanks in advance for any help! ok im new to coding and was woundering is there a way to open up a game through a program that could have an attached macro or anything.. like for example i would have a racing game that u need to shift and i open it with the coded program and it shifts like an automatic. i sorry if its in the wrong section . thanks After some severe experimentation I got to googling for an answer and stumbled upon these forums. So my big question is, is it possible to use getElementsByName() with a variable as the parameter? And if not what is another way I can get at each element based on a variable list of names. Code: var curObjSet = document.getElementsByName(String(idStack[y])).item(0) I'm trying desperately to make my code organic and not to have to hard code field names but without this working its leaving me with out options. Thank you for any time and help provided. - Eric I know how the replace method works, but I can't for the life of me figure out exactly what this replace function is doing... Can someone shed somelight for me? the g I *think* is a flag for global replacement... Code: replace(/\s/g, " "); I know that *something* is being replaced by a non-blank space, but what? |
|||||||