Changestyle.js Script

@technophobeJul 10.2009

I have just started to use this script, unfortunately I cannot seem to get the print.css file to kick in when needed.

the top of the changestyle script now looks like

[CODE]// These are the variables; you can change these if you want var expDays = 9999; // How many days to remember the setting var standardStyle = ‘2’; // This is the number of your standard style sheet; this will be used when the user did not do anything. var nameOfCookie = ‘switchstyle’; // This is the name of the cookie that is used. var urlToCSSDirectory = ”; // This is the URL to your directory where your .css files are placed on your site. For example: http://www.seniorennet.be/URL_TO_STYLESHEET_DIRECTORY_OF_YOUR_SITE/

// These are the names of your different .css files; use the name exactly as on your Web site var ScreenCSS_1 = ‘default.css’; var ScreenCSS_2 = ‘stylesheet3.css’; //var ScreenCSS_3 = ‘screen_3.css’; //var ScreenCSS_4 = ‘screen_4.css’; //var ScreenCSS_5 = ‘screen_5.css’;

// If you use different .css files for printing a document, you can set these. If you don’t even know what this is, name then everything exactly the same as above. // So: make then PrintCSS_1 the same as ScreenCSS_1, for example “screen_1.css”. var PrintCSS_1 = ‘print2.css’; //var PrintCSS_2 = ‘print_2.css’; //var PrintCSS_3 = ‘print_3.css’; //var PrintCSS_4 = ‘print_4.css’; //var PrintCSS_5 = ‘print_5.css’;

/***********************************************************************************************

DO NOT CHANGE ANYTHING UNDER THIS LINE, UNLESS YOU KNOW WHAT YOU ARE DOING

***********************************************************************************************/[/CODE]

Print2.css is the only print I am using so all the others are commented out.

I have also got the following in my html file

[CODE]<li><a href=”#” onclick=”SetCookie(nameOfCookie,2, exp); doRefresh();”>High Contrast</a></li> <li><a href=”#” onclick=”SetCookie(nameOfCookie,1, exp); doRefresh();”>Normal page</a></li> <li><a href=”#” onclick=”SetCookie(nameOfCookie,3, exp); doRefresh();”>Print page</a></li>[/CODE]

What have I missed out, the first two links work but the print does not.

Thanks in advance for any help.
?

to post a comment

JavaScript

16 Comments(s) _↴

@criterion9Jul 10.2009 — #Is the content of the CSS file using a display mode selector? If so you won't see the print.css style unless you are viewing the print preview or actually printing the document. The "screen" display will still show whatever has been set for the "screen" output.

@technophobeauthorJul 10.2009 — #Well when I was given this script at college I was given the following to put into the html pages

[CODE]<link href="default.css" rel="stylesheet" type="text/css" />[/CODE]

Rather than entering

[CODE]<link rel="stylesheet" media="screen" type="text/css" href="default.css" />
 <link rel="stylesheet" media="print" type="text/css" href="print2.css" />
 <link rel="stylesheet" media="handheld" type="text/css" href="mobile.css" />[/CODE]

When I go to print preview as I am using the latest versions of chrome, safari, firefox and ie when you go into print preview the show the page stripped back anyway but it is all out of line and obviously for older browsers I am unsure how far this goes back so I want to be able to use a css for the print as this example http://www.ictfd.com/index2.html however the only way that I can get this to see the css from the code examples already given is to change the

<link href="default.css" rel="stylesheet" type="text/css" />[/QUOTE]

to

[CODE]<link href="print2.css" rel="stylesheet" type="text/css" />[/CODE]

Surely there is a way of getting the print to work upon selection, see example http://www.ictfd.com , the options are at the top of the sidebar on this page.

Thanks for help in advance.

@criterion9Jul 10.2009 — #You can still select the "media" inside the css file (which is generally a better practice and conforms to xhtml standards as well). I only saw a difference in the "print" version on your second link when I used the print preview. Additionally the javascript in the code throwing an alert box is heavily annoying since I'm using FF and it is telling me I'm not.

I'm also thinking part of your problem may be because you aren't including the js file into your html...just a thought ;-).

@technophobeauthorJul 10.2009 — #I have looked at the script again at http://javascript.internet.com/css/change-style.html, looking at it I have followed the instructions to the letter. I assume someone has used this script and made similar choices to me as far as

default.css for default display

High Contrast for brighter colors

and finally

print

I do not see where I am meant to reference the .js file other than the details I have already quoted in this thread.

I have removed the msg while I try to work this problem out so it is not annoying to anyone who helps.

I am at a loss as to how to resolve this!

@technophobeauthorJul 10.2009 — #I just looked again through the html page, i do have the .js link in there

[CODE]<script type="text/javascript" src="changestyle.js">
 </script>[/CODE]

