Javascript : Change Div Length

I want to change the div length and am using this code but it's not working. Please help me out. I am doing this through javascript.

function upBig() { var len = document.getElementById('div'); var h = parseInt(len.style.height); var a = 10; len.style.height = h-a+"px"; }

-------------Problems Reply------------

function upBig(id,ud) {
var div=document.getElementById(id);
var h=parseInt(div.style.height)+ud;
if (h>=1){
div.style.height = h + "px";
}
}

<div style="background:red;height:250px" id="div">HELLO 250px</div>
<div>
<input type="button" value="- 10 px" onclick="upBig('div', -10);">
<input type="button" value="+ 10 px" onclick="upBig('div', +10);">
</div>

DEMO

Note : you can change the values of course by what you want

The height property returns value in px so this should work

len.style.height = (parseInt(h)-a)+"px";

function upBig() {
var e = document.querySelector('#div'); // Newer browsers only...
e.style.height = (parseInt(e.style.height || e.clientHeight(), 10) - 10).toString() + 'px';
}

Your code didn't work, since element.style.height only reads the height if it is set in the elements style attribute, which is often not the case. clientHeight() get's what is actually the height of the element as shown to the user.

function upBig()
{
var div=document.getElementById('div');
var a = 10;

var h=parseInt(div.style.height)+a;
div.style.height = h + "em"; // I'm using "em" instead of "px", but you can use px like measure...
}

Category:javascript Views:3 Time:2018-12-03

