09-18-2015, 03:33 PM | #1 |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Help with a javascript
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 |
09-20-2015, 04:43 PM | #2 |
Grand Sorcerer
Posts: 5,584
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
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.) Last edited by Doitsu; 09-20-2015 at 04:47 PM. |
Advert | |
|
09-20-2015, 09:06 PM | #3 | |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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; 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 |
|
09-28-2015, 01:31 PM | #4 |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
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. |
09-28-2015, 03:01 PM | #5 |
Grand Sorcerer
Posts: 5,584
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
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:
Code:
$(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.) 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. |
Advert | |
|
09-28-2015, 07:11 PM | #6 | |||
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
window.addEventListener("load", setup); Code:
$(document).ready(function() { window.frames["f1"].addEventListener("resize", setup); }); Quote:
Quote:
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 |
|||
03-30-2017, 08:37 PM | #7 |
Junior Member
Posts: 5
Karma: 10
Join Date: Mar 2017
Location: MX
Device: Calibre
|
Without JQuery
You can change
Code:
$(document).ready(function() { Code:
window.addEventListener('load', function () { Example: Code:
window.addEventListener('load', function () { window.frames["f1"].addEventListener("resize", setup); }); |
03-31-2017, 11:38 AM | #8 |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Great tip! Many thanks for it.
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Javascript in ePub. | Vijay | ePub | 22 | 12-28-2023 09:43 AM |
Glo HTML/javascript ? | nicopilami | Kobo Developer's Corner | 1 | 09-12-2015 01:33 PM |
Javascript and Bookmarklets | Polvo | Kindle Developer's Corner | 0 | 10-17-2010 05:54 AM |
I need Javascript help | Nate the great | Workshop | 4 | 04-04-2009 12:55 AM |
iLiad Javascript? | jsc | iRex Developer's Corner | 1 | 09-10-2006 07:17 AM |