Newb question , is this possible with change class JS?

Hi,

I have a pressing question that would be nice to know the answer before the client effectively kills me.

on this page in my ignorance, I suggested the client have a visual effect of onMouseOver the singular words change color onHover.

I didn’t realize that with MM behaviors this was a bad idea and making up to 10 or more floating boxes with Z-indexes was NOT the way to do this. Since I promised, I added classes to the words and the swap behavior to make it work. The first list item <Banking and Finance> shows you what I’d like to happen.

http://corporate.fr/ce/clients.html

From what I’m learning (BTW the PDF from this site on JAvascript is by far the best I’ve ever seen), it is possible to add a class to an ID, or class. There are many tutorials on add Class on ID, but the words are non- contiguous.

Is this possible to do with an addClass, removeClass and if so some hints as to how to code that would be greatly appreciated.

You could remove the visibility sections from the CSS part. Without it the unrepated items won’t entirely disappear, but the related ones will still contrast strongly in red.

If you want to try and fix it instead on non-standard web browser (yes, I’m looking at you, IE), the people in the CSS forum might have some insight to share.

That actually did exactly what I wanted, as I preferred if the items stayed in grey coloured text. So I just commented out the .css visibility for the classes.

Happy now I made it, but as I said earlier , without your help it just was beyond me.

I’m still practicing JQuery with the book from this site. I actually tried to do what you wrote for me in JQuery , as the syntax can be easier for beginners. Yet couldn’t figure out how to return all elements with the classes selectors into the function. It probably is the same as JAvaScript with (e) being the window event but I haven’t got that far yet. .onmouseover or .hover

Hi Again.

I was so happy to have this done, sent it to thew client after checking it on Opera, FF, Safari, Chrome on Mac and PC.

On IE it works on IE6 but not 5.5 or 8.
Any ideas why?

Final page http://corporate.fr/ce/clients.html

The category links use a fragment identifier within their link, which gets used as the classname that’s used by the script.

The link you have for banks will want to have an href of “#banks”. That way when you hover over it, the script will use “banks” as the class name on the items group.

I noticed that you want the hover effect to hide the unrelated items. Here’s how that works:

Nothing is hovered over, all of the items are shows as per normal.

When one of the categories is hovered over, a class name relating to that category is added to the items list. That explains the existence of selectors such as #info.zero which hide everything when the class name is active.

The #info.zero .zero selector makes visible those items with that appropriate category name, and also provides the color effect to the item text. This works because 1 id + 2 class names is ranked with a higher specificity than 1 id + 1 class name.
For more on this see: http://css-tricks.com/specifics-on-css-specificity/

Here’s how I put the test code together. You can follow this on your own page as a helpful check that things are working as they should.

[list=1][]CSS hover effect for the category list
[
]JavaScript onmouseover event for categories, which updates the classname of the items group
[]CSS for items group to hide everything on hover
[
]CSS to keep visible and give colour to individual items
[/list]

Each step also ensures that it’s easier to ensure that the steps below it work as expected.

Using that check list, a quick look at the script shows that the classname is currently being applied to the category group. The classname should instead be applied to the items group instead.

Once you’ve done that, you will need to update the CSS so that the client list becomes hidden on a successful mouse-over.

Once that works, it’ll be easy to use a modified copy of the selectors to then reveal the ones you need.

That’s all right. You’ll find that it’s a very common cross-compatible event handler.


el.onclick = function (e) {
    e = e || window.event;
    var targ = e.target || e.srcElement;
    if (targ.nodeType === 3) {
        targ = targ.parentNode;
    }
    if (targ.nodeType === 1 && targ.nodeName === 'A') {
        // do stuff here
    }
    return false;
}

Here’s what it does:

