Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery: Hide an element after a certain amount of time or mouse moves away from container

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #31226
    rzea
    Member

    Hello,

    I have a list of radio buttons inside a DIV, this DIV slides down when I click on a < span > element.

    Now, when I select one of the radio buttons, the text in the < span > is replaced and the DIV slides back up.

    So far so good.

    What I need help with is, if the user either doesn’t take any action (does not select a radio button) or moves his mouse away from the DIV containing the radio buttons, to make that DIV with the list of radio buttons slide back up.

    HTML:

     








    Here’s my jQuery to toggle the slide of the DIV “radio-btns-wrapper” once a selection has been made, and to replace the text inside the “selected-search” < span >:

    $('.selected-search').addClass('selected-search-wjs').removeClass('selected-search').append('Please Select…').click(function() {
    $('.radio-btns-wrapper-wjs').slideToggle('fast');
    });

    $('input[type=radio]').click(function() {
    $('.selected-search-wjs').text($(this).parent().text());
    $('.radio-btns-wrapper-wjs').slideUp('fast');
    });

    Any help with this is greatly appreciated.

    Thanks.

    #66264
    rzea
    Member

    Well, a clear head in the morning does marvelous things.

    Here’s the solution, all I needed to do was to create another function using the .mouseleave method:

    $('.radio-btns-wrapper-wjs').mouseleave(function() {
    $(this).slideUp();
    });

    Now, I was using .mouseout but it didn’t work because the container DIV had child elements in it, so once you hover over them the DIV would slide back up.

    So I found this simple explanation about why and how to solve it:

    http://jquery-howto.blogspot.com/2009/04/problems-with-jquery-mouseover-mouseout.html

    Thanks,

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.