Add an alternate stylesheet in IE11 with script - javascript

Consider this JSBin example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Case</title>
<!-- red -->
<link rel="stylesheet" type="text/css" href="data:text/css;base64,aHRtbCB7YmFja2dyb3VuZC1jb2xvcjpyZWR9" />
<!-- blue -->
<link title="a" rel="alternate stylesheet" type="text/css" href="data:text/css;base64,aHRtbCB7YmFja2dyb3VuZC1jb2xvcjpibHVlfQ==" />
<!-- green -->
<link title="b" rel="deferred" type="text/css" href="data:text/css;base64,aHRtbCB7YmFja2dyb3VuZC1jb2xvcjpncmVlbn0=" />
</head>
<body>
<script>
window.onload = function() {
var elem = document.querySelector("link[rel=deferred]");
var parent = elem.parentNode;
parent.removeChild(elem);
elem.rel = "alternate stylesheet";
parent.appendChild(elem);
}
</script>
</body>
</html>
Run the example and in Firefox and Chrome, the background of the page will be red. Run it in IE11, and the background will be green.
Can anyone shed any light on why IE11 is styling the page to the added stylesheet even though it is marked as an alternate only?
UPDATE:
Further investigation shows that this only happens when re-using the link element. Creating a new link element is fine, so it seems that in IE, the "alternate" flag on the element is not being updated when the rel attribute changes.

rel="deferred" isn't a valid link type so IE will ignore it and load the base 64 reference.
By setting it to rel="alternate stylesheet", the browser still requests the resource on page load but will not render it.
It seems you're trying to both defer loading of the CSS resource and then (once it does load) prevent the browser from rendering it? Worth reading Debunking Responsive CSS Performance Myths by Ilya Grigorik to see how these techniques don't always work as you'd hope them to.

Related

How can i add animation to materialize pages?

I have 3 html files in my code. at this moment, I use a tag as a link and I want to add animation for the page switching.
I am using materialize but I can't find how to add animation for that.
Anyone can help?(I want when I click a button in my index.html, it will animate for example slide right, and change to menu.html)
This is the index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel = "stylesheet" type="text/css" href = "Sources/bootstrap.css">
<link rel = "stylesheet" type="text/css" href = "Sources/Matirialize.css">
<script type = "text/javascript"
src = "Sources/jquery-2.1.1.js"></script>
<script src = "Sources/Matirialize.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src = "jquery.js"></script>
</head>
<body>
<a class="waves-effect waves-light btn">button</a>
</body>
</html>
and this is the menu.html code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>this is supose to be the menu page</p>
</body>
</html>
Under normal circumstances, you cannot create animations for transitions between two separate HTML pages, since the browser "gets rid" of the first page and stops all of its code before it begins to load the second page (and therefore, before its code begins to run). Basically, during the time between pages, you don't have the ability to run your own code to create animations.
If you look at the link לבני מלכה posted in the comments, however, you can see some ideas for getting around this by making the browser load the new page in special ways and then inserting it into the browser window (rather than just having an a link).

Make DIV load CSS file

For the program I'm writing I have a main navigation page where the user get landed after he / she log into the system.
On this screen I use 2 DIV's one div is for the navigation bar second one is used as an iFrame.
I'm using w3.css library to create the navigation bar but this actually mess up my CSS main CSS file when I load the target file in the second div. But it works fine if I use an iFrame which I really don't like to do.
If I could load my CSS file when the div loads the target link file the problem will be solved.
So my problem is how to load the CSS file in to the div when the external file loads.
This is my HTML:
<html>
<head>
<title>Time Sheet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="../../CSS/w3.css">
<link rel="stylesheet" type="text/css" href="../../CSS/main.css">
<!-- Java Scripts -->
<script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jScripts/navBar.js"></script>
<script language="JavaScript" type="text/javascript" src="../../jScripts/fileLoader.js"></script>
</head>
<body>
<div class="w3-bar w3-light-gray w3-card-4" style="z-index: 991">
Home
Link 1
Link 2
Link 3
</div>
<div id="My-container">
<!-- All pages load here -->
</div>
</body>
</html>
My NavBar JavaScript:
$(document).ready(function(){
$('#main').click(function () {
$('#My-container').load('listUser.php');
})
});
File loader JavaScript:
$(document).ready(function(){
if($("#my-container").size>0){
if (document.createStyleSheet){
document.createStyleSheet('../../CSS/main.css');
}
else {
$("head").append($("<link rel='stylesheet' href='../../CSS/main.css' type='text/css' media='screen' />"));
}
}
});
Above file loader function is not mine I found it on a site and tried to use it but when I do console throws an error saying "Size" is not a function. When I change it to length the error goes away but code doesn't work.
If any one asks why don't you just copy paste the nav bar to all the files my answer is I'm lazy.
Any way please show me the light.
It seems you want to check if that specific dom exist or not. For that you need to use length. Also the dom id seems to be My-container but not my-container.
You can try the following
if($("#My-container").length>0){
// rest of the code
}

