0

Hi i have a problem with load file when my window browser change width. My seperate with on 769px

<script type="javascript">
jQuery(document).ready(function($){
 loadJS = function(src) {
     var jsLink = $("<script type='text/javascript' src='"+src+"'>");
     $("head").append(jsLink); 
 };

$(window).bind("load", function() {
    var width = $(window).width();
    if (width <= 768) {
        loadJS("js/selectFx.js");    }
    else {
        loadJS("js/selectFx_769.js");
    }
});

});
</script>

OK, U have right with load file.

I have a file which is responsible for the menu is in javascript.

I made two such files that I want to work depending on the resolution, which the javascript code can be divided so that going abroad to load a second 786 code?

Currently this so that for the first time in loading checks the resolution and the fragment is loaded, and I would like to work is responsive.

<script type="javascript">
if (window.innerWidth>=769)
{
file code
}
</script>
kondisz
  • 3
  • 3
  • 2
    The `load` event on window is triggerd when it ends loading the document, I think you want to use the `resize` event. Right ? – DontVoteMeDown Oct 02 '14 at 14:47
  • ^ Yes $(window).on('resize',function(){...loadJs here}) – SSA Oct 02 '14 at 14:49
  • 1
    like @DontVoteMeDown write, you should use `resize` event BUT keep in mind that on every resize you will load your lib. I think that bedder approach would be to load one lib that checks width and fires/ uses different methods depending on width. Also in resize solution there is possibility to load 'normal' and 769 js – Michał Fraś Oct 02 '14 at 14:52
  • I would also expect `var jsLink = $("");` or better: use http://api.jquery.com/jquery.getscript/ – mplungjan Oct 02 '14 at 14:55
  • 1
    @MichałFraś said right. The resize event fires on each pixel changed when the user is dragging... so it can be called a hundred times in a simple resize. I recommend readding [this post](http://stackoverflow.com/q/5489946/1267304). – DontVoteMeDown Oct 02 '14 at 14:58
  • http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/ – mplungjan Oct 02 '14 at 14:59

1 Answers1

-1

Change your binding to 

window.addEventListener("resize",
  function(){
     var width = $(window).width();
       if (width <= 768) {
          loadJS("js/selectFx.js");    
       }
       else {
          loadJS("js/selectFx_769.js");
       }
});

Or use $(window).resize(function(){ //code here } ); if you don't want to write vanilla js code

Cosmin
  • 2,184
  • 21
  • 38
  • 1
    Why on earth use an addEventListener when you have jQuery loaded and use it in the event handler? – mplungjan Oct 02 '14 at 14:50
  • I've explained him how to do it in javascript aswell. What's your problem ? – Cosmin Oct 02 '14 at 14:52
  • You are using jQuery inside plain JS. That is plain silly. Just change your addEventListener – mplungjan Oct 02 '14 at 14:54
  • After the code there is a paragraph which explains the jquery way. – Cosmin Oct 02 '14 at 14:57
  • Is it very hard to change the addEventListener or the $(window).width() inside it? OP is a noob so don't make it harder to understand... The question is marked jQuery. Also beware of resize triggering your code for every pixel it is resizing – mplungjan Oct 02 '14 at 15:01