Quote:
Originally Posted by Doitsu
Out of curiosity, I've looked into this. You could theoretically get the top offset of an element with offsetTop and the available height of the window with window.screen.availHeight and hide the object if the vertical offset is larger than 50% of the available window height.
This method kind of works with a browser and to some extent with ADE4, but I got weird results with other ePub3 apps.
I.e., this method is probably not robust enough for practical use.
I've attached a very simple proof-of-concept test file that you can play with.
(Uncomment //myDiv.parentNode.removeChild(myDiv); to actually delete the div.)
|
Hi Doitsu, thank you very much for your answer. I tell you that I was looking for a solution in the net, and after taking things here and there, I could build the following script:
Code:
function setup() {
var SH = screen.height,
Element = fleuron.getBoundingClientRect(),
TopPos = Element.top / SH,
BottomPos = Element.bottom / SH;
TopPos = TopPos - Math.floor(TopPos);
BottomPos = BottomPos - Math.floor(BottomPos);
alert('Screen Height is ' + SH + ' TopPos is ' + TopPos + ' and Bottom Pos is ' + BottomPos); /* This is for testing purpose only */
if (TopPos >= "0.2" && BottomPos <= "0.8") {
document.getElementById("fleuron").style.display = "block";
} else {
document.getElementById("fleuron").style.display = "none";
}
}
window.onload=setup;
Of course, in the .xhtml file I have a div with the id="fleuron" that is the div I want to hide (or not).
I was testing the script on
JSFiddle and works fine but in ereaders things are not so good. By the way, for testing, I'm working with epub2 in Calibre and Azardi (they accept epub2 with scripts). The problem with that script is that I don't know how to do in order to fire it when the font size is changed by the user. Since to change the font size is neccesary to use the mouse or the keyboard or touch the screen, I added the following statements after "window.onload=setup;":
document.onkeydown=setup;
document.onkeypress=setup;
document.onkeyup=setup;
document.onclick=setup;
document.onscroll=setup;
document.onchange=setup;
window.ontouchstart=setup;
but things were not perfect

When the paragraph was hidden (due to an increase in the font size), I couldn't do it visible again after decreasing the font size (the position of the paragraph was 0, always). So I thought to work with the position of the previous paragraph (a "prefleuron" paragraph); that improved a bit the things but still I can't get the script fired properly.
Below I attach my test epub (an epub2 ebook) so you can understand better what I want to say. Meanwhile, I'm going to study your epub and to see if I can find solutions. Many thanks again for your help!
Rubén