tags:

views:

72

answers:

4
Q: 

Show a adjacent hidden div on mouseover the link

Hi,

I have the following HTML and Javascript. I just want to show the hidden one at a time only when mouseover a link. If the mouse is over the link "Drink", then show the hidden div below that link only and other hidden div must stay hidden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Untitled Document
        </title>
        <script type="text/javascript" src="jquery.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {


// timer for hiding the div
var hideTimer;

// show the DIV on mouse over
$(".show_div").mouseover(function() {
    // forget any hiding events in timer
    clearTimeout( hideTimer );
    $(".hello").css('visibility', 'visible');
});

$(".hello").mouseover(function() {
    clearTimeout( hideTimer );
    $(".hello").css('visibility', 'visible');
});

// set a timer to hide the DIV
$(".show_div").mouseout(function() {
    hideTimer = setTimeout( hideHello, 333 );
});

$(".hello").mouseout(function() {
    hideTimer = setTimeout( hideHello, 333 );
});

// hides the DIV
function hideHello() {
    $(".hello").css('visibility', 'hidden');
}

                });
        </script>

    </head>

    <body>
<br/>



<table border="1" width="400">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td><a class="show_div" href="#">Drink</a>
    <div class="hello" style="visibility:hidden;z-index:999;position: absolute;background-color:#99CC67;">
        <ul>
            <li>
                Coffee
            </li>
            <li>
                Tea
            </li>
            <li>
                Milk
            </li>
        </ul>
    </div>
</td>
<td><a class="show_div" href="#">Friuts</a>
    <div class="hello" style="visibility:hidden;z-index:999;position: absolute;background-color:#99CC67;">
        <ul>
            <li>
                Banana
            </li>
            <li>
                Water Melon
            </li>
            <li>
                Lychee
            </li>
        </ul>
    </div>
</td>
</tr>
<tr>
<td><a class="show_div" href="#">Movies</a>
    <div class="hello" style="visibility:hidden;z-index:999;position: absolute;background-color:#99CC67;">
        <ul>
            <li>
                Avatar
            </li>
            <li>
                Star War
            </li>
            <li>
                Titanic
            </li>
        </ul>
    </div>
</td>
<td><a class="show_div" href="#">Books</a>
    <div class="hello" style="visibility:hidden;z-index:999;position: absolute;background-color:#99CC67;">
        <ul>
            <li>
                Novel
            </li>
            <li>
                History
            </li>
            <li>
                Design
            </li>
        </ul>
    </div>
</td>
</tr>
</table> 

<br/>
    </body>

</html>

Can anyone help me fix this? Thank you.

A: 

Try:

$('a.show_div').mouseover(function(){
  $('div.hello').css('visibility', 'hidden'); // hide all
  $(this).next('div.hello').css('visibility', 'visible'); // show this one
});

Also, consider using the hover method if you want to show/hide the stuff when mouse enter/leaves them.

