2014 May 14 Archive - EXEIdeas – Let's Your Mind Rock

Many designers are now working on widescreen websites that are even 3x to the visitor screen so after designing these type of sites, they need to make there wider web pager scrollable using official buttons that are Mouse Wheel. Usually the default function of Mouse Wheel is to scroll a webpage vertically but Designers need it to scroll it horizontally because they have a wide site not long.For this purpose, we got a CODE that we are sharing with you below that have more awesome features as you needed. Its short and clean with cross browsers compatibility and can be fully customizable. It can also easily mix up with your own code and can work with any code without conflicting. So without any more preface, here is the live working DEMO URL that can explain you more what we want to desire. After seeing this, check out our features of this code and then garb the code and see its editing below.CLICK HERE TO SEE DEMOFeatures:1.) Pure JavaScript Code.2.) Quick To Load And Easy To Add.3.) Cross Browser Compatibility.4.) It Will Scroll Your Page On X-Axis Only Through Mouse Wheel.5.) You Can Scroll X-Axis Through Mouse Click On ScrollBar On Y-Axis Only.6.) No JQuery Or Any External File.7.) Short Code.8.) Work On All Platform, Website, Blogger, WordPress.9.) No CSS3.10.) Will Not Conflict With Other Codes.How To Use This Code?So easy to use it. First you must have a DIV that width should be more then visitor or your screen width so the horizontal scrollbar will appear. After appearing horizontal scrolling bar, just add the below code before tag on you page. Nothing to do the rest. // Horizontal Scrolling Using Mouse Wheel// Code From: www.dte.web.id/2013/02/event-mouse-wheel.html(function() {function scrollHorizontally(e) {e = window.event || e;var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));document.documentElement.scrollLeft -= (delta*100); // Multiplied by 40document.body.scrollLeft -= (delta*100); // Multiplied by 40e.preventDefault();}if (window.addEventListener) {// IE9, Chrome, Safari, Operawindow.addEventListener("mousewheel", scrollHorizontally, false);// Firefoxwindow.addEventListener("DOMMouseScroll", scrollHorizontally, false);} else {// IE 6/7/8window.attachEvent("onmousewheel", scrollHorizontally);}})(); Customization:No need of customization with this code. However you can add any extra codes with this too if you want. You can also hide the scrollbar through CSS to pressurize the user to use mouse wheel.Last Words:This is what we have and as per our rule, we shared it with you. Now if you liked this then share it with your friends and leave your feedback and if you have any query related to this code, You can contact us freely and we will reply you as fast as we can. Stay with us because we have something more for you in our next post. Have a nice life!