Drop Down/ Overlapping Content - Freshen it?

[virtual9]

1) Script Title: Drop Down/ Overlapping Content

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...lapcontent.htm
http://www.dynamicdrive.com/dynamici...anylinkcss.htm

3) Describe problem:

We use Drop Down/ Overlapping Content with great success. With that said, we like the nice fade-in and and shadow effects of AnyLink CSS Menu V2.0.

Is it possible to add the fade-in and shadow effects to the Drop Down/ Overlapping Content script, similar to Anylink CSS Menu V2.0, without much effort?

Or, is it possible to easily modify (configure?) Anylink CSS Menu V2.0, such that is behaves like Drop Down/ Ovelapping Content? Example explanation follows.

We cannot use AnyLink CSS Menu V2.0, for example, to reveal a search function because when selecting the number of search results to display the user essentially "mouses out" and the AnyLink script then closes. (DD likely understands this in great detail. And obviously that's why the behavior of Drop Down/Overlapping Content is appropriate for our application.)

Thanks in advance for your thoughts.

[ddadmin]

We cannot use AnyLink CSS Menu V2.0, for example, to reveal a search function because when selecting the number of search results to display the user essentially "mouses out" and the AnyLink script then closes.

By search function, do you mean a search box? Overlapping Content script uses a similar mechanism as Anylink CSS Menu v2.0 actually to determine when the user's mouse is within the drop down DIV area, so it should be possible to use the later as a general purpose drop down content box actually. What's the content you're trying to display within the box?

[virtual9]

Yes, the content is a search box. I'm currently using the Drop Down/ Overlapping Content script (using on-click) to reveal our advanced search box.

One of the search features is a standard drop-down box to let a user select how many search-results-per-page they desire (i.e., 10, 20, 30, 50). With Anylink, the very moment you go to select the search-results-per-page value the script treats the cursor as a mouse-out condition and obviously closes. (The same thing happened using either on-click or mouse-out options.) Drop Down, as you well know, can be configured to remain open until it is manually closed, which is perfect for our search application.

I assume I configured and tested AnyLink in a valid way, if so, then it does behave differently than Drop Down. I recognize AnyLink was probably designed with menus more in mind than revealing other content like search scripts.

We saw AnyLink and liked the "smart positioning" work DD incorporated into this script, along with the fade-in and shadow options. Very nice. If the world was perfect, we would like for Drop Down to have similar options.

By the way, we hesitate to get away from Drop Down anyway, because whoever wrote it did a really good job; the script is stable and works well with all browsers. So, kudos to the author(s) of Drop Down.

[ddadmin]

Ah yes, Anylink CSS Menu does incorporate a unique feature that closes the drop down menu when a click is initiated in the drop down menu itself. You can easily disable that though, by removing the code in red inside the .js file:

	this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu

Anything else that is possible in Overlapping Content script should also be possible using Anylink CSS Menu.

[virtual9]

No working solution yet.

Upon closer inspection . . . reinstalled AnyLink with recommended mod . . . When attempting to select a value from any drop-down box, for example, from the search results-per-page drop-down box, AnyLink closes immediately. The click action is not the issue apparently; in the very brief interval where you attempt to select an entry in a drop-down box, AnyLink closes. I assume it treats this action as a mouse-out event.

Drop Down incorporates these configurable options:
(1) Set whether Drop Down Content itself should automatically hide after the user rolls his mouse out of it. Global setting inside .js file. disableanchorlink: true

(2) Manually hiding the drop-down DIV. (hidedivmouseout: [false, 200])

Configuring these parameters correctly allows us to use the Drop Down script with radio buttons and drop-down box features inside the revealed DIV. Works perfectly. In our example, the user must manually close DIV if they do not proceed with actually pressing the search button. Again, all perfectly logical.

Can AnyLink be configured/modified to do the same?

[ddadmin]

Try also disabling hiding the drop down menu automatically onMouseout, by removing the code in red inside the .js file:

this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow

Then, if you need a way to manually hide the menu (via a link for example), you'd use something like:

<a href="javascript:anylinkcssmenu.hidemenu(document.getElementById('submenu3')._internalID)">hide menu</a>

where "submenu3" is the HTML attribute ID of the drop down menu you wish to hide.

[virtual9]

HOME RUN!!!

Thanks much to the DD Team.

Adding the content of this series of exchanges to the page for AnyLink is likely worthwhile, in my opinion. Terrific script.

[virtual9]

To DDAdmin, for your prior help, thanks much. Please consider our request that follows.

Your comment that AnyLink CSS Menu 2.0 ("AnyLink") can serve as a replacement for Drop Down/ Overlapping Content ("Drop") is generally true, but subtle differences in these scripts require that we continue to use Drop. Here's why.

By the way, before proceeding, the mods you recommended worked fine during our limited test period.

With Drop, as we configured it (disableanchorlink: true, hidedivmouseout: [false, 200] you can move the cursor literally anyplace after clicking Drop and the revealed drop-down DIV remains open. That's true even if you (1) move the cursor to a part of the page first that is not within the revealed drop-down area, or (2) roll the cursor back over the Drop-controlled DIV. But you knew that. (And that makes sense given the script's horizontal and vertical control parameters, and the ability to disable the original anchorlink.) With these features, you can essentially be sloppy with your cursor movement and cause no problems.

AnyLink, even with the mods suggested in this thread and configured to use click, will close if you (by accident?) (1) activate AnyLink and then move the cursor initially to any point not within the revealed drop-down area, or (2) roll back over the AnyLink-controlled DIV and into any space not within the drop-down area. Thus, AnyLink, given what we understand to be its primary use (menu display) is significantly more "touchy" or sensitive to any odd or accidental cursor movement than Drop. And that's not necessarily wrong or bad at all, but it's a real difference.

Our advanced search box, where we presently use Drop, presents a user with several choices. It's the kind of function where a user might unintentionlly roll the cursor outside of the drop-down area as he focuses (pauses) on reading and thinking about the choices just presented to him. So, from a user interface perspective Drop is a better choice than AnyLink for this application, at least we believe so. Our conclusion seems to be in-line with the DD presented use of these two scripts also.

So, what is the point to all this?

We desire that DD treat AnyLink and Drop as cousins. By this we mean that AnyLink and Drop should cosmetically appear the same (fade-in, shadow, etc.) but remain functionally different for different applications. In our case, we desire to use Drop for our advanced search function and a login (username, password) function for another application, and we believe AnyLink will work well for displaying menu options. With our recent tests, we think we can use both scripts to good effect on the same web page and thus desire that the cosmetic aspects of these "cousin" scripts be the same. I guess we could turn off fade and shadow on AnyLink and make these cousins appear the same, but you know that's not what we're after. We want it all on both scripts!

We hope you find some merit to our thinking. Thanks again. Appreciate DD.