0

Ok, I have a Jquery script, its function is to determine the width of the window, onload. If the width is greater than 642px it calls .load() to load an image slider. The reason for this is mobile devices will neither be served the images or js required for the slider.

This worked fine when jquery was loaded in the head. Upon moving to the footer its breaking. The code is included from the index.php. Could this be whats causing it? I would have thought once php built the page jquery parsed the content?

It appears the code is parsed before the jquery is loaded. Can anyone suggest a way to get round this please?

I have thought of creating the code as pure JS or using a delayed load, but I cant seem to figure out how to get it working.

There must be much better solutions? I feel like I’m missing something very obvious..

contents of the included script:

<script type="text/javascript">

$(window).bind("load", function() {
   // code here

    $(window).width();   // returns width of browser viewport

    var width = $(window).width(); 

    if (width >= 642)  {
        $('.slider-content').load("templates/include/slider.php", function () {
            $('.slider-content').show(200);
        });
    }

    else {
        //alert('small')
    }
}); 
</script>

Thanks, Adam

atoms
  • 2,993
  • 2
  • 22
  • 43
  • JavaScript code is loaded as it is encountered, and is considered blocking. Any dependencies HAVE to be loaded first. jQuery must be loaded BEFORE any reference to jQuery can be made. – Bic Feb 25 '14 at 16:52
  • 1
    [Stop paying jQuery tax](http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax) – Fabrizio Calderan Feb 25 '14 at 16:52
  • That's what I thought Bic, however there must be a way to insert the code after load... Thanks for the link Fabrizio I was reading that earlier. Will give it a go shortly, looks like it should solve my issues. is there any cleaner way to do this? – atoms Feb 25 '14 at 16:59
  • 2
    A cleaner way should be of course to avoid jQuery snippets in the head or in the middle of a page and to have a clear separation of your code. This requires to have all the scripts on the bottom, after jQuery inclusion – Fabrizio Calderan Feb 25 '14 at 17:06
  • You're using jQuery to bind the onload event. You could try binding the event using vanilla JS: `window.onload(function () { ... }` – Bic Feb 25 '14 at 17:07
  • @FabrizioCalderan that makes sense and it worked! I had already written a script tag to include a 'core.js' file just below jquery. Had it in my head that it needed to be inline, dont have a clue why. Thanks anyway. If you want to leave an answer and a link to the stop paying jQuery tax, I would be happy to accept it. Might end up helping another fool – atoms Feb 25 '14 at 18:28

1 Answers1

0

In some environments, you must use jQuery() instead of $(). See this question.

Other than that, your problem might have to do with the document not being complete yet or binding to an event that has already passed. Try this instead:

jQuery(document).ready( function($) {
    // Your code goes here. (You can safely use the $() function inside here.)
});
Community
  • 1
  • 1
P_Enrique
  • 647
  • 5
  • 15
  • How this could be related to the OP issue? – Fabrizio Calderan Feb 25 '14 at 16:53
  • He said it was "breaking". In the absence of something more specific, I supposed that meant "ReferenceError: $ is not defined". – P_Enrique Feb 25 '14 at 16:57
  • if `$` is undefined (and we assume no other libraries are loaded) even `jQuery` will be undefined, since `window.$` is just an alias for `jQuery()` – Fabrizio Calderan Feb 25 '14 at 17:01
  • Some platforms, for example WordPress, load jQuery in "noConflict mode" which means that the `$` alias is not available. [WordPress Codex: jQuery noConflict Wrappers](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers) – P_Enrique Feb 25 '14 at 17:27