Page 1 of 1

Javascript Rollover

Posted: Tue Jun 23, 2009 12:28 pm
by watson516
Hello,

I am working on a project where I need a rollover style menu but I am not sure how to go about doing it. That's where you guys come in.

The menu has a large box (possibly a div?) that takes up most of the page and contains images and text. This box is what changes when the user rolls over the 4 or 5 titles on the left side. Before (and after) the user rolls over the list, there should be a main title 'page' in the large box area.

What I am looking for is something similar to Miro's main page. Theirs doesn't work on IE and I don't believe I am good enough at Javascript to figure out why. I attempted to use onrollover= on each <li> but that didn't really work. Any ideas?

Re: Javascript Rollover

Posted: Tue Jun 23, 2009 12:49 pm
by califdon
Google for javascript rollover script and you will find more scripts than you can ever possibly use.

Re: Javascript Rollover

Posted: Tue Jun 23, 2009 2:04 pm
by jayshields
watson516 wrote:I attempted to use onrollover= on each <li> but that didn't really work. Any ideas?
Try onmouseover, probably in conjunction with onmouseout.

Re: Javascript Rollover

Posted: Tue Jun 23, 2009 4:49 pm
by pickle
I would strongly recommend against requiring Javascript to see the page in all it's glory. For public websites, Javascript functionality should degrade properly, not completely change the page (try viewing the Miro site without Javascript).

How would I do it differently? Well, you can still use Javascript, but make sure all the information is still available to users without Javascript. Rather than have the navigation just go away, I would find a way to display all the information on the page (vertical scrolling would be fine), then hide/show elements to get what Miro appears like. This would allow javascript & non-javascript users alike to see all your product had to offer.

There's probably even a way to do this with CSS, but again, IE would probably roll over and die.

Re: Javascript Rollover

Posted: Wed Jun 24, 2009 2:54 pm
by watson516
Thanks for the replies. I really do appreciate it.

As for the downgrading, I am using javascript to 'hide' the unneeded stuff so that if javascript is disabled, it will show everything.

The actual problem I am having troubles with (which I didn't really state in the first post - terribly sorry) is the resetting the display box when the user moves the mouse off of the containing div. I have tried onmouseout but that appears to apply onmouseout event to every tag within the containing div. This is a problem because I will have links in the display box that I need the user to be able to click. If every tag within the containing div gets the onmouseout event of resetting the display box, it gets reset when the user mouses over to that box.

One option that has half worked for me was to put an empty div behind the container div and giving it an absolute position to cover the entire page (behind everything) and giving that an onmouseover event. The problem with this is that when I try to put this absolutely positioned div within another div (with a relative position) it doesn't show up in IE. If I place the absolutely positioned div behind everything, I don't think (I could be wrong) that the onmouseover would execute when it should because there is the page's container div behind the rollerover's containing div.

I am going to take a look at a way to do it with just CSS and see if that will work in all browsers (if I can figure it out). Any other ideas?

[edit]

Sorry, I meant to say onmouseover, not onrollover

Re: Javascript Rollover

Posted: Thu Jun 25, 2009 3:10 pm
by kaszu
There is easier solution. Callback will be called only when mouse will leave actual element, not when mouse leaves element or any child.

Code: Select all

//Add event listener to the element, this is incomplete (works only for standard compliant browsers, FF, Safari, etc.)
function addEventListener(el, ev, fn) {
    if (el.addEventListener) {
        //Standard
        el.addEventListener(ev, fn, false);
    } else {
        //... for other browsers something here ...
    }
}
 
//Add mouseleave (mouseout, but only called when mouse leaves el)
function addMouseLeaveEventListener(el, fn) {
    addEventListener(el, 'mouseout', function (ev) {
        var targ = el;
        var rel_targ = ev.relatedTarget;
        
                //when mouse will leave 'el', related_target will be one of the 'el' parent nodes
        while(targ.parentNode) {
            targ = targ.parentNode;
            if (targ === rel_targ) {
                return fn(ev);
            }
        }
    });
}
 
//Usage:
var some_element = document.getElementById('some_element');
 
addMouseLeaveEventListener(some_element, function (ev) {
    alert('MOUSE LEFT some_element');
});
Similar for mouseenter.