• Register
Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.

Scrolling pages without using an iframe

0 votes
I make magazines that include Business Listings. I pull these listings from a database and display them in an iframe. That works great on everything EXCEPT Safari Mobile. Phone and email links within the iframe on Safari mobile do not work correctly.

So, only a couple of results can be seen without scrolling so scrolling through the results is a must. I use the single file, page peel flipbook style with the Control Frame at the bottom. Is there any way to have a long page that scrolls and still have the control frame without using an i-frame?

Here is an example book, the listings are on the last page (you can click the Table of contents button, I have it going straight to the listing instead of the TOC): http://chambervu.com/liberty/index.php
asked May 4 in how_to by dnevels (280 points)
Here is a code snippett of what I am currently using. After index.html is created by In5, I plugin this code in the HTML boxes and rename to index.php:

 <li class="page" data-name="93">
    <div class="page-scale-wrap"><img src="assets/images/blank.gif" class="pageItem hd" alt="Referral AND Relocation Guide 2018 Chamber of Commerc" id="item26663" data-src="assets/images/item_26663.png"/><img src="assets/images/blank.gif" class="pageItem hd" alt="Category " style="left:37px !important;top:184px !important;" id="item26576" data-src="assets/images/item_26576.png"/>
      <div id="item26599" class="pageItem embed-container" style="width:200px !important; height:16px !important; left:128px !important;top:184px !important;" alt="HTML"><?php
$conn = new mysqli("localhost","","","") or die($this->mysqli->error);
$result = $conn->query("select DISTINCT Bus_categories from cmsb_frisco ORDER BY Bus_categories ASC");
    echo "<form action='catlist.php' style='width: 500px' target='searchFrame' method='get' >";
    echo "<select style='font-size:14px;height:20px;' name='category_select' onchange='this.form.submit()'>";
    echo "<option  value=''selected>Select Business Category</option>";
    while ($row = $result->fetch_assoc()) {

                  $name = $row['Bus_categories'];
                  echo '<option  value="'.$name.'">'.$name.'</option>';

    echo "</select></form></br></br></br>";
?></div><img src="assets/images/blank.gif" class="pageItem hd" alt="Alphabetically " style="left:37px !important;top:231px !important;" id="item26603" data-src="assets/images/item_26603.png"/>
      <div id="item26626" class="pageItem embed-container" style="width:200px !important; height:16px !important; left:160px !important;top:231px !important;" alt="HTML"><form name="alphasearch" action="ialphalist.php" target="searchFrame">
        <select style="font-size:14px;height:20px;" name="alphasearch" onchange="this.form.submit()">
          <option value="" selected>Select the First letter of the Business Name</option>
          <option value="[0-9]">0-9</option>
          <option value="a%">A</option>
          <option value="b%">B</option>
          <option value="c%">C</option>
          <option value="d%">D</option>
          <option value="e%">E</option>
          <option value="f%">F</option>
          <option value="g%">G</option>
          <option value="h%">H</option>
          <option value="i%">I</option>
          <option value="j%">J</option>
          <option value="k%">K</option>
          <option value="l%">L</option>
          <option value="m%">M</option>
          <option value="n%">N</option>
          <option value="o%">O</option>
          <option value="p%">P</option>
          <option value="q%">Q</option>
          <option value="r%">R</option>
          <option value="s%">S</option>
          <option value="t%">T</option>
          <option value="u%">U</option>
          <option value="v%">V</option>
          <option value="w%">W</option>
          <option value="x%">X</option>
          <option value="y%">Y</option>
          <option value="z%">Z</option>
      <div id="item26631" class="pageItem scroll-vert" alt="Rectangle">
        <div id="item26632" class="pageItem embed-container" style="width:504px !important; height:1608px !important; left:5px !important;top:1px !important;" alt="HTML"><iframe src="" height="1600px" width="500px" name="searchFrame">&nbsp;</iframe>
      </div><img src="assets/images/blank.gif" class="pageItem hd" alt="Browse by " style="left:37px !important;top:156px !important;" id="item26636" data-src="assets/images/item_26636.png"/>

1 Answer

0 votes
You could use the Scrolling Frame add-on:
answered May 7 by justin (135,050 points)