Closed Thread Icon

Topic awaiting preservation: need bug-fixing help - any element css rollover function Pages that link to <a href="https://ozoneasylum.com/backlink?for=8852" title="Pages that link to Topic awaiting preservation: need bug-fixing help - any element css rollover function" rel="nofollow" >Topic awaiting preservation: need bug-fixing help - any element css rollover function\
 
Author Thread
smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

 posted posted 09-07-2003 18:50

Ok I have been working on a script that allows CSS based rollover effects on any element (much like the standard :hover functionality in browsers other than IE)

These effects are applied directly in the tag that the rollover effect is needed on.

I have further development planned which will make this script that much more useful.

The code:

<html>
<head>
<title>overStyler</title>
<script type="text/javascript">

var overStyler = {

obj: document.getElementsByTagName ? document.getElementsByTagName("*") : null,

setup: function()
{
for (var i = 0; i < overStyler.obj.length; i++)
{
if (overStyler.obj[i].getAttribute && overStyler.obj[i].getAttribute('rstyle'))
{
overStyler.obj[i].onmouseover = function() {

cssValues = this.getAttribute('rstyle').split(/;/)

for (var j=0; j < cssValues.length; j++) {

styleType = cssValues[j].split(/:/)

selector = styleType[0]
newValue = styleType[1]

this.orig = new Object();
this.orig[selector] = this.style[selector];

this.over = new Object();
this.over[selector] = newValue;

this.style[selector] = this.over[selector];
}

}

overStyler.obj[i].onmouseout = function() { this.style[selector] = this.orig[selector] };
}
}
}

}

onload = overStyler.setup;

</script>

</head>
<body style="background:#cccccc">

<div style="width:100px;height:100px;background:#CC77ff" rstyle="background:#AC63B2;border:solid 4px #000000"></div>
<br />
<div style="width:100px;height:100px;background:#CC77ff" rstyle="background:url(arcade2.gif)"></div>
<br />
<div style="width:100px;height:100px;background:#CC77ff;border:solid 0px #ffffff" rstyle="border:solid 4px #000000"></div>
<br />
<div style="width:100px;height:100px;background:#CC77ff" rstyle="color:#EECC3B">howdy doody buddy boy</div>
<br />
<div style="width:100px;height:100px;background:#CC77ff" rstyle="width:400px"></div>
<br />
<div style="width:100px;height:100px;background:#CC77ff" rstyle="marginLeft:10px"></div>

</body>
</html>

However there is currently a bug that I can't quite figure out a solution too - basically when multiple rollover styles are specified in the rstyle attribute (seperated by semicolons), the rollout effect that should return the element to it's former state only reverts the last declared style. for example, rstyle="background:#AC63B2;border:solid 4px #000000" changes the background colour and border of an element onmouseover, but onmouseout only the border is returned to it's previous/original state, the background stays changed. Now whilst I can just about grasp why it does this, I can't see a way round it.

Can you guys take a look.

Also any code simplifying or neatening would be appreciated - I'm not so hot on writing concise code.

Thanks,

Jon
stinx
Bipolar (III) Inmate

From: London, UK
Insane since: Apr 2002

 posted posted 09-08-2003 16:13

Interesting one. I think this should work....

You weren't cycling through each property on the mouseout.

code:
var overStyler = {



	obj: document.getElementsByTagName ? document.getElementsByTagName("*") : null,



	setup: function() {

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

			if(overStyler.obj[i].getAttribute && overStyler.obj[i].getAttribute('rstyle')) {

				cssValues = overStyler.obj[i].getAttribute('rstyle').split(/;/);

				overStyler.obj[i].orig = new Object();

				overStyler.obj[i].over = new Object();

				for (var j=0; j < cssValues.length; j++) {

						styleType = cssValues[j].split(/:/)

						selector = styleType[0]

						newValue = styleType[1]

						overStyler.obj[i].orig[selector] = overStyler.obj[i].style[selector];

						overStyler.obj[i].over[selector] = newValue;

				}



				overStyler.obj[i].onmouseover = function() {

					for(prop in this.over) {

						this.style[prop] = this.over[prop];

					}

				}



				overStyler.obj[i].onmouseout = function() {

					for(prop in this.orig) {

						this.style[prop] = this.orig[prop];

					}

				}

			}

		}

	}

}
smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

 posted posted 09-08-2003 22:21

Thanks buddy,

I figured it was that I wasn't cycling thru onmouseout, but I see where I should change it, or how exactly I would go about changing it. I'm glad you have sorted that for me.

And you are a Brit too - I lived my entire life just outside London in Watford until recently, then moved up here.

I would like your opinion on this 'function' - initially it seems kinda dumb coz you can do these sort of things inline with onmouseover= etc. But my aim was to make it simple to use in terms of css, for people who use css and html a lot but aren't so familiar with javascript. There are actually a few other 'functionalities' I want to add to this script, if you are interested in helping let me kno. I'm a poor coder and generally get by using my practical logic to guess at computer logic - and with the help of the mighty oracle Google.

