Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Onchange style sheet

    Hello world!

    Im trying to do a drop down that make the visitor able to choose a own style sheet.

    I have tried like this:

    HTML:

    Code:
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <!-- Alternativ  -->
    
    <link rel="alternative stylesheet" type="text/css" href="gold.css "title="gold">
    <link rel="alternative stylesheet" type="text/css" href="blue.css "title="blue">
    <link rel="alternative stylesheet" type="text/css" href="gold.css "title="image">
    <link rel="alternative stylesheet" type="text/css" href="gold.css "title="text">
    
    <select id="style">
    
      <option value="original">Orginal</option>
      <option value="gold">Gold</option>
      <option value="blue">Blue</option>
      <option value="image">no image</option>
      <option value="text">new textstile</option>
      
    </select>
    Code:
    //loading the page
    window.onload = function(){
    
                 var x = document.getElementById("style").onchange = chooseStyle;
    			 var a = document.getElementsByName("link");
    	
    window.onload=init;
       }
    
    function chooseStyle(){
    	
    	              var x = document.getElementById("style").value;
                      var a = document.getElementsByName("link");
                     for(i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
    	   
         if(a.getAttribute("rel").indexOf("style") != -1
            && a.getAttribute("title")) {
           a.disabled = true;
           if(a.getAttribute("title") == title) a.disabled = false;
         }
       }
    }
    Can somebody give me a hint on how I can conect the option "gold" with style sheet gold and so on? Can I use title or is it better to use class?
    Im thinking something like if classname/or title = gold disabled true...
    Some advice would be great!

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    You messed it up, but only a little bit ;-)
    Try this
    Code:
    window.onload = function() {
       document.getElementById("style").onchange = chooseStyle;
    };
    
    function chooseStyle() {
       var title = document.getElementById("style").value;
       var theLinks = document.getElementsByTagName("link");
       for(i = 0; i < theLinks.length; i++) {
          var a = theLinks[i];
          if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
             a.disabled = true;
             if(a.getAttribute("title") == title) a.disabled = false;
          }
       }   
    }

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Multiple style sheet onchange

    Thanks devnull69 for your replay and for cleaning up my code.
    But still I wonder how I can conect my style sheets options with the javascript and with my dropdown menu so the visitor shoose the style.

    I have five diffrent stylesheets. One is the "original". I have one dropdown menu were the visitor can choose the style he want.

    If you know a way to link my stylesheet with the dropdown from javascript I would appreciate a little help.

    Now the javascript only change the style sheet when the browser upload the page, I want the original stylesheet to be active when the visitor enter the homepage but inside he can choose from four diffrent style.
    Any suggestion were to start?

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    You are using two terms ... and I do not see the difference

    1. style sheet options
    2. dropdown menu

    I thought the dropdown menu presents the user with the optional style sheets? If above code shows the dropdown menu, what do you mean with "style sheet options"?

    The above code takes all available style sheets from the page header (all <link> tags) and activates / deactivates the styles according to the selection in the dropdown.

    EDIT: For the function to work the <link> tags needs to have a title attribute naming the style sheet (the same as the value=".." entries of the dropdown!)
    Last edited by devnull69; 05-31-2011 at 05:36 PM.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by Energia View Post
    Now the javascript only change the style sheet when the browser upload the page, I want the original stylesheet to be active when the visitor enter the homepage but inside he can choose from four diffrent style.
    Any suggestion were to start?
    1. find setCookie and getCookie.
    2. in onchange: setCookie("ss", this.value);
    3. in onload: document.getElementById("style").value=getCookie("ss"); chooseStyle();
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    setCookie, getCookie

    I would like to do something like this atricle.

    But I want to seperate my HTML and javascript.
    So I need to set an cookie as you pointed out rnd me. I have been reading books and checking around on the internet but I cant make the code work. Do I have to put my:

    Code:
    <select id="style">
    
      <option value="original">Orginal</option>
      <option value="gold">Gold</option>
      <option value="blue">Blue</option>
      <option value="image">No image</option>
      <option value="text">New textstyle</option>
      
    </select>
    in a form to make it work? And if, why?

    What can I use onclick or onchange?


    My strategy is to first make it working to just change the styles as the visitors visit the page then after that I´m thinking to creat a cookie were I can store the choice for the future, so it is allready chosen when the visitors return.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    try something like:

    Code:
    <script>
    function getCookie(k) {var d = document.cookie || "";var pairs = d.split(k + "=");if (pairs && pairs[1]) {return unescape(pairs[1].split(";")[0]);}};
    function setCookie(nm, valu) {var e2 = (new Date(2019, 1, 1)).toGMTString();document.cookie = nm + "=" + escape(valu) + "; expires=" + e2;}
    
    
    
    function chooseStyle(title) {
       title = title || document.getElementById("style").value;
       setCookie("css", title);
       var theLinks = document.getElementsByTagName("link");
       for(i = 0; i < theLinks.length; i++) {
          var a = theLinks[i];
          if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
             a.disabled = true;
             if(a.getAttribute("title") == title){ a.disabled = false;}
          }
       }   
    }
    
    window.onload=function(){ chooseStyle(getCookie("css")); };
    
    </script>
    
    <select id="style" onchange="chooseStyle(this.value)">
    
      <option value="original">Orginal</option>
      <option value="gold">Gold</option>
      <option value="blue">Blue</option>
      <option value="image">No image</option>
      <option value="text">New textstyle</option>
      
    </select>
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    setCookie, getCookie, onchange css

    Thank you rnd me for sharing your code. I could not make it work though, but it is a higher risk it is my lack of knowledge rather then there was something wrong with your code. Also it can be that Iam trying to not have any onchange in my html.
    After lot of reading and looking through diffrent codes I have this:

    My HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
      <head>
    
    <script type="text/javascript" src="java/java.js"></script>
    
    <link rel="stylesheet" type="text/css" href="style.css" title="orginal">
    
    <!-- Alternativ stylesheet -->
    
    <link rel="alternate stylesheet" type="text/css" href="gold.css" title="gold">
    <link rel="alternate stylesheet" type="text/css" href="blue.css" title="blue">
    <link rel="alternate stylesheet" type="text/css" href="image.css" title="image">
    <link rel="alternate stylesheet" type="text/css" href="text.css" title="text">
    
    
      </head>
    
      <body>
    
    <select id="style">
    
      <option value="original" selected>Orginal</option>
      <option value="gold">Guld</option>
      <option value="blue">Blå</option>
      <option value="image">Utan bilder</option>
      <option value="text">Textstil</option>
      
    </select>
    
      </body>
    </html>
    Here is my javaScript:

    Code:
    window.onload = function(){
    	    document.getElementById("style").onchange = changeStyle; 
    
    window.onload=init;
    
    }
    
    function changeStyle() {
    	
    	var ddlChangeTheme = document.getElementById("style");
    	ddlChangeTheme.onchange = function (){
    chooseStyle(this.options[this.selectedIndex].value)};
    	var cStyle = "orginal";
    
    	if (getCookie("style") != "") { 
    		cStyle = getCookie("style");
    		chooseStyle(cStyle);
    	}
    	
    	for (var i=0; i<ddlChangeTheme.options.length; i++){
    		if (ddlChangeTheme.options[i].value == cStyle) {
    			ddlChangeTheme.options[i].selected = true;
    		}
    	}
    }
    
    function chooseStyle(themeName) {
    	
    	var cssStyle = document.getElementsByTagName('link')
    	for (var i = 0; i < cssStyle.length; i++) {
    		if (cssStyle[i].rel == "stylesheet" && cssStyle[i].title) {
    
    			cssStyle[i].disabled = true;
    
    			if (cssStyle[i].title == themeName) {
    				cssStyle[i].disabled = false;
    			}
    		}
    	}
    	
    	getCookie("style", themeName, 365);
    }
    
    
    function setCookie(cName, cValue, exDays){
        var cDate = new Date();
    	cDate.setTime(cDate.getTime()+(exDays*24*60*60*1000));
    	var cStyle = cName + "=" + cValue +"; ";
    	cStyle += "expires=" + cDate.toGMTString();
    	document.cookie = cStyle;
    }
    
    
    function getCookie(cookieName) {
    
    	var allCookies = document.cookie.split('; '); 
    	for (var i=0; i<allCookies.length; i++) { 
    		
    		var cookieParts = allCookies[i].split('='); 
    		var cName = cookieParts[0]; 
    		var cValue = cookieParts[1]; 
    		
    		if (cookieName == cName) { 
    			return cValue; 
    		} 
    	} 
    	return false; 
    }
    When I have a title on my "original" css, the css-styles disapear when I do an onchange in the dropdown menu but if I dont have a title on it nothing happens in the onchange..

    Can somebody tell me if I am on the right way? What have I missed? And if you see what I don´t understand please tell me I have read many books and pages about javaScript but there is many things I cant find an explanation too..

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I've only had a quick shufty at this but
    Code:
    if (cssStyle[i].rel == "stylesheet" && cssStyle[i].title) {
    is looking for "stylesheet" and won't find "alternate stylesheet" as the 'rel'.

    Perhaps you need
    Code:
    if (cssStyle[i].rel.indexOf("stylesheet") != -1 && cssStyle[i].title) {
    which should find links that contain the word "stylesheet".
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    select option for onchange Css style

    Thanks AndrewGSW for your suggestion. I couldent fix it. Maybe because I don´t understand all of the code.
    I´m doing some code that works (inside my head) but not in the real world.

    The HTML:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>

    <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!-- javascript -->

    <script type="text/javascript" src="javascript.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css" id="styles">

    </head>

    <body>

    <form method="get" name="stylecss" >

    <select name="style">

    <option value="orginal">Orginal</option>
    <option value="gold">Guld</option>
    <option value="blue">Blå</option>
    <option value="image">Utan bilder</option>
    <option value="text">Textstil</option>

    </select>

    </form>


    </body>
    </html>


    Javascript:

    window.onload = function(){
    document.getElementById("style").onchange = chooseStyle;
    }

    function chooseStyle() {
    date= new Date();
    date.setTime(date.getTime()+(1000*60*60*24*31));

    var option = document.stylecss.style.options[document.stylecss.style.selectedIndex].value;

    if ( option == 0)

    document.cookie="layout=style.css; expires="+date.toGMTString();
    document.getElementById("styles").href="style.css";
    }

    else if ( option == 1){
    document.cookie="layout=gold.css; expires="+datum.toGMTString();
    document.getElementById("styles").href="gold.css";

    }

    else if ( option == 2){
    document.cookie="layout=blue.css; expires="+datum.toGMTString();
    document.getElementById("styles").href="blue.css";

    }

    else if ( option == 3){
    document.cookie="layout=image.css; expires="+datum.toGMTString();
    document.getElementById("styles").href="image.css";

    }

    else if ( option == 4){
    document.cookie="layout=text.css; expires="+datum.toGMTString();
    document.getElementById("styles").href="text.css";

    }



    I´m beginner so Im not sure if I understand about set and get cookie. If somebody could explain? Or if there is something else that I missed? How can I make above code work?

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    var option = document.stylecss.style.options[document.stylecss.style.selectedIndex].value;
    returns the value of the option which will be 'original', 'gold', etc., not a number.
    Code:
    var option = document.stylecss.style.options[document.stylecss.style.selectedIndex].value;
    
    if ( option == 'original' ) {
        document.cookie="layout=style.css; expires="+date.toGMTString();
        document.getElementById("styles").href="style.css";
    else {
        document.cookie="layout=" + option + ".css; expires="+date.toGMTString();
        document.getElementById("styles").href=" + option + ".css";
    }
    might help (although untested).
    BTW I'm not a fan of using names like 'option, style' as variable or element names. It's is confusing and can cause issues.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #12
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    save selectedIndex in dropdown menu?

    Thanks AndrewGSW for your respond!
    I have noted to not put variables that alredy have references that could confuse.

    I kind of got the cod right. But you opend my eyes for the return of values insted of numbers (array I was thinking that starts on 0).

    Its strange but this work... almost!:

    HTML:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
      <head>
      
      <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    
    <script type="text/javascript" src="java/java.js"></script>
    
    <link rel="stylesheet" type="text/css" href="style.css" id="styles">
    
    
      </head>
    
      <body>
    
    <form name="stylecss" action="" > 
    <select name="style" id="design">
    
      <option value="orginal">orginal</option>
      <option value="gold">Guld</option>
      <option value="blue">Blå</option>
      <option value="image">Utan bilder</option>
      <option value="text">Textstil</option>
      
    </select>
    
    </form>
      </body>
    </html>
    Javascript:
    Code:
    window.onload = function(){
    document.getElementById("design").style.visibility="visible" ;
    
    			var designStyle = document.getElementById("design");
    			
    
                designStyle.onchange = chooseStyle;
    		
    
    
    var cookies = document.cookie.split("; ");		
    for (var i = 0; i < cookies.length; i++) {  						
       var cookieName = cookies[i].split("=")[0];		
       var cookieValue = cookies[i].split("=")[1];	
       
       												
       if (cookieName =="layout") {
    	
    
    	//styles are id for the css.style
       document.getElementById("styles").href=cookieValue;
       			
    
       }
     
    
      }
    
    
    }
    
    function chooseStyle() {
     date= new Date();
     date.setTime(date.getTime()+(1000*60*60*24*31));
    
    var option = document.stylecss.style.options[document.stylecss.style.selectedIndex].index;
    
    
    if ( option == 0){
    
    document.cookie="layout=style.css; expires="+date.toGMTString();
    document.getElementById("styles").href="style.css";
    //sel['i'].selected();
    }
    
    else if ( option == 1){
    document.cookie="layout=gold.css; expires="+date.toGMTString();
    document.getElementById("styles").href="gold.css";
    
    }
    
    else if ( option == 2){
    document.cookie="layout=blue.css; expires="+date.toGMTString();
    document.getElementById("styles").href="blue.css";
    
    }
    
    else if ( option == 3){
    document.cookie="layout=image.css; expires="+date.toGMTString();
    document.getElementById("styles").href="image.css";
    
    }
    
    else if ( option == 4){
    document.cookie="layout=text.css; expires="+date.toGMTString();
    document.getElementById("styles").href="text.css";
    
    }
    
    }
    This code change the style and "remember" the selected style (cookie). But I dont know how to set the right value in the dropdown so if gold is chosen it still stand "orginal" in the dropdown meny.
    I tryed your code AndrewGSW but I could not make it work.
    Even if my code work except that it always give value orginal in dropdown meny my error console says: assignment to undeclared variable date..?

    Now I did post another thread about this how I could get the selecte value saved inside of the dropdown.. I guesse I should have written that question here instead but I was thinking it was another issue. But now I´m thinking it can have something with this you said about value gives the value but does index give 0,1,2,3..then?

    I have looked through the hole forum and searching on the internet without understanding how I can make it work. Nobody have responded to my other thread so if you have an idea it would be great!

  • #13
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Energia:

    See, the attached demo for site-wide style sheet changing.
    Attached Files Attached Files

  • #14
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Stylesheet changing value inside of dropbox

    Thank you Sciliano for charing your demo! Intresting to see another way to build up cookie and how to change the css style. My code works but now I´m looking for how I can store the value of the selected css style inside my dropbox. I am trying diffrent things like:

    Code:
    var designStyle = document.getElementById("design");
    for(var i = 0; i < designStyle .options.length; i++) {
    designStyle.options[i].selected == true
    
    }
    It works to select and save the selected style inside of a cookie but the text in the dropdown say orginal even if the selected style is gold.

    Is it selectedIndex I schould use or how do I stor the selected value in the cookie so it says the selected style in the drop down?

  • #15
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Why not create another cookie for the selectedIndex?


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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