Preserved Topic: Changing styles "on the fly" (Page 1 of 1)

Heh, I use that phrase a lot lately, "on the fly", heh. Here's an interesting test I'm working on right now, at http://www.znippets.com/template/

What I've done is take *all* of the images that make up the scrollbar demo and make them part of the stylesheet, treating them as classes. The goal here is to make it simple to assign "skins" to the scrollbar page, changing the presentation in a very dramatic way. So far my script only works in Mozilla, though I was hoping that IE6 would handle enough new DOM to do this as well, it just does nothing at all, no errors, no failures, no changes either! Here's a block of code...

// Change the skins for this piece, available skins "basic" and "Asylum".
currentClass = "basic";

function changeSkin(whichClass) {
if ((currentClass != whichClass) && Zflag.gecko) {

elem = document.body;
if (whichClass == "basic") {
elem.setAttribute("class","bodyClass");
elem.setAttribute("bgcolor","#ffffff");
} else {
elem.setAttribute("class","bodyClass2");
elem.setAttribute("bgcolor","#0C1628");
}

for (m=0;m<Zobject.length;m++){
elem = document.getElementById(Zobject[m].ID);
tempClass=elem.getAttribute("class");
if (whichClass == "basic") {
tempClass=tempClass.substring(0,tempClass.length-1);
elem.setAttribute("class",tempClass);
} else {
tempClass=tempClass + "2";
elem.setAttribute("class",tempClass);
}
}
currentClass = whichClass;
setTimeout('setup()',100);
}}

I've created a second CSS with all of the same style names plus a "2" after them, and I'm trying to read through the classses of my assigned Zobjects, appending the "2" if needed, or stripping it away if not. I'm guessing I'm going to need a way to do this using the older document.all style of coding, but haven't dug into it yet. I'll also need to come up with a script to alter the styles on all of my <a href> tags as well. Still, I thought this was a *cool* toy, check this out in NS6/Mozilla, you'll see what I mean!

(Note: The code above is pretty crude, lots of "brute force" making things work. The assignation of the backgroung color turned out to be necessary, even though the background-color was assigned in the class, it only half asigned it, (you had to resizze the window, pormpting a redraw to get it to take.) I'll work on handling the names of the classes better than they are now, but would of course appreciate any ideas on how to code this part better!)

Your pal, -doc-

I've looked into changing styles on the fly (see my reply to Pharo Tek in site reviews) but this seems much more complex than the fairly superficial ways of doing things that I found. However, I did find this page:
http://www.projectseven.com/dpdemos/dp11

I'm not sure if this is old news but it does combine stylesheet swapping with image swapping.

Sorry I couldn't be more help but I'm watching your project with interest.

Emps

Wow, on both of you, very nice way of showing what difference stylesheets can do!
Doc, you are really transforming that page, and it works fine in IE5.5
Emps, very strict site template, nice layer work too.

No help to offer from me, sorry...
/Dan

Heh, I'm glad this worked! I uploaded my trial page based on the code I saw there, and it worked pretty well, seemed like! Of course, my DSL went down seconds later and I wasn't able to thank you for the pointer right away. So! Thank you Emps, seeing that page was exactly what I needed!

My method dug through the objects and changed them one by one, worked in Mozilla, but not in IE. It was a nice concept, making for a more selective change, but this worked great for my purposes! Coolness, woo-hoo!

Your pal, -doc-

Utterly and completely COOL!!! Both of those pages have me about to pop with excitement. I'm just not able to look at code and see how it should be done "better" though. I think mr.maX and Slime are better at that. I just get too interested in what can be done with the code and my mind just wants to dwell more on that aspect of things. I am good at, and I enjoy, finding bugs in code (no pun or maybe a slight pun intended). If I can see any improvements, I will definitely offer some suggestions on this and the whole Znippets movement though

Oh! I almost forgot, I ran into a bug in the handling of this with Mozilla 9.2 for the PC. When I changed the styles, it works at first, and then it changes back again (to white), but when changing back again to the asylum look it lses the background, it stays white! I ended up doing a hack, changing the background color *again*, like so...

function loadStyleSheets(cssNumber,cssToLoad){
if(document.styleSheets){
for(var i=0;i<cssNumber;i++){
if(i!=cssToLoad){
document.styleSheets[i].disabled = true;
}
else{
document.styleSheets[i].disabled = false;
}
}
if (Zflag.gecko) {
if (cssToLoad) document.body.setAttribute("bgColor","#0C1628");
else document.body.setAttribute("bgColor","#FFFFFF");
}
}
}

That last if(gecko) bit was needed to force the background to be stable, strange. (Bugs, I'm with you, I tend to only get half finished with the basics before I'm off and running with applications of the code, that's the fun part for me!)

Your pal, -doc-

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Hi I am a newbie here but i have found a tutorial / kit to change style sheets on the fly.
If your interested check this out http://www.codelifter.com/main/javascript/changestyles.html

aroma: Welcome and good find there I spent quite a while looking for style sheet changers and there aren't very many out there. It looks to be essentially the same code as the ProjectSeven people use which is what the Doc's code is based on (although now with new added Ozone).

I'm glad that came in useful I get pissed off that such things weren't widely available so I went looking for one and found a couple. I'm sticking with the DOM Dynamic Stylesheet Swapper (DSSS):

<script language="Javascript" type="text/javascript">

<!--

function setStyle (stylename) {

   var lnk = document.getElementsByTagName("LINK")[0];

   lnk.href = stylename;

}

//-->

</script>

but the one I gave the link to is more cross browser (and is even more so with the new fix - it might be worth letting the people at ProjectSeven know). I wasnt sure that this wasn't widely known or I'd have passed it on earlier - it is only a 'toy' after all but one I'm sure some of the highly creative people here will make very good use of (the Doc's example is very impressive indeed and I'm sure Bugimus will be able to pull something innovative out of the bag). In fact some Inmates already use different forms of a DSSS:

Sash uses ASP: http://www.sashadesign.com

linear use more of a 'brute force' JavaScript technique http://www.linear1.org

In the spirit of now being sure what the DHTML experts consider old news I'll pass on some extensions to the DSSS and some other things I researched the ass off (along with some links to rare resources I found on the way - as this kind of advanced stylesheet tomfoolery hasn't yet caught on):

Extension to DSSS using PHP:

Once you start trying to swap more than 2 or 3 stylesheets writing the external stylesheets and keeping them upgraded becomes a chore. If you use PHP to generate the external stylesheet you can greatly simplify proceedings. There are a number of ways of doing this but this way doesn't even involve changing your .htaccess file. This becomes your stylesheet.php file:

<?php

header("Content-Type: text/css");



switch ($sheet) {

    case "basic":

        $bg_color = "000000";

        $color = "FFFFFF";

        break;

    case "asylum":

        $bg_color = "FF0000";

        $color = "0000FF";

        break;

    case "gurus":

        $bg_color = "FFFFFF";

        $color = "000000";

        break;

}



?>

BODY, P {

  background-color: #<?php echo $bg_color; ?>;

  color: #<?php echo $color; ?>;

}

and then just stick these in the head:

<link href="stylesheet.php?sheet=basic" rel="stylesheet" type="text/css">



<link href="stylesheet.php?sheet=asylum" rel="stylesheet" type="text/css">



<link href="stylesheet.php?sheet=gurus" rel="stylesheet" type="text/css">

You can also use PHP's image handling functions:
http://www.php.net/image

to get the image height and width saving more work - something like this goes in the PHP (I can't remember if I've tested this):

<?php

ETC.

case "whatever":

   $image1 = "picture.jpg";

   $image2 = "anotherpcture.gif";

   $title_image = "titleimage.gif";

ETC.



/* Gets the width and height of all images in the images array */

$images = array('image1', 'image2', 'title_image');



while (list ($key, $value) = each ($images)) {

  list(${$value . _width}, ${$value . _height}) = GetImageSize("${$value}");

}

?>



.image1 {

  background-image: url(<?php echo $image1; ?> );

  width: <?php echo $image1_width; ?>px;

  height: <?php echo $image1_height; ?>px;

}

Dynamic Font Size Changer (DFSC)

Now this was a big pain and took a while of looking at some pretty lengthy code. Although its not such a fun toy as the DSSS it is a very important thing when related to accessibility issues and so I thought it was important to get it right and trim the code down to a neater package. There are 2 ways of doing this (and you can adjust the tag it effects - in my testing I noticed that if you target the <BODY> tag in IE5.5 the incremental change in font size, for DFSC1, is much smaller than if you targetted the <P> tag):

This first one sets it to specfic values which is fairly simple:

<html>

<head>

<title>Font changer 1</title>

<style TYPE="text/css" REL="stylesheet">

p {

  font-size: 12px;

}



</style>

	

<script language="JavaScript" type="text/javascript">

<!--

  

function changeFontsize(fSize) {



  var getElement = document.getElementsByTagName("p");

  

  for (var i=0; i<getElement.length; i++) {

    var eachElement = getElement[i];



    eachElement.style.fontSize = fSize;

  }

}

//-->

</script>

</head>



<body>

<p>This is the test text</p>

<a href="javascript: changeFontsize('10px');" title="10px">10px</a>

<a href="javascript: changeFontsize('12px');" title="12px">12px</a>

<a href="javascript: changeFontsize('14px');" title="14px">14px</a>

<a href="javascript: changeFontsize('16px');" title="16px">16px</a>

<p>This is more test text</p>

<p>This is more test text</p>

<p>This is more test text</p>



</body>

</html>

But the second one changes the actual font size and is a much better option (I use a couple of DIVs with + and - in but I just thought that a nice implementation of this but but a draggable bar - just a thought):

<!-- code supplied by the Guru's Network: [url=http://www.gurusnetwork.com]www.gurusnetwork.com[/url]  -->



<html>

<head>

<title>Font changer</title>

<style TYPE="text/css" REL="stylesheet">

p {

  font-size: 12px;

}



</style>

	

<script language="JavaScript" type="text/javascript">

<!--

 

function changeFontsize(increment) {

  

  var getElement = document.getElementsByTagName("p");

  

  for (var i=0; i<getElement.length; i++) {

    var eachElement = getElement[i];

    

	if (document.defaultView) {	

      var currentFontSize = document.defaultView.getComputedStyle(eachElement, null).getPropertyValue(fontSize);   

    }

	else if (eachElement.currentStyle) {	

      var currentFontSize = eachElement.currentStyle.fontSize;

	}

	

	var currFontSize = parseInt(currentFontSize, 10);

	

	var fontIncrease = parseInt(increment, 10);

	

	newFontSize = currFontSize + fontIncrease;

	

    eachElement.style.fontSize = newFontSize + "px";



  }	

}

//-->

</script>

</head>



<body>

<p>This is the test text</p>

<a href="javascript: changeFontsize('1');" title="Increase the size of the font">Increase font size</a>

<a href="javascript: changeFontsize('-1');" title="Decrease the size of the font">Decrease font size</a>

<p>This is more test text</p>

<p>This is more test text</p>

<p>This is more test text</p>



</body>

</html>

I'm sure my code isn't very efficient and may need tweaking to make it work in various browser/platform combos.

Some links
http://developer.apple.com/internet/_javascript/styles.html
http://www.inquiry.com/techtips/dhtml_pro/10min/10min0798.asp

and, of course:
http://www.w3.org/TR/DOM-Level-2-Style/css.html

I'm sure there are others (I'll pass on any I dig out).

