MIKESTOWE.COM

you are here

Show Element – MouseOver

This is a quick, simple jQuery script that can be used to create floating divs (tooltips), dropdown menus, or really anything you want to be displayed when the user places his/her mouse over the parent element or the originally hidden element.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/*
* Name: showElement
* Author: Michael Stowe
* Version 1.2
* ---------------------
* Displays an element when either it or its parent are being hovered on, using the "showelement"
* attribute on the parent, and the correpsonding ID on the element to be displayed.
* ---------------------
* Example:
* <a href="javascript:void(0);" showelement="example" effect="show" delay="0">Show Div</a>
* <div style="display: none;" id="example">This is an example div</div>
* ---------------------
* Changelog:
* Added support for Fade, Slide, or Show jQuery effects, as defined by the "effect" attribute
* Added ability to set delay using the delay attribute (500 = .5 seconds = default)
* ---------------------
* (c) 2010, http://www.mikestowe.com
*/
element_selected_id = 'void';
element_menuTimer = 'void';
function show_element(id,effect) {
    var formatted_id = '#'+id;
    if(element_menuTimer != 'void') { clearInterval(element_menuTimer); }
    if(element_selected_id != id && element_selected_id != 'void') { hide_element_now(element_selected_id, effect); }
    show_element_now(formatted_id,effect);
    element_selected_id = id;
}
function show_element_now(formatted_id,effect) {
    if(effect == 'show') { $(formatted_id).show(); }
    else if(effect == 'slide') { $(formatted_id).slideDown(); }
    else { $(formatted_id).fadeIn(); }
}
function hide_element(id,effect,delay) {
    element_formatted_id = '#'+id;
    if(effect == 'show') { element_menuTimer = setInterval('$(element_formatted_id).css(\'display\',\'none\')',delay); }
    else if(effect == 'slide') { element_menuTimer = setInterval('$(element_formatted_id).slideDown(\'fast\')',delay); }
    else { element_menuTimer = setInterval('$(element_formatted_id).fadeOut(\'fast\')',delay); }
    
}
function hide_element_now(id,effect) {
    var formatted_id = '#'+id;
    if(effect == 'show') { $(formatted_id).hide('fast'); }
    else if(effect == 'slide') { $(formatted_id).slideUp('fast'); }
    else { $(formatted_id).fadeOut('fast'); }
}
function load_showelement() {
    $.each($('[showelement]'),function(item) {
        var attr = $(this).attr('showelement');
        var id = $(this).attr('id');
        var effect = $(this).attr('effect');
        if(effect == 'undefined') { var effect = 'fade'; }
        var delay = $(this).attr('delay');
        if(parseInt(delay)!= delay-0) { var delay = 500; }
        var format = '#'+attr;
        // Update Parent Elements
        $(this).hover (
            function() {
                show_element(attr,effect);
            },
            function() {
                hide_element(attr,effect,delay);
        });
        // Do the same for the child element
        $(format).hover (
                function() {
                    show_element(attr,effect);
                },
                function() {
                    hide_element(attr,effect,delay);
        });
    });
}
window.onload = load_showelement;

Example Usage:

What am I?

XHTML
1
2
<a href="http://www.yahoo.com" showelement="yahoolink" delay="500" effect="fade">What am I?</a>
<div style="display: none;" id="yahoolink">I am a link that goes to Yahoo.com</div>

Key elements include the “showelement” attribute (used to identify which element to fade in/ out),  the effect attribute (optional; accepts show, fade, or slide), the delay attribute (optional, default is 500 milliseconds),  and the corresponding “id” attribute on the element to be affected.

showElement  (click to download)
Display elements on MouseOver. Requires jQuery
version: 1.2
size: 2.73kb

showElement (safe)  (click to download)
Uses jQuery(…) instead of the $(…) alias
version: 1.1
size: 2.81kb

Share this Page:
Facebook Twitter Linkedin Reddit Tumblr Email

Leave a Reply

Your email address will not be published. Required fields are marked *