Blue Menu does not appear during Pop Up in Chrome

On our company website http://exciga.com/Services.php# when one clicks on any of the services on the right hand side (ex: the IT Governance image), a Window Pops Up with information regarding IT Governance along with a Blue Menu on the left hand side. This Blue Menu can be seen in IE 10 but not in Chrome. Please help as I cant figure out what I have done wrong :-)
The 2nd issue I face is in the Service Lists. When I click on the list of Services (ex: the "+"sign near IT Governance), I get a list of services related to it. As you can see the fonts are different here. I am unable to place the same font as in the Service List header ("IT Governance"). If I try making a change, the font for the entire webpage changes. I want the font in the drop down list to be the same as the one in the Service List header ÏT Governance +" Hope I was clear for u guys.
Finally, what is the syntax to ensure that the size of an object does not change if I Zoom in and out in a browser.
The blue menu is actually present in Chrome. It's just that it's getting hidden by the pop up window's size: <div class="popupbox3_pm" id="popuprel3" style="display: block; margin-top: -355px; margin-left: -380px;">, which is its parent element. Because this <div> has position: fixed; and a set width/height, anything outside of its dimensions gets cut.
I'm not quite sure why the z-index: 999 on the blue menu is not setting it above the black space around it though. That might have to do with the placement of the element in the HTML. Also, it should have a higher z-element than the black fade box, which has z-index: 9999;.
First fix <head> section, you have included multiple jQuery libraries, if your plugins can work with latest jQuery (you should test it) then I suggest you to download jQuery 1.10.2 put it in your js folder and replace <script src="js/jquery-1.6.js" ></script> with <script src="js/jquery-1.10.2.min.js"></script>.
Now replace your <head> element with this new one and I wish you luck ;) P.S. I don't say that this will fix the problem you have.
<head>
<title>Exciga</title>
<meta charset="utf-8">
<meta name="description" content="Write short description of your site here.">
<meta name="keywords" content="write, site, keywords, here, like, this, comma, delimited">
<meta name="author" content="Name of the site author">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style2.css"> <!-- Why style2.css ? Is this another style for entire site or you could merge style.css with style2.css ? -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/hover/style_common.css">
<link rel="stylesheet" href="css/hover/style2.css">
<link rel="stylesheet" href="css/jquery.akordeon.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="popup/style.css">
<link rel="stylesheet" href="assets/application-d7d505356b55e600106ef945bd484e9f.css">
<script src="js/jquery-1.6.js"></script>
<!-- These scripts you can/should put just before the </body> tag, if after that some elements lose functionality then put that script again in the <head> section -->
<script src="js/atooltip.jquery.js"></script>
<script src="js/jquery.akordeon.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/Vegur_300.font.js"></script>
<script src="js/PT_Sans_700.font.js"></script>
<script src="js/PT_Sans_400.font.js"></script>
<script src="popup/custom.js"></script>
<script src="assets/application-aa8aaa30c70f4a42013dec916e9b29b0.js"></script>
<script>
$(function() {
$('#buttons').akordeon();
$('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [0, 1,2,3,4,5,6,7] });
});
</script>
<!-- End of scripts -->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 7]>
<div style="clear: both; text-align:center; position: relative;">
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
</head>
Update: About font-family for the Service Lists open style.css and insert code below then change font family and size in accordance with your desires.
.responsive,
.responsive-half {
font-family: Verdana !important;
font-size: 16px !important;
}

Javascript doesn't rock on generated page

