Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 11-05-2012, 12:08 PM   #1
amherst
Junior Member
amherst began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Nov 2012
Device: iPad
Embedded interactive JavaScript in EPUB for iPad

Hi everyone,

I'm converting a Comp Sci textbook to EPUB3 format and I'd like to include interactive JavaScript for the purpose of explaining topics within the textbook. Is this even possible?

I have been trying to get things to work by using the <canvas> tags in the .xhtml files pointing to JavaScript code, but it is not working. The intended platform is the iPad, although being able to read and implement the interactive features in a browser would be a major plus.

IF I can get this to actually work would you consider this a straightforward procedure, a seriously complicated endeavor or somewhere in between?

I have been looking EVERYWHERE to figure this out and cannot seem to find any examples of anybody being successful doing this.

Thanks!
amherst is offline   Reply With Quote
Old 11-05-2012, 12:46 PM   #2
Khululekani
Junior Member
Khululekani began at the beginning.
 
Posts: 2
Karma: 10
Join Date: Nov 2012
Device: none
Hi, it is possible, just use javascript and html and you are good to go. I can hook you up with an example if you like. I have an epub that plays bring up a javascript popup window to auto play the video, also i have an interactive jquery map running within the epub format.

keep in mind that an epub is basically html pages.

hope that helps.

Quote:
Originally Posted by amherst View Post
Hi everyone,

I'm converting a Comp Sci textbook to EPUB3 format and I'd like to include interactive JavaScript for the purpose of explaining topics within the textbook. Is this even possible?

I have been trying to get things to work by using the <canvas> tags in the .xhtml files pointing to JavaScript code, but it is not working. The intended platform is the iPad, although being able to read and implement the interactive features in a browser would be a major plus.

IF I can get this to actually work would you consider this a straightforward procedure, a seriously complicated endeavor or somewhere in between?

I have been looking EVERYWHERE to figure this out and cannot seem to find any examples of anybody being successful doing this.

Thanks!
Khululekani is offline   Reply With Quote
Old 11-05-2012, 01:59 PM   #3
amherst
Junior Member
amherst began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Nov 2012
Device: iPad
Hi Khululekani,

That's what I've been doing, inserting canvas tags and reference to the js file in the html within the epub but i can't get it to work. I would LOVE to check out an example! I've been looking everywhere for one. Thank you!
amherst is offline   Reply With Quote
Old 11-06-2012, 11:11 PM   #4
whbenson
Enthusiast
whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.
 
Posts: 37
Karma: 493532
Join Date: May 2010
Device: ipad
Here's one that works in Sigil (and I assume iBooks)
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
  <script type="text/javascript">
  //<![CDATA[
function draw_square() {
   var c1 = document.getElementById("c1");
   var c1_context = c1.getContext("2d");
   c1_context.fillStyle = "#f00";
   c1_context.fillRect(50, 50, 100, 100);
}
  //]]>
  </script>

</head>
<body>

<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas>
<div>
<button onclick="draw_square();return true;">Red Square</button> 
</div>
</body>
</html>
This is taken directly from http://www.html5tutorial.info/html5-canvas-rect.php where you can find many other examples...
-Bill
whbenson is offline   Reply With Quote
Old 11-12-2012, 02:11 PM   #5
amherst
Junior Member
amherst began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Nov 2012
Device: iPad
Hi Bill,

Thank you very much for your reply. I used the sample code above in Sigil, but when I save the file Sigil removes the line with the canvas tags! In fact when I save any line with the canvas tags in Sigil the line is removed....??? Can you or anyone else answer why this happens?

Thank you!
amherst is offline   Reply With Quote
Old 11-12-2012, 05:39 PM   #6
mrmikel
Book Twiddler
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 1,910
Karma: 1405001
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
Sigil is an EPUB2 editor and it makes valid EPUB2. The things you have been talking about are EPUB3. It will knock them out on purpose.

Sigil will be updated to EPUB3 in due course, but there are few readers that display EPUB3. Apple does its own version of EPUB3 as I understand it.
mrmikel is offline   Reply With Quote
Old 11-13-2012, 08:51 PM   #7
whbenson
Enthusiast
whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.
 
Posts: 37
Karma: 493532
Join Date: May 2010
Device: ipad
Ah, there's a new preferences feature in the latest Sigil (Preferences>Clean Source>Off) that disables the Tidy cleanup process and leaves non-epub2 tags in place. Use with caution, of course.

btw, I just tried this in iBooks and it does indeed work there.
-Bill
whbenson is offline   Reply With Quote
Old 11-14-2012, 06:37 AM   #8
PageLab
Connoisseur
PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.
 
PageLab's Avatar
 
Posts: 70
Karma: 515184
Join Date: Sep 2011
Location: Brasília
Device: Kindle3, iPad, Nook, Kobo, Positivo Alfa
For more information about how Javascript works in iBooks – with some useful code examples – have a look at the "ibooks.js" file that resides inside the "Fixed Layout EPUB Example". Also, the iBooks Asset Guide (PDF) have a very informative section about Javascript in ePUBs. You can get both files with a free books account in iTunes Connect.
PageLab is offline   Reply With Quote
Old 11-14-2012, 07:18 AM   #9
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 1,833
Karma: 4525859
Join Date: Dec 2010
Device: Kindle 3, PW2
Quote:
Originally Posted by PageLab View Post
You can get both files with a free books account in iTunes Connect.
Only if you have a Mac with OS X v10.6 or higher.
Doitsu is offline   Reply With Quote
Old 11-14-2012, 07:41 AM   #10
PageLab
Connoisseur
PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.
 
PageLab's Avatar
 
Posts: 70
Karma: 515184
Join Date: Sep 2011
Location: Brasília
Device: Kindle3, iPad, Nook, Kobo, Positivo Alfa
You don't need a Mac to create a free books account and download these files I mentioned. You only need it to upload ePUBs to iBookstore, using the iTunes Producer app (Mac only).
PageLab is offline   Reply With Quote
Reply

Tags
canvas, epub, ipad, javascript, textbook

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Javascript in ePub Techno4 ePub 9 11-05-2012 12:50 PM
Javascript in ePub. Vijay ePub 19 11-09-2011 09:17 PM
iPad Interactive ebooks in iPad... how? abrakatabra Apple Devices 4 06-10-2011 06:59 PM
epub et javascript zelda_pinwheel Software 9 12-09-2010 04:56 PM
Penguin Interactive Books for the iPad: Concept Demo daffy4u News 3 03-11-2010 11:33 AM


All times are GMT -4. The time now is 01:17 AM.


MobileRead.com is a privately owned, operated and funded community.