How to change to change an elements Css Class using onMouseover

[LoveToCode]

I have a div that looks like this:

<div class="plistTitle"
onmouseover="this.style.classname='plistTitle_hover'">- <img src="[URL unfurl="true"]http://earthlingsoft.net/ssp/playlists/images/playlist.gif">[/URL] Shawn's Rad Playlist o' Death</div>

I want to swap classes on mouseover event. I tried this:

onmouseover="this.style.classname='plistTitle_hover'"

but it did not work. I also tried this.classname and this.class, to no avail. Any suggestions?

 

[tsuji]

>onmouseover="this.style.classname='plistTitle_hover'"
[tt]onmouseover="this.class[red]N[/red]ame='plistTitle_hover'"[/tt]

 

[LoveToCode]

Great - It works! Thank you!

Jenni

 

[lupine73]

Hello,

Sorry to piggy-back on this thread, but as it's going down the same general path as what I'm trying to accomplish, it seemed appropriate..

I'm trying to create a page with a series of expandable sections containing policies and their related forms, etc. Each group is going to be organized by number and the setup would look something like this:

====================
<div class="DocumentWrapper">
<div class="DocumentHeader"><a href="linktosomething">Test Header</a></div>
<ul class="SupportDocuments">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
=====================

Now here's the trick...

The page would initially look like a series of entries, displayed via the Test Header link. The unordered list would initially be set to display: none via CSS. What I'm trying to accomplish here is to set up a javascript where clicking on the 'Test Header' link for each section would dynamically change the display: property for the class SupportDocuments, from "none" to "block", thus expanding a list of relevant forms, linked via the LIs.

Clicking on the Test Header link again would set the display property back to "none", thus collapsing the UL and returning it to displaying the main header only.

Another catch is, to keep it as generic as possible, I want to go with an "ID-less" approach, to allow for easier maintenance, etc; so all the script has to stay "local" only to the specific elements the user is clicking on/displaying.

I'm admittedly very new at Javascript and trying to learn. The catch is, I have to implement this script for a project at work and don't have the time to go through enough training to learn it myself. I've scoured the web via google for something to do the trick, but nothing's quite worked yet or didn't do quite what I need it to.

I apologize in advance if this makes no sense and thank you for your assistance with this .

Thanks!
-Lupine

 

[dwarfthrower]

Hi lupine...

clicking on the 'Test Header' link for each section would dynamically change the display: property for the class SupportDocuments, from "none" to "block", thus expanding a list of relevant forms, linked via the LIs.

OK, you'd probably want to change the [tt].style.display[/tt] property of the individual UL element rather than the property of the class... Presuming of course that you only want the supporting documents for A to appear when you click the header for A rather than showing the supporting documents for B, C and D as well. Changing the class definition will affect anything that has that class.

Another catch is, to keep it as generic as possible, I want to go with an "ID-less" approach, to allow for easier maintenance, etc; so all the script has to stay "local" only to the specific elements the user is clicking on/displaying.

Not a problem... The document object model means that any element knows about the elements that contain it, that it contains and that are it's adjacent siblings. That means that we can write some code to say for the Div tag that is somewhere above this element that has a class of "DocumentWrapper", get any elements that is contains which are UL elements and change their style properties.

Here's a quick run-through... it may need a bit of poking and prodding to get it to work with all-browsers etc etc usual disclaimers here... Tested in IE 6...

From there you can add the method to the onclick event handler of any of your elements and pass the element itself as the argument as per:
[tt]<a href="linktosomething" onclick="toggleVisibility(); return false;">Test Header</a>[/tt]

function toggleVisibility(){
	//Find the parent 'DocumentWrapper' object
	var objDocWrapper = event.srcElement;
	while(objDocWrapper != null && objDocWrapper.className != "DocumentWrapper"){
		//Climb back up the object heirarchy until we find it
		objDocWrapper = objDocWrapper.parentElement;
	}
	
	if(objDocWrapper != null){ // If we found the wrapper
		//find any UL elements that belong to it
		var allULs = objDocWrapper.getElementsByTagName("UL");
		
		//loop through any ULs we find
		for(var i = 0; i < allULs.length; i++){
			var objUL = allULs.item(i);
			
			//see if it's of the right class
			if(objUL.className == "SupportDocuments"){
				//if it is, toggle it's style.display property
				if(objUL.currentStyle.display == "none"){
					objUL.style.display = "block";
				}
				else{
					objUL.style.display = "none";
				}
			}
		}
	}
}

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Enable Apps

 

[lupine73]

Wow.. Thank you for the feedback!

I usually cringe when posting messages asking about programming - have gotten some rather irate, "read the manual" or "learn to program" type responses. This is awesome, however and I think will help greatly in my learning Javascript as well.

Some of what you have in the code is still new to me - not that I haven't *seen* it before, just that I haven't learned where/why/how to use it yet. So, hopefully this will help me in that regard, too.

I'll give this a try.. Thanks much!!

-Mike

 

[lupine73]

Hello again...

Okay that works beautifully. Thanks!

My next challenge, it seems, is to alter the code so that clicking on an image (either a small + or - sign) contained in the DocumentHeader div will trigger the functionality there now, plus change the image to reflect the appropriate action (+ to expand, - to collapse).

I'm guessing the basic logic is the same?. IE, detect if the image is there and if so, determine what state it's in (which image is loaded?) and then alter it to reflect the correct image accordingly.

I think original question was a bit short-sighted, but I was mainly focused just on how to get the whole expanding/collapsing thing in place.

 

[dwarfthrower]

I'm guessing the basic logic is the same?. IE, detect if the image is there and if so, determine what state it's in (which image is loaded?) and then alter it to reflect the correct image accordingly.

Pretty much, yes. You could either have an <IMG> tag in there and change the [tt].src[/tt] attribute - using much the same logic as above. Or - and it's purely a matter of personal preference - have a little span in there and two styles defined in the stylesheet like [tt].folder_expand[/tt] and [tt].folder_collapse[/tt] which load the appropriate image as a background image - then change the [tt].className[/tt] property of the span.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Enable Apps

 

[lupine73]

So I spent a couple days trying to figure out how to manipulate the image when I click on it, as well as the display property and, after a few attempts ... no dice.

Everyone tells me how easy Javascript is to learn but damned if I can make sense of what's going on or what I'm doing wrong.

In any case... time's running short on my deadline for this project and I can't afford any more time trying to figure this out myself. Does anyone know of a site, or an app that provides some kind of script generator so I can just enter the parameters and it'll do the rest?

I still intend to learn Javascript, but trying to learn it under the gun isn't working out too well.

I appreciate any further help on this

Take care,
Mike

 

[kaht]

Does anyone know of a site, or an app that provides some kind of script generator so I can just enter the parameters and it'll do the rest?

Doesn't seem like there'd be much demand for javascript coding jobs if this were the case.....

You can always use rentacoder.com or contact a users here from their website links in their signatures if you want someone to do it for you.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[lupine73]

Oh not true at all.. There are script generators, CSS generators.. all kinds of things like that out there. They're usually only good for rather simple tasks, however... More complex tasks are still going require the custom-coding of an actual programmer. Thus coders' jobs are quite safe .

Same could be said for (X)HTML and CSS, which I work with all the time. There are generators out there for that as well - heck there are sites that let you build an entire site, graphics and all, in a "color-by-number" fashion... Still I'm able to find companies seeking designers.

I'm assuming what I'm looking to do isn't considered (by experienced coders) difficult and, thus, some sort of generator might be available.