I'm quite new in html5 & js and i have some troubles to develop a jQuery Mobile exemple.
From this, i'm just calling another header (partial) when a product is selected to render.
_header2.php:
<!DOCTYPE html>
<head>
<title>h2: <?php echo $_GET['product']; ?> </title>
<meta charset="UTF-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<link rel='stylesheet' href='assets/css/styles_mob.css'/>
<link rel='stylesheet' href='assets/css/styles.css' />
<link href='assets/css/jquery-mobile.css?<?php echo filemtime("assets/css/jquery-mobile.css");?>' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.min.js'></script>
<script type='text/javascript' src='http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js'></script>
</script>
<script type='text/javascript'>
function mymessage(msg)
{
if(!msg) msg="?";
alert(msg);
}
</script>
</head>
<body onload="mymessage('onload !')">
<div data-role="page" id="Home">
<div data-role="header" data-theme="b">
Home
<h1> <?php echo $title?></h1>
</div>
<div data-role="content">
Header code appair correctly on the generated page but js call of mymessage() in body tag doesn't work. Same problem when i try to call it from another partial code (_product.php) :
<li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>
...concole return: referenceError: mymessage is not defined
Everything rock only when a refreshing the current page !!
I've rode some posts (1, 2, 3) with similar problem but i'm still lost.
Any idea please ?
You're missing the <html> tag. You also have an extra </script> closing tag. This could potentially lead to your error.
There are all sorts of strange coding styles and errors like missing the <html> tag, an extra </script> closing tag, missing the closing tag on your anchor in <li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>, and list items should be inside <ul></ul>.
Try this code, it should work. Then analyze it and learn!
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>h2: <?php echo $_GET['product'];?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<link rel="stylesheet" type="text/css" href="assets/css/styles_mob.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<!-- this next line makes me wonder.. why?! -->
<link rel="stylesheet" type="text/css" href="assets/css/jquery-mobile.css?<?php echo filemtime('assets/css/jquery-mobile.css');?>">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript">//<![CDATA[
function mymessage(msg){
msg=msg||'?'; //the usual way to provide defaults
alert(msg);
}
window.onload=function(){ //setting your onload event.
mymessage('onload !');
};
//]]>
</script>
</head><body>
<div data-role="page" id="Home">
<div data-role="header" data-theme="b">
Home
<h1><?php echo $title;?></h1>
</div>
<div data-role="content">
<ul> <!-- Here is your link, working -->
<li>...</li>
</ul>
<!-- added some closing tags for demo-sake -->
</div></div>
</body></html>
PS: since all the beginner errors and the fact that this is just part of your code, I strongly assume the rest of your code has such strange error's to.
Good Luck!!
UPDATE:
Depending on what you'd like to accomplish on page-load, jQuery Mobile might completely change the ballpark.
As can be read in jQuery Mobile's documentation:
By default all navigation within jQuery Mobile is based on changes and
updates to location.hash. Whenever possible, page changes will use a
smooth transition between the current "page" and the next, whether it
is either already present in the DOM, or is automatically loaded via
Ajax.
Another quote from the documentation:
Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This means that the regular techniques described will only fire when you first visit the page, not while navigating the page ajax-style.
Thus in jQuery mobile you must use pageinit or pageshow or one of the other events that are explained in the documentation that suit your exact purpose.
Example how to get pageinit fire for every page (tested live on your site):
$(document).on('pageinit','[data-role=page]', function(){
mymessage('hihi');
});
Or alternatively you could turn off ajax in jQuery Mobile, like this (depends on version):
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});

simple persistent stylesheet switcher

I need help writing a persistent stylesheet switcher. I have found an article on ALA but for whatever reason I cannot get it to work!
I have three stylesheets, the default one for the layout and another two which the user will switch between (adjusting the colours). I may later add one for print but I am not there yet.
The style switcher javascript file can be found here http://www.alistapart.com/d/alternate/styleswitcher.js
I have this in the <head> of my page at the moment.
<script type="text/javascript" src="js/styleswitcher.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="alternate stylesheet" type="text/css" href="css/alt_style1.css" title="purple" />
<link rel="alternate stylesheet" type="text/css" href="css/alt_style2.css" title="red" />
I want the user's selection to be stored in a cookie so that it can be remembered.
The links that select the different stylesheets, in my <body> tag look like this.
purple
red
I really don't know what I am doing wrong. The stylesheet doesn't change. See it in action here - or not as the case is!
http://uni.michaelnorris.co.uk/

Categories