Do it like this:

    $(&#39;#div&#39;).show(0).delay(5000).hide(0);

By passing in numbers to `.show()` and `.hide()`, jQuery will take those methods into its internal *fx queue* (even if the number is zero). Since `.delay()` only works within a queue, you need that little workaround.

example: http://jsfiddle.net/zceKN/

You need to use `.queue()` because `.hide()` isn&#39;t queued by default.

    $(&quot;#div&quot;).show().delay(5000).queue(function (next) {
        $(this).hide();
        next();
    });

You need a duration on your hide for it to work:

    $(&#39;#div&#39;).show(&#39;slow&#39;).delay(5000).hide(&#39;slow&#39;);

Example: http://jsfiddle.net/Paulpro/GLTaB/

    $(&#39;#div&#39;).show();
    setTimeout(function(){$(&#39;#div&#39;).hide();}, 5000);

.delay() works for animations only 



I want to add a &quot;Check for update&quot; button in apps so that when someone clicks it, it will display a toast message / progress dialog for checking the app&#39;s version. 

If new version is found the apps will auto download it to the phone and let user to  manually install the updated apps.

Or any others method will do as long as it can check for latest version and notify the user to update.

--------

**Update:** Now you can do this inside your app using https://developer.android.com/guide/playcore/in-app-updates


How to allow users to check for the latest app version from inside the app?

Is there a way to use JQuery to redirect to a specific URL after a give time period?


JQuery Redirect to URL after specified time

I&#39;m trying to show a div thats set to `display: none;` for 5 seconds with

    $(&#39;#div&#39;).show().delay(5000).hide();

but it deson&#39;t work, it just goes straight to hide()

Can any of you help me?

Jquery $(&#39;#div&#39;).show().delay(5000).hide(); doesn&#39;t work

I'm trying to show a div thats set to <code>display: none;</code> for 5 seconds with
<pre><code class="hljs language-scss">$('#div').show().delay(5000).hide();
</code></pre>
but it deson't work, it just goes straight to hide()
Can any of you help me?

How can I download a file that is in my server to my machine accessing a page in a nodeJS server?

I&#39;m using the ExpressJS and I&#39;ve been trying this:

    app.get(&#39;/download&#39;, function(req, res){

	  var file = fs.readFileSync(__dirname + &#39;/upload-folder/dramaticpenguin.MOV&#39;, &#39;binary&#39;);

      res.setHeader(&#39;Content-Length&#39;, file.length);
	  res.write(file, &#39;binary&#39;);
	  res.end();
    });

But I can&#39;t get the file name and the file type ( or extension ). Can anyone help me with that?

Download a file from NodeJS Server using Express

I&#39;m working on a substantially large rich web page JavaScript application. For some reason a recent change is causing it to randomly hang the browser.

How can I narrow down where the problem is? Since the browser becomes unresponsive, I don&#39;t see any errors and can&#39;t `Break on next` using FireBug.

How can you debug JavaScript which hangs the browser?

I have a select element wrapped by a span element. I am not allowed to use the select id but I am allowed to use the span id.
I am trying to write a javascript/jquery function in which the input is a number i, which is one of the values of the select&#39;s options. The function will turn the relevant option to selected.

    &lt;span id=&quot;span_id&quot;&gt;
    	&lt;select id=&quot;h273yrjdfhgsfyiruwyiywer&quot; multiple=&quot;multiple&quot;&gt;
    		&lt;option value=&quot;1&quot;&gt;cleaning&lt;/option&gt;
    		&lt;option value=&quot;2&quot;&gt;food-2&lt;/option&gt;
    		&lt;option value=&quot;3&quot;&gt;toilet&lt;/option&gt;
    		&lt;option value=&quot;4&quot;&gt;baby&lt;/option&gt;
    		&lt;option value=&quot;6&quot;&gt;knick-knacks&lt;/option&gt;
    		&lt;option value=&quot;9&quot;&gt;junk-2&lt;/option&gt;
    		&lt;option value=&quot;10&quot;&gt;cosmetics&lt;/option&gt;
    	&lt;/select&gt;
    &lt;/span&gt;

I wrote something as follows (this does not completely work, which is why I am posting this question):

    function select_option(i) {
    
    	options = $(&#39;#span_id&#39;).children(&#39;select&#39;).children(&#39;option&#39;);
    	//alert(options.length); //7
    	//alert(options[0]); //[object HTMLOptionElement]
    	//alert(options[0].val()); //not a jquery element
    	//alert(options[0].value); //1
    
    	//the following does not seem to work since the elements of options are DOM ones not jquery&#39;s
    	option = options.find(&quot;[value=&#39;&quot; + i + &quot;&#39;]&quot;);
    	//alert(option.attr(&quot;value&quot;)); //undefined
    	option.attr(&#39;selected&#39;, &#39;selected&#39;);
    	
    }

Thanks!

jQuery select option elements by value

I got a piece of code for javascript which I just do not understand:

    function dmy(d) {
        function pad2(n) {
            return (n &lt; 10) ? &#39;0&#39; + n : n;
        }

        return pad2(d.getUTCDate()) + &#39;/&#39; +
           pad2(d.getUTCMonth() + 1) + &#39;/&#39; +
           d.getUTCFullYear();
    }

    function outerFunc(base) {
        var punc = &quot;!&quot;;

        //inner function
        function returnString(ext) {
           return base + ext + punc;
        }

        return returnString;
    }


How can a function be defined within another function? Can we call pad2() from outside of my() function? 

Please put some light on it. Thanks

JavaScript Nested function

How to allow only numbers to be written in this textbox ?

    &lt;input type=&quot;text&quot; class=&quot;textfield&quot; value=&quot;&quot; id=&quot;extra7&quot; name=&quot;extra7&quot;&gt;

Allow only numbers to be typed in a textbox

Is it possible to capture these shortcuts?

  - &lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;N&lt;/kbd&gt; 
  - &lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;T&lt;/kbd&gt; 
  - &lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;W&lt;/kbd&gt;

I tried this but it doesn&#39;t work:

    $(window).keydown(function(event) {
      console.log(event.keyCode);
      event.preventDefault();
    });

When I press &lt;kbd&gt;T&lt;/kbd&gt; it shows `84` in the console, but if I press &lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;T&lt;/kbd&gt; it shows nothing, and opens a new tab.

I would like to capture these shortcuts and prevent any browser action.

javascript capture browser shortcuts (ctrl+t/n/w)

I am using jQuery and jQuery-ui and want to animate various attributes on various objects. 

For the sake of explaining the issue here I&#39;ve simplified it to one div that changes from blue to red when the user mouses over it.


I am able to get the behavior I want when using `animate()`, however when doing so the styles I am animating have to be in the animation code and so are separate from my style sheet. (see **example 1**)

An alternative is using `addClass()` and `removeClass()` but I have not been able to re-create the exact behavior that I can get with `animate()`. (see **example 2**)

---

### Example 1
Let&#39;s take a look at the code I have with `animate()`:
    
    $(&#39;#someDiv&#39;)
      .mouseover(function(){
        $(this).stop().animate( {backgroundColor:&#39;blue&#39;}, {duration:500});
      })
      .mouseout(function(){
        $(this).stop().animate( {backgroundColor:&#39;red&#39;}, {duration:500});
      });

it displays all the behaviors I am looking for:

 1. Animates smoothly between red and blue.
 2. No animation &#39;overqueue-ing&#39; when the user moves their mouse quickly in and out of the div.
 3. If the user moves their mouse out/in while the animation is still playing it eases correctly between the current &#39;halfway&#39; state and the new &#39;goal&#39; state.

But since the style changes are defined in `animate()` I have to change the style values there, and can&#39;t just have it point to my stylesheet. This &#39;fragmenting&#39; of where styles are defined is something that really bothers me.

---
### Example 2
Here is my current best attempt using `addClass()` and `removeClass` (note that for the animation to work you need jQuery-ui): 

    //assume classes &#39;red&#39; and &#39;blue&#39; are defined

    $(&#39;#someDiv&#39;)
      .addClass(&#39;blue&#39;)
      .mouseover(function(){
        $(this).stop(true,false).removeAttr(&#39;style&#39;).addClass(&#39;red&#39;, {duration:500});
      })
      .mouseout(function(){
        $(this).stop(true,false).removeAttr(&#39;style&#39;).removeClass(&#39;red&#39;, {duration:500});
      });

This exhibits both property 1. and 2. of my original requirements, however 3 does not work.

I understand the reason for this:

When animating `addClass()` and `removeClass()` jQuery adds a temporary style to the element, and then increments the appropriate values until they reach the values of the provided class, and only then does it actually add/remove the class.

Because of this I have to remove the style attribute, otherwise if the animation is stopped halfway the style attribute would remain and would permanently overwrite any class values, since style attributes in a tag have higher importance than class styles.

However when the animation is halfway done it hasn&#39;t yet added the new class, and so with this solution the color jumps to the previous color when the user moves their mouse before the animation is completed.


---

What I want ideally is to be able to do something like this:

    $(&#39;#someDiv&#39;)
      .mouseover(function(){
        $(this).stop().animate( getClassContent(&#39;blue&#39;), {duration:500});
      })
      .mouseout(function(){
        $(this).stop().animate( getClassContent(&#39;red&#39;), {duration:500});
      });

Where `getClassContent` would just return the contents of the provided class. The key point is that this way I don&#39;t have to keep my style definitions all over the place, but can keep them in classes in my stylesheet.

animating addClass/removeClass with jQuery

I have a `table` inside of a `div` with the following style:

    #data {
        overflow-x:hidden;
        overflow-y:visible;
        height:500px;
    }
This displays a vertical scroll bar once enough data is added to the table. However, when new data is added I would like the `div` element to auto-scroll to the bottom.

What JavaScript code could I use to do so? I am open to options in JQuery if necessary but would prefer a JavaScript solution.

How to auto-scroll to end of div when data is added?

I have a `click` event that is triggered from another place automatically for the first time. My problem is that it runs too soon, since the required variables are still being defined by Flash and web services. So right now I have:

    (function ($) {
        $(window).load(function(){
            setTimeout(function(){
                $(&#39;a.play&#39;).trigger(&quot;click&quot;);
            }, 5000);
        });
    })(jQuery);

The problem is that 5 seconds for a person with a slow internet connection could be too fast and vice versa, for a person with a fast internet connection, it&#39;s too slow.

So how should I do the delay or timeout until `someVariable` is defined?

While variable is not defined - wait

I&#39;m fixing the width of one of my dropdown boxes (yes I know there are cross-browser issues with doing this).

Is there a non-js way to cut off overflowing text and append ellipses? text-overflow:ellipsis doesn&#39;t work for `&lt;select&gt;` elements (at least in Chrome).

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    select, div {
        width:100px; 
        overflow:hidden; 
        white-space:nowrap; 
        text-overflow:ellipsis;
    }

&lt;!-- language: lang-html --&gt;

    &lt;!--works for a div--&gt;
    &lt;div&gt;
        A long option that gets cut off
    &lt;/div&gt;

    &lt;!--but not for a select--&gt;
    &lt;select&gt;
        &lt;option&gt;One - A long option that gets cut off&lt;/option&gt;
        &lt;option&gt;Two - A long option that gets cut off&lt;/option&gt;
    &lt;/select&gt;

&lt;!-- end snippet --&gt;

Example here:
http://jsfiddle.net/t5eUe/


Ellipsis for overflow text in dropdown boxes

I have to disable the color change of an anchor tag when visited. I did this:

    a:visited{ color: gray }

(The link is gray in color before visited.) But this is a way where I explicitly state the color after the link is visited, which is again a color change.

How can I disable the color change of an anchor tag when visited without doing any explicit color changes?


Disable color change of anchor tag when visited

I would like to achieve one of the two alignments represented on this image: ![problem representation][1]. CSS3 is ok or even better if it makes things simpler.

My main problem is that I managed to align one div containing the text with the button, but the text itself is aligned with the top of the div and not the bottom.


  [1]: http://i.stack.imgur.com/2tjmz.png

Align text baseline with a button in CSS

    &lt;div class=&quot;commentList&quot;&gt;
       &lt;article class=&quot;comment &quot; id=&quot;com21&quot;&gt;&lt;/article&gt;
       &lt;article class=&quot;comment &quot; id=&quot;com20&quot;&gt;&lt;/article&gt;
       &lt;article class=&quot;comment &quot; id=&quot;com19&quot;&gt;&lt;/article&gt;
       &lt;div class=&quot;something&quot;&gt; hello &lt;/div&gt;
    &lt;/div&gt;

I want to select `#com19` ?

    .comment {
        width:470px;
        border-bottom:1px dotted #f0f0f0;
        margin-bottom:10px;
    }
    
    .comment:last-child {
        border-bottom:none;
        margin-bottom:0;
    }

That does not work as long as I do have another `div.something` as actual last child in the commentList. Is it possible to use the last-child selector in this case to select the last appearance of `article.comment`?

[jsFiddle](http://jsfiddle.net/C23g6/2/)




How can I select the last element with a specific class, not last child inside of parent?

I have a `&lt;span&gt;` element which I want to display without any line break. How can I do that?

Content Type	Original Author	Original Content on Stackoverflow
Question	DexCurl	View Question on Stackoverflow
Solution 1 - Javascript	jAndy	View Answer on Stackoverflow
Solution 2 - Javascript	gilly3	View Answer on Stackoverflow
Solution 3 - Javascript	Paul	View Answer on Stackoverflow
Solution 4 - Javascript	genesis	View Answer on Stackoverflow

Jquery $('#div').show().delay(5000).hide(); doesn't work

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

JQuery Redirect to URL after specified time

How to allow users to check for the latest app version from inside the app?

Attributions