API tools faq
paste
Advertisement
Guest User

Layout toggle demo (Internet Explorer 8 edition)

a guest
Jun 14th, 2022
20
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.64 KB
Copied copy raw download clone embed print report
  1. <!-- Proof of concept: compatible with Internet Explorer 8 -->
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <title>Grid and list layout toggle demo</title>
  7.     <meta name="author" content="Elominius from Wikiversity">
  8.  
  9.     <!-- necessary to render the interpuncts correctly in older browser versions -->
  10.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  11.  
  12.     <!-- compatibility -->
  13.     <meta name="viewport" content="width=device-width, initial-scale=1">
  14. </head>
  15.  
  16. <body>
  17.  
  18. <div class="toggle_grid_list_buttons">
  19.     <!-- "Toggle to grid view" button initially  hidden -->
  20.     <button onclick="toggleView_demo();" style="display:none;">Toggle to grid view</button>
  21.     <button onclick="toggleView_demo();">Toggle to list view</button>
  22. </div>
  23.  
  24. <ul class="item_container grid">
  25.     <li>
  26.         <div class="thumbnail_wrapper">
  27.             <div class="thumbnail_container">
  28.                 <!-- a picture would go here -->
  29.                 <span class="thumbnail_duration">6:38</span>
  30.             </div>
  31.         </div>
  32.         <div class="info_wrapper">
  33.             <div class="title_container" title="This is a title.">
  34.                 <!-- fake hyperlink colour for illustration purposes -->
  35.                 <span class=fake_URL>This is a title.</span>
  36.             </div>
  37.             <div class="status_container">
  38.                 <!-- non-breaking spaces after numbers -->
  39.                 by <span class="channel_name fake_URL" title="312,147&nbsp;subscribers">VideoCreator</span> <span class="subscriber_count list_show">(312,147&nbsp;subscribers)</span> • <time class="upload_date" datetime="2022-06-12T10:11:16" title="June 12, 2022 &#10;10:11:16 (UTC)">2&nbsp;weeks ago</time> • <span class="view_count" title="56,887 views since 24 hours">1,013,237&nbsp;views</span> • <span class="rating" title="106,228 likes, &#10;3187 dislikes">97% liked</span>
  40.             </div>
  41.             <div class="description_container list_show">
  42.                 This is the description. It can only be seen in list view. It does not matter if it contains too much text for the space, since excess text can be hidden or extend downwards.
  43.             </div>
  44.         </div>
  45.     </li>
  46. </ul>
  47.  
  48. <!-- This "type" attribute serves as a label for the source code, and is not necessary in modern browsers. Same with "text/javascript". -->
  49. <style type="text/css">
  50. /* font pack */
  51. body { font-family: 'noto sans', ubuntu, 'segoe ui', futura, arial, helvetica, 'trebuchet ms', tahoma, verdana, sans-serif; }
  52.  
  53. /* shared style */
  54. .item_container {
  55.     list-style: none;
  56.     padding-right: 1em;
  57.  
  58. }
  59. .thumbnail_container {
  60.     width:256px; height:144px;
  61.     position: relative; /* necessary to keep .thumbnail_duration inside thumbnail */
  62.     border: 2px solid grey;
  63.     margin-right: 1em;
  64.     margin-bottom: 0.5em;
  65.     background-color: lightblue; /* placeholder */
  66.     border-radius: 5px;
  67. }
  68.  
  69. .title_container { font-size:20pt; }
  70. .fake_URL { color:#48C; } /* for illustration */
  71. .status_container { font-size:10pt; color:#555; padding-bottom:5pt; }
  72. .description_container {
  73.     display:block;
  74.     /* description height limit */
  75.     max-height:5em; /* 5 lines */
  76.     overflow-y: hidden; /* hide excess text */
  77.     /* end line with ellipsis for newer browsers */
  78.     /* display: -webkit-box;
  79.     text-overflow:ellipsis;
  80.     -webkit-box-orient: vertical;
  81.     -webkit-line-clamp: 5; */
  82. }
  83.  
  84. .thumbnail_duration {
  85.     display: inline-block;
  86.     position: absolute;
  87.     background-color: rgba(0,0,0,0.5);
  88.     padding:0 4px;
  89.     bottom:0; right:0;
  90.     border-radius: 5px; /* fallback */
  91.     border-radius: 5px 0 3px 0;
  92. }
  93.  
  94.     /* only visible in specific modes */
  95. .grid_show { display: none; }
  96. .list_show { display: none; }
  97.  
  98. /* grid view */
  99. .item_container.grid .grid_show { display: inline; }
  100.     /* moves title closer to video above than below to clarify that it belongs to the former */
  101. .item_container.grid .status_container { padding-bottom: 15pt; }
  102. .item_container.grid .thumbnail_container { margin-bottom: 0; }
  103.  
  104. .item_container.grid li {
  105.     /* limit width per item */
  106.     display: inline-block;
  107.     width: 256px;
  108.     margin-right:1em;
  109.  
  110. }
  111.  
  112.     /* hide description – obsolete due to .list_show */
  113. /* .item_container.grid .description_container { display:none; } */
  114.  
  115.  
  116. /* list view */
  117. .item_container.list .list_show { display: inline; }
  118. .item_container.list .description_container {
  119.     display:block;
  120.     width:calc(100% - 300px); /* limit width to avoid breaking underneath */
  121. }
  122. .item_container.list li { display:block; clear:both; } /* extend over entire row */
  123. .item_container.list .thumbnail_wrapper {
  124.     display: inline-block;
  125.     width: 256px;
  126.     float:left;
  127.     margin-right: 1em;
  128. }
  129.  
  130. .item_container.list .info_wrapper {
  131.     /* Deactivated due to possibility of it getting below the thumbnail. Might be necessary on older browsers, but would require fixed width. */
  132.     /* display: inline-block; */
  133.     /* width: 256px; */
  134. }
  135.  
  136. /* responsive width - puts information below thumbnail on narrow displays (optional) */
  137. @media (max-width: 720px) {
  138.   .item_container.list .thumbnail_wrapper { float:none; }
  139.   .item_container.list .description_container { width: 100%; }
  140. }
  141.  
  142. /* dark theme (optional) */
  143. body { background-color:#222; color:#eee; }
  144. .status_container { color:#aaa; }
  145. </style>
  146.  
  147. <script type="text/javascript">
  148. // put item container into shortcut variable
  149. var item_container = document.querySelectorAll(".item_container")[0];
  150. var first_item = item_container.querySelectorAll("li")[0];
  151. var toggle_grid_list_buttons = document.querySelectorAll(".toggle_grid_list_buttons")[0].querySelectorAll("button");
  152.  
  153.  
  154. // set view
  155. function setView(mode) {
  156.     // if none set, default to grid
  157.     if (item_container.getAttribute("class").search("grid")+item_container.getAttribute("class").search("list") == -2) {
  158.         item_container.getAttribute("class")="item_container grid";
  159.         document.cookie = "view_mode=grid";
  160.     }
  161.  
  162.     switch(mode) {
  163.         case "list":
  164.             // replaces the "grid" class with "list"
  165.             item_container.setAttribute("class",item_container.getAttribute("class").replace('grid','list') );
  166.  
  167.             // hides "toggle to list view" button and shows "toggle to grid view" button
  168.             toggle_grid_list_buttons[0].style.display="block";
  169.             toggle_grid_list_buttons[1].style.display="none";
  170.  
  171.             // stores view mode into cookie
  172.             document.cookie = "view_mode=list";
  173.             break;
  174.         case "grid":
  175.             // replaces the "list" class with "grid"
  176.             item_container.setAttribute("class",item_container.getAttribute("class").replace('list','grid') );
  177.  
  178.             // hides "toggle to grid view" button and shows "toggle to list view" button
  179.             toggle_grid_list_buttons[0].style.display="none";
  180.             toggle_grid_list_buttons[1].style.display="block";
  181.  
  182.             // stores view mode into cookie
  183.             document.cookie = "view_mode=grid";
  184.             break;
  185.     }
  186. }
  187.  
  188. // toggle view
  189. function toggleView_demo(mode) {
  190.     if (
  191.         // checks if grid mode is activated by looking for the word "grid" in the class
  192.         item_container.getAttribute("class").search("grid") > -1
  193.     ) {
  194.         setView("list");
  195.     } else if (
  196.         // checks for list mode
  197.         item_container.getAttribute("class").search("list") > -1
  198.     ) {
  199.         setView("grid");
  200.     } else {
  201.         // add "grid" class by default
  202.         item_container.getAttribute("class")+=" grid";
  203.         document.cookie = "view_mode=grid";
  204.     }
  205. }
  206.  
  207. // Cookie function dependencies
  208. function setCookie(cname, cvalue, exdays) {
  209.   var d = new Date();
  210.   d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  211.   var expires = "expires="+d.toUTCString();
  212.   document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  213. }
  214.  
  215. function getCookie(cname) {
  216.   var name = cname + "=";
  217.   var ca = document.cookie.split(';');
  218.   for(var i = 0; i < ca.length; i++) {
  219.    var c = ca[i];
  220.    while (c.charAt(0) == ' ') {
  221.      c = c.substring(1);
  222.    }
  223.    if (c.indexOf(name) == 0) {
  224.      return c.substring(name.length, c.length);
  225.    }
  226.  }
  227.  return "";
  228. }
  229.  
  230.  
  231. // check configuration (note: only Firefox stores cookies for locally opened HTML files.)
  232. if ( getCookie("view_mode") == "grid" ) setView("grid");
  233. if ( getCookie("view_mode") == "list" ) setView("list");
  234.  
  235.  
  236. // Description width fallback for older browsers – uncomment and optionally convert to "onresize" if necessary.
  237. /*
  238. document.body.appendChild( document.createElement("style") );
  239. var description_width_fallback = document.body.lastChild;
  240. document.body.lastChild.getAttribute("class")="description_width_fallback"; // label for page inspector
  241.  
  242. window.addEventListener('resize', function(event) {
  243.     if ( item_container.getAttribute("class").search("list") > -1 ) {
  244.         description_width_fallback.innerHTML = ".item_container.list .description_container { width: " + (first_item.offsetWidth-400) +"px; }";
  245.     }
  246. }, true);
  247. */
  248.  
  249. // Multiply list items for illustrative purposes – the following code would not be implemented on an actual web site.
  250. var li_1_content = first_item.innerHTML;
  251. var color_list = ['darkred', 'green', 'blue', 'yellow', 'orange', 'darkorange', 'darkgreen', 'darkseagreen', 'lightyellow', 'lightblue', 'lightskyblue', 'lightgreen', 'teal', 'turquoise', 'darkturquoise', 'mediumturquoise', 'lightcoral', 'antiquewhite', 'aqua', 'aquamarine', 'purple', 'violet', 'darkviolet', 'indigo', '#38F', 'lightseagreen', 'deepskyblue', 'steelblue', 'royalblue', 'beige', 'ivory', 'gray', 'slategray', 'darkslategray', 'wheat', 'gold', 'silver', 'brown', 'olive', 'lime', 'limegreen', 'greenyellow', 'yellowgreen', 'seagreen', 'crimson'];
  252. var count = 0;
  253.  
  254. for (
  255.     count = 0; // start counter
  256.     count < Math.floor(10+Math.random()*40); // repeat 10 to 50 times
  257.     count++ // count up
  258.     ) {
  259.     item_container.appendChild( document.createElement("li") );
  260.     item_container.lastChild.innerHTML=li_1_content;
  261.     // random color
  262.     var random_number = Math.floor(Math.random()*(color_list.length));
  263.     item_container.lastChild.querySelectorAll(".thumbnail_container")[0].style.backgroundColor=color_list[random_number];
  264. }
  265. </script>
  266.  
  267. </body>
  268. </html>
  269.  
Advertisement
RAW Paste Data Copied
Advertisement
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!