jquery write css width

Question

I'd like to use jquery to manually write the css width of a series of element with a certain div class.

I'm trying to ask for the document width, record it as a variable, and then pass that variable to a new css 'width' rule...but my jquery skills are a little too meager

http://jsfiddle.net/ZEcCw/

Any ideas?

Mitya · Accepted Answer · 2012-07-28 14:56:08Z

2

You're currently setting the width as the string literal "fiftypercent" - you meant the variable fiftypercent. Also, your selector needs to be a string.

$('.block').css("width", fiftypercent);

What you had would have caused errors; with JavaScript, it always pays to look in the error console if something appears not to be working.

answered Jul 28, 2012 at 14:56

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

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

Comments

Mithrandir · Accepted Answer · 2012-07-28 14:57:28Z

1

Try this:

var documentWidth = $(document).width();
var fiftypercent = documentWidth /2;
$(".block").each( function() { $(this).css("width",fiftypercent + "px") });

This would give all elemets with class ".block" the desired width. Maybe you should considder this:

$(".block").each( function() { $(this).css("width","50%") });

answered Jul 28, 2012 at 14:57

Mithrandir

25.5k6 gold badges53 silver badges67 bronze badges

3 Comments

user962642 Over a year ago

the first option works perfectly. I was trying to get around using %'s for some other reasons...

user962642 Over a year ago

BUT I'm applying this class to an image and then sliding it down. since the width is fixed and the height is not, the image gets stretched. Is it possible to get each element to resize its height porportionally to the original image?

Mithrandir Over a year ago

@user962642: there are many proposals to this problem, depending on the circumstances. Have a look at this site: techpp.com/2008/08/02/… it might be, a the way for you to go.

alexn · Accepted Answer · 2012-07-28 14:56:38Z

1

You messed up your quotes:

var documentWidth = $(document).width();
var fiftypercent = documentWidth /2;
$(".block").css("width", fiftypercent);

Note that i added quotes around the selector (.block) and removed quotes around fiftypercent to reference the variable.

answered Jul 28, 2012 at 14:56

alexn

59.2k14 gold badges114 silver badges146 bronze badges

1 Comment

user962642 Over a year ago

This works until I add the next part of the code... AM I just missing another jquery language thing?jsfiddle.net/ZEcCw/28

Fredrik Sundmyhr · Accepted Answer · 2012-07-28 14:57:50Z

0

Try doing this

var documentWidth = $(document).width();
var fiftypercent = documentWidth /2;
$('.block').css("width",fiftypercent)

answered Jul 28, 2012 at 14:57

Fredrik Sundmyhr

8216 silver badges16 bronze badges

Comments

Ram · Accepted Answer · 2012-07-28 15:08:10Z

0

You have used quotation marks in wrong places. If you want to change the size of the div when user resize the window you can try the following:

$(window).resize(function(){
  var doc = $(document).width();
  $(".block").css("width", (doc / 2) );  
}).resize()

answered Jul 28, 2012 at 15:08

Ram

145k16 gold badges174 silver badges201 bronze badges

Collectives™ on Stack Overflow

jquery write css width

5 Answers 5

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related