javascript - Gradually apply styles ( transitions not seeming to work ) Possibly with js / jQuery? -


i'm trying gradually fade in scroll-bar. currently, how making scroll-bar appear adding class body changes overflow auto, looks jerky / abrupt.

here js code abruptly adds class shows scroll-bar:

var bodywidth = $('body').width(); var scrollwidth = 10; $('body').mousemove(function(e){     var x = e.pagex - this.offsetleft;      if(x>bodywidth-scrollwidth)         $('body').addclass("auto");     else         $('body').removeclass("auto"); });

and here css corresponding clases:

body {     margin:0;     overflow:hidden; } .auto {     overflow:auto; }

how can make transition less abrupt? there better way adding class , removing class.

the scrollbars can customized via -webkit-scrollbar, can not animated (or @ least didn't succeded @ it), , support in other browser poor.

an alternative set div on scrollbar, make same color base div, , make gradually transparent show scrollbar

the html is:

<div class="container"> <div class="base"> <p>aaa   aaaaa aaaaa aaaaaaaa aaaa aaa aaa aaaa bbbbbb bbbbbb cccc cccc cccc </p> </div> <div class="hide"> </div> </div>

the css is:

.base {     width: 100px;     background-color: white;     top: 0px;     position: absolute;     height: 130px;     overflow: hidden;     padding-right: 20px; } .base.clipped {     overflow: auto; }   .hide {     position: absolute;     width: 19px;     height: 100%;     right: 0px;     background-color: white;     top: 0px;     -webkit-transition: 2s;     z-index: 10; }  .hide.clipped {     background-color: transparent; }

i keeping class of elements time, adding second class clipped both. set padding in element have scrollbars there space without rearranging layout. hide element can transitioned css, overflow not.

the javascript 

$("*").click(function(){     var obj = $(".base");     var hid = $(".hide");     if (obj.hasclass("clipped")) {         hid.removeclass("clipped");         settimeout(function() {             obj.removeclass("clipped");         }, 2000);     } else {         hid.addclass("clipped");         obj.addclass('clipped');     }  });

demo


Comments

Post a Comment

Popular posts from this blog

ios - iPhone/iPad different view orientations in different views , and apple approval process -

i force app's home screen portrait , other views landscape. apple rejects app if this? if not , how force first screen launch in portrait mode? , force other screens launch in landscape. this not duplicate question search every possible answer in website. i force app's home screen portrait , other views landscape. apple rejects app if this? no apple not reject app this. have lot of apps doesn't support orientation. forcing on 1 screen won't cause app reject. if not , how force first screen launch in portrait mode? , force other screens launch in landscape. can on write : -(nsuinteger)supportedinterfaceorientations; function.
Read more

java Extracting Zip file -

i'm looking way extract zip file. far have tried java.util.zip , org.apache.commons.compress, both gave corrupted output. basically, input zip file contain 1 single .doc file. java.util.zip: output corrupted. org.apache.commons.compress: output blank file, 2 mb size. so far commercial software winrar work perfectly. there java library make use of this? this method using java.util library: public void extractzipnative(file filezip) { zipinputstream zis; stringbuilder sb; try { zis = new zipinputstream(new fileinputstream(filezip)); zipentry ze = zis.getnextentry(); byte[] buffer = new byte[(int) ze.getsize()]; fileoutputstream fos = new fileoutputstream(this.tempfolderpath+ze.getname()); int len; while ((len=zis.read(buffer))>0) { fos.write(buffer); } fos.flush(); fos.close(); } catch (filenotfoundexception e) { // todo auto-generated catch block ...
Read more

C# WinForm - loading screen -

i ask how make loading screen (just picture or something) appears while program being loaded, , disappears when program has finished loading. in fancier versions, have seen process bar (%) displayed. how can have that, , how calculate % show on it? i know there form_load() event, not see form_loaded() event, or % property / attribute anywhere. all need create 1 form splash screen , show before main start showing landing page , close splash once landing page loaded. class splashform { //delegate cross thread call close private delegate void closedelegate(); //the type of form displayed splash screen. private static splashform splashform; static public void showsplashscreen() { // make sure launched once. if (splashform != null) return; thread thread = new thread(new threadstart(splashform.showform)); thread.isbackground = true; thread.setapartmentstate(apartmentstate.sta); thread....
Read more