php - Jquery slider panel flickers -



php - Jquery slider panel flickers -

as working on jquery slider panel menu , have implemented unusual issue persists when clicks jquery slider menu down. illustration check link (http://www.stickreloaded.com/demogame/simple-slide-panel.html#) see below code:

regards, phphunger.

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>simple slide panel</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slidetoggle("slow"); $(this).toggleclass("active"); homecoming false; }); }); </script> <style type="text/css"> body { margin: 0 auto; padding: 0; width: 990px; font: 75%/120% arial, helvetica, sans-serif; } a:focus { outline: none; } #panel { background: #03111a; height: 180px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #ffc000; background: url(images/btn-slide.gif) no-repeat center top; /*background-color: #ffc000; height: 25px; width: 30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;*/ } .btn-slide { background: url(images/white-arrow.gif) no-repeat right -50px; /*background-color: #ffc000; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;*/ height: 25px; width: 30px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% arial, helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; } .morelist{float:left;margin:20px 0 0 20px;width:150px;} .morelist li{margin-bottom:10px;} .morelist li a{color:#fff;font-size:14px;font-weight:bold;} .morelist li a:hover{color:#ee3524;} #wrapper{ margin: 0 auto; width: 1000px; height:auto; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } /*#content{ background:#03111a; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin-left: 5px; margin-right: 5px; margin-top: 10px; margin-bottom: 5px; overflow: hidden; }*/ #content{ background: #ff6801; /* old browsers */ -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; /* ie9 svg, needs conditional override of 'filter' 'none' */ background: url(data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiia/pgo8c3znihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigd2lkdgg9ijewmcuiighlawdodd0imtawjsigdmlld0jved0imcawidegmsigchjlc2vydmvbc3bly3rsyxrpbz0ibm9uzsi+ciagpgxpbmvhckdyywrpzw50iglkpsjncmfklxvjz2ctz2vuzxjhdgvkiibncmfkawvudfvuaxrzpsj1c2vyu3bhy2vpblvzzsigede9ijaliib5mt0imcuiihgypsiwjsigeti9ijewmcuipgogicagphn0b3agb2zmc2v0psiwjsigc3rvcc1jb2xvcj0ii2zmnjgwmsigc3rvcc1vcgfjaxr5psixii8+ciagica8c3rvccbvzmzzzxq9ijewmcuiihn0b3aty29sb3i9iinmzmnjmdaiihn0b3atb3bhy2l0et0imsivpgogidwvbgluzwfyr3jhzgllbnq+ciagphjly3qged0imciget0imcigd2lkdgg9ijeiighlawdodd0imsigzmlsbd0idxjskcnncmfklxvjz2ctz2vuzxjhdgvkksiglz4kpc9zdmc+); background: -moz-linear-gradient(top, #ff6801 0%, #ffcc00 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6801), color-stop(100%,#ffcc00)); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, #ff6801 0%,#ffcc00 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, #ff6801 0%,#ffcc00 100%); /* opera 11.10+ */ background: -ms-linear-gradient(top, #ff6801 0%,#ffcc00 100%); /* ie10+ */ background: linear-gradient(to bottom, #ff6801 0%,#ffcc00 100%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ff6801', endcolorstr='#ffcc00',gradienttype=0 ); /* ie6-8 */ } </style> </head> <body> <div id="panel"> <!-- can set content here --> <ul class="morelist"> <li><a href="#" id="tag_stick-figure" class="navtaglink">ben 10</a></li> <li><a href="#" id="tag_naughty" class="navtaglink">batman</a></li> <li><a href="#" id="tag_fighting" class="navtaglink">spongebob</a></li> <li><a href="#" id="tag_bloody" class="navtaglink">scooby doo</a></li> <li><a href="#" id="tag_word" class="navtaglink">power rangers</a></li> <li><a href="#" id="tag_political" class="navtaglink">transformers</a></li> </ul> <ul class="morelist"> <li><a href="#" id="tag_racing" class="navtaglink">pokemon</a></li> <li><a href="#" id="tag_motorsports" class="navtaglink">avatar</a></li> <li><a href="#" id="tag_flying" class="navtaglink">mario</a></li> <li><a href="#" id="tag_easy" class="navtaglink">sonic</a></li> <li><a href="#" id="tag_high-score" class="navtaglink">naruto</a></li> <li><a href="#" id="tag_map" class="navtaglink">johnny bravo</a></li> </ul> <ul class="morelist"> <li><a href="#" id="tag_escape" class="navtaglink">escape</a></li> <li><a href="#" id="tag_tycoon" class="navtaglink">tycoon</a></li> <li><a href="#" id="tag_tower-defense" class="navtaglink">tower defense</a></li> <li><a href="#" id="tag_random" class="navtaglink">random</a></li> <li><a href="#" id="tag_gross" class="navtaglink">fighting</a></li> <li><a href="#" id="tag_zombie" class="navtaglink">shooting</a></li> </ul> <ul class="morelist"> <li><a href="#" id="tag_hard" class="navtaglink">spiderman</a></li> <li><a href="#" id="tag_make-your-own" class="navtaglink">billy , mandy</a></li> <li><a href="#" id="tag_dress-up" class="navtaglink">flintstones</a></li> <li><a href="#" id="tag_high-school" class="navtaglink">looney tunes</a></li> <li><a href="#" id="tag_celebrity" class="navtaglink">action</a></li> <li><a href="#" id="tag_cute" class="navtaglink">racing</a></li> </ul> </div> <p class="slide"><a href="#" class="btn-slide">more games</a></p> <div id='wrapper'> <div id='content'> <div style="height: 450px;"> </div> </div> </div> </body> </html>

