Hiding Drop-Down Tabs

Question:
Is there an easy way to hide a drop-down tab without using the mouseout, mousemove, or mouseover events? These dynamic drop-down tabs are layered and in a framed page. When I move down the page, I put a transparent rectangle below the menu items so that onmousover I can hide all the drop-down tabs. When I move up to the top frame, I put a two pixel bar across the top of the bottom frame that will also hide the drop-down on mouseover. However, fast movement through these areas doesn’t always activate the onmouseover events of the invisible images. Do you know of a better way to hide these menu items?

Answer:

The problem you describe is not uncommon?most menus rendered in DHTML have much the same problem. The real issue is to determine when the mouse moves off of a given element and onto another one. The mouseover and mouseout events help, but fast motions can often cause these events not to properly fire. With IE4 and IE5, one solution is to make use of three DHTML elements: onmousemove, elementFromPoint, and classes.

You can assign a class to a given HTML element that doesn’t necessarily have any Cascading Style Sheets (CSS) properties associated with it. You can also assign more than one class to a given element. Because of this, you can designate a given class as a “live” class?so long as the mouse is over an element with such a class, the element is visible, but once the mouse moves off of it, then you can perform some event. This is what the onmouseover and onmouseout events are supposed to do, but they must get fired to do their jobs.

However, the onmousemove event remains active at all times. If you apply this event to the body object, then it is always firing, unless you explicitly capture the event with an event.cancelBubble=true call. This simple script shows a way that you can perform a simple status test, but it should be easily extended to your situation:

	Untitled
This is a test.

In this code, the onmousemove event is assigned to the body object and calls getElementName(). This in turn calculates the x and y position of the mouse relative to the client. You can use these points to determine which element the mouse is currently over, and from there what class the element belongs to. If the class is of a specific type (such as our “testClass” defined earlier) then some action can be taken?a given DIV made visible or invisible, a status message changed, and so forth. You should be able to use the same principle to determine whether you are in fact currently over a live object, and hide the drop-downs if you’re not.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

homes in the real estate industry

Exploring the Latest Tech Trends Impacting the Real Estate Industry

The real estate industry is changing thanks to the newest technological advancements. These new developments — from blockchain and AI to virtual reality and 3D printing — are poised to change how we buy and sell homes. Real estate brokers, buyers, sellers, wholesale real estate professionals, fix and flippers, and beyond may

man on floor with data

DevX Quick Guide to Data Ingestion

One of the biggest trends of the 21st century is the massive surge in internet usage. With major innovations such as smart technology, social media, and online shopping sites, the internet has become an essential part of everyday life for a large portion of the population. Due to this internet

payment via phone

7 Ways Technology Has Changed Traditional Payments

In today’s digital world, technology has changed how we make payments. From contactless cards to mobile wallets, it’s now easier to pay for goods and services without carrying cash or using a checkbook. This article will look at seven of the most significant ways technology has transformed traditional payment methods.