CODEWITHSUNDEEP
jquery
Yasser Shaikh
Yasser Shaikh

Reputation: 47794

Fire onmouseover only when mouse over is more than 3 seconds usnig jquery

I have some links like as shown below, here is a jsfiddle link to it.

What I want ?

I want the jquery methods to be fired only when the mouse over is more than 3 seconds. I know I have to use setTimeout but I am not able to understand how to use it.

If anyone can help me by editing my fiddle link

HTML CODE

<ul>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin (actor)', this)" onclick="Suggestion('Sachin (actor)');" class="link">Sachin (actor)</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin Dev Burman', this)" onclick="Suggestion('Sachin Dev Burman');" class="link">Sachin Dev Burman</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin Pilot', this)" onclick="Suggestion('Sachin Pilot');" class="link">Sachin Pilot</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin Rana', this)" onclick="Suggestion('Sachin Rana');" class="link">Sachin Rana</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin Tendulkar', this)" onclick="Suggestion('Sachin Tendulkar');" class="link">Sachin Tendulkar</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin, Pas-de-Calais', this)" onclick="Suggestion('Sachin, Pas-de-Calais');" class="link">Sachin, Pas-de-Calais</a>
     </li>
</ul>
<hr/>
<p style="color:red;" id="moreInfo"></p>

JQUERY CODE

function GetSomeDetail(input, currentContext) {   
    $("#moreInfo").text(input);
}

function RemoveDetails(currentContext) {
    $("#moreInfo").text('Unloaded !');
}

Please help me out on this

Upvotes: 1

Views: 1826

Answers (4)

Andrei
Andrei

Reputation: 1121

I recommend you use this plugin.

You can make this using setTimeout() but you may have a bit more problems than you think

Upvotes: 0

Paulo R.
Paulo R.

Reputation: 15609

You could do something like this

var timeout;
    toExecute = function () {
        //
    };


$(XYZ).on({
    mouseover: function () {
        if(timeout) clearTimeout(timeout);
        timeout = setTimeout(toExecute, 3000);
    },
    mouseleave': function () {
        clearTimeout(timeout);
    }
);

Here's the implementation on your fiddle.

Upvotes: 3

adeneo
adeneo

Reputation: 318302

Maybe something like

<ul>
    <li><a class="link">Sachin (actor)</a></li>
    <li><a class="link">Sachin Dev Burman</a></li>
    <li><a class="link">Sachin Pilot</a></li>
    <li><a class="link">Sachin Rana</a></li>
    <li><a class="link">Sachin Tendulkar</a></li>
    <li><a class="link">Sachin, Pas-de-Calais</a></li>
</ul>
<hr/>
<p style="color:red;" id="moreInfo"></p>

js

var timer;

$(".link").on({
    mouseenter: function() {
        var text = $(this).text();
        timer = setTimeout(function() {
            $("#moreInfo").text(text);
        }, 1000); //set to one second now
    },
    mouseleave: function() {
        clearTimeout(timer);
        $("#moreInfo").text('Unloaded !');
    },
    click: function() {
        Suggestion($(this).text());
    }
});

FIDDLE ​

Upvotes: 0

Guffa
Guffa

Reputation: 700630

Fiddle: http://jsfiddle.net/Guffa/3YBr8/2/

You can clean up the code a lot by setting events in script instead of in the HTML markup. You can put the text that you need in the script in a data attribute for each item.

<ul>
    <li>
        <a data-input="Sachin (actor)" class="link">Sachin (actor)</a>
    </li>
    <li>
        <a data-input="Sachin Dev Burman" class="link">Sachin Dev Burman</a>
    </li>
    <li>
        <a data-input="Sachin Pilot" class="link">Sachin Pilot</a>
    </li>
    <li>
        <a data-input="Sachin Rana" class="link">Sachin Rana</a>
    </li>
    <li>
        <a data-input="Sachin Tendulkar" class="link">Sachin Tendulkar</a>
    </li>
    <li>
        <a data-input="Sachin, Pas-de-Calais" onclick="Suggestion('Sachin, Pas-de-Calais');" class="link">Sachin, Pas-de-Calais</a>
    </li>
</ul>
<hr/>
<p style="color:red;" id="moreInfo"></p>

Start a timer when the user hovers an item. Use a variable to hold the handle for the timer, so that you can stop the timer if the mouse if removed before the time has passed.

function info(text) {
    $("#moreInfo").text(text);
}

function GetSomeDetail(input) {   
    info(input);
}

function RemoveDetails() {
    info('Unloaded !');
}

function Suggestion(input) {
    alert(input);
}

$(document).ready(function(){

    var timer = null;

    $('.link').mouseover(function(){
        if (timer != null) {
            RemoveDetails();
        }
        var input = $(this).data('input');
        timer = window.setTimeout(function(){
            timer = null;
            GetSomeDetail(input);
        }, 3000);
        info('timer started');
    }).mouseout(function(){
        if (timer != null) {
            window.clearTimeout(timer);
            timer = null;
            info('timer stopped');
        } else {
            RemoveDetails();
        }
    }).click(function(){
        Suggestion($(this).data('input'))
    });

});

I have added calls to show some information when the timer is started or stopped, those would of course not be there in the final result.

Upvotes: 0

Related Questions