5 Replies Latest reply: May 17, 2012 6:02 AM by MichiHenning
ialfar0 Level 1 Level 1 (0 points)

I am creating an interactive epub in which the user can select a value by using a slider bar. I am using xhtml files and and input type="range" to create the slider.

When the slider is on the first page of the book, it works properly. However, when the slider is on the second page, when I touch it the marker goes to the right part of the slider and it is impossible to select any other position.

I write you an example of the xhtml file:

 

 

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!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>Example of slider bar problem</title>

   <link charset="utf-8" href="./Styles/main.css" media="screen" rel="stylesheet" type="text/css" />

   <link charset="utf-8" href="./Styles/plot.css" media="screen" rel="stylesheet" type="text/css" />

</head>

  <body>

<h3>Example of slider bar problem</h3>

<h1 id="heading_id_2">Subtitle</h1>

<canvas id="canvas" width="340" height="415"></canvas>

<p>Lorem ipsum dolor sit amet, suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue wisi enim nunc ultricies dolor sit, magna tincidunt. Maecenas aliquam est maecenas ligula nostra.</p>

<form action="#" id="inputdata" method="">

    <dl>

      <dt><label for="wdim">Temperatura :</label></dt>

      <dd><input id="wdim" max="1" min="0" name="wdim" step="0.01" type="range" value="0.5" /> <span class="error" id="resw"></span></dd>

    </dl>

  </form>

  <div style="clear: both;"></div>

  <script charset="utf-8" type="text/javascript">

    //<![CDATA[

    window.addEventListener("load", ui.init, false);

    //]]>

  </script>

 

 

If I create the epub and I open in my ipad3, the slider is on the first page and everything is OK. But if i select a bigger type font, the slider is now on the second page and doesn't work.

Any suggestion?


iPad
  • 1. Re: slider bar not working
    K T Level 7 Level 7 (23,700 points)

    But if i select a bigger type font,

    What fonts are you using?

     

    Have you confirmed they exist on iOS/iPad?

  • 2. Re: slider bar not working
    ialfar0 Level 1 Level 1 (0 points)

    Sorry, I didn't explain very well when I found the problem, it is not about the type font but the size font.

    The problem appears when I try to read the book. For the same book, if the slider is on the first page there is not problem. When it is on the second page, it doesn't work. To move the slider from one page to the other using only the ipad one possibility is to touch on the ritght upper part of the book the symbol with the small and big A and to enlarge the size. Another way to get the slider on the second page is to rotate the ipad, putting it horizontally and thus reading two smaller pages at the same time. Also I found the problem when I tried to read the book using an iphone, with a smaller screen.

     

    I am using Anthemion eCub to create the epub. Could it be the problem?

     

    I have written a simple page just with some text and the slider, and the problem is still there.

     

    <?xml version="1.0" encoding="utf-8" standalone="no"?>

    <!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>Example of slider bar problem</title>

    </head>

     

    <body>

       <p>Lorem ipsum dolor sit amet, suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue wisi enim nunc ultricies dolor sit, magna tincidunt. Maecenas aliquam est maecenas ligula nostra.</p>

       <p>Lorem ipsum dolor sit amet, suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue wisi enim nunc ultricies dolor sit, magna tincidunt. Maecenas aliquam est maecenas ligula nostra.</p>

       <p>Lorem ipsum dolor sit amet, suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue wisi enim nunc ultricies dolor sit, magna tincidunt. Maecenas aliquam est maecenas ligula nostra.</p>

     

      <form action="#" id="inputdata" method="">

        <dl>

          <dt><label for="wdim">Temp :</label></dt>

          <dd><input id="wdim" max="1" min="0" name="wdim" step="0.01" type="range" value="0.5" /> <span class="error"        id="resw"></span></dd>

        </dl>

      </form>

     

    </body>

     

    </html>

     

    Thank you so much

  • 3. Re: slider bar not working
    MichiHenning Level 4 Level 4 (1,350 points)

    This smells like a bug. I would try to simplify more, pulling the slider out of the form, and removing JavaScript code, so you start with the simplest possible scenario.

     

    Michi.

  • 4. Re: slider bar not working
    ialfar0 Level 1 Level 1 (0 points)

    Thanks

    I have tried this, now I have only some plain text and the slider:

    <input type="range" name="rango" />

    and the problem is still here.

  • 5. Re: slider bar not working
    MichiHenning Level 4 Level 4 (1,350 points)

    Looks like a bug then. If you haven't already, join the Apple Developer Program (free) and report the bug. That's probably the best way to get their attention. I've received timely and construtive replies from developers in response to bugs I reported.

     

    I wouldn't bother with the iBooks Author Feedback thing. They must be getting 2000+ messages a week from people who think they know precisely what iBooks Author should look like…

     

    Michi.