2014 June 01 Archive - EXEIdeas – Let's Your Mind Rock

Many designers are now working on widescreen websites that are even 3x to the visitor screen so sometime, They designed some widget that should be fixed while there visitor scrolling there website horizontally but when he scroll it vertically then the DIV starts scrolling and will be hide to top or bottom.For this purpose, we wrote 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.) Desired DIV Will Be Fix While Scrolling X-Axis Only.5.) Desired DIV Will Start Scrolling While Scrolling 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.) Fully Customizable.How To Use This Code?Soo easy to use it. First you have to get the DIV which you want to keep fixed on horizontal scrolling and want to move on vertical scrolling. After getting that DIV, Just change that ID name to “exe_fix_DIV” and the rest of your site data will be in “exe_data_DIV”. Rest you have to add more CSS if you want. Read the below code so you can get it perfectly. // // DIV Fixed While Scrolling X-Axis Only// Code From: www.exeideas.com// Copyright EXEIdeas. All Right Reserved.//window.onscroll = xScroll; function xScroll(){var x = window.pageXOffset;var y = window.pageYOffset;if (x){document.getElementById('exe_fix_DIV').style.position = 'fixed';}if (y){document.getElementById('exe_fix_DIV').style.position = 'relative';}} div#wrapper { width:2000px; margin:0; padding:0; }div#exe_fix_DIV{ height: 50px; background: #ddd; width: 100vw; }div#exe_data_DIV{ background: #efefef; } This DIV Should Be Fixed When Scroll Horizontally And Will Be Scroll Able When Scroll Vertically. Your Rest Data Here Customization:There is nothing more to do. Read the code perfectly and see the text where to change. Just change CSS and HTML, Don’t edit JavaScript and ID’s. If you want to edit more, just contact us so we will edit it more for you.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!