Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Thanked 0 Times in 0 Posts

    Increment width of div onClick

    Hey everyone,

    I've got a div whose width I'm trying to modify when you click either the plus or minus button (incremental percentage-based).

    The following is what I've written in an effort to accomplish this:
    <script type="text/javascript">
    function modify_jump(way) {
    	//check if we should increment or decrement
    	if (way == "inc") {
    		//two plus signs will increment our variable by one
    	} else if (way == "dec") {
    		//two minus signs will decrement our variable by one
    	var jumpWidth = "<div class='point_bar block' style='width: " + jumpValue + "%'></div>";
    	var jumpValue = "Total: " + jumpValue;
    	document.getElementById('jump_bar').innerHTML = jumpWidth;
    	document.getElementById('jump_value').innerHTML = jumpValue;
    	<div class="power_tracker">
    		<p>Force Jump</p>
    		<input type="button" value="-" id="jump_subtract" class="tracker_button block" onClick="modify_jump('dec')"></input>
    		<div id="jump_bar" class="bar_container block">
    			<div class="point_bar block"></div>
    		<input type="button" value="+" id="jump_add" class="tracker_button block" onClick="modify_jump('inc')"></input>
    		<br /><br />
    		<div id="jump_value" class="power_value">Total: </div>
    I really know nothing about javascript, and am just starting out. Any and all help would be greatly appreciated, and if you need any other info, I'm more than happy to do so!

  2. #2
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    United States of America
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by alkorda View Post
    Hey everyone,

    I've got a div whose width I'm trying to modify when you click either the plus or minus button (incremental percentage-based).

    The following is what I've written in an effort to accomplish this:
    Here's some code (a demo) that allows you to change the width by a percentage. It would be easier to change it by pixels than percent since percent has to be calculated but... whatever... here is it:

    <style type="text/css"></style>
    <script type="text/javascript">
     * change the width of a div by percent of the div width
    var change = function (delta) {
        var e = document.getElementById('testdiv'); // element of the testdiv
        var r = document.getElementById('report'); // where the size is shown
        var divWidth = parseInt(getStyle(e, 'width')); // get the current width
        var percent = Math.round(divWidth / 100); // get how many pixels is 1 percent
        var w = (divWidth + (percent * delta)); // current width * (1 percent) * desired delta
        e.style.width = w + 'px'; // change the div width
        var report = 'DIV is currently ' + w + 'px wide.<br />';
            report += 'One percent of the DIV is ' + percent + ' pixels.<br />';
            report += 'Width was changed by ' + delta + ' percent.<br />';
            report += 'Width was changed by ' + (percent * delta) + ' pixels.<br />';
        r.innerHTML = report; // display it on the screen
     * get live runtime value of an element's css style
     *   http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element
     *     note: "styleName" is in CSS form (i.e. 'font-size', not 'fontSize').
    var getStyle = function (e, styleName) {
        var styleValue = "";
        if(document.defaultView && document.defaultView.getComputedStyle) {
            styleValue = document.defaultView.getComputedStyle(e, "").getPropertyValue(styleName);
        else if(e.currentStyle) {
            styleName = styleName.replace(/\-(\w)/g, function (strMatch, p1) {
                return p1.toUpperCase();
            styleValue = e.currentStyle[styleName];
        return styleValue;
    <div style="overflow:hidden;width:50%;height:200px;border:1px solid #000;padding:12px;" id="testdiv">
    I therefore ask the Congress, above and beyond the increases I have earlier requested for space activities, to provide $
    <input type="button" value="-1 percent" onclick="change(-1);" />
    <input type="button" value="+1 percent" onclick="change(+1);" />
    <input type="button" value="-5 percent" onclick="change(-5);" />
    <input type="button" value="+5 percent" onclick="change(+5);" />
    <p id="report"></p>
    And if you want to try it out, here's a live version (same as the code above): LINK

    Hope this helps.
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov


Posting Permissions

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