Databases
StackOverflow2013
Postsdbo
POOffscreen div causes window to expand only in mobile browser
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POOffscreen div causes window to expand only in mobile browser
    primarykey
    data
    text
    <p>I am putting together a site for an anti-bullying program at my school and I am trying to include a fun and animated background. I decided that moving clouds looked sort of cool, so I implemented them into the background. Earlier on, I had this bug where offscreen clouds would stretch the page and add a scrollbar to the bottom of the page going horizontally. I fixed this by making the body div have this css style:</p> <pre><code>overflow:hidden; </code></pre> <p>That solved the problem for desktop browsers, but when I view the site on my iPad and phone it lets me scroll over to the side when the cloud progresses to that point. Does anyone have any ideas as to what is happening? Thank you.</p> <p>Here is my index.php file:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;link rel="stylesheet" type="text/css" href="stylesheet.css" /&gt; &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;title&gt; Stop It! &lt;/title&gt; &lt;/head&gt; &lt;body id="body"&gt; &lt;div id="env"&gt; &lt;img class="envimg" id="people" src="peeps.png" alt="people" /&gt; &lt;img class="envimg" id="school" src="school.png" alt="school" /&gt; &lt;/div&gt; &lt;div id="sunmoon"&gt; &lt;img id="sunmoonimg" src="sun.png" alt="sun" /&gt; &lt;/div&gt; &lt;div id="grass"&gt;&lt;/div&gt; &lt;div class="cloud" id="cloud1"&gt;&lt;img src="cloud.png" /&gt;&lt;/div&gt; &lt;script type="text/javascript" src="environment.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here is my stylesheet:</p> <pre><code>* { margin:0px; padding:0px; } #grass { left: 0px; background-repeat: repeat; background-image: url(grass.jpg); bottom:0px; margin:0px; position:absolute; padding:0px; font-size:15px; height: 200px; width: 100%; } #env { z-index: 1; position:absolute; height:500px; bottom:0px; width:100%; left:0px; } .envimg { bottom:0px; position:absolute; float:left; display:block; margin-left:auto; margin-right:auto; } #people { right: 50%; left: 50%; margin-right: -439px; margin-left: -438px; z-index:2; } #school { right: 50%; left: 50%; margin-right: -300px; margin-left: -300px; margin-bottom: 0px; z-index:1; } body, html { overflow:hidden; } .cloud { bottom: 0px; left: -600px; position:absolute; } #sunmoon { position:absolute; top:100px; right:200px; z-index:-1; height:300px; } #sunmoonimg { height:300px; } #content { display:block; margin-left:auto; margin-right:auto; width:1000px; margin-top:50px; background-color:white; } </code></pre> <p>Here is the javascript file that controls cloud movement and some other stuff:</p> <pre><code>var windowheight = window.innerHeight - 600; var cloud = document.getElementById("cloud1"); var cloudpos = Math.random() * windowheight; cloud.style.top = cloudpos + 'px'; cloud.style.left = '-600px'; var cloudx = -600; var school = document.getElementById("school"); var peeps = document.getElementById("people"); var t = setInterval("movecloud()",1000/60); var cloudvel = 0.5; function startCloud() { cloudx = -600; cloudpos = Math.random() * windowheight; } function movecloud() { cloudx = cloudx + cloudvel; cloud.style.left = cloudx + "px"; if(cloudx &gt; window.innerWidth) { startCloud(); } } var date = new Date(); var time = date.getUTCHours(); if (time &lt; 2 || time &gt; 16) { //if day time document.getElementById("body").style.backgroundColor = "#81bcff"; document.getElementById("sunmoonimg").src = "sun.png"; } if (time &gt;= 2 &amp;&amp; time &lt;= 16) { //if night time document.getElementById("body").style.backgroundColor = "#243447"; document.getElementById("sunmoonimg").src = "moon.png"; } </code></pre> <p>Here is a link to my site with a demo: <a href="http://www.keirp.com/stopit" rel="nofollow">http://www.keirp.com/stopit</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USKeiran Paster
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CONo problems on my motorola droid (surprisingly). Have you tried creating a wrapper div that has `overflow:hidden;` as opposed to putting that on the body? That has been a problem for me in the past.
      singulars
      1. POOffscreen div causes window to expand only in mobile browser
      1. USJeffrey Sweeney
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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