Sarfraz  2010-06-26 17:05:42
I tried replacing my $(".show_div").mouseover(function() with yours. But there's problem when I mouse over the Div the other hidden Divs also show up. Can you point me out to fix that bug?
Narazana  2010-06-26 17:40:43
@Morron: That seems to be with your code where it starts with `$(".hello").mouseover(function()`, let me know if that is the case, try removing that and then see.
Sarfraz  2010-06-26 17:48:09
I removed $(".hello").mouseover(function() but I can't move over the Div now. The Div disappears when the mouseout of the link.
Narazana  2010-06-26 18:03:27
A: 

Try this one:

$(document).ready(function(){
   $('.show_div').mouseover(function(){
       $(this).next('.hello').show(); 
   })
   $('.show_div').mouseout(function(){
       $(this).next('.hello').hide(); 
   })
})

You can also add some timers to auto hide. Hope this gave you some inspiration.

Lukasz Dziedzia  2010-06-26 17:08:51
+1  A: 

You might want to try out the siblings() function if your markup ends up changing at all.

Edit - updated for mouse-over (got a better idea of what you're doing). keep in mind though, you should use display:none instead of visibility:hidden so that you can more easily control it's visibility with functions like hide/show, fadeIn,fadeOut, slideDown,slideUp..

Edit again: I finally understand what you want. You don't want the div to dis-appear when you mouse over IT (like a drop down menu would operate). Here the revised code.

Note, this uses the hoverIntent plugin for jQuery. 

$(document).ready(function() {
 $("a.show_div").hoverIntent({ // capture the link hover events
     over:  function() {
             var $sibling = $(this).siblings('div.hello').show(); // get the sibling div and show it
             $('div.hello').not($sibling).hide(); // hide the other divs
             $sibling.data('linkOver', true); // store the fact that the link triggered this
            },
     out: function() {   
            var $sibling = $(this).siblings('div.hello');
            $sibling.data('linkOver', false);
            if( $sibling.data('divOver') != true) { // only hide if the mouse isn't on the div
              $sibling.delay(200).fadeOut(500); // get the sibling div and hide it after .333 seconds
            }
          },
    timeout: 500   //time to fire the event - must be greater than div.hover's timeout                 
  });

 $("div.hello").hoverIntent({ //capture the div hover events
     over: function() {
             $(this).data('divOver', true); // store the fact we're over the div now
           },
     out:  function() {   
             var $div = $(this);
             $div.data('divOver', false);
             if( $div.data('linkOver') != true ) { // if we're not on the link
               $(this).delay(200).fadeOut(500);  // then hide the div
             }
           },
     timeout: 400
   });   
 });

The idea behind this is the fact we're over one of the other items needs to be tracked. If we're about to hide the div on the link-out, we need to make sure we're not currently on the div. The same goes for the div, making sure we're not on the link.

You can try this out here: http://jsfiddle.net/Y2pLR/

I also updated your pastebin entry.

Dan Heberden  2010-06-26 17:15:11
I just replace my $(".show_div").mouseover(function() with yours. But nothing shows up when I mouse over any link.
Narazana  2010-06-26 17:37:52
because you're using visibility:hidden; in your markup - use display:none. I updated my answer to more suit what i think are your needs..
Dan Heberden  2010-06-26 17:47:47
Dan, the hidden Divs wont show up at all when I replace your $("a.show_div").hover with $(".show_div").mouseover. Please help me check.
Narazana  2010-06-26 18:05:09
did you change `<div class="hello" style="visibility:hidden;` to ` <div class="hello" style="display:none;` ? - oh, and try this: http://jsfiddle.net/cHyME/
Dan Heberden  2010-06-26 18:13:54
I tried your demo. There's a problem.. I can't hover over the Div, the moment the mouseout of the link the Div also gone. I want to be able to hover on the link also. Please check it.
Narazana  2010-06-26 18:47:02
well not the moment, .333 seconds after the moment. .333 seconds is NOT a lot of time (Got that from your question's sample code btw). Try it with more and you'll see it works as it's supposed to. http://jsfiddle.net/cHyME/1/
Dan Heberden  2010-06-26 18:49:44
Dan, in the sample code, the Div stay visible always when mouseover it, it dissapear when mouseout of it and the link. I want the Div to stay visible when mouseover it and the link. Thank so much for the reply. Please check my question again.
Narazana  2010-06-26 19:19:48
are you saying you want the _other_ divs to hide when mouseover occurs on the link?
Dan Heberden  2010-06-26 19:31:40
Yes, the other divs must stay hidden when mouseover the link and the div itself.
Narazana  2010-06-27 04:08:20
Updated answer to hide other divs but not the one you want to show. (which is what i had for an answer to start with, incidentally..)
Dan Heberden  2010-06-27 04:43:41
Hi, Dan. I updated my sample code to include your updated answer. Please see it here http://pastebin.com/e3QWnueZ There's still a problem. I cannot do mouseover the div.
Narazana  2010-06-27 04:54:59
Ah - i get what you're after now. Like a menu drop down, where the div stays visible when it's moused-over. I've updated the answer, check it out.
Dan Heberden  2010-06-27 17:35:43
Though I just noticed you've already marked the other answer as the correct one, so I see I was way off-base in my efforts. Sorry to mis-understand ya so greatly
Dan Heberden  2010-06-27 17:37:19
I was so much busy with World Cup 2010...Thank you for your answer. Really appreciate this. I learn some things from your post also. :D
Narazana  2010-06-27 20:02:12
+1  A: 

There's alternative to what you are trying to accomplish. Instead of sticking with this method, you can use other method to get the same result.

See the sample below, which is originally from scottonwriting , but I made the sample look like yours. This is the sample of using tooltip as suggested on scottonwriting

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Untitled Document
        </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;
        </script>
        <style type="text/css">
            .skmTooltipHost { border-bottom: dotted 1px brown; } .skmTooltipContainer
            { padding-left: 20px; padding-right: 10px; padding-top: 3px; padding-bottom:
            3px; display: none; position: absolute; background-color: #ff9; border:
            solid 1px #333; width :300px; z-index: 999; }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {


                $(".skmTooltipHost").hover(

                function() {
                    $(this).append('<div class="skmTooltipContainer">' + $(this).attr('tooltip') + '</div>');

                    $(this).find('.skmTooltipContainer').css("left", $(this).position().left + 20);
                    $(this).find('.skmTooltipContainer').css("top", $(this).position().top + $(this).height());
                    $(".skmTooltipContainer").fadeIn(10);
                },

                function() {
                    $(".skmTooltipContainer").fadeTo(10, 0.1, function() {
                        $(this).remove();
                    });
                });

            });
        </script>
    </head>

    <body>
        <br/>
        <table border="1" width="400">
            <tr>
                <th>
                    Header 1
                </th>
                <th>
                    Header 2
                </th>
            </tr>
            <tr>
                <td>
                    <p>
                        <span tooltip="Choose your drink:&lt;div&gt;&lt;ul&gt;&lt;li&gt;Coffe&lt;/li&gt;&lt;li&gt;Tea&lt;/li&gt;&lt;li&gt;&lt;a target=_blank href=http://www.w3schools.com&amp;gt;Visit W3Schools.com!&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;"
                        class="skmTooltipHost">
                            Drinks
                        </span>
                    </p>
                </td>
                <td>
                    <p>
                        <span tooltip="Choose your fruit:&lt;div&gt;&lt;ul&gt;&lt;li&gt;Orange&lt;/li&gt;&lt;li&gt;Banana&lt;/li&gt;&lt;li&gt;&lt;a target=_blank href=http://www.w3schools.com&amp;gt;Visit W3Schools.com!&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;"
                        class="skmTooltipHost">
                            Fruit
                        </span>
                    </p>
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <span tooltip="Choose your movie:&lt;div&gt;&lt;ul&gt;&lt;li&gt;Avatar&lt;/li&gt;&lt;li&gt;Titanic&lt;/li&gt;&lt;li&gt;&lt;a target=_blank href=http://www.w3schools.com&amp;gt;Visit W3Schools.com!&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;"
                        class="skmTooltipHost">
                            Movie
                        </span>
                    </p>
                    </a>
                </td>
                <td>
                    <p>
                        <span tooltip="Choose your book:&lt;div&gt;&lt;ul&gt;&lt;li&gt;History&lt;/li&gt;&lt;li&gt;Novel&lt;/li&gt;&lt;li&gt;&lt;a target=_blank href=http://www.w3schools.com&amp;gt;Visit W3Schools.com!&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;"
                        class="skmTooltipHost">
                            Drink
                        </span>
                    </p>
                </td>
            </tr>
        </table>
        <br/>
        <br/>
    </body>

</html>

There's always an alternative. Hope this help.

Angkor Wat  2010-06-27 12:32:48

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?