SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Location
    California
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing div height

    hello

    i would like to change the height of a div. i would like to do this in increments of 50 (each time the personclicks [+] for example). and same goes for subtracting height. unfortunately, the height var is '200px' when it's retrieved, and i cant add '200px' to '50' b/c it turns into '200px50' and thats not a valid height. :/

    Code:
    	function plusHeight(id) {
    		var height = document.getElementById(id).style.height;
    		height = height + '50';
    		document.getElementById(id).style.height = height;
    	}

  2. #2
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    	function plusHeight(id) {
    	        var el = document.getElementById(id);
    		var height = el.style.height;
    		height += 50;
    		el.style.height = height + 'px';
    	}
    The height value is returned as a numeric.

    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE

  3. #3
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    var i = 50;
    	function plusHeight(id) {
    	    var el = document.getElementById(id);
    	    alert(el.style.height);
                alert(parseFloat(el.style.height));
    	    el.style.height= parseFloat(el.style.height) +i + 'px';
    	}
    </script>
    
    <div id="divid" style="height:200px; border:2px solid red;" onclick="plusHeight(this.id)">click me</div>

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Location
    California
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •