Help with a javascript

[RbnJrg]

I don't know if what I am looking for may be possible. I need a script (for a epub3 ebook) to apply the property "display: none" or "display: block" with regards to a paragraph, according to the position on the screen of that paragraph. That position will be variable, according to the font size choosen by the user; if the position of the paragraph is in the lower half of the screen (50% or higher), the paragraph must be hidden, otherwise (50% or lower) the paragraph must be visible. Can this be achieved? If so, how?

Many thanks in advance for any info you can give me.

Regards
Rubén

[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.)

[RbnJrg]

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:

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

[RbnJrg]

I could build a script that works perfectly on browsers:

https://jsfiddle.net/RbnJrg/qm8r72mw/

However, it doesn't work in any ereader that supports javascript Could someone here tell me what is wrong with the script?

Many thanks in advance.

[Doitsu]

I only have rudimentary JavaScript skills, but I believe that your code probably doesn't work because you forgot to make sure that the page was fully loaded before the script is run. Since I was too lazy to search for a pure JavaScript solution, I simply used jQuery to check the ready state:

 $(document).ready(function() {
    window.frames["f1"].addEventListener("resize", setup);
  });

I plugged your slightly modified code into the ePub3 wrapper of the file that I attached to the second post and it appears to be working with ADE 4.5 but pretty much nothing else.

BTW, if you want to create a valid epub, you can't use position: absolute; in the CSS. epubcheck will also complain about the name attribute; use id instead. (The attached file will pass epubcheck 4.)

IMHO, you'd be better off looking for a pure CSS solution. Since you're apparently interested in fleurons, have a look at the ::after pseudo selector. Maybe you could manipulate its CSS rule to achieve the desired result.

[RbnJrg]

Originally Posted by Doitsu

I only have rudimentary JavaScript skills, but I believe that your code probably doesn't work because you forgot to make sure that the page was fully loaded before the script is run. Since I was too lazy to search for a pure JavaScript solution, I simply used jQuery to check the ready state:

 $(document).ready(function() {
    window.frames["f1"].addEventListener("resize", setup);
  });

I plugged your slightly modified code into the ePub3 wrapper of the file that I attached to the second post and it appears to be working with ADE 4.5 but pretty much nothing else.

Thank you very much Doitsu! Not only in ADE works (that alone means a lot) but also in Calibre; it works perfectly under those GUIs. Now I have to figure out why it can't work under Readium and Azardi but it's very good to me that ADE runs the script flawlessly. In my script I had included the statement:

window.addEventListener("load", setup);

that supposedly it should run the script when the epub was loaded but it seems that is not the same that you code based on jquery (THAT IT DOES WORK!):

 $(document).ready(function() {
    window.frames["f1"].addEventListener("resize", setup);
  });

BTW, if you want to create a valid epub, you can't use position: absolute; in the CSS. epubcheck will also complain about the name attribute; use id instead. (The attached file will pass epubcheck 4.)

Yes Doitsu, you are right and I was aware about the property position in ebooks but as Sigil and ADE accepted it, I include it (do the try enabling "position: absolute" and changing "visibility: normal" in the iframe styles). Regarding the "name" attribute, I don't know what to tell you. Of course, you are right, "name" is deprecated but for <iframe> tags, it seems that "name" is still valid. You included the "id" attribute but Sigil will complain about it (in fact, it doesn't accept the iframe tag neither ). But your epub passes epubcheck 4, so what you wrote is ok!

IMHO, you'd be better off looking for a pure CSS solution. Since you're apparently interested in fleurons, have a look at the ::after pseudo selector. Maybe you could manipulate its CSS rule to achieve the desired result.

Yes Rembember this old thread?

https://www.mobileread.com/forums/sho...d.php?t=212300

But I not only interested in fleurons Doitsu; with javascript you can change the layout of any epub; things that are ok with some font-size, they can not be with a new size. I think that the script I'm looking for, it can be very useful for everyone once epub3 becomes popular.

THANK YOU VERY MUCH FOR YOUR HELP.

Rubén

[NikaZhenya]

You can change

$(document).ready(function() {

with

window.addEventListener('load', function () {

and you dont need JQuery

Example:

window.addEventListener('load', function () {
    window.frames["f1"].addEventListener("resize", setup);
});

[RbnJrg]

Originally Posted by NikaZhenya

You can change

$(document).ready(function() {

with

window.addEventListener('load', function () {

and you dont need JQuery

Example:

window.addEventListener('load', function () {
    window.frames["f1"].addEventListener("resize", setup);
});

Great tip! Many thanks for it.