Epub3 - Spoiler in a list

MikeT! · 06-05-2015, 05:09 PM

Hello everybody!

I'm doing an interactive Index, and i will insert a spoiler for chapters..i thought that is all ok, but epub-checker (like always) doesn't like it

The code is

Code:

<body>
<h2>Index</h2>
<ul id="miniflex">
  <li><a href="../Text/colophon.xhtml" title="">Colophon</a></li>
 <li><a href="../Text/colophon.xhtml" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="spoiler">Capitoli</a></li>
  <div id="spoiler" style="display:none"> 
  <li><a href="../Text/Capitolo1.xhtml" title="">Capitolo 1</a></li>
  <li><a href="../Text/Capitolo2.xhtml" title="">Capitolo 2</a></li>
  <li><a href="../Text/Capitolo3.xhtml" title="">Capitolo 3</a></li>
  <li><a href="../Text/Capitolo4.xhtml" title="">Capitolo 4</a></li>
  <li><a href="../Text/Capitolo5.xhtml" title="">Capitolo 5</a></li>
   ...
   ...
   ...
  </div>
  <li><a href="../Text/playlist.xhtml" title="">Archivio Audio</a></li>
</ul>


</body>
</html>

The problem is simple, XHTML doesn't accept <div> in a list.
( element "div" not allowed here; expected the element end-tag or element "li")
But here is the problem..how i can fix it?
There is another method to insert spoiler in a list?
Thank's for any helpful!

Turtle91 · 06-05-2015, 06:04 PM

Split into more lists??

Code:

<body>
<h2>Index</h2>
<ul id="miniflex">
  <li><a href="../Text/colophon.xhtml" title="">Colophon</a></li>
 <li><a href="../Text/colophon.xhtml" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="spoiler">Capitoli</a></li>
</ul>

  <div id="spoiler" style="display:none"> 
<ul id="miniflex2">
  <li><a href="../Text/Capitolo1.xhtml" title="">Capitolo 1</a></li>
  <li><a href="../Text/Capitolo2.xhtml" title="">Capitolo 2</a></li>
  <li><a href="../Text/Capitolo3.xhtml" title="">Capitolo 3</a></li>
  <li><a href="../Text/Capitolo4.xhtml" title="">Capitolo 4</a></li>
  <li><a href="../Text/Capitolo5.xhtml" title="">Capitolo 5</a></li>
   ...
   ...
   ...
 </ul>
</div>

<ul id="miniflex3">
  <li><a href="../Text/playlist.xhtml" title="">Archivio Audio</a></li>
</ul>


</body>
</html>

Jellby · 06-06-2015, 02:44 AM

It looks like a nested list is meant:

Code:

<ul>
<li>Colophon</li>
<li>Capitoli
    <ul id="spoiler">
    <li>Capitolo 1</li>
    <li>Capitolo 2</li>
    ...
    </ul></li>
<li>Archivio Audio</li>
</ul>

Or you should apply the display and onclick properties to the individual items:

Code:

<ul>
<li>Colophon</li>
<li>Capitoli</li>
<li class="spoiler" style="display:none">Capitolo 1</li>
<li class="spoiler" style="display:none">Capitolo 2</li>
...
<li>Archivio Audio</li>
</ul>

(and modify the javascript so that it alters the display property for each and every li element with class="spoiler")

kovidgoyal · 06-06-2015, 04:31 AM

Or use <div class="list-item"> instead of <li> and set the list display properties via CSS. Gotta love epubcheck.

MikeT! · 06-06-2015, 06:35 AM

Quote:

Originally Posted by Turtle91

Split into more lists??

Lol, you're right

So, i create in CSS miniflex2 and miniflex3

The code now in Xhtml is

Code:

<h2>Index</h2>
<ul id="miniflex">
  <li><a href="../Text/colophon.xhtml" title="">Colophon</a></li>
 <li><a href="../Text/colophon.xhtml" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="spoiler">Capitoli</a></li>
  </ul>  
   <ul id="miniflex3">
  <li><a href="../Text/playlist.xhtml" title="">Archivio Audio</a></li>
  <li><a href="../Text/Immagini.xhtml" title="">Archivio Immagini</a></li>
  <li><a href="../Text/Dettagli.xhtml" title="">Dettagli</a></li>
</ul>

  <div id="spoiler" style="display:none"> 
   <ul id="miniflex2">
  <li><a href="../Text/Capitolo1.xhtml" title="Capitolo 1">Capitolo 1</a></li>
  <li><a href="../Text/Capitolo2.xhtml" title="Capitolo 2">Capitolo 2</a></li>
  ...
  ...
    </ul>
  </div>


</body>
</html>

And all is ok!
Now the spoiler is perfect, with a little adjustment of CSS

Menu now is like this

Thank's all!!

MikeT! · 06-08-2015, 05:48 AM

Sorry if i re-open, but i'ill try the index on Azardi and Rreadium (two software for Epub3) and no one open the spoiler, if i click on it epub change page!
Do you know why? I thought it was all ok..

