View Single Post
Old 09-08-2015, 01:00 PM   #1
ni_c
Enthusiast
ni_c began at the beginning.
 
Posts: 40
Karma: 10
Join Date: Jul 2015
Device: none
CSS trick for url popups solved

This works with epub and mobi/azw formats (in Calibre and Kindle - not other ereaders that can read those formats) and its only tested on the windows version of those programs, not on any standalone devices

With the following tweaks, can add a url address popup when hovering on wrapped links at the bottom left of the screen, the same way webpages have a status panel to show urls when hovering on links, and works in both single and double page mode:

<a id="ebook" href="http://example.com">example</a>
+
#ebook {
position:relative }
#ebook:hover:after {
content: " " attr(href) "";
display:block;
position:fixed;
bottom:0px;
left:0px;
color:#000;
max-width:500pt;
text-align:justify;
word-wrap:break-word;
background:#DBD7BD;
border:1px solid #777;
padding:0px 5px 2px 5px }
=


(btw see post #6 for an alternate approach)

Another option is to use popups as notes, and also use the css equivalent or <br> which is just \a

<a id="ebooknote">example note</a>
+
#ebooknote {
position:relative }
#eboonote:hover:after {
white-space: pre-wrap; /* adding this is needed to use \a */
content: "And in the rows going across, from left to right, and in each row: the first row, the numbers are 4, 9 and 2, and in the second row, the numbers are 3, 5 and 7, and in the third row, the numbers are 8, 1 and 6. Whether you add them up diagonally, vertically or horizontally, no matter in which direction you go, it always adds up to the number 15.] \a \a The predominantly dark blue rectangle which occupies most of the middle tier of the mural, the upper side which passes through the exact middle of the small bisected sphere, represents the altar. The yellow rectangle set at an angle into the lower and middle tiers so that one corner touches the bottom of the mural is a second representation of the altar. They indicate [ladies and gentlemen] duality ";
display:block;
position:fixed;
bottom:0px;
left:0px;
color:#000;
max-width:300pt; /*example screenshot uses this width*/
text-align:justify;
word-wrap:break-word;
background:#DBD7BD;
border:1px solid #777;
padding:0px 5px 2px 5px }
=


and can also have multiple content rules like

content: " blablabla \a "attr(href)" \a blablabla" ;
OR
content: " blablabla \a "url(image.jpg)" \a blablabla " ;
OR
content: " " attr(href) "\a " url(image.jpg) " ";
OR
content: " " attr(href) "\a " url(image.jpg) "\a " url(image2.jpg) " ";
OR
content: " " url(image.jpg) " blablabla \a " url(image2.jpg) " blablabla \a "attr(href) " ";

Unfortunately cant have content fetch images like it fetches attr(href), so need unique rules. A few suggestions to that end:
1. specify urls twice with id="" AND alt="" to have the bulk handled by one and content by the other
2. give the unique content important tags, so other urls can keep using generic content
3. add the unique content to the htm/html to keep the stylesheet uncluttered

SO in the htm/html would have

<a id="ebook" alt="ebook1" href="http://www.example1.com">example1</a>
<a id="ebook" alt="ebook2" href="http://www.example2.com">example2</a>
<a id="ebook" href="http://www.example3.com">example3</a>
<style>
a[alt="ebook1"]:hover:after {content: "" url(image1.jpg) "\a " attr(href) " " !important}
a[alt="ebook2"]:hover:after {content: "" url(image2.jpg) "\a " attr(href) " " !important}
</style>
+
#ebook {
position:relative }
#ebook:hover:after {
content: " " attr(href) " ";
display:block;
position:fixed;
bottom:0px;
left:0px;
color:#000;
word-wrap:break-word;
background:#DBD7BD;
border:1px solid #777 }

For ebook1 & ebook2 links, will show the url in the bottom left, along with an image directly above it, while the third link will just show the url
Attached Thumbnails
Click image for larger version

Name:	exampledotcom.jpg
Views:	794
Size:	10.9 KB
ID:	141942   Click image for larger version

Name:	examplenote.png
Views:	809
Size:	16.9 KB
ID:	141944  

Last edited by ni_c; 09-28-2015 at 02:44 AM. Reason: even more improved code
ni_c is offline   Reply With Quote