Scroll Horizontally Without Scrollbar Using jQuery

To scroll horizontally with CSS is very annoying, because the whole page will move vertically and sometimes the Y axis will scroll. So I decided to use jQuery and it’s very simple. Only 237 characters which is only 2 lines. Here is the jQuery code with the div id #scrollho. jQuery $('#scrollho').on('mousewheel',function(e){ e.preventDefault(); scrollLeft=$('#scrollho').scrollLeft(); if(e.originalEvent.wheelDeltaY.toString().slice(0,1)=='-'){ $('#scrollho').scrollLeft(scrollLeft+100); }else{ $('#scrollho').scrollLeft(scrollLeft-100); } }); CSS #scrollho{ overflow:hidden; } Explanation The #scrollho div’s scrollbars are hidden with CSS.

[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;“>?

[READ MORE]