[list=1][]If an event wasn’t passed to the function, it’s most likely Internet Explorer that it’s being run on so the event on IE is fetched instead from window.event
[
]Modern web browsers use an event property called target, Internet Explorer uses one called srcElement. If e.target cannot be assigned to the targ variable, we can then try the e.srcEement one instead.
[]Safari triggers events from more than just element nodes, it triggers them from text nodes as well, which have a nodeType of 3. Should that be the case, walk on up the DOM to the parent of the text node, which will be an element mode
[
]If the nodeType is 1 then it is an element node. If the element is anything but an anchor (a link), we stop running the function. This is a nice way of handling events from multiple elements, from within the one function
[*]Given that the triggered element is an anchor, we can carry on with what we were going to do with it[/list]

I should also give thanks to quirksmode, who has a great section on events. It’s on the [url=“http://www.quirksmode.org/js/events_properties.html”]event properties page that you’ll find the original inspiration for the above code.

I’ve been luckier than some other people I know here. Some areas still haven’t had power or sewage for the past 5 days, and the other repairs are going to be expensive to handle. We’re still getting regular earthquakes, which you can see on the nearby earthquake drum, and it’s going to be a long wait until we don’t have any more quakes, but we’ll get through.

Yes that helps, a lot is a glimpse into the very underpinnings of the long history of the web.

I gained a few new concepts like bubbling up, the layers, the direction into the layers etc.

Yet most is way over my head for now.

I made a lot of tries but could not get the JS to work on my page as I could with the code in the example you wrote for me.
I can imagine that it is in the DOM as the Length of IDs is different than a simple doc , but the French have a funny expression “pedaler dans la choucroutte” which means trying to advance by advance in a bowl of sauerkraut by pedalling.

here is a new page with the actual list the client wants to use. I added spans to each client name with the associated .class ( in the end of the external css style sheet)
In the head I commented out some of the inline style, but I can’t figure out how to make the roll over on the <a> links in the #clientListNavBar fire and change the class in the spans ( words with classes in the list).

I’ve probably tried changing the selector too many times in the JS too so perhaps the combinations are too many for me to find the answer in.

http://corporate.fr/ce/clients_try_JS.html

Paul,

Thank you so much. I am trying the code and so far all is good. I took out some <p> tags and just added span classes to certain words and it still works.

I wouldn’t have figured all of the script out so you really helped a lot.

I will apply this to the page content markup , strip out all the MM- scripts and see how it goes.

BTW I should have credited the book that makes sense to me: from here: JQUERY Novice to Ninja by Earle Castledine and Craig Sharkie. That is easy to read and fun.

hope that you weren’t at a loss by the recent earthquake.

The good news for you is that it’s quite easy to rework well-written Javascript with some jQuery functions. About the only significant different to the way it’s coded, is that

Here’s the original function:


var category = document.getElementById('category');
category.onmouseover = function (e) {
    e = e || window.event;
    var targ = e.target || e.srcElement;
    if (targ.nodeType === 3) {
        targ = targ.parentNode;
    }
    if (targ.nodeType === 1 && targ.nodeName === 'A') {
        document.getElementById('info').className = targ.href.split('#')[1];
    }
    return false;
}
category.onmouseout = function (e) {
    document.getElementById('info').className = '';
}

Three things will change:

[list][]document.getElementById is replaced by the $() selector
[
]Instead of two separate function events, you pass them both to the hover() method
[*]Instead of className you use the addClass and [url=“http://api.jquery.com/addClass/”]removeClass methods[/list]

We can also take the opportunity to simplify things by using a css selector to set the event on the category links, so that we don’t need to use the event object, and we can wrap the whole lot up in a callback so that the code can be executed when the DOM is ready.


$(function () {
    $('#category a').hover(
        function () {
            $('#info').addClass(this.href.split('#')[1]);
        },
        function () {
            $('#info').removeClass(this.href.split('#')[1]);
        }
    );
});

There is no benefit in loading jQuery just to do the above work, because the jQuery library is pretty big in return for virtually no benefit in this case.

If however though your page already uses lots of jQuery, there is no trouble then with adding the above code.

Thanks! I was missing one word, but so important to make this work.

I appreciate the way you helped me find my way. A step into the right direction. Discovery of this new to me world is fascinating, and when it works it is as much magic as when you see a black and white print develop before your eyes in a dark room.

I’ve been reading through the JQuery tutorial from Sitepoint listed above. I will continue ardently , but won’t propose JS functions until I know more.

Thanks Paul.

I’ve quickly run-up a test of the technique that you seem to be wanting, where a class name is used to specify whichever category should be shown


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Hover effects</title>
<style type="text/css">
#category {
    float: left;
}
#category a:hover {
    color: red;
}
#info {
    margin-left: 10em;
}
/* hide the pieces of info */
#info.zero, #info.one, #info.two, #info.three,
#info.four, #info.five, #info.six, #info.seven {
    visibility: hidden;
}
/* show the appropriate pieces of info */
#info.zero .zero, #info.one .one, #info.two .two, #info.three .three,
#info.four .four, #info.five .five, #info.six .six, #info.seven .seven {
    visibility: visible;
    color: red;
}
</style>
</head> 
<body> 
<ul id="category">
    <li><a href="#zero">Zero</a></li>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
    <li><a href="#four">Four</a></li>
    <li><a href="#five">Five</a></li>
    <li><a href="#six">Six</a></li>
    <li><a href="#seven">Seven</a></li>
