jasonc Posted March 6, 2010 Share Posted March 6, 2010 I wish to allow the DIV to be increased or descreased in height. Keep clicking the + and the DIV increases more and the - does the opposite. How would i do this. Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/ Share on other sites More sharing options...
Zane Posted March 6, 2010 Share Posted March 6, 2010 something like onClick(document.getElementbyId("yourDIV").style.height = document.getElementbyId("yourDIV").style.height + 1); Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022271 Share on other sites More sharing options...
jasonc Posted March 6, 2010 Author Share Posted March 6, 2010 something like onClick(document.getElementbyId("yourDIV").style.height = document.getElementbyId("yourDIV").style.height + 1); hey thanks for your reply, i tried this but it did not seem to work. i changed the yourDIV to the ID of my DIV but can not seem to get it to work. is there another way? Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022276 Share on other sites More sharing options...
Zane Posted March 6, 2010 Share Posted March 6, 2010 when you say "it did not seem to work"... by this do you mean - you copy/pasted the code and it didn't work immediately so you gave up? - an error message appeared? - nothing at all happened? - the height of another div (on another website) increased? - the height not only increased but auto posted a reply for you here saying it didn't work? Details, details.. what does your code look like currently? Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022279 Share on other sites More sharing options...
Dennis1986 Posted March 6, 2010 Share Posted March 6, 2010 1 + 'px' Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022281 Share on other sites More sharing options...
Zane Posted March 6, 2010 Share Posted March 6, 2010 1 + 'px' Oh yeah.. I think you do have to strip off the px before doing the math. That makes sense. I'm too spoiled with jQuery. You could do something like this theDiv = document.getElementbyId("yourDIV"); onClick(theDiv.style.height = parseInt(theDiv) + 1 + "px"); Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022284 Share on other sites More sharing options...
Dennis1986 Posted March 6, 2010 Share Posted March 6, 2010 Nevermind, my bad. But yes, you forgot about the unit Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022291 Share on other sites More sharing options...
jasonc Posted March 6, 2010 Author Share Posted March 6, 2010 1 + 'px' thank you i did add 1 +'px' to the code also and still not doing anything. i have tried to add the following lines instead of what i was given. the following is placed between the <head> tags <script language="JavaScript" type="text/javascript"> function increasediv() { theDiv = document.getElementbyId('my_div'); document.theDiv.style.height = theDiv.style.height = parseInt(theDiv) + 1 + "px"; //document.getElementbyId("my_div").style.height = document.getElementbyId("my_div").style.height + 5 + 'px'; } function decreasediv() { theDiv = document.getElementbyId('my_div'); document.theDiv.style.height = theDiv.style.height = parseInt(theDiv) - 1 + "px"; //document.getElementbyId("my_div").style.height = document.getElementbyId("my_div").style.height - 5 + 'px'; } </script> i have also tried it without the + 'px' in the above function lines then this is my DIV part. <div id="my_div" style="height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555;"> </div> and the buttons <input type="button" value="+" onclick="javascript:increasediv();"> <input type="button" value="-" onclick="javascript:decreasediv();"></div> i have just tried in Internet Explorer and get the following error... Message: Object doesn't support this property or method the line that this refers to is the first.. theDiv = document.getElementbyId('my_div'); Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022298 Share on other sites More sharing options...
Zane Posted March 6, 2010 Share Posted March 6, 2010 it should be theDiv = document.getElementbyId('my_div'); theDiv.style.height = theDiv.style.height = parseInt(theDiv) + 1 + "px"; not theDiv = document.getElementbyId('my_div'); document.theDiv.style.height = theDiv.style.height = parseInt(theDiv) + 1 + "px"; you've already specified the document object in theDiv variable. Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022301 Share on other sites More sharing options...
jasonc Posted March 6, 2010 Author Share Posted March 6, 2010 it should be theDiv = document.getElementbyId('my_div'); theDiv.style.height = theDiv.style.height = parseInt(theDiv) + 1 + "px"; i just tried that change and still get the same error on hte same line. not theDiv = document.getElementbyId('my_div'); document.theDiv.style.height = theDiv.style.height = parseInt(theDiv) + 1 + "px"; you've already specified the document object in theDiv variable. Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022305 Share on other sites More sharing options...
Dennis1986 Posted March 6, 2010 Share Posted March 6, 2010 theDiv = document.getElementbyId('my_div').style.height; theDiv = parseInt(theDiv) + 1 + "px"; Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022308 Share on other sites More sharing options...
jasonc Posted March 6, 2010 Author Share Posted March 6, 2010 theDiv = document.getElementbyId('my_div').style.height; theDiv = parseInt(theDiv) + 1 + "px"; just tried that and still i am getting this error. on this line theDiv = document.getElementbyId('my_div').style.height; Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022312 Share on other sites More sharing options...
jasonc Posted March 6, 2010 Author Share Posted March 6, 2010 ok i have created a stand alone file to test this out without any other names, tags or otherwise interfering with the code as i have been looking around and some site are suggesting that duplicate names or tags could cause problems. so this is my code now... <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/javascript"> function increaseDiv() { alert("h"); // errors on the next line theDiv = document.getElementbyId('my_div').style.height; // theDiv = parseInt(theDiv) + 20 + "px"; } function decreaseDiv() { theDiv = document.getElementbyId('my_div').style.height; theDiv = parseInt(theDiv) - 20 + "px"; } </script> </head> <body> <div> <input type="button" value="+" onclick="javascript:increaseDiv();"> <input type="button" value="-" onclick="javascript:decreaseDiv();"></div> </div> <div id="my_div" style="height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555;"></div> </body> </html> and still i get the error on the first theDiv line Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022318 Share on other sites More sharing options...
Dennis1986 Posted March 6, 2010 Share Posted March 6, 2010 getElementbyId = getElementById Quote Link to comment https://forums.phpfreaks.com/topic/194327-click-buttons-to-increaesedescrease-height-of-div/#findComment-1022390 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.