0

i have a dropdown where there is a value of pixels and below is a div with some data and the div is of some width and height but what i need to do is when i select any value lets suppose i selct 350px then the size of the div should automatically adjust accordingly. i dont have any idea how to do that refer me any link so that i could get help from there. i am serching for it or any kind of help on google for the last one hour.

here is the html

              <td>
                <select name="sizi_pixel" id="drp">
                    <option value="1">100 Pixels</option>
                    <option value="2">200 Pixels</option>
                    <option value="3">350 Pixels</option>
                    <option value="4">450 Pixels</option>
                    <option value="5">600 Pixels</option>
                </select>
               </td>

and here is the div i want to resize automatically

               <div style=" border-width:3px;border-style:solid;border-color:#ff9900; height:400px; width:300px">

                    <input class="color" value="999">
                            <input class="color" value="999">
                            <input class="color" value="999">
               </div>

any help will be appreciated

3 Answers 3

0

This javascript should do the trick!

You need to attach an event listener to your select input, also change the options to represent the value in the box. And give your div an id, I gave it the id 'myDiv'.

you can also see it working here: http://jsfiddle.net/6avqc/1/

document.getElementById('drp').addEventListener('change', changeSize);

function changeSize() {
    var myDiv = document.getElementById('myDiv');
    var selectbox = document.getElementById('drp');

    var index = selectbox.selectedIndex;
    var value = selectbox[index].value;

    myDiv.style.width = value + 'px';
}​
1
  • thanx for your help and every one else Sep 28, 2012 at 22:29
0

Give your div an id and add an event listener for the change Event of your list view. Everytime the event is raised, you can change the size of the list

<script>
    $(function() {
        $("#drp").change(function() {
            $("#rect").width($(this).val() + "px");
        });
    });
</script>

you have to include jquery in your page and modify the vals of your list to match the widths

1
  • Mention that he needs to include jQuery library, before running any scripts.
    – moonwave99
    Sep 28, 2012 at 20:21
0

Here is an working example if you have additional questions feel fre to ask:

Jsfiddle DEMO: http://jsfiddle.net/kPFry/

<html>
<head>

<style>
    input {

        position: relative;
        width: 90%;

    }
</style>

<script>

function chng_div(src_id,div_id){

    var src_obj = document.getElementById(src_id);
    var div2chg = document.getElementById(div_id);
    div2chg.style.width = src_obj.value+"px";

}

</script>

</head>
<body>


    <select name="sizi_pixel" id="drp" onchange="chng_div('drp','div_to_chng');">
        <option value="100">100 Pixels</option>
        <option value="200">200 Pixels</option>
        <option value="350">350 Pixels</option>
        <option value="450">450 Pixels</option>
        <option value="500">600 Pixels</option>
    </select>

    <div style="border-width:3px;border-style:solid;border-color:#ff9900; height:400px; width:300px" id="div_to_chng">

        <input class="color" value="999">
        <input class="color" value="999">
        <input class="color" value="999">

    </div>


</body>
</html>
  • this is just an example, please do not use inline CSS styles ever long term it would cost you too much.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.