javascript - Make an extensible footer -

-

i make footer similar footer of javascript column of jsbin in case of error:

(before expanding) enter image description here (after expanding) enter image description here 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

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

-
so when requesting group sequelize follows: return models.workingcalendar .findall({ attributes: [ 'workingcalendar.periodid', 'workingcalendar.date', 'period.name' ], include: [ { model: models.period, attributes: [] } ], where: { getsudoid: currentgetsudo.id, unitplantid: unitplantid }, group: ['workingcalendar.periodid', 'workingcalendar.date', 'period.name'], }); sequelize run query: select [workingcalendar].[id], [workingcalendar].[periodid], [workingcalendar].[date], [period].[name] [workingcalendars] [workingcalendar] left outer join [periods] [period] on [wor...
Read more

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -

-
when responding supplicant_state_changed_action broadcast , attempting send udp packet, exception: java.net.socketexception: sendto failed: eperm (operation not permitted) @ libcore.io.iobridge.maybethrowaftersendto(iobridge.java:542) @ libcore.io.iobridge.sendto(iobridge.java:511) @ java.net.plaindatagramsocketimpl.send(plaindatagramsocketimpl.java:184) @ java.net.datagramsocket.send(datagramsocket.java:305) @ com.mycompany.app.serviceclass.discover(serviceclass.java:355)at com.mycompany.app.serviceclass.access$600(serviceclass.java:39) @ com.mycompany.app.serviceclass$statemachine.run(serviceclass.java:242) @ java.lang.thread.run(thread.java:818) caused by: android.system.errnoexception: sendto failed: eperm (operation not permitted) @ libcore.io.posix.sendtobytes(native method) @ libcore.io.posix.sendto(posix.java:211) @ libcore.io.blockguardos.sendto(blockguardos.java:278) @ libcore.io.iobridge.sendto(iobridge.java:509) @ java.net.plaindat...
Read more

c++ - Migration from QScriptEngine to QJSEngine -

-
i'm migrating qscriptengine code on qjsengine. now, have: class pars { public: static qscriptvalue printmainlog(qscriptcontext* c, qscriptengine* e); }; qscriptvalue pars::printmainlog(qscriptcontext* c, qscriptengine* e) { //some actions return e->globalobject().property(""); } ... qscriptengine engine; ... engine.globalobject().setproperty("printlog",engine.newfunction(pars::printmainlog)); so, user can put printlog("what ever"); in application in , example, qlineedit , function pars::printmainlog evalute. is there way qjsengine? so, user put same printlog("what ever");? way find here , user should put logger.printlog("what ever"); logger class inherited qobject printlog slot.
Read more