Solved

How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

Posted on 2008-10-23
7
214 Views
Last Modified: 2011-10-19
Hi Experts, i found a very code example in the internet on how to change the stylesheete in java script using multiple css, i attached my code.
there are 2 problems with this code:
1- in the example i am using cookies to save the user selection but its not working, in each page the style return to its default even if the user choose another style? is something wrong with the javascripts functions?

2- i am getting an error in the internet explorer for the javascript
Error: '2' is null or not an object
and this error belong to this function
""" get_cookie ( cookie_name ) """  for this line "" return decodeURIComponent ( cookie_value[2] ) ""

Can you please help me solving this problem? coz i am still cant understand cookies

Thank you.    
0
Comment
Question by:AZZA-KHAMEES
  • 4
  • 2
7 Comments
 
LVL 7

Expert Comment

by:bluV11t
ID: 22784975
Hi! Could you please post the code?
0
 

Author Comment

by:AZZA-KHAMEES
ID: 22785021
i attached the example
Example.txt
0
 
LVL 7

Expert Comment

by:bluV11t
ID: 22786083
Ok, the javascript error is the showstopper. I guess cookie_value is no array :-)

Replace the function:
function get_cookie ( cookie_name )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var cookie_string = document.cookie ;
    if (cookie_string.length != 0) {
        var cookie_value = cookie_string.match (
                        '(^|;)[\s]*' +
                        cookie_name +
                        '=([^;]*)' );
        return decodeURIComponent ( cookie_value) ;
    }
    return '' ;
}  

Open in new window

0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 7

Accepted Solution

by:
bluV11t earned 500 total points
ID: 22786150
In fact, replace the entire <script></script> block with this:

<script language="javascript">
var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;
 
function switch_style ( css_title )
{
  var i, link_tag ;
  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) {
      link_tag[i].disabled = true ;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false ;
      }
    }
    createCookie( style_cookie_name, css_title,
      style_cookie_duration );
  }
}
function set_style_from_cookie()
{
  var css_title = readCookie( style_cookie_name );
  if (css_title.length) {
    switch_style( css_title );
  }
}
 
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 var expires = "";
	document.cookie = style_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;
}
 
    </script>

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22792210
generally speaking, javascript will NOT allow you to access the contents of the HEAD of a document.  Once you realize it is only BODY accessible, then you can figure out what you need to do to get it to work.
0
 
LVL 7

Expert Comment

by:bluV11t
ID: 22793927
0
 

Author Closing Comment

by:AZZA-KHAMEES
ID: 31509149
Thank you, its really worked Thank you bluV11t :)
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

829 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