Last active
October 20, 2016 18:50
-
-
Save tjunussov/b244076fb465d7eceb34d6587fc31c92 to your computer and use it in GitHub Desktop.
Scrollable Layout with autowidth
This file contains hidden or 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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Scrollable</title> | |
| <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="application/javascript"></script> | |
| <style> | |
| html,body { width: 100%; height:100%; display: block; } | |
| * { box-sizing: border-box; padding: 0; margin: 0;} | |
| ul { list-style:none; border:1px solid #ccc; } | |
| /**********/ | |
| ul.layout { width:100%; height:100%; display:table; } | |
| ul.layout li { display:table-cell;} | |
| li > .scrollable { position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto; } | |
| </style> | |
| </head> | |
| <body> | |
| <ul class="layout"> | |
| <li> <!-- left column with autowidth --> | |
| <div style="width:200px">Left Menu</div> | |
| </li> | |
| <li style="width:100%; position:relative;"> <!-- fill remaing width of columns --> | |
| <div class="scrollable"> | |
| <div style="width:1000px; height:1000px; background:#f05555; position:relative;"> | |
| Calendar Mega BIG content | |
| <a id="myElement" style="position:absolute; right:100px; top:500px">Element</a> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="sale" style="display:none;"> <!-- right column with autowidth --> | |
| <div style="width:300px">Right Menu</div> | |
| </li> | |
| </ul> | |
| <button accesskey="s">Sale</button> | |
| <script> | |
| $(function() { | |
| $('button').click(function(){ | |
| var $s = $('.scrollable'); | |
| if ($('.sale').toggle().is(':visible')) { | |
| var a = $('a#myElement').position(); | |
| $s.data("scrollTop", $s.scrollTop()) | |
| .data("scrollLeft", $s.scrollLeft()) | |
| .scrollTop(a.top) | |
| .scrollLeft(a.left); | |
| } else { | |
| $s.scrollTop(function(){ return $(this).data("scrollTop") }) | |
| .scrollLeft(function(){ return $(this).data("scrollLeft") }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Discussion here http://stackoverflow.com/questions/40152608/css-overflow-scroll-table-cell-with-widthauto-or-width100
Playground here http://jsbin.com/lojuvac/edit?html,console,output