2

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?

asked Aug 7, 2013 at 1:16
6
  • 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.. Commented Aug 7, 2013 at 1:18
  • 1
    You can't run jquery code before the script tag that includes it on a given page. Commented Aug 7, 2013 at 1:19
  • Did yoy try encasing that piece of code in DOM ready handler Commented Aug 7, 2013 at 1:21
  • I think this link might help you. stackoverflow.com/questions/3087206/… Commented Aug 7, 2013 at 1:22
  • 1
    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. Commented Aug 7, 2013 at 1:22

2 Answers 2

3

Why not just use something like this:

if (document.documentElement.clientWidth < 727) {
mob = 1;
}
answered Aug 7, 2013 at 1:23
Sign up to request clarification or add additional context in comments.

4 Comments

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!
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?
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?
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/…
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
 }
 });
})();
answered May 18, 2016 at 20:47

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.