Moving element with JavaScript/Drop-down List

**camayer** · 02-25-2011 01:51 PM

I have to be able to move a div tag that includes a select drop down menu with "top-right", "top-left", "bottom-right, "bottom-left" to the corresponding position within the webpage.

This is what I have so far. It works on the first change but after that it crashing and does weird stuff.

function changeCorner() {

var index_picked = document.getElementById("corner").selectedIndex;
var corner_picked = document.getElementById("corner").options[index_picked].value;

if (corner_picked == 'tr') {
document.getElementById('page').style.position = "absolute";
document.getElementById('page').style.top = 0;
document.getElementById('page').style.right = 0;
}
else if (corner_picked == 'tl') {
document.getElementById('page').style.position = "absolute";
document.getElementById('page').style.top = 0;
document.getElementById('page').style.left = 0;
}
else if (corner_picked == 'br') {
document.getElementById('page').style.position = "absolute";
document.getElementById('page').style.bottom = 0;
document.getElementById('page').style.right = 0;
}
else if (corner_picked == 'bl') {
document.getElementById('page').style.position = "absolute";
document.getElementById('page').style.bottom = 0;
document.getElementById('page').style.left = 0;
}
}

any suggestions? what am i leaving out? post if you want to take a look at the html

Cal

**camayer** · 02-25-2011 02:05 PM

<body>

<div id="page">

<form id="wrap">

<fieldset id="target">

<legend> Choose a position </legend>

<select id="corner" name="corner"onchange="changeCorner()">
<option value="">Select one</option>
<option value="tr">Top-Right</option>
<option value="tl">Top-Left</option>
<option value="br">Bottom-Right</option>
<option value="bl">Bottom-Left</option>
</select>

<legend> Choose a color </legend>

<select id="color" name="color" onchange="changeColor()">
<option value="">Select one</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="purple">Purple</option>
</select>

</fieldset>

</form>

</div>

</body>

Thread: Moving element with JavaScript/Drop-down List

Thread Tools

Display

Moving element with JavaScript/Drop-down List

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions