Java Script Skin

Everything related to the visual and coding aspects of websites.
Post Reply
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Java Script Skin

Post by Mikari »

You can also do this with PHP as skins are often done, but Java Script skins are a simple alternative that work even if you don't have PHP support.

To keep all image codes in the CSS, display layout images as div backgrounds.

Use external CSS with an id:

Code: Select all

<link rel="stylesheet" id="designstyle" type="text/css" href="layout1.css" media="all" />
Call the cookie from the body:

Code: Select all

<body onload="tasteit()">
These go on the .js file.

Cookie oven (don't change it):

Code: Select all

function eatCookie(c_flavor) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_flavor + "="); if (c_start!=-1) { c_start=c_start + c_flavor.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; }

function bakeCookie(c_flavor,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_flavor+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toUTCString()); }
Bake the cookie (name, value, expiration):

Code: Select all

var flavor = "1";

function bake1() { document.getElementById('designstyle').href = 'layout1.css';
flavor = "1"; bakeCookie('flavor',flavor,365); }

function bake2() { document.getElementById('designstyle').href = 'layout2.css';
flavor = "2"; bakeCookie('flavor',flavor,365); }
Eat the cookie:

Code: Select all

function tasteit() { flavor=eatCookie('flavor');
if (flavor=="1") { bake1(); }
if (flavor=="2") { bake2(); } } 
I have a bunch more codes in my notes page.
Post Reply