One of the next stages with this 'function' is create an extension to it that fixes the lack of :hover on elements other than 'A' tags (links) in IE. I have already been working on my StyleSheet parser, but things are tricky for me.

Thanks again buddy,

Jon
stinx
Bipolar (III) Inmate

From: London, UK
Insane since: Apr 2002

 posted posted 09-09-2003 11:09

That would depend on your target audience... Anyone who doesn't understand javascript might get really confused when your rstyle="" script overwrites the mouseover function they defined themselves, e.g.

code:
<p style="blah" rstyle="blahblah" onmouseover="alert('mouseover');">blah</p>



From what I understand, when your overStyler.setup script runs, it will replace the onmouseover="alert(.... with a new function to change the style. You could probably get around that by checking for an existing onmouseover and onmouseout, and calling them from within the new handler functions ... they should copy across, they're just anonymous functions.

On another note, having a custom attribute such as rstyle="" in your html will break its validity in something like http://validator.w3.org/



[This message has been edited by stinx (edited 09-09-2003).]
smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

 posted posted 09-09-2003 13:44

I'm not too worried about the breaking of onmouseover events inline - the idea of this script was to avoid using them anyhow.

The validity thing concerns me more - I have been trying to find a tag that isn't used much but is still valid - no luck tho. An alternative was to specify the rollover state in a class tag something like this:

<div class="rstyle{blah:blah;blah:blah}"></div> - not being a valid clas would mean it wouldn't have any effect on css styling which is good, but I'm not sure whether it would interfere with other classes applied to that element:

<div class="myRealClass rstyle{blah:blah;blah:blah}"></div>

In theory it would probably be ok and should still validate.
smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

 posted posted 09-10-2003 00:53

Ok hello again guys,

Sorry to keep bugging you guys with my failings but I can't get my 'dot notation' to work.

Basically I'm trying to be able to target where the css change happens. My method for doing this works like this:

<div rstyle="#myDiv.border:solid 1px #000000"></div>

<div id="myDiv"></div>

So what happens is I check for '.' and if the exist I split() the string and remove the # (the # is the indicator it is a reference to an ID and not a class). Then I'm trying to apply the rollover effects to that div using getElementById(). In theory it all souns feasible, but I can't get it to work - I just keep getting errors like 'object does not support this method'.

My Current script (without ID checking):

code:
<script type="text/javascript">



var overStyler = {

	/*-----------element check-----------*/

	obj: document.getElementsByTagName ? document.getElementsByTagName("*") : null,

	/*----------------end----------------*/

	setup: function() {

		for(i=0;i<overStyler.obj.length;i++) {

			/*------------rstyle check-----------*/

			if(overStyler.obj[i].getAttribute && overStyler.obj[i].getAttribute('rstyle')) {

				cssValues = overStyler.obj[i].getAttribute('rstyle').split(/;/);

			/*----------------end----------------*/

				overStyler.obj[i].orig = new Object();

				overStyler.obj[i].over = new Object();

				for (j=0;j<cssValues.length;j++) {

					/*--------------css2jss--------------*/

					if (/-/.test(cssValues[j])){

						z = cssValues[j].toLowerCase().split('-')

   						x = z[1].charAt(0).toUpperCase() + z[1].substring(1, z[1].length)

    					cssValues[j] = z[0]+x;

    				}

					/*----------------end----------------*/

					styleType = cssValues[j].split(/:/)

					selector = styleType[0]

					newValue = styleType[1]

					/*--------undefined style fix--------*/

					overStyler.obj[i].style[selector]?

					overStyler.obj[i].orig[selector]=overStyler.obj[i].style[selector]:

					overStyler.obj[i].orig[selector]=0

					/*----------------end----------------*/

					overStyler.obj[i].over[selector] = newValue;

				}

				/*----------------over---------------*/

				overStyler.obj[i].onmouseover = function() {

					for(prop in this.over) {

						this.style[prop] = this.over[prop];

					}

				}

				/*----------------end----------------*/

				/*----------------out----------------*/

				overStyler.obj[i].onmouseout = function() {

					for(prop in this.orig) {

						this.style[prop] = this.orig[prop];

					}

				}

				/*----------------end----------------*/

			}

		}

	}

}



onload = overStyler.setup;

</script>



And this is the sort of code I have been trying to squeeze in to check for IDs (and classes eventually):

code:
/*---------------------------------*/

	if(selector.match(/\./)){

		sel = selector.split(/\./)

		if(/#/.test(sel[0])){

			sel[0]=sel[0].replace(/#/,'')

			overStyler.obj[i] = document.getElementById(sel[0])

		}

		selector = sel[1]

	}

	/*---------------------------------*/



[This message has been edited by smonkey (edited 09-10-2003).]

« Backwards — Onwards »

Show Forum Drop Down Menu