javascript dollar sign variable not working

Question

I have following code in my Wordpress:

(function ($) {
  var $header = $("div.header");

  $(window).bind("scroll resize", function () {
    if ($(window).scrollTop() > 30) {
      $("div.header").stop().animate({
        'opacity': 0.24
      }, {
        duration: 1000
      });
    } else {
      $header.stop().animate({
        'opacity': 1
      }, {
        duration: 1000
      });
    }
  });
})(jQuery);

If statement kicks in when supposed but else never...

BUT

If I enclose it with:

jQuery(document).ready(function($) {        
  // code here
});

It's all fine. Why?

Thank you

What is the javascript error occuring or provide your wordpress url containing error so we can answer correctly. — Harsh Baid, Sep 05 '12 at 04:18
"Why doesn't it work??" is not an error message that I'm familiar with. — Explosion Pills, Sep 05 '12 at 04:18
@ExplosionPills: it's like "the sky is blue" and "water is wet" and "gravity is a downer" and "friction is a drag". true, but useless. — Marc B, Sep 05 '12 at 04:20
I've just edited my code. Hope it is all demystified now. I am not getting any JS errors reported in Chrome. — daniel.tosaba, Sep 05 '12 at 04:21
What's the error ? Is `$header` being declared ? What's `$header` value ? — Ricardo Alvaro Lohmann, Sep 05 '12 at 04:24
There is no error, it is very silent. It alerts object so it is declared. — daniel.tosaba, Sep 05 '12 at 04:30
I don't know if it makes any difference but jquery library is loaded by Wordpress latest version(3.4.1) — daniel.tosaba, Sep 05 '12 at 04:31
-1 **Just because "this code" and the "original code" are too drastically different.** Please take time to write good question not filled with bogus information. — , Sep 05 '12 at 04:34
As others have pointed out, in one case (`$header = ..`), the DOM is being accessed (though the jQuery element selector) *before* it is ready .. there are plenty of duplicates on this. The event fires sometime *after* the DOM is ready. — , Sep 05 '12 at 04:35
@SperanskyDanil I have just now... it's fine now. I thought that it represents `document.ready` already... Was I wrong? — daniel.tosaba, Sep 05 '12 at 04:39

Danil Speransky · Accepted Answer · 2012-09-05T04:42:06.983

May be you're trying to use jQuery when dom in not build. Try to use $(document).ready function:

(function ($) {
  $(document).ready(function () {
    $header = $("div.header");
    $header.remove();
  });
})(jQuery);

About what you have mantioned in the question:

jQuery(document).ready(function ($) {
  // code
});

It works because it do the same thing: it binds event handler on ready event and pass jQuery object as a parameter to the function as $.

Now what you did before:

(function ($) {
  $header = $("div.header");
  $header.remove();
})(jQuery);

Here you just declare anonymous function with named $ parameter:

function ($) {
}

And call it with jQuery object as a parameter, which will be available in the function as $:

(function ($) {
})(jQuery);

javascript dollar sign variable not working

1 Answers1

Linked