logo

Making the Flyout Menu Work in IE 6 - JavaScript

As promised - even if it is a weekend late - the flyout menu now works in IE 6, so, in effect, it now works in "all" browsers. You can see a demo of it by looking at the login link in Dext.

To make it work in IE 6 I had to use JavaScript to duplicate the CSS li:hover pseudo-class. You can see how I did this by looking at the source code. Notice how I used conditional comments to include the JavaScript file only when it's needed (as well as a little IE6-only CSS file). It looks like this:

<!--[if lte IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<script src="js/menu.js" type="text/javascript"></script>
<![endif]-->

In non-IE browsers and IE 7 these two files do not load.

Take a look in the menu.js file. In there is the code that runs in the onDomReady event. It loops each DIV which has a class of "flyout". For each one it finds the immediate parent element (an LI in this case) and adds two events to it — one to show the DIV when the mouse enters the parent LI and one to hide it again when the mouse leaves.

The code relies on jQuery, but, as you can see from the menu.js file, it's trivial to adapt it to run with other libraries, such as Prototype. You could even remove the need for a library and write your own code to add these events. I was being lazy though and assuming most people use one of the many available libraries in your applications. If you use a library other than the two I've coded for and want me to "port" the code just say.

I guess I really ought to port it to Dojo and learn something about that particular library in the process. Whenever I've tried in the past though I've found it a bit like banging my head on a brick wall, which, I guess, is why they chose it to add to Domino ;o)

So, there you have it. Simple and accessible (to a degree) cross-browser menus. What we've looked at so far though is just the browser side of it (although last Wednesday we did look at how to embed the login form in Domino). This week I'll talk about the Domino server side of it and how to build the list of admin links and make them both context and user-sensitive. At the end of the week I hope to make it available as a download.

Comments

    • avatar
    • Steve
    • Mon 4 Feb 2008 10:21 AM

    Hello!

    Thanks! To help you, here are a couple of ideas on what needs to be done. (In fact, I have to finish it tonight, so I can let you know what I do). =8P Problems:

    1 - what if some of the menu items are hidden, based on user, field values, etc...? It's not a problem to hide them, however the flyouts (since they're absolute positioned) will flyout in the wrong place. (So, would the flyout parameters need to have their own calculations?)

    2 - if there are a lot of menu items, it will just follow them on the next line. We would need to add a scrollbar.

    3 - let's say that all the links in a one flyout menu are hidden to the user. The parent menu item should also be hidden. (Just add a complex hide-when, I guess?).

    I'm sure there are more, but hopefully, this gives you a good head start. :)

    Take care!

    Steve in NYC

    "It hurts to be on the cutting edge."

    • avatar
    • Steve
    • Mon 4 Feb 2008 04:59 PM

    Howdy!

    Just a little update... =8P

    I had prototype v1.5.0_rc0, and the menu wouldn't work with that version. It couldn't find "div.ancestors". And when I would use "jQuery", none of the other functions from that prototype library would work. :(

    I went to download the latest version, 1.6.0.2, but it wouldn't compile - it had some js errors. Same thing with 1.5.1.2.

    I finally added 1.5.1.1, and it's working fine - both the menu and the functions that were in use with the previous prototype library.

    I'm curious... why do we have to rely on complete strangers building these libraries, when you can have all of us help you build a "howlett.js" library for everyone here? There already seem to be 27 different librairies out there, anyways, right?

    Sorry... I'll get off my soapbox. :)

    Thanks!

    Steve in NYC

    "If the automobile had followed the same development cycle as the computer, a Rolls-Royce would today cost $100, get a million miles per gallon, and explode once a year, killing everyone inside."

    • avatar
    • Rob
    • Mon 4 Feb 2008 05:06 PM

    I appreciate all the work you're putting into this. However, I hope you can document some things I haven't puzzled out for myself yet. For example, if I want to move the login from the right side of the screen to the left, what do I have to change?

    I tried everything I could think of in the CSS to get the flyout to be to the right of the login link but no luck. Then I finally went back and looked at the HTML where I discovered some embedded style info:

    <div class="flyout" style="background-position: 160px top; left:-155px;">

    I took the style out and it started working in Firefox but not in IE 7. (I'm guessing the reason it's there it to make IE 7 work.)

    Anyway, it would be helpful to know which parameters control the placement of the flyout menu.

    You can see (in Firefox) my attempt to use it at this URL:

    {Link}

    I used Tommy's idea and dropped the code into the body attributes field if my $ViewTemplete Default form.

    Thanks again and warmest regards,

    Rob:-]

    • avatar
    • Axel
    • Tue 5 Feb 2008 05:21 AM

    Cool stuff, btw.

    About dojo thing: A collegue here is trying to get into Dojo, too. And it seems not to work very well. A couple of books about Dojo will appear in summer 2008. There is only a very brief book in german. I am a happy prototype user.

    How important is the selection of the javaScript library anyway? [getting_quite_a_bit_offtopic] In java land they are getting more and more lenient. Last year I found it funny, when I landed in a project for a big company here. In the need-consultant-posting they wrote to need someone with hibernate knowledge, but turned out that in the project ibatis-sqlmaps was used :-) [/getting_quite_a_bit_offtopic]

  1. I know what you are saying about Dojo. I, myself, said I need to learn Dojo because the new Designer client in 8.5 will be using Dojo for action bars, form refresh, etc. I figured it would be good to at least recognize some of the code Domino will be producing for us in the upcoming release.

  2. I've just spent a little time using dojo and didn't have a problem. That said, I wasn't exactly pushing the boundaries. All of the stuff that I needed worked. I've blogged about it for this weeks SnTT and there was no head banging. :-)

    • avatar
    • Jake
    • Thu 7 Feb 2008 03:46 AM

    Hi Tony. Yeah I saw your post and it prompted me to look again, which I'll try and do. Maybe it's changed, but last time I looked there was very little in the way of help or documentation.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Mon 4 Feb 2008

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content