I have a pretty simple image switcher, which I use for manual images switcher and for carousel. In IE 8 it works strange. In carousel scenario image switches just once, thereafter it's dies. But (!) when I implemented Firebug Lite and try to trace - it's works well, only with firebug on... I tried some tricks, I found, but it's all to no purpose. I have no idea what caused this kind of behavior. How to fix it?
js
function toSlide(wrapper, options){
var active = $('#' + wrapper + ' div.active');
var slide;
var direction;
if (active.length === 0){
active = $('#' + wrapper + ' div:last');
}
if (options === null) {
options = {};
options.reverse = false;
options.animate = false;
} else {
options.reverse = options.reverse === null ? false : options.reverse;
options.animate = options.animate === null ? false : options.animate;
}
direction = options.reverse === true ? active.prev() : active.next();
slide = direction.length ? direction : $('#' + wrapper + ' div:first');
if (options.animate === true){
active.addClass('last-active');
slide.addClass('active')
.css({opacity:0.0})
.animate({opacity:1.0}, 1000, function() {
active.removeClass('active last-active');
});
} else {
slide.addClass('active');
active.removeClass('active');
}
}
function startSlideShow() {
setInterval(function(){ toSlide('slideshow', {'animate': true}); }, 5000);
};
window.onload = function() {
if (document.location.pathname == '/'){startSlideShow();};
};
html in head
<!--[if IE 8 ]>
<link rel="stylesheet" href="{{ MEDIA_URL }}css/ie8.css" type="text/css" media="screen, projection" /> <html lang="en" class="no-js ie8">
<script defer src="ie_onload.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="{{ MEDIA_URL }}js/jquery-1.6.2.js"%3E%3C/script%3E'))</script>
<script type="text/javascript" src="http://fbug.googlecode.com/svn/lite/branches/firebug1.3/content/firebug-lite-dev.js"></script>
<![endif]-->
in bottom of html
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- <script>!window.jQuery && document.write(unescape('%3Cscript src="{{ MEDIA_URL }}js/jquery-1.4.2.js"%3E%3C/script%3E'))</script> -->
<!-- scripts concatenated and minified via ant build script-->
<script src="{{ MEDIA_URL }}js/plugins.js"></script>
<script src="{{ MEDIA_URL }}js/script.js"></script>
<!-- end concatenated and minified scripts-->
Accessing console in FF without Firebug open or in IE will result in an error that will block the rest of your JS from executing. If you want to leave calls to console in, you should implement them like one of the following:
try { console.log('blah'); } catch(e) {}
// or
if (typeof console != 'undefined') console.log('blah');
Or use a custom built logging function that implements something like the above.
The cause was non-functional window.onload in IE8. I did right trick but made stupid mistake. So, I fixed it:
was
<!--[if IE 8 ]>
<script defer src="ie_onload.js"></script>
<![endif]-->
is now
<!--[if IE 8 ]>
<script defer src="{{ MEDIA_URL }}js/ie_onload.js"></script>
<![endif]-->
in ie_onload.js
document.body.onload = function() {
imageViewer();
// and other functions
};
Related
There's lots of examples on Stackoverflow on how to detect IE11, but I'm not sure how to use it in a JavaScript conditional statement.
I'm using Tailwind CSS, but it doesn't support IE11 and below. I'd like a way to at least provide some kind of layout via an alternative CSS files.
How would I do something like this with JavaScript?
if (IE11) {
<link rel="stylesheet" href="/css/ie11.css">
} else if (IE10) {
<link rel="stylesheet" href="/css/ie10.css">
} else if (IE9) {
<link rel="stylesheet" href="/css/ie9.css">
} else if (IE8) { {
<link rel="stylesheet" href="/css/ie8.css">
} else {
<link rel="stylesheet" href="/css/tailwind.css">
}
}
I appreciate global IE11 usage is very low, but I'd like to be able to make use of Tailwind CSS and offer the option of supporting older browsers if needed.
You can use window.document.documentMode to determine if the current browser is IE. Then dynamically import resources into the page.
Simple code:
<script>
var ieVersion = window.document.documentMode;
if (ieVersion != 'undefined' & ieVersion > 7 && ieVersion < 12) {
console.log('Load in IE ' + ieVersion);
importJsResource(ieVersion);
} else {
console.log('Not in IE 8-11..');
ieVersion = "tailwind";
importJsResource(ieVersion);
}
function importJsResource(version) {
var fileref = document.createElement("link");
fileref.rel = "stylesheet";
fileref.type = "text/css";
if (ieVersion == 'tailwind') {
fileref.href = "/Content/tailwind.css";
} else {
fileref.href = "/Content/ie" + version + ".css";
}
document.getElementsByTagName("head")[0].appendChild(fileref);
}
</script>
I have added a javascript which loads a random css each time the site loads, and after I added this script, the website shows without CSS for a few milliseconds before showing normally
Here is the script:
(function() {
var sheet = document.createElement('link');
sheet.rel = 'stylesheet';
sheet.href = 'css/' + (Math.floor(Math.random()*6)+1) + '.css';
document.getElementsByTagName('head')[0].appendChild(sheet);
})();
and here is where I put it in html
I have tried putting it outside the body and outside the head but still the same issue
<html lang="en" class="no-js">
<head>
<script type="text/javascript" src="js/random.js"></script>
<head>
Fixed
new code:
var RANDOM_CSS = {
cssfiles : ['1.css','2.css','3.css','4.css','5.css','6.css'],
pathtocss : 'css/',
getrandomcss : function() { return this.cssfiles[Math.floor(Math.random()*this.cssfiles.length)]; },
getlinktag : function() { return '<link rel="stylesheet" type="text/css" href="'+this.pathtocss+this.getrandomcss()+'" />'; },
printlinktag : function() { document.write(this.getlinktag()); }
};
and
<script type="text/javascript" src="/js/random.js"></script>
<script type="text/javascript">
RANDOM_CSS.printlinktag();
</script>
I want print a page without open it on all major browsers. (Safari, IE, firefox, Chrome and Opera)
I tried that but doesn't work on firefox (Error : Permission denied to access property 'print') :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="alternate" media="print" href="print.php">
<script type="text/javascript">
function impression() {
window.frames[0].focus();
window.frames[0].print();
}
</script>
</head>
<body>
<iframe height="0px" src="print.php" id="fileToPrint" style="visibility: hidden"></iframe>
Imprimer
</body>
</html>
This code works on Chrome.
I want one thing like that for all browsers to mention but I don't know how.
Is there another way to do that?
Create an iframe, hide it, and then call the proper print functions. The execCommand should work for all versions of IE.
Mind you: $.browser won't work for newer versions of jQuery and should be avoided. Use your preferred way of detecting features.
var ifr = createIframe();
ifr.hide();
if ($.browser.msie) {
ifr.contentWindow.document.execCommand('print', false, null);
} else {
ifr.contentWindow.focus();
ifr.contentWindow.print();
}
This was developed for IE, FF and Chrome. I have no idea how well this will work for Safari and Opera, but it might give you some ideas.
Edit: as adeneo correctly pointed out, $.browser is deprecated and should be avoided. I updated my statement. I'll leave my code untouched, as it still expresses the correct intent.
You can try this code, but it's Javascript ;
<script language="JavaScript">
var gAutoPrint = true; // Tells whether to automatically call the print function
function printSpecial()
{
if (document.getElementById != null)
{
var html = '<HTML>\n<HEAD>\n';
if (document.getElementsByTagName != null)
{
var headTags = document.getElementsByTagName("head");
if (headTags.length > 0)
html += headTags[0].innerHTML;
}
html += '\n</HE>\n<BODY>\n';
var printReadyElem = document.getElementById("printReady");
if (printReadyElem != null)
{
html += printReadyElem.innerHTML;
}
else
{
alert("Could not find the printReady function");
return;
}
html += '\n</BO>\n</HT>';
var printWin = window.open("","printSpecial");
printWin.document.open();
printWin.document.write(html);
printWin.document.close();
if (gAutoPrint)
printWin.print();
}
else
{
alert("The print ready feature is only available if you are using an browser. Please update your browswer.");
}
}
</script>
I am trying to find which version of IE people are using and adding a class to the body tag depending on which browser.
the code i have is
if (navigator.appName == "Microsoft Internet Explorer") {
//Set IE as true
ie = true;
//Create a user agent var
var ua = navigator.userAgent;
//Write a new regEx to find the version number
var re = new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");
//If the regEx through the userAgent is not null
if (re.exec(ua) != null) {
//Set the IE version
ieVersion = parseInt(RegExp.$1);
}
}
else {
ie = false;
}
function ieTag() {
if (ie == true) {
if (ieVersion == 7) {
$('body').addClass('IE7');
}
}
if (ie == true) {
if (ieVersion == 8) {
$('body').addClass('IE8');
}
}
if (ie == true) {
if (ieVersion == 9) {
$('body').addClass('IE9');
}
}
}
and i am using this to call the function
<script type="text/javascript">
$(document).ready(function () {
//IE Version Control
ieTag();
});
</script>
but i am only picking up IE 9 for some reason, i have had this script working before so i really dont understand whats gone wrong!!!
i have even tried using this script
function ieTag() {
if (ie == true) {
$('body').addClass('IE' + ieVersion);
}
}
but still only picking up IE9
I ma using IE( and the developer tools to change version (which both of these scripts has worked on before)
This is probably not the answer you are looking for, but it does seem like the simplest solution:
<!--[if lt IE 7]> <body class="ie6"> <![endif]-->
<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if IE 8]> <body class="ie8"> <![endif]-->
<!--[if IE 9]> <body class="ie9"> <![endif]-->
<!--[if gt IE 9]> <body class="ie10+"> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
of course added in the HTML where your body tag is supposed to start.
You could use conditional comments so that it doesn't affect other browsers.
<!--[if IE 6]>
<script>
$(document).ready(function(){
$("body").addClass("ie-6");
});
</script>
<![endif]-->
<!--[if IE 7]>
<script>
$(document).ready(function(){
$("body").addClass("ie-7");
});
</script>
<![endif]-->
<!--[if IE 8]>
<script>
$(document).ready(function(){
$("body").addClass("ie-8");
});
</script>
<![endif]-->
<!--[if IE 9]>
<script>
$(document).ready(function(){
$("body").addClass("ie-9");
});
</script>
<![endif]-->
You don't need JavaScript for this.
<!--[if IE 9]>
<body class='ie9'>
<![endif]-->
<!--[if IE 8]>
<body class='ie8'>
<![endif]-->
etc. For normal browsers you do:
<!--[if IE]><!-->
<body class='normal'>
<!--<![endif]-->
The Reason why the js in the question failed in IE 7 and IE 8 was the fact i had included the script using application/javascript rather than text/javascript,
the reason is doesn't work with application/javascript is because this is a new way of including the script that only modern browsers support and older browsers does not support this method, hence IE 7 & 8 failing.
If you have jQuery you can add ie class to body like this
$(function(){
if ($.browser.msie && $.browser.version == 8) {
$('body').addClass('ie8');
}
});
I need to show a different webpage when i open my website in IE6 and below version.
Need to show fbrowser.html file when my website opens in IE6 and below versions.
Please suggest!!
In head:
<!--[if lte IE 6]>
<meta http-equiv="refresh" content="0; url=fbrowser.html">
<![endif]-->
Sorry, no javascript needed.
You could consider using http://api.jquery.com/jQuery.browser/
According to this answer, you can try somethiing like the following:
<script type="text/javascript">
// </) || [])[1];
this.safari = /webkit/.test(userAgent) && !/chrome/.test(userAgent);
this.opera = /opera/.test(userAgent);
this.msie = /msie/.test(userAgent) && !/opera/.test(userAgent);
this.mozilla = /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent);
this.chrome = /chrome/.test(userAgent);
}
});
// ]]>
</script>