I don't understand why my code doesn't work on internet explorer/
This is my index.php where I am invoking js libraries.
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/shadowbox.js" ></script>
<script type="text/javascript" src="js/slides.min.jquery.js" > </script>
<script type="text/javascript" src="js/jquery.simpleWeather-2.0.1.min.js" > </script>
<script type="text/javascript" src="js/jquery.clock.js" > </script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/default.js" > </script>
And this is my default.js
$(document).ready(function() {
Shadowbox.init({
overlayOpacity: 0.8
}, setupDemos);
if (typeof $().slides != "undefined") {
$('#slides').slides({
preload: true,
preloadImage: 'images/slides/loading.gif',
play: 3000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
}
$.each($(".menu li"), function(index, li) {
if ($(li).hasClass("active")) {
$("title").append(": " + $(li).children("a").text());
}
});
if (typeof $.simpleWeather != "undefined") {
$.simpleWeather({
location: 'Armenia, Yerevan',
unit: 'c',
success: function(weather) {
html = "<div style='height: 117px;'><h2>"+weather.city+', '+weather.region+'</h2>';
html += '<img style="float:left;" width="125px" src="'+weather.image+'">';
html += '<p>'+weather.temp+'° '+weather.units.temp+'<br /></p>';
html += '</div>';
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
}
$('#yerevan-time').clock({offset: '+4', type: 'analog'});
$('#london-time').clock({offset: '+0', type: 'analog'});
$('#new-york-time').clock({offset: '-5', type: 'analog'});
});
function setupDemos() {
Shadowbox.setup("a[rel=photos]", {
gallery: "cars",
continuous: true,
counterType: "skip"
});
}
$(function() {
$( "#day1" ).datepicker();
$( "#day2").datepicker();
});
I can't find a solution here. You can check this out here. This is my website. So in internet explorer the clock and the weather doesn't work. What's the problem here. Any help will be useful. thanks.
The error has nothing to do with the code you posted..
If you check the console, you will see an error that is related to google maps.
And that error is being fired when you run the initialize method (you have it bound to the onload event of the body tag)
Remove that to check that the clocks work correctly, and then make sure to run in only when there are maps to be shown in the page..
Update
The other , more important, issue in your case is that the clock plugin you use has code like this
jQuery(_this)
.find(".sec")
.css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
Seeing the vendor prefixes -moz- and -webkit- means that the rotation of the hands is only applied to the mozilla and webkit browsers..
They have specifically excluded all other browsers..
Modern IE (>=9) workaround
For IE >= 9 you could add "-ms-transform" : srotate
jQuery(_this)
.find(".sec")
.css({"-moz-transform" : srotate, "-webkit-transform" : srotate, "-ms-transform" : srotate});
and it would work (as IE >= 9 supports rotation..)
(make sure to correct the code for all hands.. my example is only about the seconds)
Related
I just want to use external js files in my web application. I dont want to change more code. But after import I run my application and got following errors:
TypeError: Cannot read property 'fn' of undefined
at owl.carousel.min.js:1
at owl.carousel.min.js:1
Uncaught ReferenceError: $ is not defined
at theme-scripts.js:1
my HTML file just like this:
<html>
<body>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="src/app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="src/app/components/landing-page/js/cbpAnimatedHeader.js"></script>
<script src="src/app/components/landing-page/js/theme-scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="src/app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="src/app/components/landing-page/js/imageComparisonSlider.js"></script>
<script type="module" src="src/app/components/landing-page/js/bootstrap.min.js"></script>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
</html>
external theme-script.js Files:
$(window).scroll(function () {
if ($(document).scrollTop() > 150) {
$('.navbar').addClass('navbar-shrink');
}
else {
$('.navbar').removeClass('navbar-shrink');
}
});
$(function () {
$('a[href*="#"]:not([href="#"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
// Owl carousel
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: false,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').on("click", function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function () {
$('.navbar-toggle:visible').click();
});
I don't know, wether is the right way to import external js?
secondly, how can I use a funciton, which is from a external js file, in this example initComparisons() this function.
maybe someone has any ideas?
Best Regards,
Leo
<!--[if lte IE 9]><html class="lte9"><![endif]--><!--[if gt IE 9]><html><![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
blah blah
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="{{ asset('js/mypage.js') }}" type="text/javascript"></script>
</body>
</html>
when I load my page, IE9 brings error like this '$' is not defined.
How can I solve this error?
+++ mypage.js
$(function(){
//when load page,
//ie9 i tag not moving.
$(window).load(function() {
$('div.mask').hide();
});
// when click about , willshow will show.
//for not IE 9
if (!$('html').hasClass('lte9')) {
var about = $('ul.about > li > span.activebtn');
var willshow = $('div.willshow');
about.on('click',function(){
willshow.toggleClass('active');
about.html(function(){
if ($(willshow).hasClass('active')) {
return 'close';
}
return 'about';
});
});
}
// because CSS3 not working in IE9.
if($('html').hasClass('lte9')) {
about.click(function(){
willshow.animate({
'left': '0'
}, 500);
about.html(function(){
if (willshow.hasClass('active')) {
return 'close';
about.click(function(){
willshow.animate({
'left': '-100%'
}, 500);
});
}
return 'about';
});
});
}
});
check my js file plz. beacause IE9 not support css3, I just want to make animate function in place of CSS3. It work successfully in chrome.
I am working on a way to hide the twitter button once clicked on show new content, I thought I had it working but its still not. I am not sure why if someone could point out my mistake that would help.
Thanks.
----UPDATE----
its when I add this script it stops working
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
and
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
----UPDATE END----
Here's the code:
(function($) {
var win = null;
$.fn.tweetAction = function(options, callback) {
// Default parameters of the tweet popup:
options = $.extend({
url: window.location.href
}, options);
return this.click(function(e) {
if (win) {
// If a popup window is already shown,
// do nothing;
e.preventDefault();
return;
}
var width = 550,
height = 350,
top = (window.screen.height - height) / 2,
left = (window.screen.width - width) / 2;
var config = [
'scrollbars=yes', 'resizable=yes', 'toolbar=no', 'location=yes',
'width=' + width, 'height=' + height, 'left=' + left, 'top=' + top
].join(',');
// Opening a popup window pointing to the twitter intent API:
win = window.open('http://twitter.com/intent/tweet?' + $.param(options),
'TweetWindow', config);
// Checking whether the window is closed every 100 milliseconds.
(function checkWindow() {
try {
// Opera raises a security exception, so we
// need to put this code in a try/catch:
if (!win || win.closed) {
throw "Closed!";
} else {
setTimeout(checkWindow, 100);
}
} catch (e) {
// Executing the callback, passed
// as an argument to the plugin.
win = null;
callback();
}
})();
e.preventDefault();
});
};
})(jQuery);
$(document).ready(function() {
$('#tweetLink').tweetAction({
text: 'First tweet',
url: '#',
via: 'website'
}, function() {
$('hidden-text')
.show();
$(".hidden-text").removeClass("hidden-text");
});
});
$(document).ready(function() {
$("p").click(function() {
$(this).hide("slow");
});
});
.hidden-text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tweet to show content.
Tweet to #your_twitter
</p>
<p class="hidden-text">thank you for tweeting !</p>
UPDATE
Optimised some js
$(document).ready(function () {
$('#tweetLink').tweetAction({
text: 'First tweet',
url: '#',
via: 'website'
}, function () {
$('hidden-text')
.show("slow");
$(".hidden-text").removeClass("hidden-text");
$("#hide-me").hide("slow");
});
});
UPDATE 3
Ok looking at the console I seem to be getting error
Uncaught TypeError: $(...).tweetAction is not a function
I have updated my Jquery CDN, when i click on Tweet to #your_twitter it now dose not open in a new window but changes the url in the same window. any ideas ?
Solved
I had to remove some CDN's
<link href="https://get.gridsetapp.com/35679/" rel="stylesheet"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<!--<script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<!--<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>-->
<!--<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>-->
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!--<script src="https://code.jquery.com/jquery-3.1.0.min.js" ></script>-->
If it stops working when you add these scripts, add the scripts one by one and check your js console for errors. This should give you the hints to know where to search for the error.
Also check if those libraries are not loaded twice. If you've already loaded another jQuery library e.g., it will not work.
I see two syntax here but they don't have to do with your problem.
<a href="https://twitter.com/intent/tweet?screen_name=your_twitter" class="twitter-mention-button"
id="tweetLink" data-show-count="false">Tweet to #your_twitter/a><a href="https://twitter.com/intent/tweet?screen_name=your_twitter" class="twitter-mention-button"
id="tweetLink" data-show-count="false">Tweet to #your_twitter </a> <!--Closing the tag-->
$('.hidden-text').show(); //class picker
My page was working perfectly and suddenly, the hero image is not loading and I am seeing an error message in the console "ReferenceError: imagesLoaded is not defined" on wine-cheese.js, which is preceeded by another error "Error: multipleDefine" on dojo.js. I have not changed the files since the content launched 6 weeks ago.
Some external developers have been doing some work on the site and I believe they have introduced a conflict. But I am stumped as to how to figure it out. I tried setting breakpoints in Firebug but that isn't helping me because I'm not really sure what I'm doing. All of the tutorials I find about how to use the debugger focus on one script within a page rather than debugging a page that is part of a CMS and merged with many other scripts you have no control over.
When I check the content locally, everything works OK (I used absolute links to reference all the scripts and files to be sure they are actually on the server), so I think there is a conflict with dojo, or maybe even something else.
I have been trying to figure this out all day and feel like I am going in circles.
Any help or advice would be much appreciated. The page in question is here.
Here is the code in the javascript file that causes the error. The site I work on has jQuery 1.3.2 so we have to use noConflict to run a newer library in parallel (hence the jwc)
$.fn.tabs = function() {
return this.each(function() {
var $el = $(this);
var $panels = $el.find('> div');
var $tabs = $el.find('> ul a');
$tabs.click(function() {
setTimeout(function() {
if (window.location.hash) {
window.scrollTo(0, 489);
}
}, 1);
$tabs.removeClass('active');
$(this).addClass('active');
$panels.fadeOut(250);
$panels.filter(this.hash).animate({
opacity:1},
250, 'linear', function(){
$(this).show();
});
animateHeader(this.hash);
//window.location.hash = this.hash;
//return false;
});
if(window.location.hash != 'undefined' && window.location.hash != '') {
//alert(window.location.hash);
tabId = '[href*="' + window.location.hash + '"]';
$tabs.filter(tabId).click();
} else {
$tabs.filter('[href*="#party-tips"]').click();
}
});
};
jQuery.easing.def = "easeInCubic";
function animateHeader(tab) {
if (tab == "#party-tips") {
$('#party-tips #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#party-tips #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
} else if(tab == "#pairing-guide") {
$('#pairing-guide #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#pairing-guide #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
} else if(tab == "#quick-tips") {
$('#quick-tips #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#quick-tips #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
}
}
function laodAnimation() {
imagesLoaded('img#sipbg', function(){
$('#loadblock').hide();
$('img#sipbg').animate({
opacity:1
}, 250, 'linear');
$('#top-block').delay(250).animate({
top:0
}, 350, 'swing', function(){
$('h1#wc-logo').animate({
top:30,
left:84
}, 750, 'linear', function(){
$('span#wine-glass').animate({
top:105,
left:136
}, 500, 'swing', function(){
$('span#text-sip').fadeIn(250, function(){
$('span#text-savor').delay(500).fadeIn(250, function(){
$('span#text-repeat').delay(500).fadeIn(350, function() {
$(this).delay(500).fadeOut(350, function(){
$(this).delay(500).fadeIn(350, function() {
$(this).delay(500).fadeOut(350, function(){
$(this).delay(500).fadeIn(350, function() {
$('span##text-endless').delay(500).fadeIn(350);
$('#bottom-block').animate({
bottom:0
}, 350, 'swing', function() {
$('#bottom-block h1').delay(350).fadeIn(750);
});
});
});
});
});
});
});
});
});
});
});
$('#main-grid').delay(400).animate({
opacity:1
}, 1200, 'linear');
});
}
The first part of the content I plug into the CMS looks like this; imagesLoaded is defined in the second script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/jquery.fancybox.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/retina.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/wine-cheese.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53d6affc389982ed"></script>
<script type="text/javascript">
var jwc = jQuery.noConflict(true);
jwc(document).ready(function() {
jwc("a#box").fancybox({
maxWidth : 800,
maxHeight : 680,
fitToView : true,
width : '70%',
height : '90%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
laodAnimation();
});
</script>
I recommend using either chrome/chromium or safari for their web console. You can then open up the web inspector and set the inspector to catch all errors.
The tools there should help you figure out where the problem is.
Update:
Looking at the link you provided I saw the problem is with the imageloader.js call. It seems to be defining multiple times the same object. You could try wrapping it in a js check.
Update 2:
Ok so I tested your scripts in jsfiddle. I found the problem to be based in a conflict between dojo and the imagesloaded script. I set up a jsfiddle to test out the scripts to see if the class imagesLoader is defined. In the left toolbar if you change in the settings on the left between jQuery and Dojo frameworks the imagesLoaded js script stops working. The problem is that since it is packaged it doesn't signal an error. Either you make a new script from scratch or find an alternative.
if(!alreadyDefined) {
alreadyDefined=true;
//Rest of your code.
}
I am using yepnope.js but having a slight issue with on load loading a function
in the head i include yep nope and make a call to the relevant js file
<script type="text/javascript" src="/code/trunk/javascript/external/modernizr/modernizr-development.js"></script>
<script type="text/javascript" src="/code/trunk/javascript/external/yepnope.1.5.3-min.js"></script>
<script type="text/javascript">
yepnope({
test: Modernizr.mq('only all and (max-width: 700px)'),
yep: ['/templates/client/jquery/qff/plugin.mobile.js'],
nope:['/templates/client/jquery/qff/plugin.website.js']
});
</script>
and then at the bottom of the page
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#mainContent").setupQantas({
startSlide: 1,
googleAnalytics:1,
googleCode:""
});
});
</script>
so i am looking at this on a main screen. so it's suppoed to call in plugin.mobile.js
in the plugin.mobile.js file
(function( $ ){
$.fn.setupQantas = function( options ) {
// Create some defaults, extending them with any options that were provided
var settings = $.extend( {
startSlide: 1,
googleAnalytics:0, // 1 sends to google
googleCode: ""
}, options);
var methods = {};
return this.each(function() {
if (settings.startSlide === 1) {
alert("slide = 1");
} else {
alert("slide > 1");
}
});
};
})( jQuery );// JavaScript Document
instead of giving the alert slide 1 it has the error
jQuery("#mainContent").setupQantas is not a function
if i dont use yepnope and just have it in a script tag it works. There seems to be a delay on when the yepnope loads in the js file and doesnt seem to do before doc.ready
is there a way around this?
thanks
Yes there is a delay. That's all the point behind an asynchronous script loader.
You should use a callback after the script is loaded by yepnope. Check the complete and callback options.
here is the code
<script type="text/javascript">
yepnope({
test: Modernizr.mq('only all and (max-width: 700px)'),
yep: ['/templates/client/jquery/qff/mobile.js'],
nope:['/templates/client/jquery/qff/website.js'],
complete: function () {
jQuery("#mainContent").setupQantas({
startSlide: 1,
googleAnalytics:1,
googleCode:""
});
}
});
</script>