Solved

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

Posted on 2008-10-23
7
218 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
[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
  • 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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

724 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