javascript - Why are my Divs flashing on screen before hiding? -

-

i have tabber, , 3/4 tabs should hidden flash on screen before display:none;. i've tried adding .addclass jquery, tried inline styling display:none; on the divs , have display:none set in css file , still can't solve this? causing this?

jquery(function($) {    $('.professor__tabs').each(function() {        $('.tabs__body', this).addclass('tabs__body--is-hidden');      $('.tabs__head', this).on('click', function(index) {            var test = $(this).index();            $('.tabs__body').addclass('tabs__body--is-hidden');          $('.tabs__head')            .removeclass('tabs__head--is-active')            .filter($(this))            .addclass('tabs__head--is-active')            .next('.tabs__body')            .removeclass('tabs__body--is-hidden');          })        .filter(':first')        .click();    });  });
 .tabs__body {     -webkit-box-flex: 0;     -webkit-flex: 0 0 100%;     -ms-flex: 0 0 100%;     flex: 0 0 100%;     -webkit-box-ordinal-group: 3;     -webkit-order: 2;     -ms-flex-order: 2;     order: 2;     background-color: white;     padding: 20px;     min-height: 260px;     max-height: 410px;     overflow: auto;     border-bottom-left-radius: 6px;     border-bottom-right-radius: 6px;     display: block;   }   .tabs__body--is-hidden {     display: none;   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <div class="professor__tabs">    <div class="tabs__head">intro</div>    <div class="tabs__body">      1    </div>      <div class="tabs__head">events</div>    <div class="tabs__body">      2    </div>      <div class="tabs__head">stream</div>    <div class="tabs__body">      3    </div>      <div class="tabs__head last-head">posts</div>    <div class="tabs__body">      4    </div>

i noticed can't replicate on jsfiddle, i'll include link anyways: here

due way implemented hiding feature browser not hide divs until document ready - instead default should have .tabs__body--is-hidden on divs using html , process visible div via js.


Comments

Post a Comment

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

-
so when requesting group sequelize follows: return models.workingcalendar .findall({ attributes: [ 'workingcalendar.periodid', 'workingcalendar.date', 'period.name' ], include: [ { model: models.period, attributes: [] } ], where: { getsudoid: currentgetsudo.id, unitplantid: unitplantid }, group: ['workingcalendar.periodid', 'workingcalendar.date', 'period.name'], }); sequelize run query: select [workingcalendar].[id], [workingcalendar].[periodid], [workingcalendar].[date], [period].[name] [workingcalendars] [workingcalendar] left outer join [periods] [period] on [wor...
Read more

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -

-
when responding supplicant_state_changed_action broadcast , attempting send udp packet, exception: java.net.socketexception: sendto failed: eperm (operation not permitted) @ libcore.io.iobridge.maybethrowaftersendto(iobridge.java:542) @ libcore.io.iobridge.sendto(iobridge.java:511) @ java.net.plaindatagramsocketimpl.send(plaindatagramsocketimpl.java:184) @ java.net.datagramsocket.send(datagramsocket.java:305) @ com.mycompany.app.serviceclass.discover(serviceclass.java:355)at com.mycompany.app.serviceclass.access$600(serviceclass.java:39) @ com.mycompany.app.serviceclass$statemachine.run(serviceclass.java:242) @ java.lang.thread.run(thread.java:818) caused by: android.system.errnoexception: sendto failed: eperm (operation not permitted) @ libcore.io.posix.sendtobytes(native method) @ libcore.io.posix.sendto(posix.java:211) @ libcore.io.blockguardos.sendto(blockguardos.java:278) @ libcore.io.iobridge.sendto(iobridge.java:509) @ java.net.plaindat...
Read more

c++ - Migration from QScriptEngine to QJSEngine -

-
i'm migrating qscriptengine code on qjsengine. now, have: class pars { public: static qscriptvalue printmainlog(qscriptcontext* c, qscriptengine* e); }; qscriptvalue pars::printmainlog(qscriptcontext* c, qscriptengine* e) { //some actions return e->globalobject().property(""); } ... qscriptengine engine; ... engine.globalobject().setproperty("printlog",engine.newfunction(pars::printmainlog)); so, user can put printlog("what ever"); in application in , example, qlineedit , function pars::printmainlog evalute. is there way qjsengine? so, user put same printlog("what ever");? way find here , user should put logger.printlog("what ever"); logger class inherited qobject printlog slot.
Read more