Don E Posted July 31, 2011 Share Posted July 31, 2011 Hello, I'm fairly new to JavaScript and was wondering if anyone can help me. I am trying to make a sliding div that will slide up and down by clicking on one button and/or link.(Below, it's a button. I had it with a link at first but changed it to a button.) There are many tutorials that demonstrate this but mostly they are where there is no div on the page at all until the user clicks on a button/link to make the div slide down. Instead, what I'm trying to do is show at least half of the div's content when the page loads, and if the user wants to see more, they then click the button and the div slides down to reveal the rest of the content. If they feel the need to hide the div, they slide it back up to where it was when the page first loaded.I'm trying to accomplish this using one-click, somewhat like a toggle button. Here's what's happening though:When the page first loads, when I click on the button to slide the rest of the div down, it goes down no problem, but in order to have it slide up, I have to double click on the button. Then afterwards in order to make the div slide down and up from then on, I have to double click the button each time, for sliding up and down. The button is set to "onclick", not double clicking.I've been trying to figure out why this has been happening but I can't quite pin point why it is. Perhaps someone here can see why. It could be something obvious for all I know. :)Any input would greatly be appreciated it. Yes jquery can help with this but I feel I it's best to understand the workings of JavaScript.Thank you all in advance! :)PS. I've tested this in firefox5, chrome, and IE. Also, I did not get any errors from my web developer tool bar. (http://chrispederick.com/work/web-developer/) <!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>sideBar</title><style type="text/css">#sideBarContentBox { width:200px; margin-right:auto; margin-left:auto; background-color:lightblue;}</style><script type="text/javascript"> var fullHeight; var timer; var timer2; var currentHeight; var heightNew; var sidebar; var slideDown = true; function doSlide() { if(slideDown == true) { var sidebar = document.getElementById('sideBarContentBox'); sidebar.style.height = "auto"; fullHeight = sidebar.offsetHeight; sidebar.style.height = "100px" sidebar.style.overflow = "hidden"; var timer = setInterval("slideDownDiv()",5); } else { var sidebar = document.getElementById('sideBarContentBox'); fullHeight = sidebar.offsetHeight; sidebar.style.height = fullHeight + "px"; var timer2 = setInterval("slideUpDiv()",5); } } function slideDownDiv() { var sidebar = document.getElementById('sideBarContentBox'); var currentHeight = sidebar.offsetHeight; if(currentHeight < fullHeight) { heightNew = currentHeight + 3; sidebar.style.height = heightNew + "px"; } else { slideDown = false; clearInterval(timer); } } function slideUpDiv() { sidebar = document.getElementById('sideBarContentBox'); var currentHeight = sidebar.offsetHeight; if(currentHeight > 100) { heightNew = currentHeight - 3; sidebar.style.height = heightNew + "px"; } else { slideDown = true; clearInterval(timer2); } }</script></head><body><div id="sideBarContentBox" style="height:100px; overflow:hidden;"><h3>This is a test!<br/>Can you see me?</h3><p>This is some more text! This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!This is some more text!</p></div><div><form method="post" action="#"><input type="button" onclick="doSlide();" value="Slide Down/Up"/></form></div></body></html> Link to comment Share on other sites More sharing options...
Drycodez Posted July 31, 2011 Share Posted July 31, 2011 Link to comment Share on other sites More sharing options...
JamesB Posted July 31, 2011 Share Posted July 31, 2011 var timer = setInterval("slideDownDiv()",5); var timer2 = setInterval("slideUpDiv()",5); remove var from these lines, which will make the variables global, allowing slideDownDiv() and slideUpDiv() to see them and successfully clear the timers. Link to comment Share on other sites More sharing options...
Don E Posted August 1, 2011 Author Share Posted August 1, 2011 var timer = setInterval("slideDownDiv()",5); var timer2 = setInterval("slideUpDiv()",5); remove var from these lines, which will make the variables global, allowing slideDownDiv() and slideUpDiv() to see them and successfully clear the timers. Thank you James! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.