the website can be found here: http://www.healthygit.com
Basically when the site loads depending on what order I include the javascript depends what breaks, for example:
If I include the Menu JavaScript (below) first then the menu will not work but the image slider will.
Menu JS:
<script type="text/javascript" src="js/jquery.js"></script><!-- jQuery -->
<script type="text/javascript" src="js/jquery.easing.js"></script><!-- jQuery Easing effects -->
<script type="text/javascript" src="js/megamenu_plugins.js"></script><!-- Mega Menu Plugins (scroller, form, hoverIntent) -->
<script type="text/javascript" src="js/megamenu.js"></script><!-- Mega Menu Script -->
But if I include the menu files last the menu will work and the slider will not, the slider files are:
<script type="text/javascript" src="js/jquery.list-rotator.min.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
The errors I am getting are:
ReferenceError: jQuery is not defined
...),delay:m(a(this).attr("delay"),bE),effect:r[a(this).attr("effect")]!=undefined?...
jquery....min.js (line 1)
And
ReferenceError: $ is not defined
$(document).ready(
preview.js (line 1)
Can anyone help me please?
I noticed in your webpage that you placed jQuery last. I think it should be at the first. Have you tried it in the following order:
<script type="text/javascript" src="js/jquery.js"></script><!-- jQuery -->
<script type="text/javascript" src="js/jquery.easing.js"></script><!-- jQuery Easing effects -->
<script type="text/javascript" src="js/megamenu_plugins.js"></script><!-- Mega Menu Plugins (scroller, form, hoverIntent) -->
<script type="text/javascript" src="js/megamenu.js"></script><!-- Mega Menu Script -->
<script type="text/javascript" src="js/jquery.list-rotator.min.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
Tell me if it helps.
Related
Ok so I am trying to load sb-admin-2 and the menu is not collapsing, I browsed for some solutions and none of them work for me, also as you can see the data-table is not working too and my tags looks like this:
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-ui-router.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-messages.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-ui-validate.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-cookies.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/ng-file-upload-shim.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/ng-file-upload.min.js"></script>
<!--SB ADMIN FILES-->
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/metisMenu.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/dataTables.responsive.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/sb-admin-2.min.js"></script>
can you help me out guys.
ps: I am loading sb-admin through angularjs and django
gentos - i had a similar issue (sidebar not collapsing) and it turned out that i had overlapping jquery's. Once i removed the calls to both jquery and jquery.min files and just used a jquery link:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
collapsible sidebar returned. I also reordered jquery and put the above link at the top of my HTML file (above bootstrap, metisMenu, etc.)
my bootstrap modal won't show if i use offline "bootstrap.min.js" & "jquery.js"
here the code :
<script type="text/javascript" src="jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" scr="js/bootstrap.min.js"></script>
but it can work normaly when i use this online lib :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
what's wrong with that?
thanks,
I have included jquery in javascript but it is not working wt to do
i hv also included jquery in it
<script type="text/javascript" src="/home/aman/html/book_cricket.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11./jquery.min.js"></script>
jQuery should run at the beginning
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11./jquery.min.js"></script>
<script type="text/javascript" src="/home/aman/html/book_cricket.js"></script>
The browser reads the javascript files in the order you place them.
Try reversing them to
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11./jquery.min.js"></script>
<script type="text/javascript" src="/home/aman/html/book_cricket.js"></script>
In my webpage I am doing two things:
Image slide show
Image popup
For that I had included 6 JavaScript files, but it conflicts. It works fine individually. How can I avoid the JavaScript conflict?
I had included the js file like this:
----------------for popup-------------
<div id="content">
<div class="chat in">
<div class="msg Nth">
<script type="text/javascript" src="popup/js/prototype.js"></script>
<script type="text/javascript" src="popup/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="popup/js/lightbox.js"></script>>
<div class="msg Nth">
--------------for slideshow-------------
<script src="scrollbar_2/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<script src="scrollbar_2/jquery-ui-1.7.1.custom.min.js" language="javascript" type="text/javascript"></script>
<script src="scrollbar_2/slider_test.js" language="javascript" type="text/javascript"></script>
I'm pretty sure Lightbox is dependent upon JQuery, so it should be placed AFTER you load in JQuery, like so:
<script src="scrollbar_2/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="popup/js/lightbox.js"></script>
It is also best practice to put all your JavaScript files towards the END of your HTML file in case some of the JavaScript files are dependent upon the elements in the DOM being loaded first.
However, more clarity around the exact error message would be useful for helping you debug.
I am using jquery and its related plugins in my site.
Since i use more js. for visiting each page in my site. all the js loads so site loading time increases.
How to use js libraries efficiently without loading js for each page visit.
UPDATE:
I am using
<!-- JQUERY-->
<script src="{$TEMPLATE_FACK}/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$.noConflict();
</script>
<script src="{$TEMPLATE_FACK}/js/global.js" type="text/javascript"></script>
<!-- JQUERY.VALIDATE SCRIPT -->
<script src="{$TEMPLATE_FACK}/js/jquery.validate.js" type="text/javascript"></script>
<!--JS VALIDATION SCRIPTS -->
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/scriptaculous/src/scriptaculous.js"></script>
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/jsvalidate.js"></script>
<!--jQuery URL Script-->
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/jquery.url.js"></script>
<!-- TINYMCE SCRIPTS -->
<script type="text/javascript" src="{$TEMPLATE_FACK}/tinymce/jquery.tinymce.js"></script>
<script src="{$TEMPLATE_FACK}/tinymce/tiny_mce_src.js" type="text/javascript"></script>
<script src="{$TEMPLATE_FACK}/js/quicktags.js" type="text/javascript"></script>
<!-- WORD COUNT -->
<script src="{$TEMPLATE_FACK}/js/jquery.wordcount.js" type="text/javascript"></script>
<!-- Thick box scripts -->
<script src="{$TEMPLATE_FACK}/js/thickbox.js" type="text/javascript"></script>
<!--JS FOR GRAPH (Highcharts Refer: http://highcharts.com/ref/#plotOptions-pie-point-events)-->
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<!--
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/themes/gray.js"></script>
-->
<!-- 1b) Optional: the exporting module -->
<!--<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/modules/exporting.js"></script>-->
<!--JS FOR Tag adding in Faq add1.html - added by Mogan Dec 02, 2010-->
<script src="{$TEMPLATE_FACK}/js/create_html.js" type="text/javascript"></script>
<!--FANCY BOX -->
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/fancybox/jquery.fancybox-1.3.2.js"></script>
This much of js i am using in header section. once i am visiting each page all these loads again and again
The user doesn't have to load it each time, just be sure to set your cache headers correctly so the user caches the JavaScript files that are reused. For libraries specifically (since this is tagged jQuery), look at using a CDN - which will also have the cache headers I mention, as well as parallelizing the download since it's not on your own domain.
Also, you can use a Content delivery network (CDN) for libraries like jQuery etc. Google provides a bunch.
Additionally to the previous answer you should minify all javascript file together, optionally you can use gzip compression.