<!--[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.
Related
I have 2 jquery scripts, but they aren't cooperating, and i dont know why.
My first script "scrolltop.js:
$(function() {
$("a").click(function(){
alert("test");
var target = $(this).attr('href');
var strip = target.slice(1);
if(this.hash && strip=="wall_menu"){
$("html, body").animate({
scrollTop: $("#wall_menu").offset().top
}, 1200);
return false;
}
}); });
It works fine... but stops while i add this script "changecolor.js":
$(document).ready(function() {
var $changeBtn1 = $("#content_0 div.button1");
var strNewString = $('body').html().replace(/\is/g,'<spon>is</spon>');
$('body').html(strNewString);
$(".button1").click(function(){
$('spon').css("color", "red");
setTimeout(function(){
$('spon').css("color", "");
},3000);
}); });
When i add both scripts, works only "changecolor.js", even alert "test" from first script doesnt work :(
This is my head from .html file:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type='text/javascript' src="scripts/scrolltop.js"></script>
<script type='text/javascript' src="scripts/changecolor.js"></script>
My web browser console, does not say where the problem is.
This is probably because you're replacing the whole body ($('body').html(strNewString);) in changecolor.js, and therefore the events registered (click()) will no longer be bound to a DOM element.
I have fancybox setup on my page and it works fine on the initial click however if I exit fancybox and click the link again nothing happens...No console errors or anything. I use jquery to append my body element with a JS script I get from a 3rd party, that 3rd party then is then able to populate a div called "ollWidget". Any help is appreciated, thanks!
JS
jQuery(window).load(function() {
var scriptSet = false;
jQuery('.btn-availability').click(function(e) {
if ( jQuery(window).width() > 600 ) {
if ( scriptSet == false ) {
jQuery.fancybox(jQuery('<div id="ollWidget"></div>').css({ 'height': '1125', 'width': '940' }));
jQuery('body').append("\x3Cscript language='javascript' src='script-that-gets-code-from-external-site-and-populates-the-ollWidget'>\x3C/script>");
jQuery('#ollWidget').show();
scriptSet = true;
} else {
jQuery('#ollWidget').remove();
}
} else {
e.preventDefault();
}
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
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)
I want to redirect a IE7 user, but window.location.href does not seen to work properly.
Any suggestion?
$('.navigation-next a').bind('click', function (a) {
a.preventDefault();
window.location.href = $(this).attr('href')
})
Worked with:
$('.navigation-next a').bind('click', function(a) {
location.href = $(this).attr('href')
})
Thanks!
You have to use window.location.replace() on IE7 and earlier.
<script type="text/javascript">
function redir(url){ window.location=url; }
</script>
<!--[if lte IE 7]>
<script type="text/javascript">
function redir(url){ window.location.replace(url); }
</script>
<![endif]-->
This is why all web developers should drop support for IE until Microsoft fixes it!
I'm trying to use shadowbox in multiple occasions: sometimes I happen to need more than one dialog at the same time.
In this simple example I try to close one existing window and re-open another one but is not opening the second one. What I'm doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="shadowbox.css" type="text/css">
<style type="text/css" media="screen">
#sb-body, #sb-loading { background:#eee; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script src="shadowbox.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Shadowbox.init();
window.onload = function(){
Shadowbox.open({
content: 'First window. <a id="open-second" href="http://www.google.com">open another window</a>.',
player: "html"
});
$('#open-second').live('click', function(e){
e.preventDefault();
Shadowbox.close();
Shadowbox.open({
content: 'Second window.',
player: "html"
});
});
};
</script>
</head>
<body>blabla.</body>
</html>
Regards,
Adit
Sorry 'bout this, but I think I'll move towards colorbox as it seems far more stable:
$('#second-btn').live('click', function(e){
e.preventDefault();
$.colorbox({
onComplete: function(){
$('#cboxLoadedContent').append('second opened');
$('#cboxClose').attr('id', 'cboxClose_disabled');
},
html:'<p>Second <a id="first-btn" href="x">first</a></p>',
width: 500, height: 200
});
});
function showfirst(){
$.colorbox({
onLoad: function(){ $('#cboxClose_disabled').attr('id', 'cboxClose'); },
onComplete: function(){ $('#cboxLoadedContent').append('first opened') },
html:'<p>First <a id="second-btn" href="x">second</a></p>',
width: 500, height: 200
});
}
$('#first-btn').live('click', function(e){
e.preventDefault();
showfirst()
});
showfirst();
Hey, am I talking alone?! XD
Here's what I'll use; not happy with this as:
- I'm forcing a widely used plugin doing a simple task (close a window and open another)
- it needs to override each shadowbox feature (now only player "html" is implemented).
Here a full working example.
var shadowbox_orig_open = Shadowbox.open;
Shadowbox.reOpenable = function(new_opts) {
if(Shadowbox.isOpen()){
// close other dialog
Shadowbox.options.onClose(Shadowbox.getCurrent());
if(new_opts.player == "html"){
$('#sb-player').fadeOut('normal', function(){ $(this).html(new_opts.content).fadeIn(); });
}else{
// ???
}
// set other new hooks
Shadowbox.options = new_opts.options;
}else{
shadowbox_orig_open(new_opts);
}
};