Jscrollpane plugin for pop up box issue_问答_开发者

开发者 https://www.devze.com 2023-02-07 05:01 出处：网络

I\'m using the jscrollpane jquery plugin to be applied for a pop up div box(lightbox for short), but the jscrollpane scroll bar does not show up.Here is the html:

I'm using the jscrollpane jquery plugin to be applied for a pop up div box(lightbox for short), but the jscrollpane scroll bar does not show up. Here is the html:

{
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">                                                                 
<head>                                                                  
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all"></link>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="JScrollPaneScripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="JScrollPaneScripts/jquery.jscrollpane.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "sample1.css"></link>        
<script type="text/javascript">
 $( document ).ready( function( )  
  {   
   $( function( )   
   {
    $( '#testing2' ).jScrollPane( );
   }); 

   $( "#testing" ).click( function( )  
   {
    $( "#testing2" ).show( 5000 );   
   }); 
  }      
 );    
</script> 
</head>                                                                 
<body>  
 <div id = "wrapperdiv">  
  <a id = "testing" href="#">Link</a>   
  <div id = "testing2">  
   lksjflksjdlkflskdjflksjdflkjslkjdflk
   lsdkflksjgliowtjlskdfjlskdfjlskgs
   lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj
   lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll
   llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
   lksjflksjdlkflskdjflksjdflkjslkjdflk 
   lsdkflksjgliowtjlskdfjlskdfjlskgs  
   lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
   lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll
   llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
   lksjflksjdlkflskdjflksjdflkjslkjdflk 
   lsdkflksjgliowtjlskdfjlskdfjlskgs 
   lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
   lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll 
   llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
   lksjflksjdlkflskdjflksjdflkjslkjdflk 
   lsdkflksjgliowtjlskdfjlskdfjlskgs 
   lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
   lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll
   llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
   lksjflksjdlkflskdjflksjdflkjslkjdflk 
   lsdkflksjgliowtjlskdfjlskdfjlskgs 
开发者_StackOverflow中文版   lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
   lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll 
   llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
  </div> 
 </div> 
</body>                                                                 
</html> 
}

Here is the css:

*
{
 padding:  0px;
 margin:   0px;
}

#wrapperdiv
{
 width:   1000px;
 margin:   500px auto 0px auto;
}

#testing 
{ 
 width:   100px;
 height:   50px;  
 border:   1px solid;
 font-size:  22px;   
 display:  block;
 text-align:  center;
 padding:  25px 0px 0px 0px;
}

#testing2
{
 display:  none;
 width:   270px;
 height:   300px; 
 background:  yellow;
 border:   1px solid;  
 bottom:   100px;
 left:   10%;
 position:  relative; 
 z-index:  999;
}

jScrollPane doesn't work on items which are invisible when you initialise it. This is because it can't calculate the size that it is meant to be. So you need to reinitialise jScrollPane after showing the content as shown in this example:

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

A callback can be provided as the second parameter to jQuery show so you can replace:

$( "#testing2" ).show( 5000 );

with:

$( "#testing2" ).show(
    5000,
    function() // callback function
    {
        $('#testing2').jScrollPane();
    }
);

As a side note, the spaces around the = signs in your HTML will probably stop it from validating...

A Few things to try:

If I recall correctly elements must have the css property

 overflow:auto;

applied so stick that into your css for #testing2

The issue because the element your targeting is hidden so you could try initializing scrollPane after the show function:

  $(document).ready(function() {   

       $('#testing').click(function(){

           $('#testing2').show(5000, function(){
               $('#testing2').jScrollPane();
           });   

       });

    });

Try without the element hidden to see if that works ok.

Also check out these links - comment5 here: http://code.google.com/p/jscrollpane/issues/detail?id=30

This ('#myDiv').show().jScrollPane() fix worked perfectly for me.

in which case my above code would become

   $(document).ready(function() {   

   $('#testing').click(function(){

       $('#testing2').show(5000).jScrollPane();  

   });

});

and http://jscrollpane.kelvinluck.com/invisibles.html - which explains using it on invisble elements

Jscrollpane plugin for pop up box issue

精彩评论

关注公众号

热门标签

图文推荐

Jscrollpane plugin for pop up box issue

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：