Solved

Problem with style switcher (CSS + Jquery)

Posted on 2009-07-13
2
521 Views
Last Modified: 2013-12-08
Hi
 I have a problem with the print functionnality on my web site.
I use a style switcher to change the font size of my pages:
> jquery 1.2.6 with management of the cookies
 
In my Css, I use the option "@media print" to manage what I want or not to be print. All my  classes are placed at the end of the files main.css (normal size) and larger.css (larger size)

 With the normal size, I do not have printing problems with these browser :
 > IE6, IE 7, IE8
 > Opera
 > Chrome
 > Firefox 3.5
 > Safari 4

My problem: With larger size, print is correct for all the navigators except Internet explorer. it seems that Internet explorer do not use at all my larger css.

any idea?

thanks.

Im using this code, which is setting the default style sheet Ive defined in the master page
 
In the header of the master page:
                <!-- default stylesheet - shown originally-->
                <link rel="stylesheet" type="text/css" href="/Style Library/Main.css" title="default" />
                               
                
                <!-- alternate CSS used to manage a bigger font-size -->
                <link rel="alternate stylesheet" type="text/css" href="/Style Library/larger.css" title="larger" /> 
 
 
And :
 
<div id="StyleSwitcher">
                <a href="/" onclick='setActiveStyleSheet("default"); return false;' id="Adefault" title="Normal font size">A</a> - 
                <a href="/" onclick='setActiveStyleSheet("larger"); return false;' id="Alarger" title="Larger font size"> A<sup>+</sup></a> 
</div>
 
The javascript :
 
The code : 
 
 
 
function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}
 
function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}
 
function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}
 
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
 
window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}
 
window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}
 
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Open in new window

0
Comment
Question by:MerlinMM3
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 24853167
try these:
function setActiveStyleSheet(title) {
	var a = document.getElementsByTagName("link");
	var i=-1,limit=a.length;
	
	while(++i<limit)
	{
		if("undefined"==typeof(a[i].getAttribute))
		{
			if( a[i].rel &&  a[i].rel.indexOf("style") != -1 && a[i].title ) 
			{
	      		a[i].disabled = true;
	      		if(a[i].title == title)
				{
					a[i].disabled = false;
				}
			}
		}
		else
		{
			if(a[i].getAttribute("rel").indexOf("style") != -1 && a[i].getAttribute("title")) 
			{
	      		a[i].disabled = true;
	      		if(a[i].getAttribute("title") == title)
				{
					a[i].disabled = false;
				}
			}
		}
	}
}
 
function getActiveStyleSheet() 
{
	var a=document.getElementsByTagName("link");
	var i=-1,limit=a.length;
	while(++i<limit)
	{
		if("undefined"==typeof(a[i].getAttribute))
		{
			if(a[i].rel && a[i].rel.indexOf("style") != -1 && a[i].title && !a[i].disabled)
				return a[i].title;
		}
		else
		{
			if(a[i].getAttribute("rel").indexOf("style") != -1 && a[i].getAttribute("title") && !a[i].disabled)
				return a[i].getAttribute("title");
		}
	}
return null;
}
 
function getPreferredStyleSheet() {
	var a = document.getElementsByTagName("link");
	var i=-1,limit=a.length;
	while(++i<limit)
	{
		if( "undefined"==typeof(a[i].getAttribute))
		{
			if(a[i].rel && a[i].rel.indexOf("style") != -1 && a[i].rel.indexOf("alt") == -1 && a[i].title )
				return a[i].title;
		}
		else
		{
			if(a[i].getAttribute("rel").indexOf("style") != -1 && a[i].getAttribute("rel").indexOf("alt") == -1 && a[i].getAttribute("title") )
				return a[i].getAttribute("title");
		}
	}
return null;
}

Open in new window

0
 

Accepted Solution

by:
MerlinMM3 earned 0 total points
ID: 24915145
Ok I found a workaround

I need to load evering in my print.css instead of only the necessary class.
It's not clean, but it's working.
0

Featured Post

To Patch or not to Patch? That is the question!

Don't get caught out like thousands of others around the world in the recent Ransomware Fiasco!
Discuss..
- Why it's not a good idea to wait before Patching
- Sensible approaches to Patching discussed
- Add your feedback, comments and suggestions

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

736 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question