JavaScript - Menu Which Shows And Hides Divs
Hello there
I'm trying to code a menu which when clicking say the 'news' button, a div will appear to the right containing the news, if you then click the button below, say 'information', the news div will be replaced by the 'information' div. I can figure out how to make a single menu item show and hide a div, but I can't for the life of me figure out how to do it for a whole menu. Any help greatly appreciated! Similar TutorialsHey everyone. I'm looking for a tutorial or open source script to accomplish the following tasks: 1 - Accordion style vertical list that expands element (Film # and description) when "+more" link is clicked, and closes the previous open film and description. 2 - Activation of "+ more" shows a photo in separate div, and hides the previous photo that was visible in this separate div. I've attached a mockup photo of the idea I need to execute. Seems like a simple idea, but I have not been able to find a similar example/tutorial online. If anyone can point me in the right direction, that would be greatly appreciated. Thanks. Hi guys, new to the forum and a big noob to JavaScript! I've created a function that would hide and show paragraphs from a drop down list, that paragraph contains a link that will show a div containing a map of google. But when I switch to another State on the drop down list I'd like to have the original first paragraph that showed up to disappear. So far, I can only get the <div> that contains the map to disappear. Can someone send me an example of a function that would hide the paragraph and the <div>? Again, I'm a noob baby talk please. Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Untitled Page</title> <script type="text/javascript"><!-- var lastDiv = ""; function showDiv(divName) { // hide last div if (lastDiv) { document.getElementById(lastDiv).className = "hiddenDiv"; } //if value of the box is not nothing and an object with that name exists, then change the class if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName; } } function showMap(divName) { //if value of the box is not nothing and an object with that name exists, then change the class if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName; } } //--> </script> <style type="text/css" media="screen"><!-- .hiddenDiv { display: none; } .visibleDiv { display: block; border: 1px grey solid; } #ex1 { position:absolute; width:425px; height:350px; right:40px; top:100px; } #ex2 { position:absolute; width:425px; height:350px; right:40px; top:100px; } --></style> </head> <body bgcolor="#ffffff"> <form id="FormName" action="blah.php" method="get" name="FormName"> <select name="selectName" size="1" onChange="showDiv(this.value);"> <option value="">Choose State</option> <option value="1">Alabama</option> <option value="2">Alaska</option> <option value="3">Arizona</option> <option value="4">Arkansas</option> <option value="5">California</option> <option value="6">Colorado</option> <option value="7">Connecticut</option> <option value="8">Delaware</option> <option value="9">Florida</option> <option value="10">Georgia</option> <option value="11">Hawaii</option> <option value="12">Idaho</option> <option value="13">Indiana</option> <option value="14">Iowa</option> <option value="15">Kansas</option> <option value="16">Kentucky</option> <option value="17">Louisiana</option> <option value="18">Maine</option> <option value="19">Maryland</option> <option value="20">Massachusetts</option> <option value="21">Michigan</option> </select> </form> <p id="1" class="hiddenDiv"><a href="#" onclick="showMap('ex1')">8160 du Creusot<br />St-Leonard, QC</a></p> <p id="2" class="hiddenDiv"><a href="#" onclick="showMap('ex2')">9510 ave. Radisson<br />Brossard, QC</a></p> <p id="3" class="hiddenDiv">This is paragraph 3.</p> <p id="4" class="hiddenDiv"><a href="#l" onclick="showMap('ex1')">Home</a><br /> <a href="us/home.html">Home</a><br /></p> <div id="ex1" class="hiddenDiv"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=8160+Rue+du+Creusot+Saint-L%C3%A9onard,+QC+H1P+1T5,+Canada&aq=&sll=45.597664,-73.581356&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=8160+Rue+du+Creusot,+Saint-L%C3%A9onard,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H1P+1T5,+Canada&ll=45.597373,-73.581641&spn=0.001501,0.004828&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=8160+Rue+du+Creusot+Saint-L%C3%A9onard,+QC+H1P+1T5,+Canada&aq=&sll=45.597664,-73.581356&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=8160+Rue+du+Creusot,+Saint-L%C3%A9onard,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H1P+1T5,+Canada&ll=45.597373,-73.581641&spn=0.001501,0.004828&z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small> </div><!-- end ex1 --> <div id="ex2" class="hiddenDiv"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=9510+Avenue+Radisson,+Brossard,+QC+J4X+2V3,+Can ada&aq=0&sll=45.597405,-73.581313&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=9510+Avenue+Radisson,+Brossard,+C hamplain,+Qu%C3%A9bec+J4X+3A1,+Canada&ll=45.43337,-73.487572&spn=0.001506,0.004828&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=9510+Avenue+Radisson,+Brossard,+QC+J4X+2V3,+C anada&aq=0&sll=45.597405,-73.581313&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=9510+Avenue+Radisson,+Brossard,+C hamplain,+Qu%C3%A9bec+J4X+3A1,+Canada&ll=45.43337,-73.487572&spn=0.001506,0.004828&z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small> </div><!-- end ex2 --> </body> </html> Hello, I'm trying to make a small profile for my website, the website has a number of buttons on the left hand side allowing you to click the buttons and show the data or what they've clicked. For example when a player clicks on their statistics page, the statistics div will show up, and all the other div's will be hidden. If a player clicked on their friends list, the friends list div would be shown and all of the other div's would be hidden. I was able to show and hide the div's separately but I was unsure of how to make all the div's hidden apart from the one which they've clicked on. Thanks if you're able to help me. Link to user profile buttons - http://thepilotslife.com/usernew.php?user=Haydz Hi Guys, I have a pop up that opens for a second then hides behind main window for some reason Code: <img src="../../../print_this_page.gif" title="Click To Print This Page" width="64" height="64" onmousedown="MM_openBrWindow('{ads_print_href}?item_id={item_id}','printnew','scrollbars=yes,width=950,height=800')" /> Any ideas what i can add to the code so it stays in top. Works on firefox. Issue is with IE8 Thanks I am looking for a bit of Javascript that can hide a sentence in my website if the URL contains certain words, most specifically INFO or CERT. Any idea how I can do this? Your help is appreciated. Thank You, Kevin Brown Well i want to implement something very similar to this (youtube). My javascript knowledges are low. I think it has something to be with onload and onclick events with links. Do i have to write a function and include it on the html page? Where do i have to put the diferent contents? I would prefer to separate html content and javascript since i have some variable to display from my template engine like {$name}, {$uploaded_date}, etc. Thanks in advance Hello, I'm trying to put some code together to create an image-swapping system, that when you click on the image it'll hide the image and replace it with a given iframe vimeo/youtube code... The swapping part works fine, however when the iframe loads up, it hides all other flash objects in the page, and I can't figure out why. Here's the JS Code: function swapvideo(w,h,url) { document.getElementById('video_pholder').style.display='none'; document.getElementById('video_code').innerHTML="<iframe src='"+url+"' width='"+w+"' height='"+h+"' frameborder='0' webkitAllowFullScreen allowFullScreen></iframe>"; document.getElementById('video_code').style.display='block'; } And here's the body Code: <div id="video_pholder"><a href="" onclick="swapvideo('700','394','http://player.vimeo.com/video/30620364?title=0&byline=0&portrait=0&color=FFFFFF&autoplay=1'); return false;"> <img src="image.jpg" width="700" height="393" /></a> </div> <div id="video_code" style="display:none;"></div> You can see it in action he http://blog.davidterranova.com when you click on the "krix" image. It'll hide the top header and also the other flash videos in the posts below. Any ideas why this is happening? Trying to get the divs to switch style properties when selected form select menu. Any help would be great! Code: <script type="text/javascript"> function showstuff(element){ if(document.getElementById(element).style.display = 'block') { document.getElementById(have).style.visibility="block"; document.getElementById(look).style.visibility="none"; } else if(document.getElementById(element).style.visibility = 'block') { document.getElementById(look).style.visibility="block"; document.getElementById(have).style.visibility="none"; } } </script> <select name="type" onchange="showstuff(this.value);"> <option value="look">Look</option> <option value="have">Have</option> </select> <div id="have" style="display:block;">Have</div> <div id="look" style="display:none;">Look</div> I'm tearing my hair out with this one and can't figure out why it won't work, and am hoping someone could help a Javascript noobie out. Basically, I need the script to hide two divs if one of the options in a <select> menu is selected. Here's the code I've got for the Javascript: Code: function typeoflisting() { var selectform = document.getElementById('propertytype'); if (selectform.options[selectedIndex].value == "sell") { document.getElementById('per_week').style.display = 'none'; document.getElementById('bond').style.display = 'none'; } else { document.getElementById('per_week').style.display = 'block'; document.getElementById('bond').style.display = 'block'; } } Here's the <select> form: Code: <select id="propertytype" name="propertytype" class="select" onchange="typeoflisting()"> <option value="lease">I'd like to lease a property to tenants</option> <option value="sell">I'd like to sell a property</option> <option value="share">I'd like to share a property</option> </select> And here's the first div I'm attempting to hide: Code: <div id="per_week" style="float: left;"> per week</div> And the second div I'm attempting to hide: Code: <div style="float: left; padding: 20px 20px 0px 0px;" id="bond"> <h3>Bond</h3> <input type="text" class="text" value="$"/> </div> Could anyone please tell me what I'm doing wrong? Hi all, I have a photo gallery on a page, when viewed in IE it will show nothing after it hits this gallery. The error that is produced is - "'null' is null or not an object" The code I have for my photo gallery is below, I have a feeling (though it is only a hunch) that it maybe to do with the IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules; line. I have tried swapping the styleSheets[3] for different values 0-5 but to no effect. Code: var thumbProportion = .17 // thumbnails are 32% of their full size; var IE = false; if (navigator.appName == "Microsoft Internet Explorer"){IE = true;} function swapImg(nImg,nSwapImgClass,nFullSizeImg){ var thumbImg = nImg; var thumbImgAlt = thumbImg.alt; var origFullWidth = nFullSizeImg.width; var origFullHeight = nFullSizeImg.height; var tempImgHolder = nFullSizeImg.src; var origFullAlt = nFullSizeImg.alt; nFullSizeImg.src = thumbImg.src; thumbImg.src = tempImgHolder; nSwapImgClass.style.width = nFullSizeImg.width + "px"; thumbImg.style.width = Math.round(origFullWidth * thumbProportion) + "px"; thumbImg.style.height = Math.round(origFullHeight * thumbProportion) + "px"; thumbImg.alt = origFullAlt; thumbImg.title = origFullAlt; nFullSizeImg.alt = thumbImgAlt; nFullSizeImg.title = thumbImgAlt; nCaption.firstChild.data = thumbImgAlt; } function init(){ var nImg = document.getElementById('fullSizeContainer'); var fullSizeImg = nImg.getElementsByTagName('img')[0]; nCaption = nImg.getElementsByTagName('div')[0]; IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules; for (i=0; i<nRule.length; i++) { if (nRule[i].selectorText == ".swapImg") { var swapImgClass = nRule[i]; nRule[i].style.width = fullSizeImg.width + "px"; } } var nGallery = document.getElementById("photoGallery").getElementsByTagName("a"); for (i=0; i<nGallery.length; i++) { nGallery[i].onclick = function() { swapImg(this.firstChild,swapImgClass,fullSizeImg); return false; } nGallery[i].href = "#"; } } IE ? attachEvent('onload', init, false) : addEventListener('load', init, false); If anyone can help I would really appreciate it! The code that I have below has three different buttons: When you click then name of each button the image of the button will appear. What I am trying to do is create a mini slide show. Instead of having 3 buttons, I just want one button called "tools" that you click and every time you click the button a different image of a tool will appear. I have heard you can use just about all my code below but add in the modulus operator somehow to achieve this... Does anybody have any suggestions or know how to do this??? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> img {display: block; margin-left: auto; margin-right: auto; } </style> </head> <body> <img id="shown" src="/tools/hoe.jpg" alt="hoe"> <script> function imageView(saw) { document.getElementById("shown").src="/tools/"+saw+".jpg"; } imageView('saw'); </script> <p><input type="button" value="Saw" onclick="imageView('saw')"> </p> <p><input type="button" value="Hoe" onclick="imageView('hoe')"> </p> <p><input type="button" value="Tree Trimmer" onclick="imageView('tree_trimmer')"> </p> </body> </html> Hi Guys I'm trying to find a way to insert a dropdown eg: <select> <option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </select> ...place the dropdown to the left and have an information panel to the right. i.e. if a user chooses Volvo a panel to the right would appear saying eg "Volvo is a strong car" and so on for other selections eg "Audi is a fast car" if the user selects Audi in the dropdown. THANKS I have a 'show more' link on my page and wish to allow users who disable javascript to automatically see this normally hidden div as the link obviously will not work. is this possible ? the info in the hidden div will be taken from MySQL databases. Code: <div><!-- start of div2 --> <div class="floatleft"><a href="#" id="textbox-show" class="showLink" onclick="showHide('textbox');return false;">Show more</a> </div> <div><!-- start of div3 --> <div id="textbox" class="more"> <div class="formtitles">Show more <a href="#" id="textbox-hide" class="hideLink" onclick="showHide('textbox');return false;">Hide this content</a> </div> <div> <div class="containercolour3"> <div class="rtopcolour3"> <div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div> </div> <div class="formspacer">Hidden text</div> <div class="rbottomcolour3"> <div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div> </div> </div> </div> </div> <!-- end of div3 --></div> <!-- end of div2 --></div> Hi there, I saw this on the website for the new blackberry playbook and want to do something similar to that. http://us.blackberry.com/playbook-tablet/ Does anyone know of a script that will let me have 5 pictures or so and it will automatically go through them all but you can fastforward to the picture you like by clicking on a dot at the bottom like on the blackberry website? Hope I explained that well enough I have this floating banner code and I want to show it once per visitor. How could I have it to show once per visitor? <style> #floating_banner_bottom { text-align: left; width: 00%; bottom: 00px; margin-bottom: 0px; height: 50px; position: fixed; z-index: 50; left: 0px; </style> <div id="floating_banner_bottom"> <!-- Button to Close Banner --> <a style="display:scroll;position:fixed;bottom:50px;left:0px"> banner code <br /> <div class="close"> <a href="#" onclick="document.getElementById('floating_banner_bottom').style.display='none';return false;"> <i style="font-family: Georgia,"Times New Roman",serif;"><span style="background-color: #999999; color: white; font-size: small;"></span></i> <center> <img border="0" width="20" height="20" src="http://lh5.ggpht.com/_9vgJ1nwu_xA/S1jSp2ZhA7I/AAAAAAAAB8A/2AEBd4mR9qA/x.png" /> </center> </a> </div> <a/> </a></a></div> <!-- End Here --> I know this is a common problem, and each slide show script is a bit different and I can't get this to work exactly right: http://www.javascriptkit.com/script/...ifferent.shtml I've got two tables containing mouseover image "slide" shows - numbered sequentially but both are on the same index.html page. One image show comes up with the first navigation link, the second image show comes up with the second navigation link. The first image show works, the second doesn't - could you tell me what is causing that. there is a javascript glider that requires them both to be on the same page. link to the page here . . . http://www.sunupdesignbuild.com/NEW/index.html appreciate your help thank you T <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html> <head> <title>Student Information</title> <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> Code: <SCRIPT type="text/javascript"> <!-- function displayEntries () { var sfirst = document.frmStudentInfo.textSfirst.value; var smi = document.frmStudentInfo.textSmi.value; var slast = document.frmStudentInfo.textSlast.value; var sadd = document.frmStudentInfo.textSadd.value; var scity = document.frmStudentInfo.textScity.value; var sstate = document.frmStudenInfo.textSstate.value; var szip = document.frmStudentInfo.textSzip.value; var sphone = document.frmStudentInfo.textSphone.value; var sdob = document.frmStudentInfo.textSdob.value; window.alert('sfirst' + 'smi' + 'slast' + '\n' + 'sadd' + '\n' + 'scity' + 'sstate' + 'szip' + '\n' + 'sphone' + '\n' + 'sdob'); } //--> </SCRIPT> </head> <body> <table width="70%" align=center ID="Table1"> <tr><td><img SRC = "nwlogo.jpg" width=120 height=60></td> <td><H3>Student Information</H3></td></tr> </table> <form name="frmStudentInfo" action="ignore"> <table align="center"> <tr><td> Last Name:</td> <td><input type="text" name="txtSlast" size="20"></td> <td> </td> <td></td> </tr> <tr><td> First Name:</td> <td><input type="text" name="txtSfirst" size="20" ></td> <td> </td> <td></td> <tr><td> MI:</td> <td><input type="text" name="txtSmi" size="5" tabindex="3"><td> <td> </td> </tr> <tr><td> Address:</td> <td><input type="text" name="txtSadd" size="20" tabindex="4"></td> <td> </td> <td></td> </tr> <tr><td> City:</td> <td><input type="text" name="SCity" size="20" tabindex="5"></td> <td> </td> <td></td> </tr> <tr><td> State:</td> <td><input type="text" name="txtSstate" size="5" tabindex="6"></td> <td> </td> Code: <td><input type="button" name="cmdUpdate" value="Update" onClick="displayEntries();"></td> </tr> <tr><td> ZIP Code:</td> <td><input type="text" name="txtSzip" size="20" tabindex="7"></td> <td> </td> <td></td> </tr> <tr><td> Phone:</td> <td><input type="text" name="txtSPhone" size="20" tabindex="8"></td> <td> </td> <td></td> </td> </tr> <tr><td> Date of Birth:</td> <td><input type="text" name="txtSdob" size="20" tabindex="9"></td> <td> </td> <td></td> </tr> </table> </form> </body> </html> I'm having trouble with the pop up window. I cannot get it to pop up and I'm not sure where I have went wrong with it. I need it to pop up once the update button is clicked and contain the information that has been input into the form. Any help would be much appreciated. Knowing just enough about javascript to get myself in trouble, I have put three timed javascripts to appear from 18 December to the 1 January on three pages of my sister's website. The scripts are on the main index for the site; the index page for the bibliography folder /bibliography/ and in the education folder on just one page: /education/educationlinks.html. Part one of the script inserts the css file; part two of the script inserts a "snowing" script and part three inserts a "make it stop snowing/let it snow" script. Everything is working perfectly for the main index page and the bibliography page. But I cannot figure out why the 3rd "make it stop snowing/let it snow" refuses to show up on the page in the education folder (the snowing javascript IS working on all three pages). There are no errors being thrown and the education page validates. This is the coding for the 3rd script: Code: // snowscript part 3: Show the script between 19-31 Dec and 1 Jan var date = new Date(); var d = date.getDate(); var m = date.getMonth() + 1; dm = d + m; if (m = 12) { if (d > 18) { document.write('<script src="/scripts/snowlinkswitch.js" type="text/javascript" id="snow"></script>'); } else { document.write(''); } } else if (dm == 1,1) { document.write('<script src="/scripts/snowlinkswitch.js" type="text/javascript"></script>'); } else { document.write(''); } This is the coding for snowlinkswitch.js Code: function myhref(){ document.getElementById('myAnchor').innerHTML="please let it snow!"; document.getElementById('myAnchor').href=location.href; document.getElementById('myAnchor').title="let it snow! let it snow!"; document.getElementById('myAnchor').onclick="location.reload(); startstop('spanstyle'); return false;"; } // document.write ('<div id="snowlinks"><img src="/images/snow3aa.gif" width="11" height="11" border="0" alt="*"> <a id="myAnchor" href="" onclick="myhref();hidesnow(); return false;" title="please make it stop snowing!">please make it stop snowing!<\/a> <img src="/images/snow3aa.gif" width="11" height="11" border="0" alt="*"></div> '); I would search for a similar occurrence but have no clue about what search words to use. Does anyone here have an idea about what I have done incorrectly that is causing this to happen? Many thanks. E Morris Toronto, Canada My slideshow is working in the dreamweaver preview, but not showing up when i upload and view on the internet. http://www.kristynaswebpages.com/home2a.html I have this in the head section: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="fadeslideshow.js"> /*********************************************** * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <script type="text/javascript"> var mygallery=new fadeSlideShow({ wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow dimensions: [1024, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image imagearray: [ ["http://www.kristynaswebpages.com/falcon_1.jpg", "", "", "The A Control Room is blah blah blah"], ["http://www.kristynaswebpages.com/falcon_2.jpg", "", "", "The A Control Room is blah blah blah"], ["http://www.kristynaswebpages.com/falcon_3.jpg"], ["http://www.kristynaswebpages.com/falcon_4.jpg", "", "", "The A Control Room is blah blah blah"] //<--no trailing comma after very last image element! ], displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false}, persist: false, //remember last viewed slide and recall within same session? fadeduration: 500, //transition duration (milliseconds) descreveal: "ondemand", togglerid: "" }) </script> and then i put <div id="fadeshow1"></div> where I wanted the slideshow to appear (between the menu bar and the text at the bottom). I have tried writing the pic links as both "http://www.kristynaswebpages.com/falcon_2.jpg" and "falcon_2.jpg" If anyone could help, that would be so awesome! |