blob84 Posted November 27, 2009 Share Posted November 27, 2009 Hi I have this script:It works for each button, but I would when I press the first or the second ecc... button, the others buttons if opened must close. <html><head><style>body{font-family:arial;}div {background-color: black;color: white;height: 0px;width: 150px;overflow: hidden;border: 2px solid yellow;}</style><script type="text/javascript">var i=0;var c=0;var intHide;var speed=3;function show_hide_menu(id){if (c==0) { c=1; clearInterval(intHide); intShow=setInterval("show()",10); }else { c=0; clearInterval(intShow); intHide=setInterval("hide()",10); }id1=id;}function show(){if (i<150) { i=i+speed; document.getElementById(id1).style.height=i; }}function hide(){if (i>0) { i=i-speed; document.getElementById(id1).style.height=i; }}</script></head><body><input type="button" value="bottone" onclick="show_hide_menu('div1');" /><div id="div1">ciao a tutti <br /> </div> <br /><input type="button" value="bottone" onclick="show_hide_menu('div2');" /><div id="div2"> ciao mondo</div></div> <br /><input type="button" value="bottone" onclick="show_hide_menu('div3');" /><div id="div3"> ciao mondo</div></div> </body></html> Link to comment Share on other sites More sharing options...
GermanPrince Posted November 28, 2009 Share Posted November 28, 2009 Are you asking us to make it so if another one is open that one must close? Link to comment Share on other sites More sharing options...
blob84 Posted November 29, 2009 Author Share Posted November 29, 2009 Are you asking us to make it so if another one is open that one must close?I only asked a suggestion, not to make the script for me.If you try the script you know what I'm taliking about, when i said "I press the first or the second ecc... button, the others buttons if opened must close."I try to explain better the script:there are 3 buttons, all buttons use the same function, so when i press any button the function assign new height at the div, and it's seems that is "opened", if i click again on the same button the function assign new height and it seems that is "closed"; but if I click on a button while another div is still "opened", it happens strange thing, beacause the function assign at variable c the value 1 or 0, so if the div is "opened" and I click on another button to "open" another div, the current div it's "closed".I hope it's a little more clear than previous post. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 29, 2009 Share Posted November 29, 2009 Instead of keeping local variables to keep track of whether it is opened or closed, you need to determine if it is opened or closed based on what the div actually looks like in the DOM. So you could check the height, for example, and if the height is smaller than a certain amount then it's closed, or else it's open. Also, you don't clear the interval once the animation finishes, you just keep calling the function but it doesn't do anything because of the if statement. It would be better to just stop calling the function, so you could add some else statements to your show and hide functions to clear the timeout once it's finished. Link to comment Share on other sites More sharing options...
blob84 Posted December 4, 2009 Author Share Posted December 4, 2009 I found the useful property clientHeight, weirdly is not a standard , but it works on all browser, also IE6 , because is a microsoft property. I create a loop who check the height of the div, and if there is a div with more than 0 height it will be closed, clicking on any button.It's good but I would that if I click on another button the new div should be opened.I click on the same button, the div close OK it works!when a div is opened I click on another button, the div close OK it works!when a div is opened I click on another button, the div close, the new div should open, doesn't work!How could I do? <html><head><style>body{font-family:arial;}div {background-color: black;color: white;height: 0px;width: 150px;overflow: hidden;border: 2px solid yellow;}</style><script type="text/javascript">var i=0;var c=0;var intHide;var speed=3;function show_hide_menu(id){//j = document.getElementById(id).clientHeight;if (c==0) { c=1; clearInterval(intHide); intShow=setInterval("show()",10); }else { c=0; var divNum = document.getElementsByClassName("subMenu").length; var takeNum = parseInt(id.charAt(7)); [b] for(x=takeNum;x<=divNum;x++) { //alert("subMenu"+x); //inizia di nuovo a contare da zero var x = 0; while (x<=divNum) { h = document.getElementById("subMenu" + x).clientHeight; //restituisce l'altezza del tag currentDiv = document.getElementById("subMenu" + x); if(h>0) { clearInterval(intShow); intHide=setInterval("hide()",10);[/b] } x++ } } }id1=id;}function show(){if (i<150) { i=i+speed; document.getElementById(id1).style.height=i; }}function hide(){if (i>0) { i=i-speed; document.getElementById(id1).style.height=i; }}function findD(id) { }</script></head><body><input type="button" value="bottone" onclick="show_hide_menu('subMenu0');" /><div class="subMenu" id="subMenu0">ciao a tutti <br /> </div> <br /><input type="button" value="bottone" onclick="show_hide_menu('subMenu1');" /><div class="subMenu" id="subMenu1"> ciao mondo</div></div> <br /><input type="button" value="bottone" onclick="show_hide_menu('subMenu2');" /><div class="subMenu" id="subMenu2"> ciao mondo</div></div> </body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted December 4, 2009 Share Posted December 4, 2009 You're still using global variables for something, what is the c variable for? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.