[jQuery] Re: Quick question

[Michael Geary]

First, let's indent the code so it's easier to follow:

    $(document).ready(function(){
        if(document.body.offsetWidth > 1024 ) {
            $("#wrapper").css(function() {
                $(this).animate({width: "1024px"}, 1000);
            });
        }
    });

Now, where you went wrong is calling the .css() method. Instead, simply call
.animate() directly:

    $(document).ready(function(){
        if(document.body.offsetWidth > 1024 ){
            $("#wrapper").animate({width: "1024px"}, 1000);
        }
    });

Why did your code work when you used .click() instead of .css()? It probably
looked something like this:

    $(document).ready(function(){
        //if(document.body.offsetWidth > 1024 ) {
            $("#wrapper").click(function() {
                $(this).animate({width: "1024px"}, 1000);
            });
        //}
    });

Well, .click(someFunction) means "call someFunction when the mouse is
clicked, and pass it the DOM element as 'this'". So, when you clicked the
mouse, it called your anonymous function with "this" as your wrapper
element. You then called $(this) to get another jQuery object that you could
call .animate() on - so it worked just like calling $('#wrapper').animate()
directly.

One other little shortcut you might like (or might not, it's a matter of
taste). You can simplify the document ready thing so it looks like:

    $(function(){
        if(document.body.offsetWidth > 1024 ){
            $("#wrapper").animate({width: "1024px"}, 1000);
        }
    });

And finally, a slightly more "jQuery-ish" way to check the width:

    $(function(){
        if( $('body').width() > 1024 ){
            $("#wrapper").animate({width: "1024px"}, 1000);
        }
    });

I don't know if there's any real advantage to using $('body').width()
instead of document.body.offsetWidth, though.

-Mike

> From: Overshee
> 
> I want an id on a page I'm developing to get bigger if a certain
> condition is met, however, I can't get the code to work... can anybody
> fix this up for me?
> 
> $(document).ready(function(){
> if(document.body.offsetWidth > 1024 ){
> $("#wrapper").css(function()
> {
> $(this).animate
> ({width: "1024px"}, 1000);
> });
> }
> });
> 
> this is my first time really working with jQuery, so any help would be
> great.  Thanks!
> 
> P.S. the code works fine without the if(...) and with .click instead
> of .css, but i want it to be automatic.
>