I assume that this is the only link I need?

Thanks for any help

@technophobeauthorJul 10.2009 — #Ok I have the print css file working if you go to print preview in the browser menu's but I was also wanting the page that would be printed out to display on screen as the print css file lays it out, still I havent got everything working.

Any ideas for this last issue please.

I am using this page as the test page until it all works as it should http://www.ictfd.com/index3.html#top

@criterion9Jul 10.2009 — #When I view the print preview in FF I'm not seeing anything apart from unstyled html markup. You'll still need to add media type selectors to the print.css stylesheet. Theoretically you could select both screen and print and assign the same styles to both...

I must've overlooked the javascript inclusion code before as I was checking the link you sent me (although FF was the one that threw the error saying the functions weren't defined).

@technophobeauthorJul 10.2009 — #When I view the print preview in FF I'm not seeing anything apart from unstyled html markup.[/QUOTE]

the css for the print preview although is not exactly how I want it to display should show a basic page that has a very basic css.

[CODE]@charset "utf-8";
 /* CSS Document */
 
 body {
 background:#FFFFFF;
 color:#000000;
 margin: 0px;
 padding:40px;
 font:Arial, Helvetica, sans-serif;
 }
 
 /* Hide the following items */
 
 #footer {
 display:none;
 }
 
 #logo {
 display:inline;
 }
 
 h1, h2, h3, h4 {
 font-family:"Courier New", Courier, monospace;
 font-weight:normal;
 line-height:135&#37;;
 color:#000000;
 }
 
  h1 {
   font-size:24pt;
   }
  h2 {
   font-size:22pt;
   }
  h3 {
   font-size:18pt;
   }
  h4 	a:link, h4 a:visited {
   color:#000000;
   text-decoration:none;
   }
 
 /* Links Black */
 a:link, a:visited, a:active {
 color:#000000;
 text-decoration:none;
 }
 
 /* Show URL's only inside the article container */
 
 #sidebar a:after {
 content: " (" attr( href) ")";
 font-size:11pt;
 }
 
 #content a:after {
 content: " (" attr( href) ")";
 font-size:11pt;
 }
 
 #menu a:after {
 content: " (" attr( href) ")";
 font-size:11pt;
 }[/CODE]

This is just to get away from printing out the page as is displayed on the monitor, not wasting ink etc etc.

http://www.ictfd.com/index3.html is the page that I am trying to get all this working but if you look at http://www.ictfd.com/index2.html this is how it should print out using the above css

I still am not sure why the print link in the menu will not display the page as it would be printed.

Thanks for any help!

@criterion9Jul 10.2009 — #It seems like the print.css stylesheet is only affecting the print preview...meaning the media selector is being used on it somehow...not sure how to help you further (I still haven't figured out why you aren't just attaching the print.css to the print media in the first place, in which case it wouldn't matter how it looks when the browser renders it but the printed version would have the correct styles applied).

@technophobeauthorJul 10.2009 — #I am trying to get this javascript working as there doesn't not seem any reason why it shouldn't I am just unsure what is missing.

Be grateful for any help.

?

@rnd_meJul 11.2009 — #would your styles work without javascript enabled?

-content

-presentation

-behavior

@technophobeauthorJul 11.2009 — #I realise there could be issues regarding javascript but no matter what there could always be issues due to the amount of browsers about, the settings people make on their pc's as far as resolution etc.

I just want to try to get this script working as it should.

Any help appreciated as to how I would get it to work, the screen view works fine, so does the high contrast but the print option at http://www.ictfd.com does not, I want it to work so that if someone selects the print option it will show the user what they are about to print out rather than having to go to print preview.

e.g. http://www.ictfd.com/index2.html

Thanks in advance for any assistance.

@criterion9Jul 11.2009 — #Post your javascript contents. Obviously you are doing something different for the first two links that you are not doing for the third. My guess would be that you have misspelled the css file name that you are trying to load but I'm not going to search through the spaghetti site to find it.

@technophobeauthorJul 11.2009 — #This is the .js file in full, only the top that I have altered and thats just the file names.

