SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    show the form and fill the form when the mouse hover on the toplink div

    the mouse will hover on block html:

    Code:
    <div class="toplinks">...</div>
    the show block content html:

    Code:
    <div id="pop-login" style:"display:none;">...some content and a form</div>
    my jquery code:

    Code:
    $('.toplinks').hover(function(){
    
        $('#pop-login').toggle();
        $('#pop-login').toggleClass("hpposition");
    });
    the css:

    Code:
    .hpposition{
        position: absolute;
        top: 30px;
        left:500px;
        z-index: 10000;
    }
    now, there comes a problem, when the mouse move out the toplinksdiv. i can't fill something to the showing form. when the mouse moves out the toplinks div. the form disappear immediately. how to make that the use can fill some content to the form?

    http://miranda.gomoxy.net/test.jpg

    although i have set the
    HTML Code:
    .hpposition z-index: 10000;.
    but there are some content still above the showing form layer.

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi
    Try with this jQuery cvode, and use z-index:9990;
    Code:
    $('.toplinks').hover(function(){
        $('#pop-login').show();
        $('#pop-login').addClass("hpposition");
    });
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MarPlo View Post
    Hi
    Try with this jQuery cvode, and use z-index:9990;
    Code:
    $('.toplinks').hover(function(){
        $('#pop-login').show();
        $('#pop-login').addClass("hpposition");
    });
    but i want when i completed to fill out the form the block can hide.thank you

  4. #4
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Just add a button in that form, and jQuery code that hide() the form when click on the button.
    Code:
    $('#id_button').click(function(){
        $('#pop-login').hide();
    });
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  5. #5
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MarPlo View Post
    Hi,
    Just add a button in that form, and jQuery code that hide() the form when click on the button.
    Code:
    $('#id_button').click(function(){
        $('#pop-login').hide();
    });
    it still can't work. put you mouse on the

    My Account part,which on the right top of the page. thank you


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •