SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Hybrid View

  1. #1
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Trouble with style sheet switcher

    On my site, I have a little gizmo that lets people change the style sheet that affects what the page looks like. The code is like this:

    Code:
    function ChangeStyle(DesiredStyle, NextStyle)
    {
    	window.document.getElementById("ScreenStyleSheet").href = "/Styles/" + DesiredStyle + ".Css";
    	window.document.getElementById("ChangeStyleButton").href = "javascript:ChangeStyle('" + DesiredStyle + "', '" + NextStyle + "');";
    	window.document.cookie = "Style =" + DesiredStyle;
    }
    function CheckCurrentStyle()
    {
    	var StyleCookie = window.document.cookie;
    	if(StyleCookie != null)
    	{
    		if(StyleCookie == "Style=VibrantBlue"){ChangeStyle("VibrantBlue", "SimpleGray");}
    	}
    	else{ChangeStyle("SimpleGray", "VibrantBlue");}
    }
    Although I don't get an error, absolutely nothing happens. What should be happening is that the Simple Gray style sheet loads. Any ideas? Thanks in advance for all suggestions.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't tested it, but this might be helpful:

    Code:
    function ChangeStyle(DesiredStyle, NextStyle)
    {
    window.document.getElementById("ScreenStyleSheet" ).href = "/Styles/" + DesiredStyle + ".Css";
    window.document.getElementById("ChangeStyleButton" ).href = "javascript:ChangeStyle('" + DesiredStyle + "', '" + NextStyle + "');";
    cbeSetCookie('Style', DesiredStyle);
    }
    function CheckCurrentStyle()
    {
    var StyleCookie = cbeGetCookie('Style');
    if(StyleCookie != null)
    {
    if(StyleCookie == "VibrantBlue" ){ChangeStyle("VibrantBlue", "SimpleGray" );}
    }
    else{ChangeStyle("SimpleGray", "VibrantBlue" );}
    }
    
    // From the CBE API:
    // (cookie implementations based on code from Netscape Javascript Guide)
    function cbeSetCookie(name, value, expire) {
      document.cookie = name + "=" + escape(value) + ((!expire) ? "" : ("; expires=" + expire.toGMTString())) + "; path=/";
    }
    function cbeGetCookie(name) {
      var value=null, search=name+"=";
      if (document.cookie.length > 0) {
        var offset = document.cookie.indexOf(search);
        if (offset != -1) {
          offset += search.length;
          var end = document.cookie.indexOf(";", offset);
          if (end == -1) end = document.cookie.length;
          value = unescape(document.cookie.substring(offset, end));
        }
      }
      return value;
    }

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay... thanks a lot for your suggestion, Mike. Unfortunately, it doesn't work. The Simple Gray style sheet doesn't load. I modified your code a bit, so here it is:

    Code:
    function ChangeStyle(DesiredStyle, NextStyle)
    {
    	window.document.getElementById("ScreenStyleSheet").href = "/Styles/" + DesiredStyle + ".Css";
    	window.document.getElementById("ChangeStyleButton").href = "javascript:ChangeStyle('" + DesiredStyle + "', '" + NextStyle + "');";
    	SetCookie("Style", DesiredStyle);
    }
    function PrintPage(){window.print();}
    function CheckCurrentStyle()
    {
    	var StyleCookie = GetCookie("Style");
    	if(StyleCookie != null)
    	{
    		if(StyleCookie == "VibrantBlue"){ChangeStyle("VibrantBlue", "SimpleGray");}
    	}
    	else{ChangeStyle("SimpleGray", "VibrantBlue");}
    }
    function SetCookie(Name, Value, Expire)
    {
    	window.document.cookie = Name + "=" + escape(Value) + ((!Expire) ? "" : ("; expires=" + Expire.toGMTString())) + "; path=/";
    }
    function GetCookie(Name)
    {
    	var Value = null, Search = Name + "=";
    	if(window.document.cookie.length > 0)
    	{
    		var Offset = document.cookie.indexOf(Search);
    		if(Offset != -1)
    		{
    			Offset += Search.length;
    			var End = document.cookie.indexOf(";", Offset);
    			if(End == -1)
    			{
    				End = window.document.cookie.length;
    				Value = unescape(window.document.cookie.substring(Offset, End));
    			}
    		}
    	}
    	return Value;
    }
    Any ideas?

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The cookie functions aren't the problem.

    This page demonstrates stylesheet switching that works in both IE and Mozilla.

    * edit *

    the second technique also works in Opera7


  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm... Mike, this style sheet switcher works before I added the cookie functions! I'm really, really stuck.

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you give us a link to the page?

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erm... no... I'm running a dev server off of my work machine, and I'm behind a firewall, so I even if I were to hand out my IP address, the firewall would get mad and reject you. Sorry 'bout that.

    Do you want the full code of the page? That much I can do.

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello?

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If its too much just post the html for the element with id = ScreenStyleSheet and ChangeStyleButton

  10. #10
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In hopes of getting this thing to work, I'll post the entire XHTML page, since you already have the JavaScript.

    HTML Code:
    <%@ Page Language="C#" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
    <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" lang="en" xml:lang="en">
     <head>
      <title><asp:label id="Title" runat="server"/></title>
      <link id="ScreenStyleSheet" rel="stylesheet" type="text/css" media="screen" href="/Styles/SimpleGray.Css" />
      <script type="text/javascript" src="/Scripts.JS"></script>
     </head>
     <body onload="CheckCurrentStyle();">
    	<div class="Page">
    		<div class="HeaderRegion">
    			<div class="Header"><asp:label id="Header" runat="server"/></div>
    			<div class="Utilities">
    				<div><a id="ChangeStyleButton" href="">CHANGE STYLE</a></div>
    				<div><a href="javascript:PrintPage();">PRINT PAGE</a></div>
    			</div>
    			<div class="InfoBar"></div>
    		</div>
    		<div class="Sidebar"></div>
    		<div class="ContentFrame"><asp:label id="Content" runat="server"/></div>
    	</div>
     </body>
    </html>
    
    
    
    Please ignore the ASP.Net stuff.

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi compuwhiz7,

    First let me apologize for going off on a tangent

    I made two changes that I think fixed it.

    Line 5: I Reversed the order of arguments to the ChangeStyle function.

    Line 15: I added this line.

    Try it and let me know if it works.

    Code:
    01  function ChangeStyle(DesiredStyle, NextStyle)
    02  {
    03  window.document.getElementById("ScreenStyleSheet" ).href = "/Styles/" + DesiredStyle + ".Css";
    04  //window.document.getElementById("ChangeStyleButton" ).href = "javascript:ChangeStyle('" + DesiredStyle + "', '" + NextStyle + "');";
    05  window.document.getElementById("ChangeStyleButton" ).href = "javascript:ChangeStyle('" + NextStyle + "', '" + DesiredStyle + "');";
    06  SetCookie("Style", DesiredStyle);
    07  }
    08  function PrintPage(){window.print();}
    09  function CheckCurrentStyle()
    10  {
    11    var StyleCookie = GetCookie("Style" );
    12    if(StyleCookie != null)
    13    {
    14      if(StyleCookie == "VibrantBlue" ){ChangeStyle("VibrantBlue", "SimpleGray" );}
    15      else{ChangeStyle("SimpleGray", "VibrantBlue" );}
    16    }
    17    else{ChangeStyle("SimpleGray", "VibrantBlue" );}
    18  }

  12. #12
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Mike. Sorry for not responding; I had accidentally deleted all my subscriptions.

    I'll report back in a bit a see how it works.

  13. #13
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Sorry for not responding, Mike. I'm recoding my site, so when I come around from the "dark side" I'll post the results.

    Once again, thanks.

    Compuwhiz7

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

  15. #15
    SitePoint Enthusiast kgish's Avatar
    Join Date
    Dec 2001
    Location
    Gouda, The Netherlands
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might want to check out the alistapart web site at http://http://www.alistapart.com/stories/alternate/ for a more detailed tutorial.
    Kiffin
    Your average future-famous kind of guy...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •