?
Solved

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

Posted on 2008-10-23
7
Medium Priority
?
231 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 7

Accepted Solution

by:
bluV11t earned 2000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

616 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