SHARE
TWEET

List-Expander-Prototype_jquery

tblop Dec 11th, 2017 (edited) 282 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // TBLOP V3 List Expander Prototype
  2. // Grows list height (increasing number of visible links) when hovering
  3. // after list grows to ~90% of window height, will scroll window to make list full window height
  4. // huge improvement on the previous version thats been on tblop for years
  5. tblop.currently = {}
  6. tblop.currently.hoveringList = false;
  7. tblop.currently.startingHeight = 256;
  8. $("div.a_list").hover(
  9.     function () {
  10.  
  11.         if (!viewingMobile && !tblop.currently.hoveringList) {
  12.             tblop.currently.hoverStartingTime=Date.now();
  13.             tblop.currently.startingHeight = $(this).children("div.list_contents").css('max-height').replace('px', '');
  14.             // this get the total height viewable, not the TOTAL height of the hidden parts
  15.             tblop.currently.totalHeight = $(this).children("div.list_contents").height();
  16.             // each link is 17 pixels high, so multiply the number of links by 17 to get the TOTAL list height.
  17.             tblop.currently.completeHeight = 17 * $(this).children("div.list_contents").children("a").length;
  18.             tblop.currently.heightLeft = tblop.currently.completeHeight - tblop.currently.totalHeight;
  19.             tblop.that = this;
  20.             tblop.listGrowTimer = setInterval(function () {
  21.                 var listHeight = $(tblop.that).children("div.list_contents").height();
  22.                 // increase max list height by 1 pixel every half second
  23.  
  24.                 // wamt tp grpw the list at a percentage of current height rate.
  25.                 tblop.currently.heightLeft = tblop.currently.completeHeight - listHeight;
  26.                 var heightToAdd = (tblop.currently.heightLeft / 8.5);
  27.                 if (tblop.currently.heightLeft < 10) {
  28.  
  29.                     heightToAdd = 1;
  30.                 }
  31.                 if (heightToAdd > 8.5) {
  32.                     heightToAdd = 8.5;
  33.                 }
  34.                 if (listHeight > document.body.clientHeight * 0.9) {
  35.                     heightToAdd = 0;
  36.                     $(tblop.that).children("div.list_contents").css('max-height', (document.body.clientHeight - 96) + 'px');
  37.                     listHeight = $(tblop.that).children("div.list_contents").height();
  38.                     window.scrollTo(0, $(tblop.that).offset().top);
  39.                     clearInterval(tblop.listGrowTimer);
  40.                     tblop.listGrowTimer = null;
  41.                 }
  42.                 if (Date.now()-tblop.currently.hoverStartingTime>1600){
  43.                     listHeight += heightToAdd;
  44.                     //console.log(tblop.currently.heightLeft);
  45.                     $(tblop.that).children("div.list_contents").css('max-height', listHeight + 'px');
  46.            
  47.                 }
  48.             }, 67)
  49.             tblop.currently.hoveringList = true;
  50.  
  51.  
  52.         }
  53.     },
  54.     function () {
  55.         if (!viewingMobile) {
  56.             tblop.that = this;
  57.             $(tblop.that).children("div.list_contents").css('max-height', tblop.currently.startingHeight + 'px');
  58.            
  59.             clearInterval(tblop.listGrowTimer);
  60.             tblop.listGrowTimer = null;
  61.             tblop.currently.hoveringList = false;
  62.         }
  63.     }
  64. );
RAW Paste Data
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!
 
Top