[CODE]// These are the variables; you can change these if you want
 var expDays = 9999;  // How many days to remember the setting
 var standardStyle = '2'; // This is the number of your standard style sheet; this will be used when the user did not do anything.
 var nameOfCookie = 'switchstyle'; // This is the name of the cookie that is used.
 var urlToCSSDirectory = ''; // This is the URL to your directory where your .css files are placed on your site.  For example: http://www.seniorennet.be/URL_TO_STYLESHEET_DIRECTORY_OF_YOUR_SITE/
 
 // These are the names of your different .css files; use the name exactly as on your Web site
 
 var ScreenCSS_1 = 'default.css';
 var ScreenCSS_2 = 'stylesheet3.css';
 
 
 //var ScreenCSS_3 = 'screen_3.css';
 //var ScreenCSS_4 = 'screen_4.css';
 //var ScreenCSS_5 = 'screen_5.css';
 
 // If you use different .css files for printing a document, you can set these.  If you don't even know what this is, name then everything exactly the same as above.
 // So: make then PrintCSS_1 the same as ScreenCSS_1, for example "screen_1.css"
 .
 var PrintCSS_1 = 'print2.css';
 
 
 //var PrintCSS_2 = 'print_2.css';
 //var PrintCSS_3 = 'print_3.css';
 //var PrintCSS_4 = 'print_4.css';
 //var PrintCSS_5 = 'print_5.css';
 
 /***********************************************************************************************
 
  DO NOT CHANGE ANYTHING UNDER THIS LINE, UNLESS YOU KNOW WHAT YOU ARE DOING
 
 ***********************************************************************************************/
 
 // This is the main function that does all the work
 function switchStyleOfUser(){
 var fontSize = GetCookie(nameOfCookie);
 if (fontSize == null) {
 fontSize = standardStyle;
 }
 
  if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ' ' + ScreenCSS_1 + '" media="screen">'); }
  if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_2 + '" media="screen">'); }
  if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_3 + '" media="screen">'); }
  if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_4 + '" media="screen">'); }
  if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_5 + '" media="screen">'); }
 
  if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_1 + '" media="print">'); }
  if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_2 + '" media="print">'); }
  if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_3 + '" media="print">'); }
  if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_4 + '" media="print">'); }
  if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_5 + '" media="print">'); }
 
  var fontSize = "";
  return fontSize;
 }
 
 var exp = new Date();
 exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
 
 // Function to get the settings of the user
 function getCookieVal (offset) {
 var endstr = document.cookie.indexOf (";", offset);
 if (endstr == -1)
 endstr = document.cookie.length;
 return unescape(document.cookie.substring(offset, endstr));
 }
 
 // Function to get the settings of the user
 function GetCookie (name) {
 var arg = name + "=";
 var alen = arg.length;
 var clen = document.cookie.length;
 var i = 0;
 while (i < clen) {
 var j = i + alen;
 if (document.cookie.substring(i, j) == arg)
 return getCookieVal (j);
 i = document.cookie.indexOf(" ", i) + 1;
 if (i == 0) break;
 }
 return null;
 }
 
 // Function to remember the settings
 function SetCookie (name, value) {
 var argv = SetCookie.arguments;
 var argc = SetCookie.arguments.length;
 var expires = (argc > 2) ? argv[2] : null;
 var path = (argc > 3) ? argv[3] : null;
 var domain = (argc > 4) ? argv[4] : null;
 var secure = (argc > 5) ? argv[5] : false;
 document.cookie = name + "=" + escape (value) +
 ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
 ((path == null) ? "" : ("; path=" + path)) +
 ((domain == null) ? "" : ("; domain=" + domain)) +
 ((secure == true) ? "; secure" : "");
 }
 
 // Function to remove the settings
 function DeleteCookie (name) {
 var exp = new Date();
 exp.setTime (exp.getTime() - 1);
 var cval = GetCookie (name);
 document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
 }
 
 // This function is used when the user gives his selection
 function doRefresh(){
 location.reload();
 }
 
 // This will call the main function.  Do not remove this, because otherwise this script will do nothing...
 document.write(switchStyleOfUser());
 [/CODE]

Index.html has the following code in

[CODE]<script type="text/javascript" src="changestyle.js">
 </script>[/CODE]

[CODE]<li><a href="#" onclick="SetCookie(nameOfCookie,2, exp); doRefresh();">High Contrast</a></li>
 <li><a href="#" onclick="SetCookie(nameOfCookie,1, exp); doRefresh();">Normal page</a></li>
 <li><a href="#" onclick="SetCookie(nameOfCookie,3, exp); doRefresh();">Print page</a></li>[/CODE]

this is for http://www.ictfd.com

What I want is to get it so that if you select print it displays on screen what you will print off as in http://www.ictfd.com/index2.html

Thanks

@criterion9Jul 11.2009 — #Is the javascript exactly the same for both versions? Check where the print2.css is added in the one that is working versus the one that isn't working.

@technophobeauthorJul 11.2009 — #Yes the javascript is exactly the same, the only differance is in the html,

index.html has default.css

index2.html has print.css

Also in #JavaScript _↴

Pinpointed the Problem: working in IE and Safari, but not in Firefox Javascript problem: Changing color of textbox?Alternative for onLoad

Success!

Help @technophobe spread the word by sharing this article on Twitter...

Tweet This

Changestyle.js Script

16 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Changestyle.js Script

16 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

16 Comments(s) _↴

Also in #JavaScript _↴