Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question hover function in wordpress

    Hi All,

    Long time lurker here making my first post, so Greetings!

    I built an HTML file containing slideUp and slideDown animation triggered by hover. In all browsers this coding worked great!

    When I inputted this code into wordpress (via the text screen) the animation runs quickly and completely on mouse in or mouse out and does not honor the hover command.

    Essentially the goal is to have a new image slideDown and replace another whilst the mouse hovers over the first image location. When the mouse leaves the first image location the new image should slideUp and out of view.

    Like I said, this worked when viewed outside of wordpress and now the image slides up and down quickly regardless of hover on mouse in or mouse out.

    Here is the code in question:

    $("#stevehs").hover(function () {
    if ($("#steverun").is(":hidden")) {
    $("#steverun").slideDown(800);
    } else {
    $("#steverun").slideUp(800);
    }
    });

    Any help would be greatly appreciated.
    Best,
    SD

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Besides the hover function being deprecated/removed from the latest jQuery (which I assume you are using?) “mouse in” and “mouseout”, as you call it, are basically the same as hover, so I’m not quite clear what you’re saying.
    It would help if you showed a link to the problem.

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you for the reply. Here is a link to a test page.

    https://runsraevents.org/?page_id=1417

    As you can see the image scrolls up and down on both mouseenter and
    mouseleave. I would like the image to scroll down and stay put until the user moves the mouse off of the image.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Lots of errors:
    1. 2 instances of the hover scripts for each person.
    2. Lots of js errors on the console.
    3. Multiple instances of the same id which should be unique in a document.
    4. Repeated CSS properties (not actually errors but not efficient)

    You don't actually need to have separate hover scripts for each person. You only need one by referencing the elements by classes not ids.


    Code:
    #stevehs {
        background-image: url('http://runsraevents.org/wp-content/uploads/2013/07/SteveCUbw-300x300.jpg');
    }
    #stevehs + .pic-hover {
        background-image: url('http://runsraevents.org/wp-content/uploads/2013/08/SteveRunSlide300x300.jpg');
    }
    /* do the same thing for other persons */
    
    
    .pic {
        width: 300px;
        height: 300px;
        top: 0;
        left: 0;
        z-index: 1;
        margin-right: 10px;
        margin-bottom: 20px;
    }
    .pic-hover {
        width: 300px;
        height: 300px;
        margin-top: 0;
        margin-left: 0;
        margin-right: 10px;
        display: none;
        float: left;
        position: relative;
        left: 0;
        top: 0;
        z-index: 2;
    }
    Code:
    <div id="stevehs" class="pic"></div>
    <div class="pic-hover"></div>
    
    <div id="larryhs" class="pic"></div>
    <div class="pic-hover"></div>
    
    <div id="muffeths" class="pic"></div>
    <div class="pic-hover"></div>
    
    ...and so on
    Code:
    $('.pic')
        .on('mouseenter', function(e) {
            $(this).next('.pic-hover').slideDown(800);
        })
        .on('mouseleave', function(e) {
            $(this).next('.pic-hover').slideUp(800);
        });
    Not tested but you get the idea.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    930rcr (09-25-2013)

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by glenngv View Post
    Code:
    $('.pic')
        .on('mouseenter', function(e) {
            $(this).next('.pic-hover').slideDown(800);
        })
        .on('mouseleave', function(e) {
            $(this).next('.pic-hover').slideUp(800);
        });
    Not tested but you get the idea.
    I think this code will not work because when the pic-hover slides down, the mouseleave will trigger on the pic, so it will slide the pic-hover up and down. I think this is what's happening on your original code.

    Try this instead:

    Code:
    $('.pic').on('mouseenter', function(e) {
        $(this).next('.pic-hover').slideDown(800);
    });
    $('.pic-hover').on('mouseleave', function(e) {
        $(this).slideUp(800);
    });
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    930rcr (09-25-2013)

  • #6
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you VERY much for the help! One more quick question:
    If the mouse enters and leaves a js div the animation is triggered but does not return to the original state, meaning the animated image stays in place instead of returning to the original state. (hope that makes sense)
    It there a way to rectify this annoyance?
    Best,
    SD

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I don't see the issue on your page. I can see the hover pic appears on mouseenter and the original pic re-appears on mouseleave.

    https://runsraevents.org/?page_id=1417
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    930rcr (09-28-2013)

  • #8
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Glenn,
    You are absolutely right! I played a bit with the code and was able to obtain what I was looking for. Thank you very much for your help.


  •  

    Posting Permissions

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