Databases
StackOverflow2013
Postsdbo
POMake IFrames Scroll Horizontal across page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMake IFrames Scroll Horizontal across page
    text
    copied!<p>Every other person seems to want to remove the horizontal scrolling for IFrames, I want to do the exact opposite.</p> <p>I have an IFrame setup that allows me to scroll vertically down the page, but what about if I want to display them side-by-side and scroll across the pages horizontally. Is there a way that this can be done at all, is it even possible?</p> <p>I currently have the following code to make the frames scroll vertically:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1251"&gt; &lt;title&gt;button up&lt;/title&gt; &lt;!--JQUERY--&gt; &lt;script type="text/javascript"&gt; var iter = 1; var item = 10; var sizeframe= '1350'; function otr() { document.getElementById("Iframe1").src = (item).toString() + ".html"; document.getElementById("Iframe2").src = (item + 1).toString() + ".html"; document.getElementById("Iframe3").src = (item + 2).toString() + ".html"; document.getElementById("Iframe4").src = (item + 3).toString() + ".html"; } function load() { var obj = document.getElementById("body"); var iframe = document.createElement('iframe'); iframe.id = 'Iframe1'; iframe.width = '1000'; iframe.height = sizeframe; obj.appendChild(iframe); iframe = document.createElement('iframe'); iframe.id = 'Iframe2'; iframe.width = '1000'; iframe.height = sizeframe; obj.appendChild(iframe); iframe = document.createElement('iframe'); iframe.id = 'Iframe3'; iframe.width = '1000'; iframe.height = sizeframe; obj.appendChild(iframe); iframe = document.createElement('iframe'); iframe.id = 'Iframe4'; iframe.width = '1000'; iframe.height = sizeframe; obj.appendChild(iframe); otr(); } function funcdown() { item += 1; iter++; var obj = document.getElementById("body"); var iframe = document.createElement('iframe'); iframe.id = "Iframe" + (iter + 3).toString(); iframe.width = '1000'; iframe.height = sizeframe; obj.appendChild(iframe); document.getElementById("Iframe" + (iter + 3).toString()).src = (item + 3).toString() + ".html"; document.getElementById("body").removeChild(document.getElementById("Iframe" + (iter - 1).toString())); } function funcup() { if (item &gt; 10 &amp;&amp; iter &gt; 0) { item -= 1; iter--; var obj = document.getElementById("body"); obj.innerHTML = "&lt;iframe id=\"Iframe" + iter.toString() + "\" width=\"1000\" height=\"1350\"&gt;&lt;/iframe&gt;" + obj.innerHTML; document.getElementById("Iframe" + iter.toString()).src = item.toString() + ".html"; document.getElementById("body").removeChild(document.getElementById("Iframe" + (iter + 4).toString())); } } window.onload = load; &lt;/script&gt; &lt;!-- &lt;script language="JavaScript1.2" src="./btn_up/jquery.js" type="text/javascript"&gt;&lt;/script&gt;--&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body bgcolor="#ffffff" id="body"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $(window).scroll(function () { if (sizeframe * 3 &lt; $(document).scrollTop() &amp;&amp; item &lt; 44) { scrollTo(0, sizeframe * 2); funcdown(); } if (sizeframe * 1 &gt; $(document).scrollTop() &amp;&amp; item &gt; 10) { scrollTo(0, sizeframe * 2); funcup(); } }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>EDIT - Better description of problem</p> <p>The code above loads and unloads iframes from a big folder full of html files, only keeping a maximum of 3 or 4 loaded at any one time but they only stack vertically one above the other. I want the same effect, but so that the page scrolls horizontally, not vertically. Each page is loaded and unloaded depending on which page the user is currently looking at, so if they were viewing page 6, pages 5 and 7 would be loaded above and below respectively, when the user scrolls up to page 5, it unloads page 7 and loads in page 4. I want the same effect, but so that the iframes display horizontally across the page.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload