javascript - navigation list issue -

-

i working on small application below there collection of list items list items should within box no matter how many can on second column. want keep limit on number of list items can displayed not more 10 moment there 10 items 10th item should omitted , "view all" should displayed. once user clicks on view can directed second page , items can displayed.

below code.

thanks

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <style>     #container {  border: 1px dotted #d7d7d7;  padding: 0px 5px 5px 8px;  height: 250px;  width: 250px;   }    #heading {  } ul {     display: inline; } ul li{     display: block; }  </style> </head> <div id="container">     <div id="heading">style </div>     <ul>         <li> >>1 </li>         <li> >>2 </li>         <li> >>3 </li>         <li> >>4 </li>         <li> >>5 </li>         <li> >>6 </li>      </ul>    </div> <body> </body> </html>

if you're looking limit amount of items displayed can fixed width on list items , overflow hidden clip additional items being displayed.

<style>    ul {         height: 20px;         overflow: hidden;         width: 180px;       }     li {         display: block;         float: left;         height: 20px;         width: 20px;       }     ul.unlimited {        height: auto;      }     #view_all {        display: none;    } </style>

no displaying view link. advise generating on server side. if don't have control on that, can javascript example make simple jquery script:

<script>         $(document).ready(function() {           if ($("#container ul li").length > 9) {             $("#view_all").show().click(function() {               $("#container ul").addclass("unlimited");               return false;             });           }         }); </script>

here i'm assuming have anchor embedded in html id of "view_all". can see we're doing here. css hides view link default , uses fixed width , height on list. if there more 10 items won't visible default styling permits 9 shown. however, jquery script tell web browser make view link visible. assign click event handler on link. applies class list removes fixed height allowing of list items displayed.

you can handle in variety of different ways 1 simple solution. note want add id or class unsorted list bit more explicit in css/js code.


Comments

Post a Comment

Popular posts from this blog

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

-
i'm trying create application adheres following: no taskbar no console or form window can utilize console.writeline() . (i.e. if executes app command prompt write console.) the problem if create windows form (or wpf) application can have there no taskbar, console or window show up, console.writeline() nothing. if create console app, writes console, can't figure out how hide (and if did hide it, write command prompt window?)... how do this? just create standard console application. callers responsibility hide window caused program (from how run c# console application console hidden ): system.diagnostics.processstartinfo start = new system.diagnostics.processstartinfo(); start.filename = dir + @"\myprocesstostart.exe"; start.windowstyle = system.diagnostics.processwindowstyle.hidden;
Read more

c++ - Convert big endian to little endian when reading from a binary file -

-
this question has answer here: how convert between big-endian , little-endian values in c++? 28 answers i've been looking around how convert big-endian little-endians. didn't find solve problem. seem there's many way can conversion. anyway following code works ok in big-endian system. how should write conversion function work on little-endian system well? this homework, since systems @ school running big-endian system. it's got curious , wanted make work on home computer also #include <iostream> #include <fstream> using namespace std; int main() { ifstream file; file.open("file.bin", ios::in | ios::binary); if(!file) cerr << "not able read" << endl; else { cout << "opened" << endl; int i_var; double d_var; while(!file.eof()) {...
Read more

openssl - Load PKCS#8 binary key into Ruby -

-
i'm trying load particular private key encoded in binary der format ( pkcs#8 ) ruby. however, openssl::pkey won't recognize it. can make work doing console work , transforming pem so: openssl pkcs8 -inform der -in file.key -passin pass:xxxxxxxx >private_key.pem after this, key can correctly read. however, since whole process done in memory instead of writing , reading files. so question is: possible load private keys binary encoded der format ruby/openssl? thank time, fernando yes, can indirectly load pkcs#8 der-encoded private keys using ruby openssl. openssl::pkey::rsa.new handle pem-formatted pkcs#8, easy read binary der , convert pem-formatted string , load string. for example, these der-encoded private keys: $ openssl genrsa | openssl pkcs8 -topk8 -outform der \ -nocrypt -out pkcs8.key $ openssl genrsa | openssl pkcs8 -topk8 -outform der \ -v2 des3 -passout pass:secret -out pkcs8_des3.key you can this: require 'open...
Read more