Moving inline Javascript to External Combined Javascript

Question

Hi There I am busy moving all my inline javascripts to a combined.js file. In my header I have the code below. I am working in wordpress.

The code below makes a slider function on my page. I have already moved the bulk part of the javascript to a combined js file.

<br /><br /><script>(function($){jssor_slider1_starter = function (containerId) {var jssor_slider1 = new $JssorSlider$(containerId, {$DragOrientation: 3, $ArrowNavigatorOptions: {$Class: $JssorArrowNavigator$, $ChanceToShow: 2 }}); function ScaleSlider() { var windowWidth = $JssorUtils$.$GetWindowSize(window).x; if (windowWidth) jssor_slider1.$ScaleWidth(windowWidth); else window.setTimeout(ScaleSlider, 30);}
        $Jssor$.$AddEvent(window, "load", ScaleSlider);

        $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);

};})(jQuery); Slider Javascript (function($){jssor_slider1_starter('slider1_container')})(jQuery);

I have tried moving these parts to the Js file, but do not use document.Write to write the html part to the page, instead I have kept the html part in the page, and was hoping that I can get the JavaScript function to execute once the custom.js is loaded and this will render the html as intended.

I have copied this part to the combine.js file.

(function($){jssor_slider1_starter = function (containerId) {var jssor_slider1 = new $JssorSlider$(containerId, {$DragOrientation: 3, $ArrowNavigatorOptions: {$Class: $JssorArrowNavigator$, $ChanceToShow: 2 }}); function ScaleSlider() { var windowWidth = $JssorUtils$.$GetWindowSize(window).x; if (windowWidth) jssor_slider1.$ScaleWidth(windowWidth); else window.setTimeout(ScaleSlider, 30);}

        $Jssor$.$AddEvent(window, "load", ScaleSlider);

        $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);

};})(jQuery);

and also this part

(function($){jssor_slider1_starter('slider1_container')})(jQuery);

but I am not having luck

any ideas why this script executes correctly inline, but not when I include it into the js file will be appreciated, and also any advice on how to implement the call from the external combined.js file to make this work will be much appreciated

David Lee · Accepted Answer · 2013-07-21 19:24:15Z

2

You need to have the slider1_container div rendered first before you can use it, try putting your JS call on the footer or wrap this:

(function($){jssor_slider1_starter('slider1_container')})(jQuery);

like this:

jQuery(document).ready(function() {
  (function($){jssor_slider1_starter('slider1_container')})(jQuery);
});

so it waits for the document to be ready before you execute the JS.

answered Jul 21, 2013 at 19:24

David Lee

8717 silver badges21 bronze badges

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

1 Comment

Gerald Ferreira Over a year ago

Hi David - very good tip, However my external script is being loaded <script async></script> when I take out the async the script works, when I place it back again it does not

davnicwil · Accepted Answer · 2013-07-21 19:37:20Z

1

If you have all that JS in an external file combine.js, just include it in the HTML using a script tag like this:

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

The javascript will then run at the point in the HTML that the script tag is included, just like the script tags you have in your example with the javascript code in the body of the tag.

N.B. you'll probably want to put the script tag at the bottom of the page for best performance.

That's it, should just work. If it doesn't, check the javascript console for errors.

answered Jul 21, 2013 at 19:37

davnicwil

31.4k21 gold badges116 silver badges135 bronze badges

3 Comments

Gerald Ferreira Over a year ago

Hi, This is exactly how I have it, when I place the script in asynchronous loading it breaks... when I remove it, it works again

davnicwil Over a year ago

Sorry, what do you mean by asynchronous loading? When you load in an external script using the above tag, it will block the page until the script is downloaded and executed. That's pretty synchronous, and it's why for performance it's best to put it at the bottom, after the rest of the DOM is loaded. And I don't understand how it can work when you remove it!? Do you mean it works when you revert to how it is in your example?

davnicwil Over a year ago

Having seen your comment on the other answer I see you're using the async attribute to load the script asynchronously. If you want to do this, make sure your functions are only run after the appropriate divs have been parsed in the HTML. You can use David Lee's jQuery(document).ready solution for this or just declare named functions in the global namespace and call them inside script tags in the appropriate place in your HTML. Or, alternatively, don't use async and place the tag at the bottom of the body. There will likely be no performance difference noticed either way in this case.

Collectives™ on Stack Overflow

Moving inline Javascript to External Combined Javascript

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related