I am using a theme which references 4 javascript/jquery files and I am using a slider image which is referencing 3 javascript/jquery files. However, they are conflicting with each other.
What files are conflicting with each other and how can I fix this issue?
Thanks
<!-- Code for theme -->
<script src="js/libs/modernizr-2.6.2.min.js"></script>
<!-- Code for sliding banner -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- Code for theme -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>
<script src="js/main.js"></script>
1) .min is just minified version of file.
2) don't use both.
3) either use .min or normal jquery library.
<!-- Code for sliding banner -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- Code for theme -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/libs/modernizr-2.6.2.min.js"></script>
You don't need to add these:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>
Because you are loading jQuery1.10+ above all other scripts, so why do you need to add jQuery.min.js and jQuery.1.9.0.
As this code comment says:
<!-- Code for theme -->
For a theme you don't need multiple jQuery libs to be loaded in a single page.
I'm not sure but have you tried $.noConflict() ?
Related
Here is my project structure and my navbar toogler button is appearing but not working while i'm clicking the toggler button.
The order of the scripts is wrong, first you must go jquery, popper and finally bootstrap, since bootstrap requires them, put them like this
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
The order of scripts tag must be:
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
bootstrap requieres jquery for some functions
I have a problem with this site: http://www.gm-impianti.srl/index.html
when I open the site, and from the menu, i open the "portfolio" page, the instagram plugin is not loaded. If I load the page again, the plugin works. why?
this is the js that is not loaded on the first start:
<script src = "https://apps.elfsight.com/p/platform.js"> </script>
thanks in advance
Change the order of your scripts from
<script src="js/plugins.js"></script>
<script src="js/scripts.js"></script>
<script src="https://apps.elfsight.com/p/platform.js" ></script>
to
<script src="https://apps.elfsight.com/p/platform.js" ></script>
<script src="js/plugins.js"></script>
<script src="js/scripts.js"></script>
I have quite a bunch of script and libraries that I am using in my website, which takes like 5 to 8 seconds to load.
ex.
<script type="text/javascript" src="../lib_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib_components/angular/angular.js"></script>
<script type="text/javascript" src="../lib_components/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../lib_components/lodash/dist/lodash.min.js"></script>
<script type="text/javascript" src="../scripts/js/overdo.js"></script>
I want to show a loading bar till all the scripts have been loaded, can anyone guide me on whats needs to be done for that?
There is very simple approach you can use in case when all the scripts you want to load are loaded synchronously (you don't use modules loader, async attributes, etc) - like in your example.
The trick is add progress indicator script the very first on the page, before all your heavy scripts. It is also make sense to inline this script (because it shouldn't be too big ideally):
<script>
// some progress bar implementation progress.show()
console.log('showing progress, loading bar, etc.');
</script>
<script src="../lib_components/jquery/dist/jquery.min.js"></script>
<script src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib_components/angular/angular.js"></script>
<script src="../lib_components/angular-resource/angular-resource.min.js"></script>
<script src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../lib_components/angular-cookies/angular-cookies.min.js"></script>
<script src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../lib_components/lodash/dist/lodash.min.js"></script>
<script src="../scripts/js/overdo.js"></script>
<script>
// hiding loading bar
console.log('scripts loaded')
</script>
Now, for the implementation of the actual progress bar, it's up to you how and what to render. However, remember that depending on where you put those scripts DOM tree might not be loaded yet (if scripts are in <head>). I would anyway recommend to place scripts before closing </body>. The ideal structure for this approach would be:
<!DOCTYPE html>
<html>
<head>
<!-- some styles, no scripts here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="assets/styles.css" />
</head>
<body>
<div class="loading" hidden>Loading...</div>
<!-- Some application HTML code -->
<script>
// show/create progress/loading
var loading = document.querySelector('.loading')
loading.hidden = false
</script>
<!-- many script tags ... -->
<!-- ... -->
<script>
// hide/remove progress/loading
loading.parentNode.removeChild(loading)
</script>
</body>
</html>
I'm working with laravel for the first time, i'm currently running the 5.1.2 version, i'm having issues with including external js files from the /public/js/ directory into the master view file using the asset() function. it works with css files though. i have this in my master file:
<!-- load angularJS lib -->
<script src="{{ asset('js/angular/angular.min.js') }}" type="text/javascript"></script>
<!-- load angularJS loader lib -->
<script src="{{asset('js/angular/angular-loader.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/metro.js')}}" type="text/javascript"></script>
<script src="{{asset('js/app.style.js')}}" type="text/javascript"></script>
<script src="{{asset('js/Jquery/jquery-2.1.4.js')}}" type="text/javascript"></script>
Page renders HTML source code as such:
<!-- load angularJS lib -->
<script src="http://localhost/Online-Phone/public/js/angular/angular.min.js" type="text/javascript"></script>
<!-- load angularJS loader lib -->
<script src="http://localhost/Online-Phone/public/js/angular/angular-loader.min.js" type="text/javascript"></script>
<script src="http://localhost/Online-Phone/public/js/metro.js" type="text/javascript"></script>
<script src="http://localhost/Online-Phone/public/js/app.style.js" type="text/javascript"></script>
<script src="http://localhost/Online-Phone/public/js/Jquery/jquery-2.1.4.js" type="text/javascript"></script>
Including files located in "public/" folder.
1) "URL::asset()" works only with ".blade.php" file.
<script type="text/javascript" src="{{ URL::asset('js/jquery-ui.js') }}"></script>
<link rel="stylesheet" href="{{ URL::asset('css/jquery-ui.css') }}">
2) Plain file
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
Try this.
{{HTML::style('css/style.css')}}
{{ HTML::script('js/javascript.js') }}
Try this, It works
<script type="text/javascript" src="{{URL::asset('js/angular/angular.min.js')}}"></script>
Today i wanted to add datepicker() to my page.So I downloaded jqueryui and added then in the sequence below.
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/superfish.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="assets/validate.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/functions.js"></script>
<script src="js/wizard_func.js"></script>
<script src="check_radio/jquery.icheck.js"></script>
<script type="text/javascript" src="js/navi_artstyle.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript" src="js/mapmarker_func.jquery.js"></script>
It didn't work. It took me whole day to figure out what is wrong. it was the SEQUENCE of js files included!!! To work my code i had to include them like bellow.("jquery.js" position had to change)
<script src="js/superfish.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="assets/validate.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/functions.js"></script>
<script src="js/wizard_func.js"></script>
<script src="check_radio/jquery.icheck.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/navi_artstyle.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript" src="js/mapmarker_func.jquery.js"></script>
Can some one explain this please. Please give me a Source so I wont make this mistake again.
Normal jQuery (core)
jQuery migrate if you have
jQuery UI
jQuery mobile
Scripts that need jQuery / scripts that are jQuery plugins
Other scripts like bootstrap
You own scripts depending which is needed first
First you have to include normal jQuery library.After that You have to include other jquery library like jquery ui and jquery mobile and all finally you have to include your own javascript files.
As mentioned in comments you have to mention the scripts in the order you use that.
Simply anything used Jquery will goes after jQuery, anything that depends on jQuery UI goes after jQuery UI etc.