Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery fadeIn Delay FadeOut
    primarykey
    data
    text
    <p>I'm trying to fade in a div, keep it on screen for a few seconds then fade it out. The problem is its not staying on screen as long as I expect, even setting the delay for about 10 seconds, it only stay on screen briefly. I've read through many posts and tried many things such as settimeout but I'm going nowhere fast.</p> <p>Here's my script:</p> <pre><code> &lt;script type="text/javascript"&gt; function pageLoad() { $("[id*=lnkSelect]").live("click", function () { var price = $("#price").html($(".prodprice", $(this).closest('tr').prev().children ('td.prodpricelabel')).html()); var code = $("#code").html($(".prodcode", $(this).closest('tr').prev().prev().children ('td.prodcodelabel')).html()); //Build the new HTML $(code).prepend("&lt;br/&gt;Item: "); $(code).append("&lt;br/&gt;Has been&lt;br/&gt;added to your cart.&lt;br/&gt;Price: "); $(".tooltipleft").html(code); //Set the new HTML $(".tooltipleft").append(price); $(".tooltipleft").fadeIn('slow').delay(5000).fadeOut('slow'); }); }; &lt;/script&gt; </code></pre> <p>So I'm getting the product code and price from the html, modifying the html in the div then fading this in as a notification that an item has been added to the shopping cart.</p> <p>This is the div that I want to fade in:</p> <pre><code> &lt;div class="tooltipleft" id="tooltip"&gt; &lt;span id="code"&gt;&lt;/span&gt;&lt;span id="price"&gt;&lt;/span&gt; &lt;/div&gt; </code></pre> <p>and the button in the grid:</p> <pre><code> &lt;asp:ImageButton ID="lnkSelect" runat="server" ImageUrl="~/Buttons/add_to_cart.png" AlternateText="Add To Cart" CommandArgument='&lt;%# Eval("ProductID") %&gt;' CommandName="Add" ImageAlign="Right" /&gt; </code></pre> <p>Thanks for any help or comments.</p> <p>cheers CM</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload