?
Solved

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

Posted on 2008-10-23
7
Medium Priority
?
223 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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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

801 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