JavaScript - Show/hide Div Problem With Reload
Similar TutorialsI am running a simple show hide div script as follows: Code: <script type="text/javascript"> <!-- function toggle_visibility(slideshow) { var e = document.getElementById(slideshow); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } //--> </script> <a href="#" onclick="toggle_visibility('slideshow');">Show Gallery + </a> <div id="slideshow" style="display:none">slideshow</div> It works but the page reloads and returns the user to the top of the page not to the "shown" div. Any way to send them back to the shown div or stop the reload? Any help would be appreciated. Thanks Hi. I have a form and in the form is a checkbox use as a switch to hide and unhide a two textbox. When the other textbox is hide, the other is unhide such as the code below. When the user click the submit button on the first time and there is an error, it reloads and the id="fieldset.-in_honor" hide because it is set to hide initially but not empty. My problem is, I want to show the fieldset whichever is not empty after submit button is click and there is an error so user will not enter any more information to the other field. Is that possible? Please help. I have a hard time explaining it but hopefully you will get the idea. Thanks in advance and hope to hear from you as soon as possible. Code: /*toggle switch*/ <p><input type="checkbox" name="in_honor" value="" id="checkmemoriam" onclick="showHide(this.name);" />Please check to make this donation in honor of someone special.</p> /*hide textbox but unhide when the switch is on or the checbox is check*/ <fieldset id="fieldset-in_honor" class="fieldgroup" style="display:none"> <legend class="hide">In Honor Of</legend> <p>To make this donation in honor of someone special, please complete the two fields below:</p> <div class="formfield" <?php echo highlight('donate_honor_name'); ?>> <label for="donate_honor_name">Name:</label> <input id="donate_honor_name" name="donate_honor_name" class="text" type="text" value="<?php safeEcho($form['donate_honor_name'])?>" /> <?php helper_error('donate_honor_name'); ?> </div> <div class="formfield" <?php echo highlight('donate_honor_acknowledgement'); ?>> <label for="donate_honor_acknowledgement">Acknowledgement should be sent to:</label> <textarea id="donate_honor_acknowledgement" name="donate_honor_acknowledgement"><?php safeEcho($form['donate_honor_acknowledgement'])?></textarea> <?php helper_error('donate_honor_acknowledgement'); ?> </div> /*always show on first load of the page but once the checkbox is check, will need to hide and delete info entered*/ <fieldset id="fieldset-in_registration"> <label for="impact" style="font-weight:bold">B. Impact Areas</label> <table> <tr> <td style="width:380px;text-align:left"><label for="d" id="deslist4" name="deslist4">Crime and Drug Use <a href="javascript:alert('Ensuring prevention and treatment programs and appropriate support services are available to people who are at risk for drug addiction and supporting efforts to reduce crime.');">what is this?</a></label></td> <td style="float:right"> $<input id="d" name="d" class="text" type="text" value="<?php safeEcho($form['d'])?>" style="width:90px;" onChange="CalculateTotal()" /> <?php helper_error('d');?> </td> </tr> <tr> <td style="width:380px;text-align:left"><label for="e" id="deslist5" name="deslist5">Early Childhood Development <a href="javascript:alert('Children are healthy, loved, nurtured, safe and have access to quality childcare and early education. This includes programs that increase parenting skills, providing books to all children and providing developmental screening for 3 and 4 year olds.');">what is this?</a></label></td> <td style="float:right"> $<input id="e" name="e" class="text" type="text" value="<?php safeEcho($form['e'])?>" style="width:90px;" onChange="CalculateTotal()" /> <?php helper_error('e');?> </td> </tr></table> Code: /*JAVASCRIPT FUNCTION*/ function showHide() { if (document.getElementById('checkmemoriam').checked) { if (document.getElementById('TotalC').value == "0.00") { document.getElementById('fieldset-in_honor').style.display=""; // this is for showing document.getElementById('fieldset-in_registration').style.display="none"; } else { var answer = confirm("You entered a total gift designation of $" + document.getElementById('TotalC').value + ". At this time, gifts made \"in honor of someone special\" are not eligible for the designation option. Clicking the OK button will delete all your designation(s). Do you want to continue?") if (answer) { document.getElementById('TotalC').value="0.00"; document.getElementById('d').value="0"; document.getElementById('e').value="0"; document.getElementById('fieldset-in_honor').style.display=""; // this is for hiding document.getElementById('fieldset-in_registration').style.display="none"; } else { document.getElementById('checkmemoriam').checked=false; } } } else { if ((document.getElementById('donate_honor_name').value="") && (document.getElementById('donate_honor_acknowledgement').value="")) { document.getElementById('fieldset-in_honor').style.display="none"; // this is for hiding document.getElementById('fieldset-in_registration').style.display=""; } else { var answer = confirm("The field you are trying to close will delete all information you entered \"in honor of someone special\" but it will allow you to designate. Clicking the OK button will show the designation list. Do you still want to continue?") if (answer) { document.getElementById('donate_honor_name').value = ""; document.getElementById('donate_honor_acknowledgement').value = ""; document.getElementById('fieldset-in_honor').style.display="none"; // this is for hiding document.getElementById('fieldset-in_registration').style.display=""; } else { document.getElementById('checkmemoriam').checked=false; document.getElementById('fieldset-in_honor').style.display=""; // this is for showing document.getElementById('fieldset-in_registration').style.display="none"; } } } } I make a menu and in one of it's item I want to show a sub menu under it when the user mouse is over it, I use onmouseover and onmouseout for this and I make the visibility of the sub menu hidden and when the mouse become over the item it's visibility become visible. the problem I faced is that when the mouse become out of the item of the main menu the sub menu disappear and I couldn't click on or over it. this is my menus: Code: <div id="menu" > <ul id="ul1" > <li id="li1" ><a href="index.php"> Home </a></li> <li><a href="" > About </a></li> <li><a href="" onmouseover="onlist()" onmouseout="outlist()"> Services </a></li> <li><a href="" >Contact </a></li> </ul> </div> <ul id="ul2" onmouseover="onlist()" onmouseout="outlist()"> <li> serv1 </li> <li > serv2 </li> </ul> the JS code: Code: function onlist() { document.getElementById('ul2').style.visibility='visible'; } function outlist() { document.getElementById('ul2').style.visibility='hidden'; } Hi all, I'm using a classic toggleLayer function to display content in a div adjacent to one full of links. The code is Code: function toggleLayer( work ) { var elem, vis; if( document.getElementById ) // this is the way the standards work elem = document.getElementById( work ); else if( document.all ) // this is the way old msie versions work elem = document.all[work]; else if( document.layers ) // this is the way nn4 works elem = document.layers[work]; vis = elem.style; // if the style.display value is blank we try to figure it out here if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined) vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none'; vis.display = (vis.display==''||vis.display=='block')?'none':'block'; } and the links take on the format of: Code: <a href="javascript:toggleLayer('work');........... My problem is, I want the 'work' div to remain blank, which it does, until I click one of the links. But after that initial click, I don't want the script to act as a toggle, just a show/change content. Any ideas? Sorry if i'm phrasing all this very badly, i'm pretty new to it all. I have an idea that AJAX could be the solution but I can barely get my head around a little bit of copied and pasted JS Thanks for any help, Pat http://www.suttonsilver.co.uk/client...on-calculator/ Please visit the above website, Click on a Injury Type (try Minor Head Injury) on the right hand side (the human figure) Then click on the Calculate button and you will see a "calculated" figure appear, if you then click on another injury type then calculate it again, another Div will show. If two "You could be entitled up..." DIVs pop up, the previous, initially calculated 'result' should be removed and replaced by the new 'result'. Can anyone help me do this? Also.. as a side note, does anyone have a solution for when clicking calculate, two divs show up... (i.e. a 'result' and a 'contact us form'). Cheers Chris SS Hi Guys, I have a PHP loop region, which repeats all completed projects for each customer, then displays all jobsheets linked to those projects. I have a javascript show/hide function, which will only show the jobsheets when the project link is clicked. Without this javascript, the PHP loop works perfectly, but all the information is displayed. How can I use the show/hide function and still show all the jobsheets for completed projects? Code: function toggle2(id, link) { var e = document.getElementById(id); if (e.style.display == '') { e.style.display = 'none'; link.innerHTML = '<img src="../Images/plus.gif" border="0" >'; } else { e.style.display = ''; link.innerHTML = '<img src="../Images/minus.gif" border="0" >'; } } PHP Code: <table> <tr> <th>Project / Job</th> <th>Language</th> <th>Words (Net)</th> <th>Shipped</th> </tr> <?php $previousProject = ''; if ($totalRows_rsComplete_Cust > 0) { // Show if recordset not empty while ($row_rsComplete_Cust = mysql_fetch_assoc($rsComplete_Cust)) { if ($previousProject != $row_rsComplete_Cust['projid']) { // for every user, show the user name ?> <tr> <td colspan="4"><a href="#" onclick="toggle2('<?php echo $row_rsComplete_Cust['projid']; ?>', this)"><img src="../Images/plus.gif" border="0" /></a><?php echo $row_rsComplete_Cust['projid']; ?></td> </tr> <?php $previousProject = $row_rsComplete_Cust['projid']; } ?> <tr id="<?php echo $row_rsComplete_Cust['projid']; ?>" style="display:none"> <td><a href="jobsheet_details.php?id=<?php echo $row_rsComplete_Cust['jobid']; ?>&proj=<?php echo $row_rsComplete_Cust['projid']; ?>"><?php echo $row_rsComplete_Cust['jobname']; ?></a></td> <td>LANGUAGE</td> <td>WORD NET</td> <td>YES / NO</td> </tr> <?php }} // Show if recordset not empty ?> </table> hi all im trying to hide a div on page load, ive used this. Code: <script type="text/javascript"> function hideDiv(){ document.getElementById('sidebar').style.display = "none"; } hideDiv() </script> and this in the body tag Code: <body onload="javascript:hideDiv()"> it works fine hiding the div named sidebar, problem comes when i try to then use an Onclick event to show the hidden div, it just wont show. can this be done? please help if you can this work has to be in soon Hi again Folks I had another learning bump I'm going to ask Well I can't seem to hide the selector that I'm supposed to hide.. well to see for yourselves here's the link..' http://dev.crownshipping.com.ph/single_update.html I have a list of boats.. and each one of them has details.. Code: <ul> <li>boat1 details</li> <li>boat2</li> <li>boat3</li> </ul> initially the boat details are hidden... so when i click the boat a modal window pops up.. and a dialog where you can see the boat details.. during the first try.. everything is okay.. but when i close the modal window.. when i click another boat to view, the previous one that was not supposed to show.. were displayed.... I have tried hiding it.. by doing $('class name').hide();.. also I have tried setting the css again to display:none.. but still a no go.. I'm fairly new to javascript and jquery so please help me.. I have tried all that I have learned.. maybe there's a trick that i still don't know.. here's the js code.. hope someone can help me be easy on me.. i just started 2 days ago.. i'm on day 3 Thanks Code: $(document).ready(function() { //select all the a tag with name equal to modal $('a.modal').click(function(e) { //Cancel the link behavior e.preventDefault(); //Get the A tag value to match with class name later var id = $(this).attr('href'); //document.write (id); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); //transition effect $('.window').fadeIn(1000); if(id=="" || id=="#") {var check = ""; document.write ('no value!');} else{ var check = '.' + id; //document.write (check); $(check).fadeIn(); } }); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask, .window').fadeOut(1000); // $('.window').hide(); }); }); I don't know a lot about Javascript... still learning.. I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code: Code: <script type="text/javascript" > function showSample() { if (document.getElementById('input').value='SW001') { document.getElementById('SW001').style.display='block'; document.getElementById('SW002').style.display='none'; document.getElementById('SW003').style.display='none'; document.getElementById('SW004').style.display='none'; } else if (document.getElementById('input').value='SW002') { document.getElementById('SW001').style.display='none'; document.getElementById('SW002').style.display='block'; document.getElementById('SW003').style.display='none'; document.getElementById('SW004').style.display='none'; } else if (document.getElementById('input').value='SW003') { document.getElementById('SW001').style.display='none'; document.getElementById('SW002').style.display='none'; document.getElementById('SW003').style.display='block'; document.getElementById('SW004').style.display='none'; } else if (document.getElementById('input').value='SW004') { document.getElementById('SW001').style.display='block'; document.getElementById('SW002').style.display='none'; document.getElementById('SW003').style.display='none'; document.getElementById('SW004').style.display='none'; } else if (document.getElementById('input').value='SW005') { document.getElementById('SW001').style.display='none'; document.getElementById('SW002').style.display='none'; document.getElementById('SW003').style.display='none'; document.getElementById('SW004').style.display='block'; } } </script> <style type="text/css"> <!-- #main { width: 400px; margin-right: auto; margin-left: auto; height: 125px; } #imageArea { float: right; width: 200px; } #formArea { float: left; width: 200px; height: 125px; } .image { height: 125px; width: 125px; margin-right: auto; margin-left: auto; display: none; } #SW001 { background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center; } #SW002 { background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center; } #SW003 { background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center; } #SW004 { background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center; } #SW005 { background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center; } --> </style> </head> <body> <div id="main"> <div id="imageArea"> <div class="image" id="SW001"></div> <div class="image" id="SW002"></div> <div class="image" id="SW003"></div> <div class="image" id="SW004"></div> <div class="image" id="SW005"></div> </div> <div id="formArea"> <form action="" method="get"> <input type='text' name="input" id='input' /> <input name="" type="button" onclick="showSample(this.selectedIndex)"/> </form> </div> </div> </body> </html> Any help would be greatly appreciated! Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link... <script type="text/javascript"> function show(){ document.getElementById(test).style.display="block"; } </script> <div id="test" style="display:none;"> <p>Some text</p> </div> <a href="#" onclick="show(); return false;">Show</a> Hi guys, im new to forums and need some help with my website. I have embed a flash player known as: JW player into my website and put it into a div. Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif. How would I set this up? Im not to familiar about using javascript so im not sure if its even possible. Anways thx for any help ore suggestions related to this subject. this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html using this code: http://www.linkstraffic.net/programm...nd/movediv.php heres my code. can someone fix it? html: [CODE] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Chris MacDonald - Javascript Assignment 2</title> <link href="styles/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java.js"></script> <div id="header"> <div id="logo"><img src="images/beat.png" /></div> </div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li> <li><a href="#">About Us</a></li> </ul> </head> <body> <div id="content"> <a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a> <div id="coverlogin"> <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br/> <p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p> </div> </div> </div> <div id="footer"> <div id="footertext">Beat Threads - 2010</div> </div> </body> </html> [CODE] javascript: // JavaScript Document var hh=0; var interv; //we show the box by setting the visibility of the element and incrementing the height smoothly function ShowBox() { //Depending on the amount of text, set the maximum height here in pixels if(hh==40) { clearInterval(interv); return; } obj = document.getElementById("coverlogin"); obj.style.visibility = 'visible'; hh+=2; obj.style.height = hh + 'px'; } function HideBox() { obj = document.getElementById("coverlogin"); if(hh==2) { obj.style.visibility = 'hidden'; obj.style.height = '0.1em'; clearInterval(interv); return; } hh-=2; obj.style.height = hh + 'px'; } [CODE] Can someone fix this for me? ok trying to get a Div tag to show if something is True and hide if something is False JS Code: unction eToggle(anctag,darg) { var ele = document.getElementById('Module1'); var ele = document.getElementById('Module2'); var ele = document.getElementById('Module3'); var ele = document.getElementById('Module4'); if("module1" + "module2" + "module3" + "module4" <40) { div.id.Failed = "block"; div.Failed = "Failed"; } else { div.style.Passed = "block"; div.Passed = "show"; } } HTML Code: <div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b> <br /> </div> <div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div> Hi all, Check this code: PHP Code: <a>text</a> <div id="pkg">pkg</div> <div id="table_pkg">table_pkg</div> I'd like to show table_pkg and hide pkg when I click on <a>text</a>. How can I do? Thank you very much Code: <html> <head> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> function showonlyone(thechosenone) { var noticecontent = document.getElementsByTagName("div"); for(var x=1; x < noticecontent.length; x++) { name = noticecontent[x].getAttribute("name"); if (name == 'noticecontent') { if (noticecontent[x].id == thechosenone) { noticecontent[x].style.display = 'block'; } else { noticecontent[x].style.display = 'none'; } } } } </script> </head> <body> <center> <div id="parentdiv"> <div id="expandall">OPEN/CLOSE ALL</div> <div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div> <div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div> <div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div> <div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div> <div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div> <div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div> </div> </center> </body> </html> can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs Hello, I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management". Does anyone know how I resolve ?. The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link. ------------ Have placed code in attachment as too long for this section Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome I have a script to show and hide various divs based on a function & var. The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want. here is the JS: Code: function sitesurveyswitch(emotion) { var e = emotion; document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px'; document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px'; document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px'; document.getElementById('FeedbackHate').style.display = 'none'; document.getElementById('FeedbackOk').style.display = 'none'; document.getElementById('FeedbackLove').style.display = 'none'; if (e == 'hate') document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px'; document.getElementById('FeedbackHate').style.display = 'block'; if (e == 'ok') document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px'; document.getElementById('FeedbackOk').style.display = 'block'; if (e == 'love') document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px'; document.getElementById('FeedbackLove').style.display = 'block'; } and here is the code related to this function: Code: <div id="siteSurveyBox"> <span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span> <span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span> <span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span> </div> <div id="FeedbackHate" style="display:none; margin-top:-28px;"> FEEDBACK FORM IS HERE </div> <div id="FeedbackOk" style="display:none; margin-top:-28px;"> FEEDBACK FORM IS HERE </div> <div id="FeedbackLove" style="display:none; margin-top:-28px;"> FEEDBACK FORM IS HERE </div> Hi, I am using a show / hide radiobuttons on my website but by default the YES box is shown, I need to swap this if there is content in my textarea name="Owner" here is my code: Code: <p> <label>Owner</label> <label> <input type="radio" name="group_name" value="Yes" id="group_name_0" /> Yes</label> <label> <input type="radio" name="group_name" value="No" id="group_name_1" /> No</label> <br /> <div id="yes_box"> <input class="text-input small-input" type="text" id="small-input" name="Owner" value="Yes" /> </div> <div id="no_box"> <p> <label>Landlords address</label> <textarea class="text-input small-input" id="small-input" name="Owner"><?php echo $row5['Owner']; ?></textarea> </p> </div> </p> <script> $(document).ready(function(){ $("input[name$='group_name']").click(function(){ var radio_value = $(this).val(); if(radio_value=='Yes') { $("#yes_box").show("slow"); $("#no_box").hide("fast"); } else if(radio_value=='No') { $("#no_box").show("slow"); $("#yes_box").hide("fast"); } }); $("#yes_box").show(); $("#no_box").hide(); }); </script> I want some thing that when i click a button it shows a div then hides the button. I found this: Code: <script language="JavaScript"> function setVisibility(id, visibility) { document.getElementById(id).style.display = visibility; } </script> <input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";> <div id="sub3">Message Box</div> But it has two buttons that show and then hide the div, i only want one that shows the div then hides the button. Please help. hi all, i'm new here. i'm designing websites. here is address where i need little help: http://raftingtara.com/sajt5/ i want to make action: when top sub-menu disappear, that gray background disappear too!!?? anyone can help me with that? i can send all source code if you need? THANKS |