-1

This is driving me insane. At some point everything seemed to be working fine but suddenly everything stopped working and I have no idea why.

I have a set of divs with a class for which I want to hide everything but the first four divs.

<div id="container">
    <div class="item">content 1</div>
    <div class="item">content 2</div>
    <div class="item">content 3</div>
    <div class="item">content 4</div>
    <div class="item">content 5</div>
</div>

And I have the following in the head of the doc

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
<script>
    $(window).load(function() {
        $(".item:gt(3)").hide();
    }); 
</script>

Why doesn't this work?

I have to say the the ".item" divs load dynamically based on a variable that is set on the URL. Something like mydoamin.com/myitems/?zicode=10005

So the items displayed come from an external database and loaded in the page.

My assumption was that $(window).load waits for all those items to exist in the document. Am I wrong? and in that case, how can I make sure to execute a function only after everything is really loaded?

Andrei 'finelord' Baibakou
  • 565
  • 2
  • 10
user3389286
  • 33
  • 2
  • 4

3 Answers3

4

Instead of $(window).load(function() { you need to use the function that waits for the DOM to be fully loaded.

$(document).ready(function() {
    $(".item:gt(3)").hide();
});

Demo

Tricky12
  • 6,752
  • 1
  • 27
  • 35
  • Still doesn't work because my items are loaded dynamically. if the items are already in the HTML then yes, this works. But since my items load at a different moment, how can I make sure that my .hide function is the last thing to be executed? – user3389286 Jul 22 '14 at 17:59
  • Then put your code to hide everything at the end of all executing code in the `$(document).ready()` function. This is one of the reasons why just spattering random function declarations that will run as they are hit is a bad idea. You "don't know" when they're run. Declare you functions as variables, and call them specifically before you try to hide anything. – krillgar Jul 22 '14 at 18:13
  • 1
    Also, that revelation completely changes the way we'd all approach solving the issue. This is why sharing all of your code is important. – krillgar Jul 22 '14 at 18:13
1

$(window).load() is not the same as DOM ready. Use this instead:

$(function () {
    $(".item:gt(3)").hide();
}

http://jsfiddle.net/murrayju/FCvCs/

murrayju
  • 1,752
  • 17
  • 21
-1

Try to use something like this:

function itemHide() {
    $(".item:gt(3)").hide();
}
window.onload=itemHide;

Hope this will help you.

Regent
  • 5,142
  • 3
  • 21
  • 35
Naveen Chandra Tiwari
  • 5,055
  • 3
  • 20
  • 26
  • The OP was already dong their work in the `window.onload` event. – krillgar Jul 22 '14 at 17:40
  • @krillgar Could you please explain why downvote,because the way of using window.load is wrong. Have you tried the code or just downvote – Naveen Chandra Tiwari Jul 22 '14 at 17:41
  • 1
    The code that you posted is a pure JavaScript version of the code that the OP used with jQuery. Your line `window.onload=itemHide;` will run at the same time as `$(window).load(function() { itemHide(); });`. There is no difference between the two. – krillgar Jul 22 '14 at 17:45