Solved

Problem with style switcher (CSS + Jquery)

Posted on 2009-07-13
2
508 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
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now