ansaurus

Question

Jquery "hide on load" causing a Javascript error.

Answer 1

+2 A:

You're missing the anonymous function(function() { }) wrapper, like this:

$(document).ready(function() {
 $(".subitems").hide();
});

It's trying to do $(".subitems").hide().call() under the covers when it executes the ready handlers...but this isn't a function. Instead, it's executing immediately (not on document.ready) and throwing an error when document.ready tries to run the result of .hide().

Just to note, there's a shorter form of the above as well:

$(function() {
 $(".subitems").hide();
});

Nick Craver 2010-10-22 23:54:10

Bloody hell you are good! An answer in 30 seconds!... Works. I don't suppose you can post a link to somewhere that explains it in a bit more detail? It is brilliant that it works (so will mark as answer), however I would be lying if I said I understood why/how.

Wil 2010-10-22 23:58:23

ok... edited as I typed that comment! Many thanks! .... Just one thing that confuses me, why does it actually work and cause an error instead of just causing an error? (done +1, but have to wait to mark as answer)

Wil 2010-10-22 23:59:52

@Wil - Ok so `.ready()` takes a handler (like `.click()`, etc), it expects a *function* to run when the "event" (not a real event in this case) happens. What *was* happening is it was running `$(".subitems").hide()` *immediately* (like any other function call) then the *result* of that is what's being passed into `.ready()`. The problem is that's a jQuery object that `.hide()` returns (for chaining), not a `function` that has the [`.call()` method](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/Call).

Nick Craver 2010-10-23 00:02:38

Answer 2

+2 A:

As the error is solved, maybe there is another way to do it.
I guess you did'nt really want to hide on page-load, but want to hide if javascript is active(you use ready to have access to the objects). If I'm right, there is an easier way. Give the <html> a class

$('html').addClass('scripted')

(as <html> is known everytime/everywhere, you already can do this inside the <head>)

...then you will be able to hide the objects via css and don't have to wait for ready()

html.scripted .subitems{display:none}/*only hidden if js is off*/

Dr.Molle 2010-10-23 00:04:07

I can't mark as answer as the question was really about that specific problem (Which Nick solved), however, I really like this approach and will probably go with (a slight modification of) it. Thanks.

Wil 2010-10-23 00:08:43

ansaurus

tags:

views:

answers:

Jquery "hide on load" causing a Javascript error.

related questions