using setTimeout() in function using jquery

Question

Hi Friends need your help I trying to develop UI for cart. I need to display cart when user click on buy button cart will show for two second then hide. Now the thing is if user mouseover on the open cart its will remain open once user mouseout from the cart for basic demo you can go to this link http://jsfiddle.net/uVdb3/5/ or you can see my code below

html

<table width="100%">
  <tr>
    <td width="51%" align="left" valign="bottom"><a href="#" class="buyBtn">Buy Now</a></td>
    <td width="49%" align="left" valign="top"></td>
  </tr>
</table>

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>


<div class="cart">
            <div class="number">0</div>


    <div class="cartView">

                <table width="100%" class="itmCart">

                        <td width="16%" class="item"><img src="images/cartPrdView.png" width="55" height="73" alt=" "></td>
                        <td width="71%">Anniversasdfry Card Pink Rose X 1: Rs 149/-</td>
                        <td width="13%" align="center"><a href="#" class="delRow"><img src="images/cross-script.png" width="16" height="16" alt=" "></a></td>
                    </tr>
                </table>


                <table width="100%" class="price">
  <tr>
    <td width="50%">Item Cost</td>
    <td align="right">Rs 649.00 /-</td>

  </tr>
  <tr>
    <td>Shipping Cost</td>
    <td align="right">Rs 30.00 /-</td>
  </tr>
  <tr>
    <td><span>Amount Payable</span></td>
    <td align="right"><span>Rs 679.00 /-</span></td>
  </tr>

              </table>
                <table width="100%" class="btnCont">
                    <tr>
                        <td align="center"><a href="#" id="CrtBtn"> Show cart</a></td>
                        <td align="center"><a href="#" id="CrtBtn">Pay now</a></td>
                    </tr>
                </table>



            </div>







        </div>

css

.oneItem{background:red; color:#fff; border-radius:110px; padding:0px 14px; float:left; font-weight:bold; font-size:14px; position:absolute; top:0; left:0;}

.cart{position:absolute;}
 .cart .cartView{position: absolute; background: red; width: 350px; padding: 8px; left: -5px;
 top: 30px; z-index:999; behavior: url(css/PIE.htc);  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius:5px; display:none;
}

script

function opencart(){

        //alert('hi')
        $('.cart').children('.cartView').slideDown(200);

    setTimeout(function(){


        $('.cart').children('.cartView').slideUp(200);

            },2000)






        }

$('.buyBtn').click(function () {

        $(this).append("<div class='oneItem'>1</div>")
        var buyPos = $(this).position();
        var buyPosL = buyPos.left;
        var buyPosT = buyPos.top;

        var CartPos = $('.cart .number').offset();
        var CartPosL = CartPos.left;
        var CartPosT = CartPos.top;

        $('.oneItem').css({
            left: buyPosL + 'px',
            top: buyPosT + 'px'
        })

        $('.oneItem').animate({
            left: CartPosL + 'px',
            top: CartPosT + 'px'
        }, 1000, function () {

            $(this).remove();
            opencart();
        })



    })

In this code my cart opens in red color code working perfact but cart close aftre 2 seconds. How to stop cart to get close when user mouse over the cart and when user mouse out from the cart it get close

Please help me guys thanks in advance.. :)

like jsfiddle.net/arunpjohny/NP4f9/1 ?

Arun P Johny
– Arun P Johny

2013-10-08 11:55:34 +00:00
Commented Oct 8, 2013 at 11:55 — Arun P Johny
– Arun P Johny, Commented Oct 8, 2013 at 11:55

Farhad · Accepted Answer · 2013-10-08 11:55:11Z

1

HEre jsfiddle http://jsfiddle.net/uVdb3/6/

I just check if hover then run setTimeout again else slideUp.

    function test(){
    setTimeout(function(){
        if($('.cart').children('.cartView').is(':hover')){
            test();
            return false
        }

        $('.cart').children('.cartView').slideUp(200);}
      ,2000);

}

answered Oct 8, 2013 at 11:55

Farhad

7526 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nitish Kumar · Accepted Answer · 2013-10-08 11:45:58Z

0

 $('.buyBtn').click(function () {
    // ... Your Code
    //Add This Code  
     $( ".buyBtn" )
           .mouseover(function() {
              $('.cart').children('.cartView').slideDown(200);
            })
          .mouseout(function() {
              $('.cart').children('.cartView').slideUp(200);
           });
 });

Check for DEMO

answered Oct 8, 2013 at 11:45

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

1 Comment

Kamal Over a year ago

Thank for help nitish but my question is after clicking on buy now the red box is open when user mouse over that red box thant box will not close untill unliss user remove his mouse from that red button...

Optimus Prime · Accepted Answer · 2013-10-08 12:00:27Z

0

Use setInterval() instead of setTimeout(). Once you slideUp() the cart use clearInterval() to stop running the function on intervals.

var slid;
slid = setInterval(hide, 2000);
function hide(){
    if($('.cart').is(':hover')){
        $('.cart').children('.cartView').slideUp(200);
        clearInterval(slid);
    } else {}
}

JSFIDDLE DEMO

edited Oct 8, 2013 at 12:00

answered Oct 8, 2013 at 11:46

Optimus Prime

6,9475 gold badges37 silver badges65 bronze badges

1 Comment

Optimus Prime Over a year ago

@Kamal added a fiddle

Anand Jha · Accepted Answer · 2013-10-08 12:21:22Z

0

Try this working solution.

function opencart(){

        //alert('hi')
        $('.cart').children('.cartView').slideDown(200);

        window.setTimeout(checkHover,2000);

}

function checkHover(){

       if(!$('.cartView').is(':hover')){
          $('.cart').children('.cartView').slideUp(200);
       }else{
               setTimeout(checkHover,2000);
       }
}

Working Demo

answered Oct 8, 2013 at 12:21

Anand Jha

10.8k6 gold badges28 silver badges29 bronze badges

Collectives™ on Stack Overflow

using setTimeout() in function using jquery

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related