javascript - Make an extensible footer -
i make footer similar footer of javascript column of jsbin in case of error:
(before expanding) 
(after expanding) 
precisely, satisfies:
1) @ bottom of page, no matter how big main body (that raises error) is
2) can expanded when users click on it, , collapsed back...
i have written following code (jsbin), shows footer, , cannot collapsed.
<!doctype html> <html> <head> <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css"> <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <style> #footer { background-color: #fa8072; width: 100%; position: fixed; bottom: 0px; } </style> </head> <body class="ms-font-m"> body <div id="footer"> footer_line_1<br>footer_line_2<br>footer_line_3 </div> </body> </html> does know how make extensible , collapsable?
ps: list css files have use other purposes, might useful...
if number of errors big, can add scroll support, footer wont cover of page - jsfiddle
$("#show").click(function() { $("#shoowdiv").toggle(500); }); #footer { background-color: #fa8072; width: 100%; position: fixed; bottom: 0px; } #shoowdiv{ display:none; max-height: 100px; overflow-y: auto; } #show{ } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css"> <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <body class="ms-font-m"> body <div id="footer"> <p id='show'>7 errors</p> <div id='shoowdiv'> <ul> <li>issue #1</li> <li>issue #2</li> <li>issue #3</li> <li>issue #4</li> <li>issue #5</li> <li>issue #6</li> <li>issue #7</li> </ul> </div> </div> </body>
Comments
Post a Comment