[QUOTE=GFX.Wiz;2345288]I am looking for a very lightweight script that has to accomplish the following…first the setup:
I have a web site that has 4 skin possibilities:
- Light colored suitable for 800 width browsers
- Light colored suitable for browsers with greater than 800 width
- Dark colored for 800 and
- Dark colored for > 800.
Due to graphics considerations the script needs to be all inclusive and once the variables are read and set it will write a cookie so on subsequent page loads we can bypass the script by just reading the cookie which will call the proper CSS file (light800.css, light1024.css, dark800.css, dark1024.css).
By default [noscript] we’re going with Light+800. So the initial page load will load the CSS file light800.css unless the browser width is greater than 800 at which time it would load light+1024.
To change the color I want to have text links that change the color from light to dark or dark to light. But it has to change on the fly without reloading the page. So the clicks need to read the current cookie so it knows whether to load the alternate color’s 800 or 1024 CSS file for the color selected.
I think that explains it pretty good. I originally was doing this with an auto browser detect and setting a cookie for that then reading and writing a separate cookie for the color switcher. The problem I encountered was with the graphics packages. The color-switcher didn’t know which resolution I was running and vice versa.
Get it? I would love to see what the creative minds here can come up with to make this function.
Any Q’s? Throw 'em at me!
Thanks![/QUOTE]
I’ll have to admit, I thought that this would be quite interesting so I went ahead and did it cause I thought it’d be a fun challenge. Took me about 30min to finish up but here it is, free to use but you can always send me money if you felt like it 
:D. I only ask that you keep the credits in place.
[size=3]DEMO:[/size]
http://dev.beyondthepixel.com/_lab/kirupa_widthskinswitch/v1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-language" content="en-US" />
<title>Window width theme switcher</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.cookie.js"></script>
<style type="text/css" media="screen">
body { font: normal 75%/1.5em Helvetica, "Helvetica Neue", Arial, sans-serif; }
.dark800 { background: #000; color: #fff; }
.dark1024 { background: #333; color: #fff; }
.light800 { background: #fff; color: #333; }
.light1024 { background: #eee; color: #333; }
</style>
<script>
/**
* Window width theme switcher
*
* Requires jQuery http://jquery.com & jQuery cookie plugin http://plugins.jquery.com/project/cookie
*
* Copyright (c) 2008 Lucas Williams aka simplistik (beyondthepixel.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* @author Lucas Williams aka simplistik (beyondthepixel.com)
*/
var getTheme = $.cookie('theme');
var getWindowSize = $.cookie('size');
var minWidth = 800;
var maxWidth = 1024;
if ( !getTheme ) { $.cookie('theme', 'light') };
if ( !getWindowSize )
{
if ( $(window).width() <= minWidth )
$.cookie('size', minWidth);
else
$.cookie('size', maxWidth);
};
$(document).ready( function() {
// Set default attributes
$('body').removeAttr('class').addClass($.cookie('theme')+$.cookie('size'));
$('#changetheme span').html("("+$.cookie('theme')+" / "+$(window).width()+" ["+$.cookie('size')+"])");
$('p span').html($.cookie('theme')+$.cookie('size')).append('.css');
// theme switcher
$('#changetheme').click( function() {
if ( $.cookie('theme') == 'light' )
{
$.cookie('theme', 'dark');
$('body').removeAttr('class').addClass('dark'+$.cookie('size'));
// optional for demo
$('#changetheme span').html("("+$.cookie('theme')+" / "+$(window).width()+" ["+$.cookie('size')+"])");
$('p span').html($.cookie('theme')+$.cookie('size')).append('.css');
} else {
$.cookie('theme', 'light');
$('body').removeAttr('class').addClass('light'+$.cookie('size'));
// optional for demo
$('#changetheme span').html("("+$.cookie('theme')+" / "+$(window).width()+" ["+$.cookie('size')+"])");
$('p span').html($.cookie('theme')+$.cookie('size')).append('.css');
}
});
// Dynamically switch on browser resize
$(window).resize( function() {
if ( $(window).width() <= minWidth )
$.cookie('size', minWidth);
else
$.cookie('size', maxWidth);
$('#changetheme span').html("("+$.cookie('theme')+" / "+$(window).width()+" ["+$.cookie('size')+"])");
$('body').removeAttr('class').addClass($.cookie('theme')+$.cookie('size'));
$('p span').html($.cookie('theme')+$.cookie('size')).append('.css');
});
});
</script>
</head>
<body>
<a href="javascript:void(0);" id="changetheme">Change theme <span></span></a>
<p>Stylesheet: <span></span></p>
Created on: Thurs, June 15, 2008 in response to: <a href="http://www.kirupa.com/forum/showthread.php?t=301450">http://www.kirupa.com/forum/showthread.php?t=301450</a>
</body>
</html>
:D. I only ask that you keep the credits in place.
I keep all the credits from other ppls crap intact all the time. There’s no shame in it at all. And besides, now it’s traceable back to here muahaha :lol:
I’m glad that you proved my stereotype wrong. (-: