Sunday, November 20, 2011

more popout notes for iBooks with Javascript

The previous post showed how to expose a concealed note as white on gray. Here's a related technique to show the note as black on white.


XHTML:
<p onclick="popoutblack(this)"><span class="inlinenote" style="color: transparent;">some text for the note</span>some text for the paragraph</p>

CSS:
span.inlinenote {
display: block;
height: 0; /* default overflow is "visible", but 'invisible' since transparent */
}

javascript:
function popoutblack(obj) { //switch transparencies
  switch (obj.style.color) {
case "": { //case no inline style defined for <p>
 obj.style.color = "transparent";
 obj.firstChild.style.color = "black"; // otherwise color (now transparent) is inherited
}
break;
default: { // restore to original conditions
 obj.style.color = "";
 obj.firstChild.style.color ="transparent";
}
};
}

Sunday, November 6, 2011

inline "footnotes" for iBooks

The dictionary feature in iBooks and the Kindle app, where tapping a word immediately brings up a definition and another tap dismisses it, is so useful and appealing it inspires attempts to do something similar for footnotes, citations, references, etc.

Here's a javascript technique whereby tapping on a paragraph will overlay the paragraph temporarily with a prepared inline note, with a second tap restoring the original paragraph. 

XHTML:
<p onclick="popoutwhite(this)"><span class="inlinenote">some text for the note</span>some text for the paragraph</p>

CSS:
span.inlinenote {
display: block;
color: white;
height: 0; /* default overflow is "visible", but 'invisible' since white */
}

javascript:
function popoutwhite(obj) { //colorless <p> text disappears; white <span> text shows up against a gray background. 
switch(obj.style.background) {
case "": {obj.style.background = "gray";}
break;
default: {obj.style.background = "";}
};
switch(obj.style.color) {
case "": {obj.style.color = "transparent";}
break;
default: {obj.style.color = "";}
};

The idea is to make the originally invisible note - white on a white background - become visible by adjusting the background in two ways: first by setting the background to gray and paragraph color to transparent so it doesn't interfere.

Notes: 
This works in both iBooks and Sigil. Also the Kobo app for iOS.

The inline text must be shorter than the paragraph; otherwise it will be clipped.

The reader could be alerted to such paragraphs by a special border, or some other means.

Could be useful with question and answer sets.

Only inline style attributes are accessible with this technique; not important in this case, but in other examples.

The "this" keyword simplifies the coding and lets the function be called from any paragraph.

Comments welcome!