Setting Style Width/Height using function HTML

Question

I have this in the body:

<div id="map"style="width: 400; height: 400" ></div>

I tried creating a variable and updating it like this:

<div id="map"style="width: map_size; height: map_size" ></div>

I also tried creating a function as well as setting it another way:

function getComboA(sel) {
    map_size = sel.options[sel.selectedIndex].value;  
    $("#map").css("width", map_size);
    $("#map").css("height",map_size);

I attempted to get the value for map_size from a drop down menu, I'm not sure how to test if it's working correctly but the map is not showing up.

I'm new to this so I'm probably misunderstanding something basic, any help is appreciated.

udidu · Accepted Answer · 2012-10-11 15:48:20Z

1

I created a demo here..

http://jsfiddle.net/kN7UQ/2/

Is this helping?

UPDATE

$(function(){ //document ready... be sure to start your code after the document is ready

    $('select').bind('change', function(){ //this is binds to the 'change' event of the select box
        var dimension = $('select').val(); //here we are taking the selected value from the select box
        $('#map').css({ width: dimension +'px', height: dimension +'px' }); // this is where we are setting the dimension for the '#map' element, be sure to add 'px' to the dimension as i saw you didn't in your question
    });

});

edited Oct 11, 2012 at 15:48

answered Oct 11, 2012 at 15:25

udidu

8,6167 gold badges53 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Over a year ago

It doesn't work when I tried it in my code, can you explain the function that you posted? At which point does it reference the menu from which the value was selected?

Mike Over a year ago

Thank you, I'm still unclear though. Isn't the value of 'id' or the function set to be called for 'onchange' in the menu of any significance? What exactly is the 'change' event? I have several drop down menu boxes, how does the function know which one's input to process?

yougotiger · Accepted Answer · 2012-10-11 14:56:31Z

0

You have to define the values of our variables in Javascript before the script will recognize them. If they are .Net variables, then it won't recognize them, they're two indepenant systems. The following articles may help you bridge the two systems:

http://aspadvice.com/blogs/net_discoveries/archive/2012/08/30/Using-ASP.Net-to-Create-JavaScript-Code.aspx

http://aspadvice.com/blogs/net_discoveries/archive/2007/01/05/Using-ASP.Net-to-Create-JavaScript-Variables.aspx

answered Oct 11, 2012 at 14:56

yougotiger

4284 silver badges21 bronze badges

Comments

dsa · Accepted Answer · 2012-10-11 15:17:38Z

0

try this :)

http://jsfiddle.net/vXHLS/1/

answered Oct 11, 2012 at 15:17

dsa

765 bronze badges

Collectives™ on Stack Overflow

Setting Style Width/Height using function HTML

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related