How to integrate "if" in jquery code

Question

i use jpreloader (http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/). When the preloading finishes, i call the header to move to the screen and i call the content by fading to the screen.

My header is a fixed div (as a sidebar), so when someone opens my page from a small screen, i would like that after the preloading, it calls a relative positioned div from the top to the screen.

Everything works with my code without declaring the window width but when i try to "handicrafting" the script with an "if", it stops working. I do not know anything about javascript, i tried to fabricate the code with some samples but i can not make it work...

The original javascript which works without window screen declaration :

<script type="text/javascript">
<!--

//If browser is IE8 or older we show IE specific page
if(ie < 9){
    ieMessage();
}

/*
* Call functions when dom is ready
*/
$(document).ready(function() {

    $('#header').css("left",-300);
    $('.background').css("left",-1380);
    $('#content').css("opacity",0);

    // Preload the page with jPreLoader
    $('body').jpreLoader({

        showSplash: true

    }, function() {

            $('#header').animate({"left":0}, 1200);
            $('.background').animate({"left":-1080}, 100);
            $('#content').delay(1000).animate({"opacity":1}, 2500);

    });

});
-->
</script>

The code which does not work but what i think it is not far from the truth (i hope) :

<script>

$(document).ready(function() {


    // Function to fade in image sprites
    $('.sprite').fadeSprite();

    // Function to animate when leaving page
    $('.transition, #nav a, #logo, #face a').leavePage();

    $('#content').css("opacity",0);

    if($(window).width() >= 1023){
        $('.background').css("left",-1380);
        $('#header').css("left",-300);  
     }else {
        $('.background').css("top",-500);
        $('#header').css("top",-230);
    },


    // Preload the page with jPreLoader
    $('body').jpreLoader({

        showSplash: true

    }, function() {

            $('#content').delay(1000).animate({"opacity":1}, 2500);
            $('#face').animateHome();
            $('#face').resizeFace();

            if($(window).width() >= 1023){
                $('.background').animate({"left":-1080}, 100);
                $('#header').animate({"left":0}, 1200);
            }else {
                $('.background').animate({"top":-300}, 100);
                $('#header').animate({"top":0}, 1200);
            }

    });

});


</script>

I use the following css :

#header {
top:0;
bottom:0;
left:0;
position:fixed;
width:300px;
}

#header .background {
position:fixed;
width:600px;
height:10000px;
left:-1080px;
top:-150px;
-webkit-transform:rotate(9deg);
-moz-transform:rotate(9deg);
-ms-transform:rotate(9deg);
-o-transform:rotate(9deg);
transform:rotate(9deg);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
background: #2e3740;
}

@media only screen
and (max-width: 1023px) {

#header {
position: relative;
display: block;
width:100%;
height: 230px;
}

#header .background {
position:relative;
width: 94%;
height:500px;
margin: 0 auto 0;
left: 0px;
top: -300px;
-webkit-transform:rotate(9deg);
-moz-transform:rotate(9deg);
-ms-transform:rotate(9deg);
-o-transform:rotate(9deg);
transform:rotate(9deg);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
background: #2e3740;
}
}

If someone can correct my code... Thanks in advance !

Answer 1

your have syntax errors,Try this code, the position of { is wrong and the : in css function shouldn't be there.

$(document).ready(function() {

    if($(window).width() >= 1023){

        $('.background').css("left",-1380).animate({"left":-1080}, 100);
        $('#header').css("left",-300).animate({"left":0}, 1200);
     }else {
        $('.background').css("top",-500).animate({"top":-300}, 100);
        $('#header').css("top",-230).animate({"top":0}, 1200);
    }

});

Edit Not sure what your javascript logic supposed to be doing but you can combine those like this,

<script>
if(ie < 9){
    ieMessage();
}
$(document).ready(function() {

    if($(window).width() >= 1023){

        $('.background').css("left",-1380).animate({"left":-1080}, 100);
        $('#header').css("left":-300).animate({"left":0}, 1200);
    {

    else {
        $('.background').css("top",-500).animate({"top":-300}, 100);
        $('#header').css("top":-230).animate({"top":0}, 1200);
    }

  $('#header').css("left",-300);
    $('.background').css("left",-1380);
    $('#content').css("opacity",0);

    // Preload the page with jPreLoader
    $('body').jpreLoader({

        showSplash: true

    }, function() {

            $('#header').animate({"left":0}, 1200);
            $('.background').animate({"left":-1080}, 100);
            $('#content').delay(1000).animate({"opacity":1}, 2500);

    });

});

</script>

Answer 2

You code that doesn't work has a brace around the wrong way. This probably happened because of the odd syntax shaping you are using; Try this;

<script>

$(document).ready(function() {

    if($(window).width() >= 1023) {
        $('.background').css("left",-1380).animate({"left":-1080}, 100);
        $('#header').css("left":-300).animate({"left":0}, 1200);
    } else {
        $('.background').css("top",-500).animate({"top":-300}, 100);
        $('#header').css("top":-230).animate({"top":0}, 1200);
    }
});