Hi, All:
I am finishing up some (Moodle 1.9.x) YUI AJAX panels that show the activities above the tabs for a week-based course format. There are two things that I am stuck on: centering the panels on the page, and hiding the panels when the user's mouse leaves them. (The close buttons work fine).
If there are any AJAX/CSS experts out there who are willing to provide another set of eyes, I would certainly appreciate the help; access to the page should provide everything you need to see since the javascript is currently inline:
http://dev.moodlefn.com/brianj-19/course/view.php?id=2
and you can just login as a guest. I really do appreciate any pointers.
Thanks in advance,
Brian
Hi Brian,
I'm not sure if there's some YUI code specific to the panels that you could use, but in general you'll just need to add an event listener to the fnweeklynav cells to hide the panel on mouseout, something like:
YAHOO.util.Event.on('fnweeklynav1', 'mouseout', function(){YAHOO.util.Dom.get('fn-nav-1_c').visibility = 'hidden')});
You'll want to have the panel set itself to visible on mouseover and hidden on mouseout, so that the user can still access the links in the panel. You'll also want to add a small timeout (probably just a millisecond) before the panel is hidden since otherwise the panel may disappear to quickly, particularly on IE.
I'm not sure if there's some YUI code specific to the panels that you could use, but in general you'll just need to add an event listener to the fnweeklynav cells to hide the panel on mouseout, something like:
YAHOO.util.Event.on('fnweeklynav1', 'mouseout', function(){YAHOO.util.Dom.get('fn-nav-1_c').visibility = 'hidden')});
You'll want to have the panel set itself to visible on mouseover and hidden on mouseout, so that the user can still access the links in the panel. You'll also want to add a small timeout (probably just a millisecond) before the panel is hidden since otherwise the panel may disappear to quickly, particularly on IE.
Thanks, Mark.
For those that follow, the solutions I came up with required determining whether the mouseout event was actually from my panel's div, or whether it was from one of the sub elements and was visible due to event bubbling. For this I used
var tg = YAHOO.util.Event.getTarget(e, true);
and then simply compared tg to the element that had the event registered via addListener.
Also, once I knew that the event was from my panel, I needed to figure out whether the event was being triggered by the mouse leaving the panel, or by entering the panel. For this I used
// Is the relatedTarget (moved to place) a descendent of the panel?
var reltg = YAHOO.util.Event.getRelatedTarget(e);
// travel up document tree from reltg to see if it is a subelement of tg
// in other words, moving *into* the panel
while (reltg != tg && reltg.nodeName != 'BODY') {
reltg = reltg.parentNode;
if (reltg == tg) return; // moving into panel
}
This part of my solution ended up being based on what I found at this page.
Hope this helps someone,
Brian
For those that follow, the solutions I came up with required determining whether the mouseout event was actually from my panel's div, or whether it was from one of the sub elements and was visible due to event bubbling. For this I used
var tg = YAHOO.util.Event.getTarget(e, true);
and then simply compared tg to the element that had the event registered via addListener.
Also, once I knew that the event was from my panel, I needed to figure out whether the event was being triggered by the mouse leaving the panel, or by entering the panel. For this I used
// Is the relatedTarget (moved to place) a descendent of the panel?
var reltg = YAHOO.util.Event.getRelatedTarget(e);
// travel up document tree from reltg to see if it is a subelement of tg
// in other words, moving *into* the panel
while (reltg != tg && reltg.nodeName != 'BODY') {
reltg = reltg.parentNode;
if (reltg == tg) return; // moving into panel
}
This part of my solution ended up being based on what I found at this page.
Hope this helps someone,
Brian