Increment width of div onClick

alkorda · 07-15-2011, 09:45 PM

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:

Code:

<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
		jumpValue++;
	} else if (way == "dec") {
		//two minus signs will decrement our variable by one
		jumpValue–;
	}
	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;
}
</script>
	<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>
		</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>
	</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!

Krupski · 07-16-2011, 12:11 AM

Quote:

Originally Posted by alkorda

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:

Code:

<html>
<head>
<title></title>
<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;
}
</script>
</head>
<body>

<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 $
</div>

<p>
<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>

<p id="report"></p>

</body>
</html>

And if you want to try it out, here's a live version (same as the code above): LINK

Hope this helps.