Related post

  • Javascript change div content upon a click 2011-05-02

    I'm pulling a content from PHP array and I have a situation like this: <div class="weight-display"> <span>04/25/2011</span> <span>100lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span

  • JavaScript: Change Div Background After Time 2011-06-28

    I have an advertisement section on my website. For most users, this loads just fine and works as intended. However, if the user has an ad-blocker of sorts, the advertisement doesn't show up and an empty area of the site is displayed. My solution? I w

  • JavaScript change div color with link 2012-01-10

    This seems really simple but Im brand new to JavaScript. I have a link on my page. When you click this link 2 things happen. 1) Using html the page jumps to the location of the referenced anchor tag on the page. 2) The div that holds the link changes

  • Javascript change Div style 2012-04-09

    I want that part 1 onclick div style changes and part 2 again on click it comes back to normal. I tried doing so but I failed to achieve the part 2 results. Following is the Javascript code function abc() { document.getElementById("test").style.color

  • javascript change div based on dropdown 2012-03-02

    I have a dropdown list with 2 options: <select name="list" size="1"> <option value=1>Option 1</option> <option value=2>Option 2</option> </select> And i want to set <span id=tag></span> to display diffe

  • Change div id into javascript variable 2011-04-27

    Ok so now I am using the code below which works fine. The selected option is in the variable:'val' . but now I want to change the div id. So how do I change the value of 'var_div' into the value of 'val'? <form name="form1" method="POST"> <s

  • Javascript changing several divs classes, tabbed content 2011-09-12

    I am making some tabbed content, I have the tabs inline and overlapping each other slightly, meaning they have three states: inactive tab ("it" class), active tab ("at" class) and trailing tab ("tt" class) which follows the active tab. In the code sa

  • javascript hiding divs 2010-07-26

    I want to be able to have a javascript function that hides divs for me. For example, I have something like <div id='container'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <d

  • javascript change innerhtml 2010-02-12

    ok im new at javascript, but im trying to change the innerhtml of a div tag, heres my script and its not working: <head> <script type="text/javascript"> function var1() { document.getElementById('test').innerHTML = 'hi'; } window.onLoad =

  • JavaScript change to DropDownList.SelectedIndex not submitted 2010-05-26

    So, I have a form to submit fighters. You write his/her name, country, and then the team they fight for + the team's country. When you start typing the name I have constructed my own Ajax AutoCompleter. It will find existing fighters that might match

  • Change DIV order with jquery 2010-06-18

    I'm working on a client's HTML based site and need to randomly order a set of Divs on refresh of a page. I would normally handle this through PHP and a database call, but it's a static site. So, I'm wondering if anyone knows how to randomly display a

  • JavaScript array's length method 2011-03-17

    Can anyone explain why the second alert says 0 ? var pollData = new Array(); pollData['pollType'] = 2; alert(pollData['pollType']); // This prints 2 alert(pollData.length); // This prints 0 ?? --------------Solutions------------- The length of the ar

  • Changing div background color when a link inside the div is clicked 2011-06-05

    So I have this button that is just actually a div and I have a link inside the div <div id='button'> <a href='#'>Link</a> </div> I am able to use CSS to change the background color when the link is hovered over. However, how d

  • JavaScript DOM childNodes.length also returning number of text nodes 2011-06-15

    In JavaScript DOM, childNodes.length returns the number of both element and text nodes. Is there any way to count only the number of element-only child nodes? For example, childNodes.length of div#posts will return 6, when I expected 2: <div id="p

  • Change Div style onclick 2011-07-11

    I have 2 tabs at the top of a page. When one tab is clicked, I would like that tab to have an "active" class and the other tab to have an "inactive" class so that the user can see what tab is currently selected. How can I go about doing this with jav

  • Change DIV's properties depending on the browser 2011-08-09

    I'm looking for a way to distinguish which browser is used and then change properties of the DIV's background. Right now I'm using a picture as a DIV's background and it has to have a fixed width and height. However, when the site is viewed from a mo

  • Why does setting positions in a subclass of Array not change its length? Should I not subclass array? 2011-09-16

    In the CoffeeScript program below, I create a subclass of Array which sets two positions in its constructor: class SetPositionsArray extends Array constructor: (x,y) -> @[0] = x @[1] = y myLength: -> @length sp_array = new SetPositionsArray 1,

  • Change div class onclick - and *save* the change 2011-11-19

    There are many questions that ask how to change the class of a div in a JavaScript click handler, e.g., here: Change Div style onclick. I understand that well (just change .className), and it works. However, when I follow a link from my page to somew

  • InnoDB: Changing the length of a VARCHAR primary Key 2010-11-24

    I have a table in InnoDB which uses a VARCHAR based ForeignKey: CREATE TABLE `portal_equity` ( `isin` varchar(12) NOT NULL, ...., PRIMARY KEY (`isin`), ) ENGINE=InnoDB DEFAULT CHARSET=utf8 Another table has a ForeignKey constraint to that table: CONS

  • Persist javascript changes on the server side 2011-01-06

    Does any body know how to persist javascript changes on the server side. For example if I added items to a drop down list client side, how can i persist them in order to read them on the server side. By the way, Telerik control have this feature. ---

  • Jquery/Javascript looping div scroller 2011-10-24

    I'm trying to make 5 divs that loop in and out forever. The divs will have classes "text1" "text2" "text3" etc. Is there anything wrong with this code? It doesn't seem to work. $(document).ready(function(){ var num = 1 while(num =< 5) { $('.text'

  • Rails 3.1 not detecting Coffeescript and Javascript changes? 2011-11-06

    Sometimes I update my Coffee code in Rails 3.1 and it doesn't detect any of the changes, ie. I refresh my browser/cache and it still invokes the old script. Anyone know what causes this? EDIT: I even litter my entire scripts with "debugger" and none

  • Change variable length in SAS dataset 2011-12-02

    I need to change the variable length in a existing dataset. I can change the format and informat but not the length. I get an error. The documentation says this is possible but there are no examples. Here is my issue. My data source could change so I

  • Does changing a string to unicode change its length? 2011-12-12

    I have the String "0443" which has a length of 4. If I do encoding with UTF, will it change the length? I need to pass these character to initialisationVector, but initialisationVector accepts 8 bytes length. Is there any way I can make "0443" to 8 b

  • Javascript: changing opacity using .style.filter = 'alpha(opacity=' + - + ')' makes the png background replace alpha channel with black in IE7 2012-02-13

    I'm trying to make a website without jquery but I ran into this problem. (Javascript: changing opacity using .style.filter = 'alpha(opacity=' + ... + ')' makes the png background replace alpha channel with black). This is my first post, so I'm sorry

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.078 (s). 11 q(s)