To extract the relevant bits: HTML: <li onclick="toggleExpand(this,'shrink')" title="Click to expand" class="shrink"> JS: function toggleExpand(node,shrink,expand) { if (node.classList.contains(shrink)) { node.classList.remove(shrink); expand && node.classList.add(expand); node.setAttribute('title','Click to '+shrink); } else { expand && node.classList.remove(expand); node.classList.add(shrink); node.setAttribute('title','Click to '+(expand || 'expand')); } } CSS: .shrink > :nth-child(n+1) { display: none; } .shrink { white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
The optional expand parameter to toggleExpand is if you want to add a different class when it's expanded. I use it elsewhere, but not here. ../Dave On 25 November 2017 at 09:38, David Mason <dma...@ryerson.ca> wrote: > 1) Add/remove a class to an enclosing DIV. You can see a very simple > version that I wrote in action on https://programmingfortherestofus.com > click on the bullets under Elevator Pitch. > > 2) Include all the content, just don't display it by default... > dynamically downloading additional content is almost certainly not worth it. > > ../Dave > > On 25 November 2017 at 08:53, Richard Hipp <d...@sqlite.org> wrote: > >> I notice on diff pages of GitHub (ex: >> https://github.com/mackyle/sqlite/commit/028307ebcc953ee944d >> 389fe359d146ab4893d16) >> that above and below each diff chunk there is a light-blue block on >> the left with an icon in the middle. If you hover over this area, you >> get a pop-up hint that says "Expand". If you click, it adds more >> context to the diff. >> >> Questions: >> >> (1) What's the best way to add mouse-over pop-up hints, in raw CSS+JS, >> without using a "framework"? >> >> (2) How do they implement this "expand the diff context" feature? >> Surely this is something that needs to be added to Fossil, don't you >> think? >> >> -- >> D. Richard Hipp >> d...@sqlite.org >> _______________________________________________ >> fossil-users mailing list >> fossil-users@lists.fossil-scm.org >> http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users >> > >
_______________________________________________ fossil-users mailing list fossil-users@lists.fossil-scm.org http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users