Notjohn · 06-09-2015, 06:12 AM

How has Epub 3 worked for you otherwise? Do you upload Epub 3 books to Amazon's KDP platform, and do they convert okay?

MikeT! · 06-09-2015, 11:47 AM

Quote:

Originally Posted by Notjohn

How has Epub 3 worked for you otherwise? Do you upload Epub 3 books to Amazon's KDP platform, and do they convert okay?

Sorry but i don't understand your answer
I have an Epub3, epub checker tell me that is all ok now, but if i read it on softwares for Epub3 spoiler doesn't work.
Do you know why? It's my problem or the software is bad?
Thank's for any reponse

Naturally this ebook is mine, I created it from 0

Notjohn · 06-10-2015, 05:56 AM

I was asking if you had successfully uploaded an Epub3 to Amazon's Kindle Direct Publishing platform, and whether it converted successfully there. This question has come up on the KDP publishers' forum.

(In other words, I hijacked your thread in hopes of answering my own question....)

Doitsu · 06-10-2015, 05:43 PM

Quote:

Originally Posted by MikeT!

Sorry if i re-open, but i'ill try the index on Azardi and Rreadium (two software for Epub3) and no one open the spoiler, if i click on it epub change page!
Do you know why? I thought it was all ok..

I don't know why your solution doesn't work, but have you looked into pure CSS solutions with hidden checkboxes?
They appear to work fine with iBooks, Readium and ADE 4 and pass ePubCheck 3/4.

@Notjohn: According to the Kindle Publishing Guidelines, KindleGen supports only a subset of the ePub3 standard, and only the boring stuff. Since there aren't any good free ePub3 editors available and converting ePub2 files to ePub3 files would mean extra work without any real benefit, there's no point in creating and uploading ePub3 files to KDP.

MikeT! · 06-12-2015, 03:37 AM

Quote:

Originally Posted by Doitsu

They appear to work fine with iBooks, Readium and ADE 4 and pass ePubCheck 3/4.

Very cool thing, this is better than JS. I try it on Azardi and it work greatful. Thank's you,

Notjohn · 06-13-2015, 06:21 AM

Thank you, Doitsu!

06-06-2015, 02:44 AM	#3
Jellby frumious Bandersnatch Posts: 7,543 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	It looks like a nested list is meant: Code: <ul> <li>Colophon</li> <li>Capitoli <ul id="spoiler"> <li>Capitolo 1</li> <li>Capitolo 2</li> ... </ul></li> <li>Archivio Audio</li> </ul> Or you should apply the display and onclick properties to the individual items: Code: <ul> <li>Colophon</li> <li>Capitoli</li> <li class="spoiler" style="display:none">Capitolo 1</li> <li class="spoiler" style="display:none">Capitolo 2</li> ... <li>Archivio Audio</li> </ul> (and modify the javascript so that it alters the display property for each and every li element with class="spoiler")

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Epub3 XHTML Validation epub3	Ramesh Arpitha	ePub	5	06-30-2014 08:32 PM
New Errors Converting epub3 -> zip -> epub3	Lola25	ePub	2	11-12-2013 09:37 PM
Question Re: The Lost Symbol [Spoiler]	Marco Antonio	Reading Recommendations	3	09-30-2009 03:18 AM
Spoiler tag not working	pilotbob	Feedback	15	06-26-2009 01:12 AM
The Movie Spoiler	faie	Lounge	1	06-21-2004 04:15 PM

06-06-2015, 04:31 AM	#4
kovidgoyal creator of calibre Posts: 45,176 Karma: 27110894 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Or use <div class="list-item"> instead of <li> and set the list display properties via CSS. Gotta love epubcheck.

06-08-2015, 05:48 AM	#6
MikeT! Junior Member Posts: 9 Karma: 10 Join Date: May 2015 Device: Kobo	Sorry if i re-open, but i'ill try the index on Azardi and Rreadium (two software for Epub3) and no one open the spoiler, if i click on it epub change page! Do you know why? I thought it was all ok..

06-09-2015, 06:12 AM	#7
Notjohn mostly an observer Posts: 1,518 Karma: 987654 Join Date: Dec 2012 Device: Kindle	How has Epub 3 worked for you otherwise? Do you upload Epub 3 books to Amazon's KDP platform, and do they convert okay?

06-10-2015, 05:56 AM	#9
Notjohn mostly an observer Posts: 1,518 Karma: 987654 Join Date: Dec 2012 Device: Kindle	I was asking if you had successfully uploaded an Epub3 to Amazon's Kindle Direct Publishing platform, and whether it converted successfully there. This question has come up on the KDP publishers' forum. (In other words, I hijacked your thread in hopes of answering my own question....)

06-13-2015, 06:21 AM	#12
Notjohn mostly an observer Posts: 1,518 Karma: 987654 Join Date: Dec 2012 Device: Kindle	Thank you, Doitsu!

Advert

Advert