</ul>
<div id="info">
    <p class="zero two four six">Is divisible by 2</p>
    <p class="zero three six">Is divisible by 3</p>
    <p class="zero one two three">Is less than 4</p>
    <p class="four five six seven">Is greater than 3</p>
    <p class="two three five seven">Is a prime number</p>
    <p class="one two six">Has three letters in its name</p>
    <p class="zero four five">Has four letters in its name</p>
    <p class="three seven">Has five letters in its name</p>
</div>
<script type="text/javascript">
var category = document.getElementById('category');
category.onmouseover = function (e) {
    e = e || window.event;
    var targ = e.target || e.srcElement;
    if (targ.nodeType === 3) {
        targ = targ.parentNode;
    }
    if (targ.nodeType === 1 && targ.nodeName === 'A') {
        document.getElementById('info').className = targ.href.split('#')[1];
    }
    return false;
}
category.onmouseout = function (e) {
    document.getElementById('info').className = '';
}
</script>
</body> 
</html> 

You’re welcome. The “trick” here being to script a class name on to the items group, so that CSS can then do what it’s good at, the presentation work. All too often we see people trying to hammer in a nail with a chisel. When each tool (HTML/CSS/JavaScript) is used for what it’s good at, things tend to go so much better.

After many cups of tea I’ve gone over it and actually made some progress. With your help I am understanding most of it. I am posting an updated page that when opened shows the effect that the ROLLOVER is supposed to show, but on MouseOver the list anchors the effect is actually hidden. I was able to get the refresh view to show the items in red and hide the others by adding the class .banks to the #ID clientList.

Here is the new version: http://corporate.fr/ce/clients_try_JS_almost.html

Yes Absolutely right. MAny things can be done directly in CSS and html. Next is Javascript which can be very efficient.

For effects, and or Ajax many options are there or so I’m discovering, yet you have to add weight to adding a framework for each add on you use.

Since they are all based on Javascript, perhaps as hard as it is to learn, might be the most appropriate place.

Thanks again for posting the code again, I am still learning right along with you. It’s coming together slowly. Each step installs confidence , and each step makes understanding other code formatting for other frameworks much easier.

The client is very happy with the above site now, I’ll just have to put up two languages, French and English and it’s done.

I am starting out on another project that has old ASP and a data base with xml. Finding help on that old dinosaur will be harder as all support for ASP requests, bindings, server behaviours were dropped from Dreamweaver since CS3. Think I’ll just apply new css to their existing table layout ASP pages which are iFrames .

When I learn more, and apply some I’ll be back with more newb questions if that is all right with you and the other members here.

I also found a forum thread with the favourite books for beginners in another thread from SitePoint. More reading!