Myths on Maps

  • Log in
  • « What we're working on now
  • XSLT to enable faster searches »

Saving bandwidth: auto-titling with CSS and so forth

Posted by gregster on 06 Jun 2013 in Activity log

The XHTML version of Apollodorus Library Book 1 includes a huge number of title attributes and class attributes. The titles are, not surprisingly, hover-induced info like 'Show character details'. Many of the classes aren't really used for CSS, but were jQuery selectors. The net result of all of this is that Apollodorus Library Book 1 weighs in at 221K. After a bit of research and fiddling I've come up with a way to reduce this significantly. By significant, I mean HUGE - the same page is now 144K.

I've removed all of the jQuery selectors classes and replaced them with html5 data attributes that I use anyway. So, instead of a selector like $(".classname") I now use $("[data-type]"), which removes 1649 instances of 'class="retrieve"' from that page.

I've also swapped title attributes out for an all-CSS approach, so an anchor like <a data-id="ouranus" data-type="character">Sky</a> can be given a pseudo-title with the following CSS:

a[data-type]:hover {text-decoration: underline;position:relative;}
a[data-type]:hover:after {
content: "Show " attr(data-type) " details for " attr(data-id);
padding: 4px 8px;
text-transform:capitalize;
color: rgb(255,255,255);
position: absolute;
left: 50%;
top: 100%;
white-space: nowrap;
z-index: 2;
border-radius: 5px ;
background-color: rgba(0,0,0,0.8);
}

NOTE: the initial position:relative seems to be crucial here. I haven't investigated why.

An example page can be viewed here.

This entry was posted by Greg and filed under Activity log.

Myths on Maps

This project will focus on deploying an interactive map of Europe with overlays for Greek and Roman myths, history, people and events.
SVN instructions for MoM editors
Development URL
HCMC Blogs home
  • Archives
  • Categories

Search

XML Feeds

  • Atom: Posts
  • RSS 2.0: Posts
What is RSS?

This collection ©2026 by admin • Help • Photo gallery software