Hiding Drop-Down Tabs

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:
Heading photo, Metadata.

What is Metadata?

What is metadata? Well, It’s an odd concept to wrap your head around. Metadata is essentially the secondary layer of data that tracks details about the “regular” data. The regular

XDR solutions

The Benefits of Using XDR Solutions

Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved

AI is revolutionizing fraud detection

How AI is Revolutionizing Fraud Detection

Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across

AI innovation

Companies Leading AI Innovation in 2023

Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several

data fivetran pricing

Fivetran Pricing Explained

One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of

kubernetes logging

Kubernetes Logging: What You Need to Know

Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes

ransomware cyber attack

Why Is Ransomware Such a Major Threat?

One of the most significant cyber threats faced by modern organizations is a ransomware attack. Ransomware attacks have grown in both sophistication and frequency over the past few years, forcing