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.
Results 1 to 4 of 4
  1. #1
    K3R
    K3R is offline
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Stylesheet Switcher (with Cookies)

    Hey there,

    Here's my index.html code:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<title>nill</title>
    	<meta charset="utf-8">
    	
    	<link class="switch" id="stylesheet" rel="stylesheet" media="screen and (min-width: 541px)" type="css/style" href="css/mainstyle.css">
    	<link rel="stylesheet" media="screen and (max-width: 540px)" type="css/style" href="css/mobile.css">
    
    	<script type="text/javascript" language="javascript" src="js/jquery-1.7.min.js"></script>
    	<script type="text/javascript" language="javascript" src="js/jquery.cookie.js"></script>
    	
    	<!-- Start of javascript for stylesheet changer -->
    	<script type="text/javascript">
    		function changeStyle(url)
    		{
    			document.getElementById('stylesheet').href = url;
    		}
    	</script>	
    
    	<!-- Start of javascript for stylesheet cookie creation/checker -->
    	<script type="text/javascript">
    		if ($.cookie("cssSwitch"))
    		{
    			$("link.switch").attr("href",$.cookie("cssSwitch"));
    		}
    		
    		$(document).ready(function()
    		{ 
    			$("#styleSelector option").change(function()
    			{ 
    				$("link.switch").attr("href", $(this).attr('value'));
    				$.cookie("cssSwitch", $(this).attr('value'), {expires: 365, path: '/'});
    				
    				return false;
    			});
    		});
    	</script>
    </head>
    
    <body>
    	<div id="wrapper">
    		<header>
    		
    			<!-- Start of drop down list for style changer -->
    			<div id="styleDropList">
    				<form>
    					<fieldset>
    						<legend>Change Style</legend>
    						<select id="styleSelector" onchange="changeStyle(this.value); return false;">
    							<option value="css/mainstyle.css">Default</option>
    							<option value="css/simple.css">Simple</option>
    							<option value="css/different.css">Different</option>
    							<option value="css/mobile.css">Mobile</option>
    						</select>
    					</fieldset>
    				</form>
    			</div>
    			<!-- End of drop down list -->
    			
    			<img src="img/banner.png" alt="Photograph of a busy street in South Hesslich town centre"/>
    			
    		</header>
    		
    		<nav>
    			<ul>
    				<li><a href="#top">Home</a></li>
    				<li><a href="events.html">Events</a></li>
    				<li><a href="museum.html">Museum</a></li>
    				<li><a href="nightclub.html">Nightclub</a></li>
    				<li><a href="shoppingcentre.html">Shopping Centre</a></li>
    				<li><a href="university.html">University</a></li>
    				<li><a href="contact.html">Contact Us</a></li>
    			</ul>
    		</nav>
    		
    		<section id="mainContent">
    			<article>
    				<h1>
    					Information
    				</h1>
    				<p>
    					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae dui sed nisi malesuada eleifend eget sit amet arcu. Nam eget lectus ante. Maecenas molestie diam eget turpis tempus ornare. Maecenas sit amet enim nulla, et scelerisque justo. Integer sit amet ante augue, vel porttitor neque. Ut neque nunc, faucibus nec tincidunt sit amet, blandit non metus. In ac ligula lectus. Aliquam tristique lobortis lorem sit amet imperdiet. Nam venenatis erat in est tincidunt viverra.
    				</p>
    				<p>
    					<img src="img/fillerimg.png" alt="Random image for filler purposes">
    				</p>
    				<p>
    					Duis at velit ac massa mattis aliquet. Vestibulum accumsan elit in arcu adipiscing id posuere massa ornare. Vivamus eu mauris ac mi fringilla venenatis. Aenean consectetur nisl sed lectus vestibulum in ultrices turpis dignissim. Nunc lorem ipsum, gravida vitae sagittis ac, rutrum nec urna. Cras sit amet eros ut quam consectetur pellentesque a ut tortor. Praesent sagittis tempor eleifend. Suspendisse quam eros, bibendum quis gravida id, volutpat ac lacus. Vestibulum et magna et leo lacinia fermentum eu id eros. Donec condimentum quam eu tellus mollis interdum. Pellentesque hendrerit orci a eros egestas venenatis. Maecenas eu tincidunt sem. Vestibulum felis dolor, elementum sit amet pellentesque ut, vestibulum eu neque. Sed pulvinar, sapien mollis vestibulum congue, mauris ligula hendrerit mauris, vitae condimentum neque ipsum sed elit.
    				</p>
    				<p>
    					Mauris id leo non quam fringilla scelerisque non ac felis. Mauris porttitor, neque eget bibendum rhoncus, felis elit dictum nisi, nec sollicitudin nunc felis et ante. Aenean ut massa dolor. Aenean vulputate dui id ligula cursus feugiat. Morbi bibendum nisl in erat imperdiet ac porta neque interdum. Nunc porttitor tortor ac nunc ornare in tristique nisi accumsan. Proin non nibh libero, sed pharetra nisl. Cras posuere lacinia mauris, in viverra turpis porta eget. Donec enim diam, accumsan nec lobortis quis, ullamcorper et felis. Nam neque lacus, faucibus in cursus nec, sollicitudin vitae metus. Sed eros ante, semper at varius eget, consectetur eget nulla. Vestibulum ut neque libero, nec varius ipsum.
    				</p>
    
    				<h1>
    					Social
    				</h1>
    				<p>
    					Facebook/Newsletter Plugin here... etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. 
    				</p>
    			</article>
    		</section>
    			
    		<footer>Copyright &copy; nill 2012</footer>
    		
    	</div>
    </body>
    </html>
    I'm not sure what to do next or whether I'm right so far. As you can see, the switcher is a drop down list.

    Any help would be greatly appreciated!

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You are using the change event on the SELECT and on each OPTION but change only applies to the SELECT:

    Code:
    		$(document).ready(function()
    		{ 
    			$("#styleSelector").change(function()
    			{ 
    				$("link.switch").attr("href", $(this).val());
    				$.cookie("cssSwitch", $(this).val(), {expires: 365, path: '/'});
    				
    				return false;
    			});
    		});
    You would then remove the onchange attribute from this SELECT element.

    BTW I haven't tested this with your code.
    "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

  • Users who have thanked AndrewGSW for this post:

    K3R (12-05-2012)

  • #3
    K3R
    K3R is offline
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    You are using the change event on the SELECT and on each OPTION but change only applies to the SELECT:

    Code:
    		$(document).ready(function()
    		{ 
    			$("#styleSelector").change(function()
    			{ 
    				$("link.switch").attr("href", $(this).val());
    				$.cookie("cssSwitch", $(this).val(), {expires: 365, path: '/'});
    				
    				return false;
    			});
    		});
    You would then remove the onchange attribute from this SELECT element.

    BTW I haven't tested this with your code.
    This worked! Thank you very much.

    The only problem I have now is that when I move to another web page the drop down menu is back on the 'Default' option, so I have to select another style from the menu then the 'Default' option again to get back to the default style.

    Any tips for correcting this so the drop down menu displays the current style?

    Thanks.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Something like..

    Code:
    $(document).ready(function() {
        car chosenStyle = $.cookie("cssSwitch");
        if (chosenStyle) {
            $("#styleSelector option").each(function (index) {
                if ($(this).val() == chosenStyle) {
                    var styleSel = $("#styleSelector"); // or possibly $("#styleSelector)[0]; (to make it a DOM element)
                    styleSel.selectedIndex = index;
                    // there may be a jQuery alternative to the above line
                    break;
                }
            });
        }
    });
    Added: I think the jQuery equivalent (to .selectedIndex = ) is:

    Code:
    $("#styleSelector").val(index);
    Last edited by AndrewGSW; 12-05-2012 at 12:38 AM.
    "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

  • Users who have thanked AndrewGSW for this post:

    K3R (12-05-2012)


  •  

    Posting Permissions

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