Hi I have a problem I just can not resolve. I have a mobile menu which works fine in the browser but only works on smartphone after refreshing the page
I get
Uncaught ReferenceError: jQuery is not defined
Here is the code, and below that is the order in which the scripts load
(function($) {
$.fn.collapsable = function(options) {
return this.each(function() {
var obj = $(this);
var tree = obj.next('.main-menu ul');
obj.click(function() {
if (obj.is(':visible')) {
tree.toggle();
}
});
$(window).resize(function() {
if ($(window).width() <= 800) {
tree.attr('style', '');
};
});
});
};
})(jQuery);
$(document).ready(function() {
$('.slide-trigger').collapsable();
});
(analytics code loads first top of the page www.google-analytics.com/analytics.js)
rest of the script loads from the footer all inside the body the mobile-menu.js relates to the code above.
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script async src="js/mobile-menu.js" type="text/javascript"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script async>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<script async>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<script async>(adsbygoogle = window.adsbygoogle || []).push({});</script>
I have searched so many links on stackoverflow and other websites for an answer. I have tried no conflict i have swapped the order in which the other scripts load but nothing.
Please. Many thanks for looking.
Remove async from the first two script tags like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="js/mobile-menu.js" type="text/javascript"></script>
jQuery completed downloading and was run after your own script file when your error occurred. When you add async to script tags they get run whenever they complete downloading.
So make the scripts load and run synchronized and it will work just fine.
Related
I want to show google dfp unit when user click on navbar
$(document).ready(function () {
var navbar = false;
var navslot = null;
$(document).on('click', '.new_car_nav', function(){
navslot = googletag.defineSlot('/10176910/NavBar', [[250, 250]], 'ad_navbar').addService(googletag.pubads());
googletag.enableServices();
googletag.display('ad_navbar');
});
});
Issue is that it gives an error
Exception in queued GPT command TypeError: $ is not defined
Either we can use jquery in it or not? If no then how can I implement it?
You need to include jQuery, add this to your <head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
You are missing jQuery library, you need to include it into the head section before any other library includes.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hope this will help you.
I work on a customer website. An adserver script is very slow, but can't be edited. Inside of the script are some document write pieces and other scripts are included.
To improve page speed, the script should be "defer", "async" or "load after page is finished". The script can't be placed at the bottom.
I tried many solutions, but none have worked. Everything I tried had the result that the script doesn't load any more. (customer afid removed for examples)
What I did:
1. Jquery document ready / get script
$(document).ready(function() {
$.getScript("http://www35.glam.com/gad/glamadapt_jsapi.act?afid=");
});
2. Java Script bind
$(window).bind("load", function() {
<script type="text/javascript" src="http://www35.glam.com/gad/glamadapt_jsapi.act?afid="></script>
<script>
)};
3. Add defer or async
<script async type="text/javascript" src="http://www35.glam.com/gad/glamadapt_jsapi.act?afid="></script>
<script>
<script defer type="text/javascript" src="http://www35.glam.com/gad/glamadapt_jsapi.act?afid="></script>
<script>
4. Jquery lazy load
http://jqueryad.web2ajax.fr/
You could load the adserver script in a friendly IFrame.
Something like that:
<script>
(function(d){
var iframe = d.body.appendChild(d.createElement('iframe')),
doc = iframe.contentWindow.document;
// style the iframe with some CSS
iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";
doc.open().write('<body onload="' +
'var d = document;d.getElementsByTagName(\'head\')[0].' +
'appendChild(d.createElement(\'script\')).src' +
'=\'\/path\/to\/file\'">');
doc.close(); //iframe onload event happens
})(document);
</script>
I'm calling this function:
<script type='text/javascript'><!--// <![CDATA[
OA_show(18);
// ]]> --></script>
at many sites on a page but the script is loaded at bottom as follow:
<script type='text/javascript' src='//openx.elclarinweb.com/www/delivery/spcjs.php?id=2&target=_blank&ver=20141010'></script>
which causes this error:
Uncaught ReferenceError: OA_show is not defined
Note
I can't call the function after script loads because it needs to be called on specific position where Ads will be show, take a look here to see what I'm talking about
Is there any way to get ride of the error? Should I load the script at top even if it's obtrusive and prevent the page to load before it loads completely? Any advice?
put in onload:
window.onload = function(){
OA_show(18);
};
This waits for all the resources to be loaded and then executes the function you are calling.
Just call the function at bottom after the script loads.
...
</body>
<script type='text/javascript' src='//openx.elclarinweb.com/www/delivery/spcjs.php?id=2&target=_blank&ver=20141010'></script>
<script type='text/javascript'><!--// <![CDATA[
OA_show(18);
</script>
EDIT
Then do window.onload = OA_show(18);
I have a conflict between JavaScript and Mototools, I know there is something like NoConflict script but I do not fully understand how can I make it work I will leave the code of both dependencies so that It can be explained also I think It can be very useful for people who have encounter the same conflict, If one works the other one won't. you can see it I made it partially work but not totally www.softglobal.com.mx. Thank you
<script type="text/javascript" src="jquery-1.2.2.pack.js" ></script>
<script type='text/javascript' src="
http://static.tumblr.com/5bbaxlr/2tlmqkzma/mototools.js">
</script>
<script type="text/javascript">
//<![CDATA[
var hoveroptions = {
animout: 'JAMenuhover_fade',
animin: 'JAMenuhover_fade',
duration: 400,
transition: Fx.Transitions.linear};
window.addEvent ('domready', function (){
if ($('ja-mainnav')) {
var items = $$('#ja-mainnav li a');
new JAMenuhover (items,hoveroptions );
}
});
//]]>
</script>
This make on mouse over a drag effect which looks fantastic but then I got this which was my previous question
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4/jquery.min.js">
</script>
<script type="text/javascript">
//<![CDATA[
jQuery(function() {
var request = window.location.hash;
if(request == '#page-2') {
jQuery('.page.current').removeClass('current');
jQuery('.page').eq(1).addClass('current');
}
jQuery('div ul li').click(function(){
var speed = 600;
var i = $(this).index();
jQuery('.page.current').animate({opacity: 0, marginTop:80},speed,function(){
jQuery(this).removeClass('current');
jQuery('.page').eq(i).css('marginTop',30).animate({opacity:1,marginTop:
50},speed).addClass('current');
});
});
});
//]]>
</script>
I believe you mean MooTools and jQuery not MoToTools and JavaScript.
You can technically combine these 2 libraries together and make them work. This is however not recommended, since they both do similar things and including them on page side by side brings a lot of overhead, resulting in slow page rendering.
That being said, this is an example how you can use them both:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<p>jQuery sets this paragraph's color to red but MooTools sets the border color.</p>
<script>
//no conflict jquery
jQuery.noConflict();
//jquery stuff
(function($) {
$('p').css('color','#ff0000');
})(jQuery);
//moo stuff
window.addEvent('domready',function() {
$$('p').setStyle('border','1px solid #fc0');
});
</script>
NOTE: the versions of jQuery and MooTools displayed in your question are quite outdated and it's unlikely they will work in newer browsers without many glitches and hiccups, therefore I used the newest versions of both libraries in my answer
Working jsFiddle here: http://jsfiddle.net/9zLQV/
Source for the example code: http://davidwalsh.name/jquery-mootools
I have javascript, that loads new posts on website from database before :
<script type="text/javascript">
function LoadContent() {
patch = window.location.toString();
if (patch!== undefined && patch=="http://i-sc.ru/" || patch=="http://i-sc.ru/index.php") {
$.ajax({
url: patch,
success: function(content) {
$('#dle-content').html($('#dle-content', content).html());
}})}
setTimeout("LoadContent()", 50);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
LoadContent()
});
</script>
And after i have set up script for
<script type="text/javascript" src="js/jquery.fancyzoom.js"></script>
that i put in <head>
set up:
<script type="text/javascript">
$(function() {
//Set the default directory to find the images needed
//by the plugin (closebtn.png, blank.gif, loading images ....)
$.fn.fancyzoom.defaultsOptions.imgDir='../images/'; //very important must finish with a /
$('a.tozoom').fancyzoom({Speed:0});
$('a').fancyzoom({overlay:0.6});
//new rev > 1.2
//apply fancyzoom effect on all image whose class is fancyzoom !!
$('img.fancyzoom').fancyzoom();
});
</script>
Well, now about the problem:
When the website is loaded, i cant zoom images because of conflict, i think
How to solve it?
Don't reference jquery.js file multiple times, from the second script, remove the reference to the file.
And ensure you are not referencing different versions of .js files any where in your script.