Posts marked with "Cursor" in tags

Move Cursor To End Of Input Or Textarea In jQuery

The function that moves the cursor of an input element to the end in jQuery is .focus(). But sometimes, this won’t work even if you replace it with [0].click(). It’ll maybe work on input fields properly, but won’t properly at all in text areas. Mostly it won’t work, if you are calling the .focus() function inside an event listener function.

To solve this you can use 2 other methods if the first one don’t work. It’s pretty simple and I don’t know why it works. I found this solution on a Stack Overflow question and the one who answered doesn’t know why it works. Here is a list of the events that happens when an element is clicked :

... [READ MORE]

How to check if the mouse is over an element in jQuery?

Here is a simple plugin to check if the mouse is over an element in JQuery. Open your jQuery source file and search for window.jQuery = window.$ = jQuery; 

Paste the code shown below after the code you have just found.

<span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mlp </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">x</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="lit" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">0</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">y</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="lit" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">0</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">};</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">function</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> documentHandler</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(){</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">var</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">===</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> document </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">?</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">).</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">contents</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">();</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mousemove</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">function</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">e</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">){</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">jQuery</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mlp </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">x</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">e</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">pageX</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">y</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">e</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">pageY</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}});</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">find</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"iframe"</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">).</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">load</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">documentHandler</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">$</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">documentHandler</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">fn</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">ismouseover </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">function</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">overThis</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">var</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> result </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">false</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">eq</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="lit" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">0</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">).</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">each</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">function</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">var</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">).</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">is</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"iframe"</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">?</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">).</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">contents</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">().</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">find</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"body"</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">var</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> offset </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">offset</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">();</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> result<br /> </span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> result </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> offset</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">left</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><=</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">$</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mlp</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">x </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">&&</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> offset</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">left </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">+</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">outerWidth</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mlp</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">x </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">&&</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> offset</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">top</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><=</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">$</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mlp</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">y </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">&&</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> offset</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">top </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">+</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">outerHeight</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mlp</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">y</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">});</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">return</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> result</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">};</span>

... [READ MORE]

Follow/Subscribe

Telegram 

Mastodon  Twitter

GitHub GitLab

Subdomains

Demos  Lab

Past

This blog was once on WordPress. Now a static site. See source code on

GitLab