StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to integrate "if" in jquery code
text
Body
copied!<p>i use jpreloader (<a href="http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/" rel="nofollow">http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/</a>). When the preloading finishes, i call the header to move to the screen and i call the content by fading to the screen. </p> <p>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. </p> <p>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...</p> <p><strong>The original javascript which works without window screen declaration :</strong></p> <pre><code><script type="text/javascript">  </script> </code></pre> <p><br /> <strong>The code which does not work but what i think it is not far from the truth (i hope) :</strong></p> <pre><code><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> </code></pre> <p><br /></p> <p><strong>I use the following css :</strong></p> <pre><code>#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; } } </code></pre> <p>If someone can correct my code... Thanks in advance !</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload