Page 1 of 1

Style Appliance

Posted: Sat Jan 18, 2003 9:51 am
by Gen-ik
I've been trying to work this out for a while but it all ends up going pear shaped!

I have a Stylesheet with a load of pre-setup styles (obviously) and I want to apply X style to X object using a JavaScript function.

Let's say I have a <table> with a style class set to it and I want to change that style class to another one from the Stylesheet.... can it be done?

I'm talking about a "real-time" change here and not a "you must reload the page" change :)

I know you can do things like onmouseover="this.style.background.... blablaa but I want to apply an entire class not bits and pieces!

Thanks.

Posted: Mon Jan 20, 2003 5:13 am
by f1nutter
Just a guess.

How about javascript writing the table header, with the different style options.

So:

Code: Select all

if (style == 1)
&#123;
 document.write('<table class="style1">');
&#125;
else if (style == 2)
&#123;
 document.write('<table class="style2">');
&#125;
else
&#123;
 ('<table class="style3">');
&#125;
Then read in the style value from a check list or something.

Also, you could place the table inside a div and change it that way.

What have you got to lose!

Posted: Mon Jan 20, 2003 5:18 am
by f1nutter
Just looking through other posts, have a look at http://www.devnetwork.net/forums/viewtopic.php?t=1192

Posted: Mon Jan 20, 2003 5:51 am
by volka
also try

Code: Select all

<html>
<head>
	<style type="text/css">
		.selected &#123; color: yellow; background-color: blue; &#125;
		.default &#123; color: black; background-color: silver; &#125;
   </style>
</head>
<body>
	<table border="1" class="default">
		<tr>
			<td onmouseover="this.className='selected';" onmouseout="this.className='';">
				test
			</td>
			<td onmouseover="this.className='selected';" onmouseout="this.className='';">
				test
			</td>
		<tr>
		</tr>
			<td onmouseover="this.className='selected';" onmouseout="this.className='';">
				test
			</td>
			<td onmouseover="this.className='selected';" onmouseout="this.className='';">
				test
			</td>
		</tr>
</body>
</html>

Posted: Mon Jan 20, 2003 10:08 am
by Gen-ik
Aha! Got it working at last :)

I've made a little function to make things easier.. use as you wish.

Code: Select all

<script language="JavaScript">

function s(my)
&#123;
var name_length=my.className.length;
var check=my.className.substr(name_length-1,name_length);
	if(check=="B")
	&#123;
	my.className=my.className.substr(0,name_length-1);
	&#125;
	else
	&#123;
	my.className=my.className+"B";
	&#125;
&#125;

</script>

..all you need to do is create two version of a class, and put a B at the end of the second ones name, for example..

td.box { background-color: #ff0000; }
td.boxB { background-color: #00ff00; }

..and now just call the function any where you like, for example..

<td class="box" onmouseover="s(this);" onmouseout="s(this);">

..the function will automatically work out which version of the class to use.


Enjoy :)