As part of my website projects, I would like to add a script, javascript or whatever, that changes the background image, but the problem is, I'm don't know how to program with Java. I only know Lua, HTML, & CSS.
The reason for that is because I'd like the background image to change after 5 seconds (fades into another image) and then again to another. A loop.
I have found something but it's said that it doesn't work:
<script language="JavaScript">
var Rollpic1 = "1.jpg";
var Rollpic2 = "2.jpg";
var Rollpic3 = "3.jpg";
var PicNumber=1;
var NumberOfPictures=3;
var HowLongBetweenPic=5;
function SwitchPic(counter){
if(counter < HowLongBetweenPic){
counter++;
document.roll.src = eval("Rollpic" + PicNumber);
CallSwitchPic=window.setTimeout("SwitchPic("+counter+")",1500);
}
else{
if(PicNumber < NumberOfPictures){
PicNumber++;
SwitchPic(0);
}
else{
PicNumber=1;
SwitchPic(0);
}
}
}
</script>
<body onload="SwitchPic(0)">
<img src="1.jpg" height="300" width="400" border="0" name="roll">
This will do it:
<script>
document.body.style.backgroundImage="url('path/to/background.png')";
</script>
Or if you want it to happen when you click something:
<script>
function change() {
document.body.style.backgroundImage="url('path/to/background.png')";
}
</script>
<input type="button" onclick="change()" value="Change it" />
To have some code loop on a timer:
<script>
function timedCount() {
// some code here
setTimeout("timedCount()",1000); //1000 milliseconds
}
</script>
Run that function ^ somehow (like with the onclick hander of a button as shown above) and it will loop forever, executing the function every 1000 ms
By the way, Java has nothing to do with Javascript. They're completely separate and are very different.
You can use CSS with Javascript to accomplish this easily like this:
<style>
.myImageClass { background-image: url(images/header.jpg); }
.extraClass { background-image: url(images/extra.jpg); }
</style>
<script type="text/javascript">
function changeMyBackground(elementID, myClassName = 'myImageClass'){
document.getElementById(elementID).className=myClassName;
}
// Change BG of element with id bgImage with the default class 'myImageClass'
changeMyBackground('bgImage');
// or change the bg of the element with id bgImage using a custom class.
changeMyBackground('bgImage', 'extraClass');
</script>
Define an ID to the element like this:
<body id="bgImage">
CONTENT
</body>
Is there a reason your not setting the background image in CSS?
Using jQuery is very easy, for example if you wanted to set a background on the body
$("body").css("background","url('images/bg.png')");
And don't forget to include jQuery in your header by:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
Maybe this will do:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var imageIndex = 0;
var imagesArray = new Array();
//Set Images
imagesArray[0] = "images/one.png";
imagesArray[1] = "images/two.png";
imagesArray[2] = "images/three.png";
function changeBackground(){
$("body").css("background","url('"+ imagesArray[imageIndex] +"')");
imageIndex++;
if (imageIndex > imageArray.length)
imageIndex = 0;
}
$(document).ready(function() {
setInterval("changeBackground()",5000);
});
</script>
</head>
To achieve a fade out transition to a new image you are better using an image tag . Inserting the new image with a lower z-index than the old image so it sits behind it. Next you fade out the old image and update the z-index of the new image.
I would recommend using JQuery cycle plugin (http://jquery.malsup.com/cycle/) because it will be easier for you to follow. Your code would therefore be:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src=”jquery.cycle.all.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.pics’).cycle({
fx: ‘fade’,
speed: 5000
});
});
</script>
</head>
<body>
<div class=”pics”>
<img src=”image/one.png” />
<img src=”image/two.png” />
<img src=”image/three.png” />
</div>
</body>
</html>
Related
So this is what i did when i used the put the JavaScript on a separate page: Why is it not working?????(And i made sure the source page name is yellow.js and i just dont know how to seperate the javascript file on here)
<!DOCTYPE html>
<html>
<head>
<script src="yellow.js"></script>
</head>
<body>
<h1 id="box" onload="change()">NBA Legends</h1>
</body>
</html>
function change() {
var box = document.getElementById("box");
boxStyle = box.style;
boxStyle.color = 'red';
}
window.onload = function change()
{
var box = document.getElementById("box");
var boxStyle = box.style;
boxStyle.color = 'red';
}
<!DOCTYPE html>
<html>
<head>
<script src="yellow.js"></script>
</head>
<body>
<h1 id="box" onload="change()">NBA Legends</h1>
</body>
</html>
Here is the difference between both
window.onload - it is called after all DOM, JS files, Images, Iframes, Extensions and others completely loaded. This is equal to $(window).load(function() {});
onload="" - It is called once DOM loaded. This is equal to $(document).ready(function() {});
It is always good to write clean code and I always prefer to use window.onload, instead of using onload event on element.
First put your javascript code into the body.If you want to change color when the page load you can use window.onload = change() event. And your boxStyle variable is not defiend before you use it.I did some changes .
<body>
<h1 id="box">NBA legends</h1>
<script type="text/javascript">
function change() {
var box = document.getElementById("box");
var boxStyle = box.style;
boxStyle.color = 'red';
}
window.onload = change();
</script>
</body>
HTML CODE:
I HAD TO ADD SOMETHING TO DESCRIBE THE CODE, DONO Y
so obviously this is html code, don't know why its not running.
the code after this is javascript. If my code is very bad and doesn't make any sense, what im looking for is basically a way to use loadqueue to load an image and then set it as a background for a game.
<!DOCTYPE html>
<html>
<head>
<title>My Game</title>
<link href="assets/MyGame.css" rel="stylesheet" type="text/css"/>
<script src="https://code.createjs.com/preloadjs-0.6.1.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script language="javascript" type="text/javascript"
src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script language="javascript" type="text/javascript" src="MyGame.js"
></script>
</head>
<body>
<canvas id="demoCanvas" width="1000" height="700"></canvas>
</body>
</html>
var stage;
window.onload = function()
{
var queue = new createjs.LoadQueue(true);
queue.on("fileload", handleFileLoad, this);
queue.loadFile({id:"image", src:"assets/space.jpg"});
queue.load();
stage = new createjs.Stage("demoCanvas");
}
function handleFileLoad(event) {
// A reference to the item that was passed in to the LoadQueue
var item = event.item;
var type = item.type;
// Add any images to the page body.
if (type == createjs.LoadQueue.IMAGE) {
stage.addChild(event.result)
stage.update;
}
}
I believe that stage.update; should be stage.update(); as it is a method and not a property
I can spot two immediate issues:
you are trying to add the loaded image directly to the stage. It needs to be wrapped in a Bitmap first: stage.addChild( new createjs.Bitmap( event.result ));
you aren't calling stage.update() - you forgot the parenthesis.
My html is
<div id="ctup-ads-widget-2" class="caption slide-heading " data-x="380" data-y="80" data-speed="1800" data-start="1200" data-easing="easeOutExpo">Hui</div>
I am trying to change the values of dat=x and data-y dynamically
I tried both below which did not work.
<script>
$('#ctup-ads-widget-2').click(function() {
$(this).attr("data-x", "580");
});
</script>
and
<script>
$('#ctup-ads-widget-2').click(function() {
$(this).data('x') = "580";
});
</script>
and
<script>
window.onload = function() {
var anchors = document.getElementById('ctup-ads-widget-2');
for (var i = 0; i < anchors.length; i++) {
anchors[i].setAttribute('data-x', '580');
anchors[i].setAttribute('data-y', '30');
}
}
</script>
console screenshot
error screenshot
You can't use it like
$(this).data('x') = "580";//won't work
Try with data()
$(this).data("x","580"); //$(this).attr("data-x", "580") should also work
Update
Enclose it in $(document).ready..
$(document).ready(function(){
$('#ctup-ads-widget-2').click(function() {
$(this).data("x","580");
});
})
If data-attribute needs to be dynamically added on an element,
$("this").attr("data-x", "5");
can be used.
From seeing your screenshots, it's clear that jQuery was not loaded properly.
Use <script> tag to load jQuery file before end of </body> tag.
Example:
<body>
...
..
<script src="js/jQuery.js"></script>
<script src="js/yourfile.js"></script>
</body>
I need some help on writing the appropriate JavaScript and on where to place it. What I want to do is pretty simple...
I want to hide a div when the page is first loaded and then have it display permanently after a set interval (let's call it 10 minutes). I've looked all over and from what I can tell, I need to use the setInterval or setTimeout function.
Two problems...
I don't know JavaScript, so I'm just trying to hack this together
I'm using WordPress and I have no idea where the script would need to be placed for this to work.
Any ideas?
<!DOCTYPE html>
<html>
<head>
<style>
#my_div {
display:none;
}
</style>
<!-- remove noscript if you don't want it displayed if JS is off -->
<noscript>
<style>
#my_div {
display:block;
}
</style>
</noscript>
</head>
<body>
<div id="my_div">the hidden div</div>
<!-- More HTML content -->
<!-- JavaScript just before the end of the body -->
<script type="text/javascript">
setTimeout(function() {
var el = document.getElementById('my_div');
if( el )
el.style.display = 'block';
}, 600000); // 10 minutes
</script>
</body>
</html>
Grab the window.onload event, hide the div immediately, then call setTimeout to show it again:
window.onload = function(){
var divToHide = document.getElementById("divId");
divToHide.style.display = "none";
setTimeout(function() { divToHide.style.display = "block" }, 600000);
};
PHP does not deal with showing and hiding elements once they have been loaded on to page. That is exclusively javascript's domain. So...
Locate your theme folder. So first check which theme is active in admin -> appearance -> themes, then go to the folder in your FTP: wp-content/themes/yourtheme
Locate and open header.php
add the following right before the </head> tag:
<script type="text/javascript">
window.onload = function(){
var $img = getElementById('myimage');
$img.style.display = 'none';
function showImg() {
$img.style.display = ''
}
setTimeout("showImg()",3000);
}
</script>
the "3000" is the time in milliseconds that you want to delay. You also need to give your image an ID:
<img src="myimage.jpg" id="myimage" />
So I'm trying to loop through this array and change an image source every few seconds. Right now I have an onload event calling a setTimeOut method which should change the image 5 seconds after the page has loaded I would think, but it is doing it instantly. What is the problem? Here is my code:
<html>
<head>
<title>Ad Rotaror</title>
<script type="text/javascript">
var i = 0;
var ads = new Array(4);
ads[0]='promo1.gif';
ads[1]='promo2.gif';
ads[2]='promo3.gif';
ads[3]='promo4.gif';
ads[4]='promo5.gif';
function change()
{
if(i > 4)
i = 0;
document.images[0].src = ads[i];
i++;
}
</script>
</head>
<body>
<img src="promo1.gif" onload="setInterval(change(), 5000)" />
</body>
</html>
Change 'change()' to 'change'. You are calling the function immediately.