Change value in div when click on button with jquery?

Question

Hi I have a div that I want to change some values in, when I click a button.

If I click on

<button id="image320x150">320 x 150</button>

then I want to change the width to 100 and the height value to 200 in the div.

and if I click on:

<button id="image320x200">320 x 200</button>

then I want to change the width to 50 and the height value to 100 in the div.

<div style="width:200px;height:287.5px;overflow:hidden;">

And I want the div to have the original values at first. Thanks a lot!

.....what? The values in the buttons and the values in your buttons have no correlation, unless I'm missing something... — Nick Craver
– Nick Craver, Commented Nov 3, 2010 at 12:05

nonopolarity · Accepted Answer · 2010-11-03 12:10:02Z

1

something like:

$('#try-me').click(function() {
    $('#aDiv').css({width: '30px', height: '20px'})
})

example: http://jsfiddle.net/UDvPR/

answered Nov 3, 2010 at 12:10

nonopolarity

152k142 gold badges497 silver badges788 bronze badges

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

Comments

Badr Hari · Accepted Answer · 2010-11-03 12:09:11Z

0

<script>
  $("#something").click(function () {
    $(#something2).css("width","100");
  });
</script>

http://api.jquery.com/css/

answered Nov 3, 2010 at 12:09

Badr Hari

8,48421 gold badges73 silver badges101 bronze badges

Comments

Marcis · Accepted Answer · 2010-11-03 12:10:21Z

0

I don't really got the logic but whatever.

<script type="text/javascript">
var sizes = [{width:100,height:200},{width:50,height:100}];
function setSize(i){ $("#target").css(sizes[i]); }
</script>
<button id="image320x150" onclick="setSize(0);">320 x 150</button>
<button id="image320x200" onclick="setSize(1);">320 x 200</button>
<div id="target" style="width:200px;height:287.5px;overflow:hidden;"></div>

answered Nov 3, 2010 at 12:10

Marcis

4,61727 silver badges24 bronze badges

7 Comments

Claes Gustavsson Over a year ago

Anpher, great thanks a lot it works as it should! But now another problem showed up, I need at the same time change the values here to the ones in sizes: var rx = 200 / coords.w; var ry = 287.5 / coords.h;

Marcis Over a year ago

@Claes Gustavsson You need to change values where?

Claes Gustavsson Over a year ago

In two variable thats called rx and ry thats in another function. var rx= 200/coords.w; and var ry=287.5/coords.h;

Marcis Over a year ago

@Claes Gustavsson still nothing. var rx= 200/coords.w; and var ry=287.5/coords.h; <- variables defined. what else do you need?

Claes Gustavsson Over a year ago

When I click on eg the button id="image320x150" above I want to set the values in the variables aswell, something like $('#image320x150').click(function() { $('var rx').("50"); $('var ry').("100"); });

|

Patrick · Accepted Answer · 2010-11-03 12:13:49Z

0

Jquery(document).ready(function() {

     jquery('#image320x150').click(function(){
         jquery('#div_id').css("width","100");
         jquery('#div_id').css("height","200");

      });

     jquery('#image320x200').click(function() {
         jquery('#div_id').css("width","50");
         jquery('#div_id').css("height","100");

      });
});

answered Nov 3, 2010 at 12:13

Patrick

7,7327 gold badges42 silver badges50 bronze badges

3 Comments

Patrick Over a year ago

if your using jquery... keep it in the (document).ready... function... its bad practice to not use it.

Nick Craver Over a year ago

JavaScript is case sensitive, you need to use jQuery, not a variant of it, as they won't be defined.

Patrick Over a year ago

its an example. in most cases $ is going to be used anyway, or if its being done in an editor intelisense will take care of it.

Collectives™ on Stack Overflow

Change value in div when click on button with jquery?

4 Answers 4

Comments

Comments

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related