...

View Full Version : Stylesheet Switcher (with Cookies)



K3R
12-04-2012, 01:39 PM
Hey there,

Here's my index.html 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!

AndrewGSW
12-04-2012, 09:40 PM
You are using the change event on the SELECT and on each OPTION but change only applies to the SELECT:


$(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.

K3R
12-04-2012, 11:15 PM
You are using the change event on the SELECT and on each OPTION but change only applies to the SELECT:


$(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.

AndrewGSW
12-04-2012, 11:33 PM
Something like..


$(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:


$("#styleSelector").val(index);



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum