|
JavaScript - Showhide Two Divs With One Click?
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> 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) 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. 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 know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it... is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors? Hey guys just need a little help. I need to create a little script that clicks a link automatically and opens it up in a new page. So far I have this: Code: <head>
<script>
function autoClick(){
document.getElementById('linkToClick').click();
}
</head>
<body onload="setTimeout('autoClick();',3000);">
<a id="linkToClick" href="http://www.google.com" rel="nofollow" target="_blank">GOOGLE</a>
</body>
It works but the problem is that IE popup blocker keeps blocking the new window. Is there a way to do the same thing with javascript without it having blocked by IE popup blocker? need to make "left click" act as "middle click" -------------------------------------------------------------------------------- I need to make "left click" act as "middle click" for a web site ....thank you in advance for any and all help... [CODE] <script language="javascript"> function Click(4) { if (event.button==0; 1; ) } document.onmousedown </script>> Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser How would you specify when user right clicks?
How can I use onclick with the <div> tag?
Hello, I am creating a website and want to put in a "Feedjit" paid for map. Code: <script type="text/javascript" src="http://feedjit.com/map/?wid=f362a5317ac1d91f&pid=e71759d0ce545166&bc=FFFFFF&tc=494949&brd1=336699&lnk=494949&hc=336699&dot=FF0000&wh=Recent%20Visitors&hl=1&wh=Recent%20Visitors&hl=0"></script> . How do I stop it being clicked through - ie, I do not want when people click on the map for it to be clickable - the website is "here" and the "widget" is entitled "Map Test" - I have tried contacting the company but no response yet. Thank you. Philip. hello! I currently have 2 UL's that get slide down when you click a button (used for navigation). I currently have it set up so that when you click the "ul#selectService" they slide down, and when you click it a second time it will slide back up and disappear. However, they only way to get the UL's to disappear is to click the "ul#selectService" a second time, so I'm trying to get it set up so that when you click on anything that isn't the UL's it will cause it to slide back up again. i currently have been working on a starting idea to show what I'm basically trying to do so that you can get a rough estimate of my goal: This is my HTML that i'm using: Code: <ul id="selectService">
<li></li>
<li></li>
<li></li>
</ul>
<ul id="secondHalf">
<li></li>
<li></li>
<li></li>
</ul>
Code: var $box = $('#selectService');
$("*:not(#serviceSelect)").click(function(){
if (!$box.has(this).length) { // if the click was not within $box
$('#selectService').hide();
$('#secondHalf).hide();
}
});
Right now nothing is happening when i click out of the UL any thoughts? Hey guys, so i have a small problem. I have a comment area on my site. And i have the comments set to a specific height, so it only shows so much text. And i have a "read more ..." button How would i make it so that when I click the read more button. The CSS for the comment div changes to height:auto; This is what i currently have, and its not working. CSS Code: .tag_desc { clear:both; height:30px; overflow:hidden; }
HTML Code: <div class="tag_read_more"><a onclick="document.getElementsByClassName('tag_desc').style.height = 'auto';">Read more ...</a></div>
Thanks in advance !! Hello Friends, I would like to get a div to show when a button has been clicked. I would like the div to be hidden when the page loads, and only to show when the button has been clicked. The button works - it hides and shows the div when clicked - but the div shows when the page loads when I want it to be hidden. This is the code I have: Code: <script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('bt1').value=='Cancel'){
document.getElementById('bt1').value = 'Change Currency';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Cancel';
document.getElementById(id).style.display = 'inline';
}
}
</script>
Body: Code: <div id="currency"><input type=button name=type id='bt1' value='Change Currrency' onclick="setVisibility('sub3');";>
</div>
I am still learning Javascript, any advice would be greatly appreciated. Thank you. Dear Friends, please give your solution about below problem. I call function test".$i."(){ edit($('$paket_id')); } function for editing in line text. <div onclick="test".$i."(this)"><img src="./images/edit01.png"></div> http://www.freeimagehosting.net/l5raa But when I click to call link, the textarea are opening again. How I can limit this? anyone can help me?? Code: var milisec=0
document.d.d2.value='0'
function display(){
if (milisec>=9){
location.replace('javascript:chresp(1,0)');
// i want to doing auto click to this link -> javascript:chresp(1,0)
}
else
milisec+=1
document.d.d2.value=milisec
setTimeout("display()",1000)
}
display()
Hello, Thanks for reading. This is my first post, I hope it's not too stupid. Should I disable the right click option or not? I have a gallery site, I don't want people to be able to copy the images with the default right click over an image. From a professional looking site point of view I suppose I would be messing with the functionality a bit too much, OR is it OK in this instance to disable the click. I know how to write the code to disable the click, but what I was thinking was maybe it would be better to leave the right click but change the menu options? I'm not sure how to change the menu options, any suggestions would be appreciated Here is a link to the site. http://www.thephotographbox.com/?ID=3 (It's still in the early stages on development) Thanks for any advice. Derek. So I'm really new to javascript and html. The most advanced thing Ive made was probably a Russian rullete simulator, but I need help with this one program Im working on. So if anyone could tell me whats wrong with this, I would appreciate it! <html> <head> <font size="4">Click the button below as many times as you can</font> <br> <script type="text/javascript"> var clicks=0 function count() { clicks=clicks+1; } </script> </head> <body> <input type="button" value="Click Me" OnClick="count()"> <br> <p>Clicks: <script type="text/javascript"> document.write(clicks); </script></p> </body> </html> There seems to be a lot out there, but I haven't found a javascript for a click and drag that has been bug free. Does anyone have any suggestions? The last one I had didn't work in Safari. Thanks so much for any help. i have a table with 28 columns in a page with horizontal scroll bar i need to display a div when a header cell is clicked but the div shld be displayed at the location of the header clicked header cell only currently i have a script to get the mouse click coordinates & have applied to div left but the problem is even if the table is scrolled the div remians there only . it needs to be in the header cell where its clicked suppose i scroll & click another header cell i do get the cordinates but its the screen cordinates so not matching the actual headercell cordinates can someone help me to write a code to autoclick the following codes? note that the codes are partial codes.. help me to write the solution into a script file Code 1 <table class="bgmain" width="99.75%" border="0" cellpadding="0" cellspacing="0"><tr><td valign="top"> <form method="POST" action="tvalidate.php"> <input type="hidden" name="id" size="20" value="29409"><input type="hidden" name="xfile" size="20" value="29409.pdf"> <input type="submit" value="Download" name="Enter"> </form> Code 2 <div class="smallcurve"> <div class="t"><div class="r"><div class="b"><div class="l"><div class="tl"><div class="tr"><div class="bl"><div class="br"> <div class="smallcontent"> <table width="100%" border="0" cellpadding="5" cellspacing="0" align="center"><tr><td> </ul> </td></tr></table> <center> <form method=POST action=http:blablabla.com/29409.pdf><b>Full-Text Document View/ Download :</b> <input type=image border=0 align=absmiddle src=./images/pimages.jpg title="Click here to view full- text item"> |
|||||||