Results 1 to 4 of 4

Thread: Switch themes using document.className

  1. #1
    Join Date
    Mar 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Switch themes using document.className

    I am currently switching themes with css "title". See: http://12phillipstreet.com/button.html I would like to switch themes using document.className. Any suggestions?
    Last edited by Beverleyh; 03-08-2015 at 01:34 PM. Reason: Formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Your question is unclear.

    What is it exactly that you would like help with?

    If you want to reference the <html> element, document.className should be document.documentElement.className
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Mar 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Re: document.className

    Quote Originally Posted by Beverleyh View Post
    Your question is unclear.

    What is it exactly that you would like help with?

    If you want to reference the <html> element, document.className should be document.documentElement.className
    "Thanks for your quick response Beverly. I will try to clarify my problem for you.
    Currently my site has 23 pages each using a large"common" style sheet plus "3 optional theme-colour" style sheets. The theme-colour options are switched using the traditional alternative "title" Eg. <link href="css/black.css" rel="alternate stylesheet" type="text/css" title="black" /> and maintained globally with Javascript and cookies. This all works very well.

    My problem: In order to reduce the number of server requests, I have combined the three small theme-colour styles within the common CSS. The themes are now switched with Eg. <button class="black" type="submit" onclick="document.body.className = 'tb';">.</button> . This also works well except that the theme change is not global and does not hold on refresh.
    I think my problem is really a Javascript/cookie problem. Unfortunately my knowledge of Javascript is very limited so I'm hoping some kind person can provide me with a suitable script to make it work globally and solve my problem.
    See: html://12phillipstreet/button.html & html://12phillipstreet/accessibility.html

    Thanks in advance jl"

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    remove the body onload statement and associated code

    change the HTML to

    Code:
    <div class=button-new>Themes:
    <button class=white type=submit onclick="CSS('tw',1);">.
    </button>
    <button class=khaki type=submit onclick="CSS('tk',1);">.
    </button>
    <button class=black type=submit onclick="CSS('tb',1);">.
    </button>
    </div>

    insert this code just before the </BODY> tag

    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function CSS(c,d){
      if (c){
       document.body.className=c;
       document.cookie='css='+c+(typeof(d)=='number'?';expires='+(new Date(new Date().getTime()+d*86400000).toGMTString())+';path/;':';');
      }
    }
    
    function cookie(nme){
      var re=new RegExp(nme+'=[^;]+','i');
      return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
    }
    
    CSS(cookie('css'),1);
    /*]]>*/
    </script>
    function CSS parameters are:
    the first function parameter is the class name,
    the second parameter(in red) refers to the number od days to restor the CSS else it is the browser session
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. themes
    By auriaks in forum PHP
    Replies: 3
    Last Post: 10-08-2009, 08:39 PM
  2. Resolved Assign a classname to <li> only if it has child
    By TheJoshMan in forum JavaScript
    Replies: 2
    Last Post: 01-07-2009, 09:42 AM
  3. CSS web page themes
    By CHOP_CHOP in forum Looking for such a script or service
    Replies: 4
    Last Post: 02-17-2008, 05:17 PM
  4. Pop-it menu | Link to CSS themes
    By Master-T in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 03-28-2007, 06:14 PM
  5. Tabbed Document Viewer switch automatically to the content
    By komi in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-15-2005, 04:55 AM

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
  •