Created
March 30, 2012 05:28
-
-
Save leopic/2246822 to your computer and use it in GitHub Desktop.
Reinitialized Panel (with no set height) fails to update height when a styling modification occurs to existing content.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <title>jScrollPane - bug report</title> | |
| <style type="text/css" id="page-css"> | |
| *{margin:0;padding:0} | |
| html,body{background:#aac} | |
| body{font:13px/1.231 arial,helvetica,clean,sans-serif} | |
| #top-nav{width:780px;background:#50506d;overflow:hidden;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-border-radius-topleft:0;-webkit-border-top-left-radius:0;border-radius-topleft:0;-moz-border-radius-topright:0;-webkit-border-top-right-radius:0;border-radius-topright:0;margin:0 auto 20px;padding:0 20px 12px 0} | |
| #top-nav img{float:left} | |
| #top-nav ul{overflow:hidden;float:right;margin:28px 0 0} | |
| #top-nav ul li{float:left;list-style:none;padding:0 0 0 1em} | |
| #top-nav ul li a{color:#fff} | |
| #top-nav ul li a:hover{color:#ffa} | |
| #top-nav ul li:last-child{padding-right:0} | |
| #container{width:760px;background:#eeeef4;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin:20px auto;padding:20px} | |
| h1{font-size:116%;color:#fff;background:#50506d;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:0 0 1em;padding:4px 8px 5px} | |
| h2{clear:left;font-size:100%;color:#fff;background:#8b8b9f;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:1em 0;padding:4px 8px 5px} | |
| h2 span.setting-type{font-weight:400} | |
| p{font-size:93%;margin:1em 0} | |
| p.intro{font-size:116%;background:#fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding:10px} | |
| a{color:#7171D4;text-decoration:none} | |
| a:hover{color:#f60} | |
| ul{padding:0 0 0 1em} | |
| ul li{margin:0 0 .5em} | |
| form{overflow:hidden} | |
| fieldset{border:0;overflow:hidden} | |
| legend{font-weight:700;margin:1em 0} | |
| label{clear:left;float:left;text-align:right;width:100px;margin:.5em 6px 0 0} | |
| input,select,textarea{float:left;border:0;margin:0 0 .5em;padding:3px 5px} | |
| input[type=button],input[type=submit]{clear:left;background:#fff;width:auto;margin:0 0 0 106px} | |
| pre{background:#fff;font-size:93%;width:740px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:auto;padding:10px} | |
| ul.link-list li,ul p{margin:0} | |
| .jspContainer{overflow:hidden;position:relative} | |
| .jspPane{position:absolute} | |
| .jspVerticalBar{position:absolute;top:0;right:0;width:16px;height:100%;background:red} | |
| .jspHorizontalBar{position:absolute;bottom:0;left:0;width:100%;height:16px;background:red} | |
| .jspVerticalBar *,.jspHorizontalBar *{margin:0;padding:0} | |
| .jspCap{display:none} | |
| .jspHorizontalBar .jspCap{float:left} | |
| .jspTrack{background:#dde;position:relative} | |
| .jspDrag{background:#bbd;position:relative;top:0;left:0;cursor:pointer} | |
| .jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag{float:left;height:100%} | |
| .jspArrow{background:#50506d;text-indent:-20000px;display:block;cursor:pointer} | |
| .jspArrow.jspDisabled{cursor:default;background:#80808d} | |
| .jspVerticalBar .jspArrow{height:16px} | |
| .jspHorizontalBar .jspArrow{width:16px;float:left;height:100%} | |
| .jspVerticalBar .jspArrow:focus{outline:none} | |
| .jspCorner{background:#eeeef4;float:left;height:100%} | |
| * html .jspCorner{margin:0 -3px 0 0} | |
| ol li { | |
| list-style-position: inside; | |
| } | |
| /* Styles specific to this particular page */ | |
| .scroll-pane { width: 100%; overflow: auto; } | |
| #restyleContent { color: #fff; cursor: pointer;} | |
| .blocked p { float: left; width: 25px; height: 25px; overflow: hidden; margin: 10px; } | |
| </style> | |
| <!-- latest jQuery direct from google's CDN --> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| <!-- the mousewheel plugin --> | |
| <script type="text/javascript" src="https://raw.github.com/vitch/jScrollPane/master/script/jquery.mousewheel.js"></script> | |
| <!-- the jScrollPane script --> | |
| <script type="text/javascript" src="https://raw.github.com/vitch/jScrollPane/master/script/jquery.jscrollpane.min.js"></script> | |
| <script type="text/javascript" id="sourcecode"> | |
| $(function() | |
| { | |
| var settings = { | |
| showArrows: true, | |
| autoReinitialise: true | |
| }; | |
| var pane = $('.scroll-pane') | |
| pane.jScrollPane(settings); | |
| var contentPane = pane.data('jsp').getContentPane(); | |
| var i = 1; | |
| // Every second add some new content... | |
| setInterval( | |
| function() | |
| { | |
| contentPane.append( | |
| $('<p />').text('Praesent ac arcu id lorem condimentum blandit. Aenean interdum purus eget est sodales et sollicitudin velit elementum. Vestibulum quis nibh sem. Duis molestie lacus vel dolor scelerisque elementum. Phasellus ut ligula tellus. Ut leo leo, tempus a ultricies sodales, mattis ac nulla. Quisque porttitor congue turpis, vitae ultricies arcu pellentesque ac. Nunc fringilla mollis arcu a volutpat. Proin facilisis consectetur rutrum. Quisque ornare ornare enim. Maecenas eros orci, dapibus ut hendrerit quis, ullamcorper et nulla. Aenean consequat mauris sit amet nulla sodales quis fermentum metus scelerisque. Proin purus libero, egestas ut fringilla ac, tincidunt eget lacus ' + i++) | |
| ); | |
| }, | |
| 1000 | |
| ); | |
| $('#restyleContent').click(function(){ | |
| pane.toggleClass('blocked'); | |
| // pane.height(contentPane.height()); temporary fix | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <h1>Reinitialized Panel (with no set height) fails to update height when a styling modification occurs to existing content.</h1> | |
| <p>this page attempts to be a reproducible test case for the following bug:</p> | |
| <ol> | |
| <li>Auto-Reinitialized panel (with no default height) is initialized.</li> | |
| <li>Content is added over a period of time (optional)</li> | |
| <li>Some sort of manipulation to the existing content ocurrs that makes the content 'shorter' than what it was at load time.</li> | |
| <li><strong>Expected Behavior</strong> jScrollPane would adjust the height of the pane to match the new height of the contentPane.</li> | |
| <li><strong>Actual Result</strong> jScrollPane doesn't adjust the height, instead it keeps the original height at the value that was set at load.</li> | |
| </ol> | |
| <h2><a id="restyleContent">break it!</a></h2> | |
| <div class="scroll-pane"> | |
| <p>Praesent ac arcu id lorem condimentum blandit. Aenean interdum purus eget est sodales et sollicitudin velit elementum. Vestibulum quis nibh sem. Duis molestie lacus vel dolor scelerisque elementum. Phasellus ut ligula tellus. Ut leo leo, tempus a ultricies sodales, mattis ac nulla. Quisque porttitor congue turpis, vitae ultricies arcu pellentesque ac. Nunc fringilla mollis arcu a volutpat. Proin facilisis consectetur rutrum. Quisque ornare ornare enim. Maecenas eros orci, dapibus ut hendrerit quis, ullamcorper et nulla. Aenean consequat mauris sit amet nulla sodales quis fermentum metus scelerisque. Proin purus libero, egestas ut fringilla ac, tincidunt eget lacus.</p> | |
| <p>Praesent ac arcu id lorem condimentum blandit. Aenean interdum purus eget est sodales et sollicitudin velit elementum. Vestibulum quis nibh sem. Duis molestie lacus vel dolor scelerisque elementum. Phasellus ut ligula tellus. Ut leo leo, tempus a ultricies sodales, mattis ac nulla. Quisque porttitor congue turpis, vitae ultricies arcu pellentesque ac. Nunc fringilla mollis arcu a volutpat. Proin facilisis consectetur rutrum. Quisque ornare ornare enim. Maecenas eros orci, dapibus ut hendrerit quis, ullamcorper et nulla. Aenean consequat mauris sit amet nulla sodales quis fermentum metus scelerisque. Proin purus libero, egestas ut fringilla ac, tincidunt eget lacus.</p> | |
| <p>Praesent ac arcu id lorem condimentum blandit. Aenean interdum purus eget est sodales et sollicitudin velit elementum. Vestibulum quis nibh sem. Duis molestie lacus vel dolor scelerisque elementum. Phasellus ut ligula tellus. Ut leo leo, tempus a ultricies sodales, mattis ac nulla. Quisque porttitor congue turpis, vitae ultricies arcu pellentesque ac. Nunc fringilla mollis arcu a volutpat. Proin facilisis consectetur rutrum. Quisque ornare ornare enim. Maecenas eros orci, dapibus ut hendrerit quis, ullamcorper et nulla. Aenean consequat mauris sit amet nulla sodales quis fermentum metus scelerisque. Proin purus libero, egestas ut fringilla ac, tincidunt eget lacus.</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment