|
JavaScript - Onclick Hides Every Div Apart From One.
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 Similar TutorialsHi 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 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 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! 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? Hey 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. I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. Hello... Here is an example of a site I'm working on: http://mrmatthewreese.com/surine/custominlays.php notice the links for the alien cross bones, celtic knot etc...change colors once they are clicked on? Is it possible to have the top (alien crossbone) be set to black before it is clicked on then changed to the grey color once a different link is clicked? Just curious if anyone can help. Here is the javascript code: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var Lst; function CngClass(obj){ if (Lst) Lst.className=''; obj.className='boldlink'; Lst=obj; } /*]]>*/ </script> <a href="#" onclick='changeimage();'><span onclick="CngClass(this);">Alien Crossbones</span></a><br /> <a href="#" onclick='changeimage2()'><span onclick="CngClass(this);">Celtic Knot</span></a><br /> <a href="#" onclick='changeimage3()'><span onclick="CngClass(this);">Compass Rose</span></a><br /> <a href="#" onclick='changeimage4()'><span onclick="CngClass(this);">Fleurdelis</span></a><br /> <a href="#" onclick='changeimage5()'><span onclick="CngClass(this);">Geometrix</span></a><br /> <a href="#" onclick='changeimage6()'><span onclick="CngClass(this);">Modern Vine</span></a><br /> <a href="#" onclick='changeimage7()'><span onclick="CngClass(this);">Nouveau</span></a><br /> <a href="#" onclick='changeimage8()'><span onclick="CngClass(this);">Scorpion</span></a><br /> <a href="#" onclick='changeimage9()'><span onclick="CngClass(this);">Traditional Block</span></a><br /> <a href="#" onclick='changeimage10()'><span onclick="CngClass(this);">TrebleBass Clef</span></a> hi everybody.. i have this simple code: Quote: <html> <head> <script language="javascript" type="text/javascript"> document.write("<input type='button' value='push' onclick='hi()'/>"); function hi() { alert("hi"); document.write("<input type='button' value='enter' onclick='javascript: bye()'/>"); } function bye() { alert("bye"); } </script> </head> <body> </body> </html> if i try to run it on chrom its works well.. but on IE or FireFox its not define the bye() function.. whats the reason?! and how i can solve it?.. thanks very much.. Hey guys, OK, so I have two buttons (code below) that when a user clicks on it, it will place text in a textarea. You can view all the code below: Buttons: Code: <div id="newButton">
<a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/graphi10.png" alt="Request a Graphic"></a>
<a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/review11.png" alt="Request a Review"</a>
</div>
The textarea ID is: Code: text_editor_textarea and this is the code that I would like to be placed inside the textarea: Code: Nature of Request: Creation Size: Primary Colors: Text To Insert: Donation: Extra Information: URL: I tried this, but the BBCode would not keep it's structure and would all end up on one line. EDIT: Oh...The BBCode is parsing inside the code box >.< Hey. When a checkbox is checked, I want it to add the id number of what I've got in a PHP variable, to appear in a <input type="text" />. For example: The id is 1, 2, and 3. So 3 checkbox's. I click on the first, and it adds to another input field, '1'. I hit the second, and the same thing happens, except the id is 2. Of course, I know how to do the ID and all with PHP. All I need to do now, is where when you click a check box, it adds to another field, and adds & after every check. Here is my code: Code: <input type="checkbox" name="delete"
onclick="this.checkedbox.style.display=(this.value=='checked' ? 'inline' : '2' )" />
<input type="text" name="checkedbox" />
Thanks. Hi i have a page that allows the user to enter details and also upload an image , I have onclick event on a submit button that goes off and performs a geocode on the postcode and saves the lat long to a database along with the other details they enter ( which all works fine) . The problem is that when i use the onclick event with the submit button it seems to bypass the onclick JS function and just go straight to the image upload bit. Can a button be a submit button and also have an onclick event or is there anything else i can do to fix the problem? <a href="#" onClick="showClubs(<% Response.Write x_ID_Nanny %>);" > Now this showclubs function shows a hidden div and at the end I have a return:false; but when you click on the link - it still seems to reload to the page and take you to the top how can I get it to just show the div without seeming to reload the page? Hey guys, I'm trying to obtain the object of the element on the page that is clicked, but my code is unable to set the target. Here's what I have. The JavaScript Code: function show_info(e){
//get the targeted element.
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) targ = targ.parentNode;
alert (targ); //FAIL!
}
The Form Code: <form action="#" method="post"> <input type="hidden" name\"id" value="" /> <input type="submit" name="submit" value="Info" onclick="show_info()"/> </form> What I want to do is get the target element(the submit button) so that I can get its sibling(it contains a unique ID). But it's not working. Hi, I have created the following text input field: Code: <form name="xyz">
<input type="text" name="myText" size="30"
value="Initial text"
onclick="document.xyz.myText.value='';"/>
</form>
When the field is clicked the initial text is removed, clearing the way for new text to be entered, which is what I want. The trouble is if the field is again clicked the new text entered is also cleared which is not what I want. I only the field cleared for the first click and not for subsequent clicks. How can this be achieved? I will be grateful for all help. PHP Code: var deck = new Array (52); for (var ind = 0, face = 1; ind < 52; ind+=4, face++) { deck[ind] = face + "c"; deck[ind + 1] = face + "d"; deck[ind + 2] = face + "h"; deck[ind + 3] = face + "s"; } for (var a = 0, b = 0, c = 0; a < 19; a++, b+=2) { document.write("<img src='cards/placeholder.gif' name='" + deck[b] + "' width='53' height='68' onClick='alert(" + deck[b] + ")'>"); } I have this code for my Go Fish game, however it will not show an alert when you click the image. I've also tried onClick='alert(deck[" + b + "])' but that does not work either. Can someone help me please? I've got this script that spins an image for me but it dont stop spinning, in other words when i press startspinning with onclick it dont change it to stopspinning function it just keeps spinning, it works fine with href but not onclick. Code: function StartSpinning() {
int = setInterval( 'SpinChange()', 100 );
$( 'SpinButton' ).innerHTML = "Spinning (Click to Stop)";
$( 'SpinButton' ).onclick = "StopSpinning();";
Effect.Fade( 'turns', {duration: 0.3} );
}
function StopSpinning() {
clearInterval( int );
$( 'SpinButton' ).innerHTML = "Spin it";
$( 'SpinButton' ).onclick = "StartSpinning();";
UpdateFigure();
Effect.Appear( 'turns', {duration: 0.3} );
}
Can anyone help thanks. If you wanted to change an ids onclick would int you just do this document.getElementById("").onclick = ""; Is there a way to do it? Hello, The code below assigns a value to the Latitude and to the Longitude table cells when the submit button is pressed. I would like to have these values appear in text boxes instead. Obviously I need to amend onclick="javascript:usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint)" to make this work but I can't seem to. Assuming two text boxes with names lng and lat, how would I amend the line? Thanks Code: <p align="left">
<table bgcolor="#FFFFCC" width="300">
<tr>
<td width="100">
<b>Latitude</b></td>
<td id="lat">
</td>
</tr>
<tr>
<td width="100">
<b>Longitude</b></td>
<td id="lng">
</td>
</tr>
</table>
</p>
<p>
Postcode:
<input type="text" id="postcode" size="10" value="IG3 8PY" /><br />
<input type="submit" value="Find" onclick="javascript:usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint)" /><br />
<div id="map" style="width: 500px; height: 500px">
</div>
<p>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA43oi4HUU6ay_KI5aLlgqqxRs1CMn3rnBr6PSR_9LSokba_k_xRRX9T_bJ1PRZQ_1n4nF3EOK"
type="text/javascript"></script>
<br />
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAA43oi4HUU6ay_KI5aLlgqqxRs1CMn3rnBr6PSR_9LSokba_k_xRRX9T_bJ1PRZQ_1n4nF3EOK"
type="text/javascript"></script>
<br />
<script src="gmap.js" type="text/javascript"></script>
</p>
</body>
</html>
|
|||||||