Run jQuery code once jQuery loaded

Question

I have jQuery loaded before the closing tag on my page.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

The majority of my js is loaded below this in

    <script src="js/script.js" type="text/javascript"></script>

Which works well. There is some ad code that I need to run in the head tag. This works fine usually however I want to add a responsive exception. eg

    var mob = 0;
    if(jQuery(window).width() < 727)  {
        mob = 1;
    }
    if(mob)  {console.log('run special mob related code');}
    else {console.log('run special desktop related code');}

Because my code is in the I get the error ReferenceError: jQuery is not defined. Is there a way around this? The ad code doesn't run unless it is in the head, but I can't really move the jquery into the head as I have this on multiple sites and may affect how other plugins run?

You cannot use jQuery var or $ unless you load jQuery library.. If you can't load it.. then don't use the jQuery var there.. — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Aug 7, 2013 at 1:18
You can't run jquery code before the script tag that includes it on a given page. — Rooster
– Rooster, Commented Aug 7, 2013 at 1:19
Did yoy try encasing that piece of code in DOM ready handler — Sushanth --
– Sushanth --, Commented Aug 7, 2013 at 1:21
I think this link might help you. stackoverflow.com/questions/3087206/… — redappleorigin
– redappleorigin, Commented Aug 7, 2013 at 1:22
How complicated is the code you wan't to run? Maybe you can just use plain js for that (of course you can always use plain js) ,did that for a splash screen for the same reason although I've used jQuery for the rest of the project. — Marcel Gwerder
– Marcel Gwerder, Commented Aug 7, 2013 at 1:22

Dimitri Vorontzov · Accepted Answer · 2013-08-07 01:23:30Z

3

Why not just use something like this:

if (document.documentElement.clientWidth < 727) {
mob = 1;
}

answered Aug 7, 2013 at 1:23

Dimitri Vorontzov

8,13412 gold badges52 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ak85 Over a year ago

Yes this is what I was after thanks. I wanted to do it in plain js but wasn't able to find anything about the docuemnt.width. Thanks!

Dimitri Vorontzov Over a year ago

EDITED MY COMMENT: You're more than welcome, @ak85. Also, just food for thought: what happens if a non-mobile user opens the page in a browser window resized to below 727, and then expands it to full width?

ak85 Over a year ago

I am not sure it is a major issue though because I tihnk it will not affect to many users, however it is a good point, if I was using jQuery I would look at .resize(), do you know of an equivalent in js?

Dimitri Vorontzov Over a year ago

In many cases reverting to plain JavaScript is simpler. Check out this thorough but easy to read book: amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/…

Protector one · Accepted Answer · 2016-05-20 08:30:32Z

1

Early in your code, you could define a jQuery property on the window object, which will run your code that requires jQuery when it is reassigned by the actual jQuery object.

(function(){
  var _jQuery;
  Object.defineProperty(window, 'jQuery', {
    get: function() { return _jQuery; },
    set: function($) {
      _jQuery = $;

      // put code or call to function that uses jQuery here

    }
  });
})();

edited May 20, 2016 at 8:30

answered May 18, 2016 at 20:47

Protector one

7,4195 gold badges69 silver badges89 bronze badges

Collectives™ on Stack Overflow

Run jQuery code once jQuery loaded

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related