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:
overflow:hidden;
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.
Here is my index.php file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="jquery.js"></script>
<title>
Stop It!
</title>
</head>
<body id="body">
<div id="env">
<img class="envimg" id="people" src="peeps.png" alt="people" />
<img class="envimg" id="school" src="school.png" alt="school" />
</div>
<div id="sunmoon">
<img id="sunmoonimg" src="sun.png" alt="sun" />
</div>
<div id="grass"></div>
<div class="cloud" id="cloud1"><img src="cloud.png" /></div>
<script type="text/javascript" src="environment.js"></script>
</body>
</html>
Here is my stylesheet:
*
{
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;
}
Here is the javascript file that controls cloud movement and some other stuff:
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 > window.innerWidth)
{
startCloud();
}
}
var date = new Date();
var time = date.getUTCHours();
if (time < 2 || time > 16)
{
//if day time
document.getElementById("body").style.backgroundColor = "#81bcff";
document.getElementById("sunmoonimg").src = "sun.png";
}
if (time >= 2 && time <= 16)
{
//if night time
document.getElementById("body").style.backgroundColor = "#243447";
document.getElementById("sunmoonimg").src = "moon.png";
}
Here is a link to my site with a demo: http://www.keirp.com/stopit