although can't replicate it, think i've come across issue before.

try adding fixed width in pixels on #panel div (it cannot in % or em).

this prevents unusual jquery bug jumps/skips when accordion sliding downwards (right when reaches bottom).

php jquery html css

Comments

Post a Comment

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer - when trying request rest service @ time of response getting exception.. feb 21, 2013 2:34:49 pm com.sun.jersey.spi.container.containerresponse mapmappablecontainerexception severe: exception contained within mappablecontainerexception not mapped response, re-throwing http container java.lang.noclassdeffounderror: not initialize class net.sf.cglib.proxy.enhancer @ org.hibernate.proxy.pojo.cglib.cgliblazyinitializer.getproxyfactory(cgliblazyinitializer.java:117) @ org.hibernate.proxy.pojo.cglib.cglibproxyfactory.postinstantiate(cglibproxyfactory.java:43) @ org.hibernate.tuple.entity.pojoentitytuplizer.buildproxyfactory(pojoentitytuplizer.java:162) @ org.hibernate.tuple.entity.abstractentitytuplizer.<init>(abstractentitytuplizer.java:135) @ org.hibernate.tuple.entity.pojoentitytuplizer.<init>(pojoentitytuplizer.java:55) @ org.hibernate.tuple.e...
Read more

Accessing MATLAB's unicode strings from C -

Accessing MATLAB's unicode strings from C - how can access underlying unicode info of matlab strings through matlab engine or mex c interfaces? here's example. let's set unicode characters in utf-8 encoded file test.txt, read as fid=fopen('test.txt','r','l','utf-8'); s=fscanf(fid, '%s') in matlab. now if first feature('defaultcharacterset', 'utf-8') , c engevalstring(ep, "s") , output text file utf-8. proves matlab stores unicode internally. if mxarraytostring(enggetvariable(ep, "s")) , unicode2native(s, 'latin-1') give me in matlab: non-latin-1 characters replaced character code 26. need getting access underlying unicode info c string in unicode format (utf-8, utf-16, etc.), , preserving non-latin-1 characters. is possible? my platform os x, matlab r2012b. addendum: documentation explicitly states "[mxarraytostring()] supports multibyte encoded characters...
Read more

javascript - mongodb won't find my schema method in nested container -

javascript - mongodb won't find my schema method in nested container - i trying access method of schema stored within mixed container. here situation : have cases model can many different things, have schema each of these things stored in "casecontent" mixed property. var caseschema = mongoose.schema({ casecontent : {}, object : {type:string, default : "null"}, collision : {type : boolean, default : false} }); the casecontent property filled model of 1 of schemas, 1 exemple : var treeschema = new mongoose.schema({ applecount : {type : number, default : 3} }); treeschema.methods.dostuff = function (data) { console.log('hey, listen'); homecoming true; }; then, want utilize method of schema original container : caseschema.methods.dostuff = function (data) { if (this.casecontent.dostuff !== undefined) { this.casecontent.dostuff(); console.log('it worked'); } else { ...
Read more