www.webdeveloper.com
Results 1 to 2 of 2

Thread: Moving element with JavaScript/Drop-down List

  1. #1
    Join Date
    Feb 2011
    Posts
    2

    Moving element with JavaScript/Drop-down List

    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

  2. #2
    Join Date
    Feb 2011
    Posts
    2
    <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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles