Why doesn't the jQuery script set the width of an element?

Question

James here. I'm working on a site that I want to have the same number of posts no matter what the screen resolution. I'm trying to use this script, but it's not working. It SHOULD get the width of the page document, subtract 400px, divide that number by 4, and then set the CSS of the element .entry to that math equation. Can anyone help me figure out what's wrong? I'm new to jQuery, so it's surprising I was able to even get this far.

EDIT: I solved my problem using this code in the end:

$(function() {
            var cwidth = $(document).width() - 100;
            var pwidth = cwidth - 150;
            var ewidth = (pwidth - 150)/5;
            $("#container").css("width", cwidth);
                $("#posts").css("width", pwidth);
                $(".entry").css("width", ewidth);
                $(".photo").css("width", ewidth);
});

So thank you all quite a bit for helping. However, I've ran into a few more problems. For some reason even though the script divides by 5, there are only 4 posts per row and the posts overflow out of the div they're in. Example: http://jamescharless.tumblr.com/ - I think this is because the div the entries are in doesn't have a width set in the CSS since it's added with jQuery. Does anyone know how to fix this? Also, I tried implementing masonry by David Desandro, and it just messes up the whole page. I think this is also because the div #posts and the div .entry doesn't get a width via CSS. Can anyone help me with either of these issues?

are you getting an error? if so, what is it ... check your console — Alex
– Alex, Commented Mar 31, 2012 at 17:40
@Xander - Uncaught ReferenceError: $ is not defined.. I have no clue what that means. — James Charless Dickinson
– James Charless Dickinson, Commented Mar 31, 2012 at 17:41
you forgot to include jQuery or you're referencing it incorrectly ... $ is the alias for the jQuery function ... — Alex
– Alex, Commented Mar 31, 2012 at 17:42
@Xander - WOW, I am so stupid! I added it now, but it's still not working. — James Charless Dickinson
– James Charless Dickinson, Commented Mar 31, 2012 at 17:43
change $("document") to $(document) and it should work ... — Alex
– Alex, Commented Mar 31, 2012 at 17:45

Jack Franklin · Accepted Answer · 2012-03-31 17:49:30Z

3

You need to do:

$(document).width()

Not

$("document").width()

Working JSFiddle: http://jsfiddle.net/WsZry/

$(function() {
    width = ($(document).width()-400)/4;
    $(".entry").css("width", width);
});

As document isn't a HTML element, it's a JavaScript property.

edited Mar 31, 2012 at 17:49

answered Mar 31, 2012 at 17:43

Jack Franklin

3,7556 gold badges30 silver badges35 bronze badges

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

8 Comments

Jared Farrish Over a year ago

Same goes for $(window), too.

James Charless Dickinson Over a year ago

Oh, duh! I did change it though, still doesn't work. I updated the question with a page I'm trying to get this to work on.

Jared Farrish Over a year ago

@JamesCharless - Firebug is indicating you need a ; at the end of the $() part, although I'm not sure why, it shouldn't be required.

Jack Franklin Over a year ago

@JamesCharless you need to add a semi colon at the end: $(function() { ... }); <-- add that last semi colon Not entirely sure why but that fixes it for me - updated my answer too.

James Charless Dickinson Over a year ago

@JackFranklin YAY! That fixed it! Thanks you rock! :)

|

Starx · Accepted Answer · 2012-03-31 17:41:15Z

0

You quoted the document inside double quotes $("document")

$(function() {
    var width = ($(document).width() - 400)/4;
    $(".entry").css("width", width);
});

answered Mar 31, 2012 at 17:41

Starx

79.3k50 gold badges187 silver badges266 bronze badges

1 Comment

Starx Over a year ago

@JamesCharless, I was wrong see the update. I have tested it.

DG3 · Accepted Answer · 2012-03-31 17:43:41Z

0

try removing quotes around document. try below code

    $(function() {
       var width = ($(document).width() - 400)/4;
       $(".entry").css("width", width);
    })

answered Mar 31, 2012 at 17:43

DG3

5,32617 gold badges54 silver badges63 bronze badges

1 Comment

James Charless Dickinson Over a year ago

I did, still doesn't work. I updated the question with a page I'm trying to get this to work on.

Collectives™ on Stack Overflow

Why doesn't the jQuery script set the width of an element?

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related