/    Sign up×
Community /Pin to ProfileBookmark

css switcher

Copy linkTweet thisAlerts:
Mar 21.2010

please look at this link
[url]www.sudhakargolakaram.co.in/files/cssswitch.html[/url]

i have taken this example from this website
[url]http://designshack.co.uk/articles/css-style-switcher[/url]

i have followed all the instructions and also changed the ’ sign to a single quote ‘ in the a tag
<a href=”#” onclick=”setActiveStyleSheet(‘orange’); return false;”>Orange</a>

also tried with calling the styleswitcher.js first followed by the css files and also with css files first and then styleswitcher.js

i am not able to change the background of the page to grey when
Change Style link is clicked on my website
sudhakargolakaram.co.in/cssswitch.html

can anyone let me know how to fix this

thanks

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangMar 21.2010 — This page is not found[/QUOTE]Give the correct link
Copy linkTweet thisAlerts:
@tirnaMar 21.2010 — Both links connect to a web page on my pc.

The attached jpg is a screendump of the top link

[upl-file uuid=8200423a-80e1-4dc4-afa1-baddc5c682b8 size=30kB]test.jpg[/upl-file]
Copy linkTweet thisAlerts:
@tirnaMar 21.2010 — Below is the code to your html and javascripts.

I'll have a look through it shortly. In the mean time maybe someone else can help.

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Style Switcher</title>
<link rel="stylesheet" type="text/css" href="styleswitcher.css" />
<link rel="stylesheet" type="text/css" href="styleswitcher-default.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="styleswitcher-grey.css" title="alternate" />
<script type="text/javascript" src="styleswitcher.js"></script>
</head>
<body>
<div id="wrapper">
<br /><br />
<a href="#" onclick="setActiveStyleSheet('default'); return false;">Default Style</a>
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;">Change Style</a>
<div id="row1">
<p>Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam</p>
<p>Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ut lectus eu enim dapibus placerat. Aenean cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce wisi mi, auctor et, tincidunt in, fermentum sed, mauris. Ves</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ut lectus eu enim dapibus placerat. Aenean cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce wisi mi, auctor et, tincidunt in, fermentum sed, mauris. Vestibulum ac quam non pede sagittis euismod. Donec auctor pretium lorem. Aenean et magna. Curabitur id turpis sit amet sem imperdiet ultrices. Etiam tempor rhoncus pede. Aenean nonummy adipiscing dolor. Quisque consequat, odio id tincidunt tincidunt, nunc enim pharetra diam, hendrerit hendrerit pede pede sed tortor. Vivamus rutrum. Phasellus id eros nec wisi auctor faucibus.</p>
</div>
</div>
</body>
</html>
[/CODE]

[CODE]
function setActiveStyleSheet(title) {
var i, a, main;
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;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
[/CODE]
×

Success!

Help @sudhakararaog spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...