PDA

View Full Version : Function to change stylesheets



aljami
Dec 8th, 2003, 01:45 PM
Hi

I have a basic 3 column css page (www.webxcel.biz) which is using Paul Sowden's styleswitcher. I should generate pages with different fonts sizes when the appropriate button is clicked, But, it doesn't!

Can anyone tell me what is wrong please?

Thanks

Aljami:confused:

Willy Duitt
Dec 8th, 2003, 02:03 PM
The script on his page is also broke and is breaking here:

function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}


Try this one:

<html>
<HEAD>
<link id="foo"rel="stylesheet" type ="text/css" href="style_1.css">

<script type="text/javascript">
<!--//
function setCookie(new_style) {
var what = document.getElementsByTagName('a');
var which = what[new_style].name;
var duit = new Date();
duit.setTime(duit.getTime() + 30*24*60*60*1000);
var expString = "; expires=" + duit.toGMTString();
document.cookie = 'My_Style='+which+expString;
}

function setStyle() {
if (/My_Style=style_(\d*)/.test(document.cookie)){
document.getElementById('foo').href = 'style_'+RegExp.$1*1+'.css'
}
else {
document.getElementById('foo').href = 'style_1.css'
}
}
setStyle()
//alert(document.getElementById('foo').href)
//-->
</script>
</HEAD>

<BODY>
<a name="style_1" href="#"onclick="setCookie(0);javascript:getElementById('foo').href='style_1.css' ">style one</a><br /><br />
<a name="style_2" href="#"onclick="setCookie(1);javascript:getElementById('foo').href='style_2.css' ">style two</a><br /><br />
<a name="style_3" href="#"onclick="setCookie(2);javascript:getElementById('foo').href='style_3.css' ">style three</a><br /><br />
<a name="style_4" href="#"onclick="setCookie(3);javascript:getElementById('foo').href='style_4.css' ">style four</a>
</body>
</html>

.....Willy

aljami
Dec 8th, 2003, 02:53 PM
Hi Willy

Thanks - I'll give a try later today - late for a meeting!!

Aljami:)

adios
Dec 8th, 2003, 05:00 PM
Well....your biggest problem is...you don't have any stylesheets to switch! Not any imported ones (via a <link> element) anyway. Just that embedded (hardcoded) one with #top, #left, #middle, etc. in it.

If you just need to toggle font sizes, you don't have to use entire alternate stylesheets. Give this (http://www.dyn-web.com/dhtml/sizefont.html) a shot.

Just a note: when you call a function, either this way:


function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
.............
.............
....onclick="MM_callJS('function getActiveStyleSheet()')"

...or the usual way (see no eval(), hear no eval()) you leave out the function keyword. ;)

aljami
Dec 8th, 2003, 08:19 PM
Hi

Page just changed to a very basic page, still at: www.webxcel.biz to use Willie's method.

Again I must have done something wrong.

Would appreciate if Willie could take a look and advise please.

Thanks in advance.

Aljami:confused:

Willy Duitt
Dec 8th, 2003, 11:34 PM
Hi aljami;

You have 3 stylesheet links named foo
Try taking two of them out and let me know if that works.


<link id="foo"rel="stylesheet" type ="text/css" href="style_1.css">
<link id="foo"rel="stylesheet" type ="text/css" href="style_2.css">
<link id="foo"rel="stylesheet" type ="text/css" href="style_3.css">

.....Willy

Willy Duitt
Dec 9th, 2003, 02:29 AM
aljami;

You need to check that your Stlyesheets are coded properly.
I tried to link off of them using <BASE HREF> and they do not seem to work.

Although the first script should work as written, I made some additional changes.
Try this one: :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<BASE HREF="http://www.codelifter.com/main/javascript/">

<link rel="stylesheet" type="text/css" href="style_1.css">
<link rel="stylesheet" type="text/css" href="style_2.css">
<link rel="stylesheet" type="text/css" href="style_3.css">

<script type="text/javascript">
<!--//
function setCookie(new_style) {
var what = document.getElementsByTagName('a');
var which = what[new_style-1].name;
var duit = new Date();
duit.setTime(duit.getTime() + 365*24*60*60*1000);
var expString = "; expires=" + duit.toGMTString();
document.cookie = 'My_Style='+which+expString;
}

function setStyle(which_style) {
if (/My_Style=style_(\d*)/.test(document.cookie)) {
which_style = RegExp.$1*1;
}
else {
which_style = which_style;
}
if(document.styleSheets) {
which_style = which_style-1;
for(i=0;i<document.styleSheets.length;i++) {
if(i!=which_style) {
document.styleSheets[i].disabled=true;
}
else {
document.styleSheets[i].disabled=false;
}
}
}
}
setStyle()
//-->
</script>
</HEAD>

<BODY>
<div id="Layer1" style="position:absolute; left:8px; top:50px; width:95px; height:350px; z-index:1">
<a name="style_1" href="javascript:setStyle(1)" onclick="setCookie(1)">style one</a><br /><br />
<a name="style_2" href="javascript:setStyle(2)" onclick="setCookie(2)">style two</a><br /><br />
<a name="style_3" href="javascript:setStyle(3)" onclick="setCookie(3)">style three</a><br /><br />


</div>
<div style="position:absolute; left:108px; top:50px; z-index:2;" >Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.</div>

</body>
</html>

.....Willy

adios
Dec 9th, 2003, 03:30 AM
If you just need to toggle font sizes, you don't have to use entire alternate stylesheets.:confused:

aljami
Dec 9th, 2003, 11:47 AM
Hi Willie

Thanks for your help. Your latest works fine.

I just need to change the margins for the largest size, but that's no problem.

Thanks for your help.

Aljami

Willy Duitt
Dec 9th, 2003, 01:14 PM
Your Welcome
Glad I could help :thumbsup:

.....Willy