jquery - JscrollPane Div doesn't work when children Div are called -


using jscrollpane on "master" div, , have content in children divs within div. i'm using jquery show/hide load content onclick, child div won't appear. if remove jscrollpane works fine :(

html:

<h3 onclick="internalnav('testtwo')">click see div two</h3>        <div id="content" class="scroll-pane">             <div id="testone">                 <h1>title 1</h1>             <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed             eiusmod tempor incididunt ut labore et dolore magna             aliqua. ut enim ad minim veniam, quis nostrud exercitation             ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>             </div>              <div id="testtwo">                 <h1>title 1/h1>             <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed             eiusmod tempor incididunt ut labore et dolore magna             aliqua. ut enim ad minim veniam, quis nostrud exercitation             ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>             </div>         </div> 

js

$(document).ready(function(){      //hide divs, show first div     $("#content > div").hide()     $("#content > div:first").show()  $(function(){     $('.scroll-pane').jscrollpane(); });  });   function internalnav(divid) {      $("#content > div").not('#' + divid).hide()     $('#' + divid).fadein()   } 

i can't see what's wrong here!

you need reinitialise jscrollpane after changing content inside (or changing visibility of content). here example:

http://jscrollpane.kelvinluck.com/invisibles.html

also, notice have $(function() block inside document.ready block. don't need additional block - can apply jscrollpane directly since inside document.ready block

as side note, using onclick attribute in h3 isn't considered best practice. instead add event listener jquery. example showing both reinitialisation , using cleaner event binding:

$('.internal-nav').bind(     'click',     function(e)     {         var divid = $(this).attr('rel');         // notice no spaces around ">" - if have nested divs         $("#content>div").not('#' + divid).hide();          $('#' + divid).fadein(             function()             {                 $('.scroll-pane').jscrollpane()             }         );      } ); 

with h3 html replaced with:

<h3 class="internal-nav" rel="testtwo">click see div two</h3> 

Comments

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -