asked on

Change div position when checkbox is checked/unchecked

I have a checkbox on my page with a unique id of 'myCheckboxName'. I have a div further down the page that is absolutely positioned, with a div id of 'myDiv'. I need to adjust the 'left' position from '649px' to '598px' of 'myDiv' depending on if the checkbox is checked or not.

checked = left: 598px
unchecked = left: 649px

I need to do the same with a dropdown menu with an id of 'myDropdown'. If a specific option is selected in the menu, it should change the position of 'myDiv' to a specified absolute position.

Any ideas?

Eduardo Ciciliato

Try this:

function checked(){
    if(document.getElementById('myCheckboxName').checked = "checked"){
        document.getElementById('myDiv').style.left = '598';
    }else{
        document.getElementById('myDiv').style.left = '649';
    }
}

<input type="checkbox" id="MyCheckboxName" onClick="checked();">

Open in new window

leakim971

play with :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.pos598 { position: absolute; top: 80 px; left: 598px;background:#888; color:#F33}
.pos649 { position: absolute; top: 80 px; left: 598px;background:#888; color:#00F}
</style>
</head>
<body>
<input type="checkbox" onclick="if(this.checked) document.getElementById('mydiv').setAttribute('class','pos649');else  document.getElementById('mydiv').setAttribute('class','pos598');" />
<br />
<select onchange="document.getElementById('mydiv').setAttribute('class',this.value)">
    <option value="">Choose one...</option>
    <option value="pos598">598</option>
    <option value="pos649">649</option>
</select>
<br />
<select onchange="if(this.selectedIndex>1) document.getElementById('mydiv').setAttribute('class','pos649');else  document.getElementById('mydiv').setAttribute('class','pos598');">
    <option value="1">598-1</option>
    <option value="2">598-2</option>
    <option value="3">649-1</option>
    <option value="4">649-2</option>
</select>
<div id="mydiv" class="pos598">Here</div>
</body>
</html>

Open in new window

Michel Plungjan

Why not

<input type="checkbox" onclick="document.getElementById('mydiv').className=(this.checked)?'pos649':'pos598'"

or

<input type="checkbox" onclick="document.getElementById('mydiv').left=(this.checked)?'649px':'598px'"

I can never remember if it is .left or style.left though

James_Avery

ASKER

Hey thanks for the quick response!

Lets say I have a whole bunch of checkboxes with unique names/ids, is there a way I can trigger the function with a variable so I don't have to rewrite the function over and over in the head of the page?

Something like this:
onclick='checked(myDiv3);

or

onclick='checked(myDiv2)

Thank you for your help!

James_Avery

ASKER

I am not sure these solutions are working for me. I don't want to have to create a style for the checkboxes. I believe this is unnecessary. I just need to bump it either left or right a few pixels depending on whether the checkbox is checked.

ASKER CERTIFIED SOLUTION

Eduardo Ciciliato

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

... better here ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.pos598 { position: absolute; top: 80 px; left: 598px;background:#888; color:#F33}
.pos649 { position: absolute; top: 80 px; left: 649px;background:#888; color:#00F}
</style>
<script language="javascript">
	function changeStyle(o) {
		if(o.checked) {
			document.getElementById(o.getAttribute("value")).setAttribute('class','pos649');
		}
		else {
			document.getElementById(o.getAttribute("value")).setAttribute('class','pos598')
		}
	}
</script>
</head>
<body>
<input type="checkbox" onclick="changeStyle(this);" value="div1" />&nbsp;Div1<br />
<input type="checkbox" onclick="changeStyle(this);" value="div2" />&nbsp;Div2<br />
<input type="checkbox" onclick="changeStyle(this);" value="div3" />&nbsp;Div3<br />
<input type="checkbox" onclick="changeStyle(this);" value="div4" />&nbsp;Div4<br />
<input type="checkbox" onclick="changeStyle(this);" value="div5" />&nbsp;Div5<br />
<br />
<div id="div1" class="pos598">I'm in div 1</div><br />
<div id="div2" class="pos598">I'm in div 2</div><br />
<div id="div3" class="pos598">I'm in div 3</div><br />
<div id="div4" class="pos598">I'm in div 4</div><br />
<div id="div5" class="pos598">I'm in div 5</div><br />
</body>
</html>

Open in new window

Michel Plungjan

"Use mplungjan solution" ;) thanks