I'm attempting to create a full screen changeable background image. I've spent a long time perfecting it to work on other PC's. It works perfectly on my screen, but on other monitors it changes.
The problem now is that the image is all over the place if the browser is not maximized.
It works fine once maximized.
The background image changes every 5 seconds, so it's not as simple as just setting the background image. Here is my code:
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds)
{
//change the image
if(!imageID)
{
document.getElementById("myimage").src="Minecraft.jpg";
imageID++;
}
else if(imageID==1)
{
document.getElementById("myimage").src="Minecraft1.jpg";
imageID++;
}
else if(imageID==2)
{
document.getElementById("myimage").src="Minecraft2.jpg";
imageID++;
}
else if(imageID==3)
{
document.getElementById("myimage").src="Minecraft4.jpg";
imageID++;
}
else if(imageID==4)
{
document.getElementById("myimage").src="Minecraft5.jpg";
imageID++;
}
else if(imageID==5)
{
document.getElementById("myimage").src="Minecraft6.jpg";
imageID++;
}
else if(imageID==6)
{
document.getElementById("myimage").src="Minecraft7.jpg";
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>
<style>
#myimage {
width: 100%;
height:100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<body>
<body style='background:black; '
onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img id='myimage' src='Minecraft.jpg'/>
</div>
</body>
----------Edit--------------
I used your code (Hopefully correctly) but now the image isn't loading at all.
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds)
{
//change the image
if(!imageID)
{
document.getElementByTagName("body").className="pic1";
imageID++;
}
else if(imageID==1)
{
document.getElementByTagName("body").className="pic2";
imageID++;
}
else if(imageID==2)
{
document.getElementByTagName("body").className="pic3";
imageID++;
}
else if(imageID==3)
{
document.getElementByTagName("body").className="pic4";
imageID++;
}
else if(imageID==4)
{
document.getElementByTagName("body").className="pic5";
imageID++;
}
else if(imageID==5)
{
document.getElementByTagName("body").className="pic6";
imageID++;
}
else if(imageID==6)
{
document.getElementByTagName("body").className="pic7";
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>
</head>
<body>
<body>
<style>
.pic1 { background-image: 'Minecraft.jpg'; }
.pic2 { background-image: 'Minecraft1.jpg'; }
.pic3 { background-image: 'Minecraft2.jpg'; }
.pic4 { background-image: 'Minecraft5.jpg'; }
.pic5 { background-image: 'Minecraft6.jpg'; }
.pic6 { background-image: 'Minecraft7.jpg'; }
</style>
<body style='background:black; '
onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img id='myimage' src='Minecrft.jpg'/>
</div>
</body>
What am I doing wrong?
Using a 100% x 100% absolutely positioned div for your background image is probably what's causing the issue.
Switch to CSS classes on < body >
.pic1 { background-image: '../path/to/image1'; }
.pic2 { background-image: '../path/to/image1'; }
etc
And then instead of changing the src of the image tag you would change the class of < body >. This will allow you to remove the absolute positioning of that div and layout the site "normally".
You can do something like this:
var imageClass = 'pic';
if(imageID) {
imageClass += imageID;
}
document.body.className = imageClass;
imageID++;
And CSS:
.pic {background-image: url(Minecraft.jpg);}
.pic1 {background-image: url(Minecraft1.jpg);}
etc.
To resize the background, you can choose the CSS alternative, which best fits to your site, for example:
body {
background-position: 50% 0%;
background-repeat: no-repeat;
background-size: cover cover;
}
A live demo at jsFiddle.
Related
I am trying to create a page that has a background image that uses the css cover property so that it is responsive in the browser but doesn't get distorted but is chosen by random from an array in jQuery.
I don't have much code because this is the only thing that I am doing at the moment, I've been playing around but I don't have much of a handle on jQuery so I don't really know what I am doing! Any help appreciated!
HTML:
<head>
<title>Test</title>
<link href="css/css.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/jquery.js"></script>
</head>
<body>
<div id="background">
</div>
</body>
CSS:
body {
margin: 0;
}
#background {
width: 100%;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url(backgroundImage)
}
html, body {
overflow: none !important;
overflow-x: none !important;
overflow-y: none !important;
}
jQuery:
var picArr = ['Images/IMG_3764.jpg', 'Images/IMG_3793.jpg', 'Images/IMG_4050.jpg', 'Images/IMG_4323.jpg', 'Images/IMG_4351.jpg', ];
var myNumber = Math.floor(Math.random() * 5);
$(document).ready(function () {
$("background-image").attr('url', picArr[myNumber]);
});
If you want to randomise it, use a setTimeout()
Also, to change the background image on the "background" div, just .css jquery selector like below.
eg
var picArr = ['Images/IMG_3764.jpg', 'Images/IMG_3793.jpg', 'Images/IMG_4050.jpg', 'Images/IMG_4323.jpg', 'Images/IMG_4351.jpg', ];
$(document).ready(function () {
setTimeout(function(){
var myNumber = Math.floor(Math.random() * 5) + 1;
$("#background").css('background-image', 'url('+picArr[myNumber]+')'); //here
}, 3000); // ms of how often you want it to change.
});
Didn't you misstype the selector $("background-image"), isn't this supposed to be $("#background")
var picArr = ['Images/IMG_3764.jpg', 'Images/IMG_3793.jpg', 'Images/IMG_4050.jpg', 'Images/IMG_4323.jpg', 'Images/IMG_4351.jpg', ];
var myNumber = Math.floor(Math.random() * 5);
$(document).ready(function () {
$("#background").attr('url', picArr[myNumber]); //here
});
#background {
width: 100%;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url(backgroundImage)
}
<link href="css/css.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/jquery.js"></script>
<div id="background">
</div>
I guess this has already been answered now but this was my solution:
var picArr = ['http://lorempixel.com/output/fashion-q-c-640-480-1.jpg', 'http://lorempixel.com/output/animals-q-c-640-480-4.jpg', 'http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg'];
var l = picArr.length;
var myNumber = Math.floor(Math.random() * l);
console.log(myNumber);
$(document).ready(function () {
$("#background").attr('style', 'background: url(' + picArr[myNumber]) + ')';
});
CSS:
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
var x = 0;
var frameVideo = "<iframe id='videoplayer' frameborder='0' src='https://www.youtube.com/embed/TPWG33dgdK4?autoplay=1&rel=0&controls=0&showinfo=0&modestbranding=1&enablejsapi=1&origin=https%3A%2F%2Fwww.google.com' width='100%' height='100%'></iframe>";
$(document).ready(function () {
$(".wwhowlbg").attr("title", "Play Video");
});
function startVideo() {
x = 1;
document.querySelector(".wwhowlbg").innerHTML=frameVideo;
}
</script>
<style type="text/css">
.wwhowlbg {
width:640px;
height:360px;
background-color:green;
background-image:url(//static1.squarespace.com/static/54f0e2f7e4b0a7bce1ae4ba2/t/5527f82de4b06a8825578580/1428682798191/?format=500w);
background-repeat:no-repeat;
background-size: 640px 400px;
cursor:pointer;
}
.wwhowlbg:hover {
background-image:url(//lifewithzooza.x10host.com/wwhowldark.png);
}
</style>
<div class="wwhowlbg" onclick="startVideo();"></div>
This is my code for a custom video player. I would like to make it so that when I click on the newly-placed iframe, it then disappears and becomes my green start page again. But, I would like it to continue from where I paused. Is this possible? Thanks.
I am having four classes inside each class a image is called
<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>
and my css class contains
.ban01 { background-image:url(../images/banner/01.jpg); }
.ban02 { background-image:url(../images/banner/02.jpg); }
.ban03 { background-image:url(../images/banner/03.jpg); }
.ban04 { background-image:url(../images/banner/04.jpg); }
and my Jquery is
$(document).ready(function () {
var totDivs = $(".banner ban03").length;
var currDiv = 0;
var myInterval = setInterval(function () {
if (currDiv > totDivs) {
clearInterval(myInterval);
return
}
$(".banner ban03").eq(currDiv).find('class').trigger("click");
currDiv++;
}, 2000);
});
how to call these classes in regular intervals sorry if i repeated the question again
html
<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>
style
.banner { height: 50px }
.ban01 { background: green }
.ban02 { background: blue }
.ban03 { background: red }
.ban04 { background: orange }
javascript
$(document).ready(function () {
var totDivs = $(".banner").length;
var currDiv = 0;
var myInterval = setInterval(change, 2000);
function change(){
$(".banner").hide().eq(currDiv).show();
currDiv = (currDiv + 1) % totDivs;
}
change();
});
http://jsfiddle.net/b2Btj/1/
Did you look on this answer... :-)
jquery-timed-change-of-item-class
Try this while I'm doing your coding. :-D
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.a, .b, .c, .d, .e {
height: 120px;
width: 200px;
}
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}
.d {
background-color: black;
}
.e {
background-color: yellow;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<h1>Testing</h1>
<div id="test" class="a">How Are You Buddy?</div>
<script type="text/javascript">
$( document ).ready(function() {
var array = ['a','b','c','d','e'];//Here is your classes
var len = array.length;
var i=0;
function changeDivClass(d) {
$("#test").removeClass();
$("#test").addClass(array[d]);
}
setInterval(function() {
if(len>=i){
return changeDivClass(i++);
}else{
i=0;
$("#test").removeClass();
$("#test").addClass('a');
}
}, 5000);
});
</script>
</body>
</html>
#Maikay yes I want to rotate the images
Why use JavaScript to rotate image ?
This is possible with only css. Use the property : animation.
.imageRotate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-animation:spin 4s linear 1; // '1' for a single animation, if you need an infinite animation replace '1' by 'infinite'
-moz-animation:spin 4s linear 1;
animation:spin 4s linear 1;
}
#-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
<div id="ban01">
<img class="imageRotate" src="http://socialtalent.co/wp-content/uploads/blog-content/so-logo.png">
</div>
not sure what exactly the click trigger on the banner element will do, but maybe this helps:
$(document).ready(function () {
var totDivs = $(".banner").length;
var currDiv = 0;
var myInterval = setInterval(function() {
if (currDiv > totDivs) {
clearInterval(myInterval);
return;
}
$(".banner").eq(currDiv).trigger("click");
currDiv++;
}, 2000);
});
what you could do is that you could run a for loop if you know the counts of the "div"
for(var count=0;count<3;count++)
{
var totDivs = $(".banner ban0"+count).length;
var currDiv = 0;
var myInterval = setInterval(function () {
if (currDiv > totDivs) {
clearInterval(myInterval);
return
}
$(".banner ban0"+count).eq(currDiv).find('class').trigger("click");
currDiv++;
}, 2000);
}
May this could solve your issue .
I have this section
<section ID="Cover">
<div id="searchEngine">hello</div>
</section>
I want to fade in/out the background image of Cover. I am using the following function to do that but it fades the whole section. Is there a way I can fade the background only? Something like
$("#Cover").css("background-image").fadeOut(); ??
(I am also setting this image for the first time in the below function)
var imageID=0;
var time=0;
function changeimage(every_seconds)
{
//change the image
if(imageID==0)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover1.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
time=1000;
}
else
{
if(imageID==1)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover2.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==2)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover3.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==3)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover4.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==4)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover5.jpg)");
$("#Cover").fadeIn(time);});
imageID=0;
}
}
}
}
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
I agree with TrueBlueAussie, It will be easier, if you are using instead of CSS background-img.
Here is a working sample.
<html>
<head>
<style type="text/css">
#bgImg { position: fixed; width: 100%; height: 100%; top:0; left: 0; z-index: -1;}
#mainContent{width: 960px; margin: 20px auto; padding: 15px; background: #f2f2f2; text-align: center;}
</style>
</head>
<body>
<img src="yourImg.jpg" id="bgImg">
<section id="mainContent">
<h2>Your Heading</h2>
<p>Your content....</p>
<button id="inBtn">Background Image fade in</button>
<button id="outBtn">Background Image fade out</button>
</section>
</body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
/*
resize function
From Dave Jay's Blog
url: http://davejay.exit42design.com/entry/Design/44/
*/
function resize(){
$("#bgImg")
.width($(window).width())
.height($(window).width() * .67);
if($("#bgImg").height() <= $(window).height()){
$("#bgImg")
.height($(window).height())
.width($(window).height() * 1.5);
}
}
$(document).ready(function(){
resize();
$("#inBtn").on("click",function(){
$("#bgImg").fadeIn();
});
$("#outBtn").on("click",function(){
$("#bgImg").fadeOut();
});
});
$(window).resize(function(){ resize(); });
</script>
</html>
I'm trying to start/stop the rotate animation with a button. Not sure what I'm doing something wrong. I'd rather avoid JQuery if possible....I'm already in above my head.
<head>
<style type='text/css'>
#spinner {
-webkit-animation: spin 2s linear infinite;
-webkit-animation-play-state:running;
border: 1px dashed;
border-radius: 50%;
width: 5em;
height: 5em;
margin: 2em auto;
padding: 2em;
}
#-webkit-keyframes spin {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
function spin() {
var spinner = document.getElementById("spinner");
if (spinner.style.webkitAnimationPlayState === 'running') {
spinner.style.webkitAnimationPlayState = 'paused';
document.body.className = 'paused';
} else {
spinner.style.webkitAnimationPlayState = 'running';
document.body.className = '';
}
}
}//]]>
</script>
</head>
<body>
<div id="spinner">spin!</div>
<button onClick="spin();">start/stop</button>
</body>
http://jsfiddle.net/uc9c5/1/
Thanks in advance
Firstly, in your jsFiddle you were running it onLoad in your jsFiddle when you should have been using the No wrap in <head> section option.
Secondly, I've made changes to your CSS - namely, changing -webkit-animation-play-state:running; to -webkit-animation-play-state:paused; as the initial state, ready for the function call to start the animation.
Here's a working jsFiddle.
Edit: In regard to the flicker, it seems like sadly it's a webkit bug.
There are few errors in your code. The click is not triggered. This should work:
http://jsfiddle.net/uc9c5/3/
document.getElementById('button').onclick = function(){
var spinner = document.getElementById("spinner");
if (!spinner.style.webkitAnimationPlayState) {
spinner.style.webkitAnimationPlayState = 'paused';
} else if (spinner.style.webkitAnimationPlayState === 'paused') {
spinner.style.webkitAnimationPlayState = 'running';
} else if (spinner.style.webkitAnimationPlayState === 'running') {
spinner.style.webkitAnimationPlayState = 'paused';
}
}