-----------------------------------------

Anyway I thought I'd pass that on. It is the kind of thing that is very hard to track down online (a statement which is usually followed by a whole hatful of links) and I hope something above is useful to someone. I'm still playing with the interaction of PHP, JavaScript and CSS so I'm looking forward to seeing what other people make of this.

Emps

Its probably worth mentioning that what I've just posted above are from code snippets that I've prepared for the GurusNetwork - hence the odd credit sneaking in (I've got the database finished and am currently working on submitting and admin features) but that should all be considered as provisional code - I have tested it to the best of my abilities (and I'm to balme for any errors) but I would be interested in any bug corrections and/or improvements anyone has to offer.

Emps

A long time ago there was a similar discussion about dynamic CSS changing and you can find it here: http://www.ozoneasylum.com/Forum2/HTML/000730.html

mr.maX, you should have started that out with:

A long time ago...

in an Asylum far far away...

~Star Wars theme starts now~

i think mr.max is like a library. he really knows every post in the asylum. thats very impressive!

What can I say. I have a really good memory, heh he heeee....

hi all i just thought of something if someone selects a style when they go on another page (follow a link) the new page has the default style how could you make the new page have the same style as the previous

AROMA

Simply store style information in cookie and then read cookie value from that other page...

sorry i am a real newbie and don't know anything about javascript could you give an example or tell me where i could learn how to do it please

Aroma

guys, I have a question about all this.
if you have two .css-es who represten diffrent styles, would it be alright to just write this:

<p> choose style: <a href="changes("0")">0</a><a href="changes("1")">1</a>
function changes(x)
{
if(x==0){document.writeIn(<link rel=stylesheet type=text/css href=zero.css>;}
if(x==1){document.writeIn(<link rel=stylesheet type=text/css href=one.css>;}
}

well, you get the idea. There is this link-tag refering to a css file.
If I could change the tag, I would guess that changing the tag would be difficult either.

Of course, I also could write the whole site like this:
<html>
<script>
var wywiwyws="<head><title>somekind</title>"+link+"andsoon";
</script>
</html>

maybe then I could write a function to change this link tag. or save it in a cookie and relaod the whole stuff as said by max. this is all theorie and ... well, I will try it, I especially like the idea of writing a whole site by using javascript strings.
k10x

every1 with psycho10esis raise my hand

If you use document.write *after* the page has loaded, it behaves differently. It doesn't do anything until you say document.close(), and then it replaces the *entire* document with the new stuff that you've written.

Kars10, you can find the answer to your quesiton in posts from above (Doc's "loadStyleSheets()" function and Emperor's "setStyle()" function). So, simply said, you don't need to use document.write (which wouldn't work, btw), instead use document.styleSheets collection to access style sheets (more about this here: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dynstyle/style_sheets.asp )...