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>
Related
When trying to look at the products in the store on a mobile device, it will show the style of the products as text instead of applying it.
This will only display as text on mobile devices and does work the way it is supposed to on regular browsers (computer).
On mobile devices it will be displayed like this:
<b>Intel Quad Core - I7 - 6700HQ</b>
(2.6GHz - 3.5Ghz)) 6MB cache (SKYLAKE) <b>
<font color=“#4CC417”>45 Watt</b></font> Intel® HD 530
After trying to disable JavaScript execution in the computer browser, it will only display the text as style as well.
Here is an example of the computer browser:
Below is an example of the device version of the same product:
After disabling JavaScript on the computer, the PC version will also look like the mobile version. So my best guess here is that it has to do with a JavaScript problem.
We've been on this problem for several days now and can't find a working solution for this.
Thanks in advance!
Edit: added part of code where we expect to find the problem
<script type="text/javascript">
var Brchecked="1";
function Bmouseo(tyu){if(Brchecked!=tyu) {
document.getElementById("hover-"+tyu).style.backgroundColor="#155565";}}
function Bmouseo2(tyu){if(Brchecked!=tyu) { document.getElementById("hover-"+tyu).style.backgroundColor="transparent"; document.getElementById("hover-"+tyu).style.color="#ffffff";}}
</script>
Edit: after this code has been executed, the problem is resolved and the text is displayed the way it is supposed to be.
changeSelection: function(selection){
parts = selection.id.split('-');
if (this.config['options'][parts[2]].isMulti) {
selected = new Array();
if (selection.tagName == 'SELECT') {
for (var i = 0; i < selection.options.length; i++) {
if (selection.options[i].selected && selection.options[i].value != '') {
selected.push(selection.options[i].value);
//this.showName(parts[2], selection.options[i]);
}
}
} else if (selection.tagName == 'INPUT') {
selector = parts[0]+'-'+parts[1]+'-'+parts[2];
selections = $$('.'+selector);
for (var i = 0; i < selections.length; i++) {
if (selections[i].checked && selections[i].value != '') {
selected.push(selections[i].value);
alert(selections[i].value);
//this.showName(parts[2], selections[i]);
}
}
}
this.config.selected[parts[2]] = selected;
} else {
if (selection.value != '') {
this.config.selected[parts[2]] = new Array(selection.value);
} else {
this.config.selected[parts[2]] = new Array();
}
this.populateQty(parts[2], selection.value);
//this.showName(parts[2], selection);
}
this.changeTitlePriceLabel(parts[2], selection.value);
this.changeTagActive(parts[2], selection.value);
//alert(selection.value);
this.showName();
this.reloadPrice();
}
Ensure that in your header section of the page the following is present and in this specific order
<meta charset="UTF-8">
<title>Page Header</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="style.css">
Create a table with the results and add a Hover effect in CSS for table
tr:hover td {
color: #000;
background: #FFF8DC;
}
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'm making a page with lots of iframes on it, the websites in the iframes have ads in them and to make the page more viewable to people with adblock, I need to display different stylesheets.
Basically what I want to do is.. if adblock (display this stylesheet) else (display this stylesheet).
I have the code working to detect if adblock is present, but when I try to do the if else statement..the whole page is blank. Here's the code:
<script>
(function(){
if($("#fakead").css('display')=="none")
{
document.write("<link href='css/adblock.css' rel='stylesheet' type='text/css'>")
}
else
{
document.write("<link href='css/noadblock.css' rel='stylesheet' type='text/css'>")
}
});
</script>
I'm extremely new to Javascript so my apologies if the code is terrible.
Thanks for any help
You should not use document.write method. As I see you use jQuery, so in jQuery you can do like this:
$( function() {
if($("#fakead").css('display')=="none") {
$("<link href='css/adblock.css' rel='stylesheet' type='text/css'/>").appendTo( 'head' );
} else {
$("<link href='css/noadblock.css' rel='stylesheet' type='text/css'/>").appendTo( 'head' )
}
});
Please note: link element should be placed in <head> section. Read more in w3c.
Pure JS option:
var el = document.createElement("link");
el.type = "text/css";
el.rel = "stylesheet";
el.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(el);
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
};
I have a javascript function that switch from two different css files that affect my web-site. The problem is that the css are only partially applied with my function and I need to refresh the browser to get the entire new style.
Here is my function:
function switch_style ()
{
var head=document.getElementsByTagName('head')[0];
for (i = 0, link_tag = document.getElementsByTagName("link"); i < link_tag.length ; i++ )
{
if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) && link_tag[i].title)
{
if (link_tag[i].title == "normal")
{
head.removeChild(link_tag[i]);
}
}
}
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = '/templates/rhuk_milkyway/css/template_contrast.css';
head.appendChild(cssNode);
set_cookie( style_cookie_name, "contrast", style_cookie_duration );
}
As you can see i remove and then append a new style to the page header.
Is there a way to refresh the styling?
(It happens with all browser)
I may be overlooking something, but why do you need to switch stylesheets when you can just add a new class to your html or body element?
Pros:
Faster switching. You do not have to wait until your new css is
loaded - the alternate styles can be included in the original
stylesheet.
Simpler. jQuery.toggleClass (or element.className, if you do not use jQuery) will do all the job.
Works everywhere.
Con(s?):
You have to add the new class to all the selectors in css.
The CSS
<link href="/css/main.css" rel="stylesheet"type="text/css" title="main" media="screen" />
<link href="/css/alt1.css" rel="alternate stylesheet" type="text/css" title="alt1" media="screen" />
The Javascript
function switch_style (title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}}