I have a simple create div script but the background image is not being created which is bugging me.
I tried a few ways but none of them work:
var d = document.createElement('div');
d.id = 'content';
d.className = 'inner';
d.background = "url=('images/h.png')";
document.getElementById('menu').appendChild(d);
I also tried these alternative methods:
d.style.background = "url=('images/h.png')";
d.backgroundImage = "url=('images/h.png')";
d.style.backgroundImage = "url=('images/h.png')";
All 3 don't work but the div does load and the height is deffinately not 0px as there is a paragraph of text in there... the CSS for the div is:
.inner{
text-align:center;
background-repeat: no-repeat;
background-position: top center;
width:100%;
padding-top:30px;
min-height:300px;
}
According to my Chrome debugging tools, the image does not load in the resources, its not even requested to load. If i i had the wrong url I would get resource not found, so I'm wondering if there is a specific way to write it in JS to get this work ?
Why do you have an equals sign in there? Take it out and your code should work:
d.style.backgroundImage = "url('images/h.png')";
Related
I have a background image for my html page. I set it through css style:-
html{
margin-top:10px;
background: url(xxxxx.jpg) no-repeat center center fixed;
background-size: cover;
}
I want to know how I can change it dynamically it from the Javascript side.
I have tried something like:
document.getElementById("html").style.backgroundImage = "url('yyy.jpg')";
but that doesn't change the image.
Without using jQuery, how can I access the html element and change its bkImage, say every 5 seconds to make it like a slideshow. (I will be storing my image urls in an array).
The background image is not really tied to the html tag but the body tag.
Try:
body
{
background-image: url(xxxxx.jpg);
}
And the script:
document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('zzzzz.jpg')";
If this works as expected (you see zzzzz.jpg, not xxxxx.jpg) then you're ready to fix the rest of the CSS code.
EDIT: tested the code and fixed a bug. You must assign backgroundImage = "url('zzzzz.jpg')", not simply the filename as I've written before.
As an example, this works perfectly, all you need are two images (red.jpg and blue.jpg):
<html>
<head>
<style>
body
{
background-image: url('red.jpg');
}
</style>
</head>
<body>
<script>
document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('blue.jpg')";
</script>
</body>
</html>
EDIT 2:
The rest of the CSS must not change, so you'll still have:
body
{
margin-top: 10px;
background: url('xxxxx.jpg') no-repeat center center fixed;
background-size: cover;
}
The background property is a compound:
background: url('xxxxx.jpg') no-repeat center center fixed;
^ ^ ^ ^
URL R H V
URL: the image url
R: repetition
H: horizontal alignment
V: vertical alignment
With
background-image: url('xxxxx.jpg')
you just change the URL part of the above compound, leaving the rest as it was.
If an image is too small it might be stretched to cover the whole screen.
So for a good slide show be sure that all images have the same size.
To access the html element you can use document.documentElement:
document.documentElement.style.backgroundImage = "url('yyy.jpg')";
To change it every X seconds you can use setInterval() and have your images in an array.
So I am building a puzzle pipe game and wanted each level to have a different background. The background is loaded from an img src only problem the image at he moment doest move with the screen size... I always want it to be centred so you can see the middle of the image.
For example a background that looks perfect on a 13" screen on a 27" looks a total mess... Is there a simple way I can keep the image within the same place? I know I could set up a css rule however was wondering if there was way a way to add it into the js script?
So far my js script looks like this (for one level):
var levels = {
level1: {
level: [[["0","1","0","1"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","1","1"],["0","1","1","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","0","0"],["0","0","1","1"],["1","1","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","0","0"],["0","0","0","0"],["0","0","1","1"],["1","0","1","0"],["1","0","1","0"],["1","1","0","0"]]],
backgroundURL : "http://website.co.uk/client_files/level1.jpg"
},
Thank you
If you want your game to always be in the middle of the screen,
follow this article:
https://css-tricks.com/positioning-offset-background-images/
suppose you have a <div id="game"></div> as your canvas
set a base css to center the element background
#game{
background-color: lightgray;
background-position: center center;
background-repeat: no-repeat;
width: 80%;
height: 80%;
position:absolute;
}
the javascript code will be very simple
just get the main element and update just the image url
var canvas = document.querySelector('#game');
canvas.style.backgroundImage = " url('"+levels.level1.backgroundURL+"')";
// simulate a level change after 3 seconds
setTimeout(function(){
canvas.style.backgroundImage = "url('"+levels.level2.backgroundURL+"')";
}, 3000);
look a running code here:
http://jsfiddle.net/zw7dv9at/2/
I'm quite new at this, so I'm sorry if there is an obvious answer.
I'm trying to get a photo on my homepage to change depending on the time of day. I have found tons of information on changing the background of the website, but I want to change an image on my homepage, not the background of the body tag.
I tried following the information here: Changing background based on time of day (using javascript) and in one of the comments someone suggested changing the class instead of the image so that you could change other things besides just the background image.
I tried to follow that advice, but it's not working.
This is what my breakfast-lunch.js file says:
var currentTime = new Date().getHours();
if (6 <= currentTime && currentTime < 12) {
if (document.body) {
document.body.className = "breakfast";
}
}
else {
if (document.body) {
document.body.className = "lunch";
}
}
I have the following css:
.breakfast .home-photo {
background-image: url('images/Maddie-Lab-Studio-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}
.lunch .home-photo {
background-image: url('images/Miriam-Joy-Photo-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}
Before I tried doing this with JS and having it change the class name, I had just this CSS and it worked great, put a photo in the div and looked fine:
.home-photo {
background-image: url('images/Maddie-Lab-Studio-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}
In case it's relevant, my site is a WordPress site.
I'm at a loss. Any help would be greatly appreciated. You can find an example of my (not working properly) website at http://www.canvas.kgshultz.com
Thanks in advance!
FIX will be CSS side, javascript is fine(just checked in console.log)
change this:
.breakfast .home-photo {
}
to this:
.breakfast, .home-photo {
}
Comma (,) is missing between classes.
here is a FIDDLE
After checking your website, I noticed that manually setting the classes breakfast or lunch on your body makes everything work as expected (the images appear respectively for each class name). This leads me to think that your CSS is actually just fine, bringing the problem onto the JS
Your JS may be fine too, but i couldn't find it anywhere on this website you mentionned and the body had no trace of either breakfast or lunch classes. When i tried running it manually, it worked fine too. So please check that this script is actually used.
You should however be careful with what you are doing with those lines:
document.body.className = "breakfast";
and
document.body.className = "lunch";
as they will completely overwrite any existing classes on your body. And since you are using a CMS, your body ends up having plenty of classes.
Please consider using this line instead:
document.body.className += " breakfast";
It will concatenate the string breakfast (mind the leading space so two different classes don't end up sticked to each other) at the end of its current value.
I've looked on stackoverflow for a background js. After trying some I found what I thought was exactly what I need:
<script type="text/javascript">
ChangeIt();
</script>
<script type="text/javascript">
var totalCount = 8;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
document.body.style.repeat = "contain";// Background repeat
}
</script>
However, the backgrounds don't center, you just see 'em on the top left corner. So I googled on the net but... well idk anything about js, just a little few things. I'm helping a friend with his website and we're stuck on this. I'm just hoping someone with more knowledge than us can help by giving a look.
EDIT : Here's what i mean by "center" : http://i.imgur.com/G3Z9epT.png
Here's a fiddle that uses css instead of js for this, also I've added a background-size on body so the entire image is visible on all screen sizes, this is optional however - http://jsfiddle.net/dk329q1L/
Here's the css -
body {
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Entire background image always stays in view */
}
you could achive this by doing this also:
background-position: center;
To center the background add:
document.body.style.backgroundPosition = "center";
you have to set margin auto in this case ,but you have to specify width
you have to assign id :
{
width:100px;
} margin: auto;
You should set the background-position for your element, add this line to your code:
document.body.style.backgroundPosition = "center top";
The value center top means that the image will be placed center in horizontal, and will be placed at top in vertical.
jsFiddle Demo.
The below image shows other values you can use for background-position:
I am trying to change the class of an element using javascript.
So far I'm doing :
var link = document.getElementById("play_link");
link.className = "play_button";
edit: here is the actual code that replace the classname
In the HTML :
In the Javascript
function changeCurrentTo(id){
activatePlayButton(current_track);
current_track = id;
inactivatePlayButton(current_track);
}
function inactivatePlayButton(id){
document.getElementById("recording_"+id).style.backgroundColor="#F7F2D1";
var link = document.getElementById("play_link_"+id);
link.className="stop_button";
link.onclick = function(){stopPlaying();return false;};
}
function activatePlayButton(id){
document.getElementById("recording_"+id).style.backgroundColor="";
var link = document.getElementById("play_link_"+id);
link.className = "play_button";
var temp = id;
link.onclick = function(){changeCurrentTo(temp);return false;};
}
with
.play_button{
background:url(/images/small_play_button.png) no-repeat;
width:25px;
height:24px;
display:block;
}
the old class is
.stop_button{
background:url(/images/small_stop_button.png) no-repeat;
width:25px;
height:24px;
display:block;
}
The context is a music player. When you click the play button (triangle) it turns into a stop button (square) and replace the function that is called.
The problem is that the class get changed, but in IE6 and 7 the new background (here /images/small_play_button.png) does not display right away. Sometime it doesn't even display at all. Sometime it doesn't display but if I shake the mouse a bit then it displays.
It works perfectly in FF, Chrome, Opera and Safari, so it's an IE bug. I know it's hard to tell right away from only these information, but if I could get some pointers and directions that would be helpful.
Thanks-
You should create one image with a width of 50px and a height of 24px where you have both the play part and the stop part. Then you just ajust the background position like this:
.button
{
background-image: url(/images/small_buttons.png);
bacground-repeat: no-repeat;
width: 25px;
height: 24px;
display: block;
}
.play_button
{
background-position: left top;
}
.stop_button
{
background-position: right top;
}
Then you load "both images" at the same time, and no delay will happen when you change which part of the image gets displayed.
Note that I have made a new CSS class so that you dont need to repeat your CSS for different buttons. You now need to apply two classes on your element. Example:
<div class="button play_button"></div>
You need to use setAttribute in your two funcitons. Try this out:
link.setAttribute((document.all ? "className" : "class"), "play_button");
link.setAttribute((document.all ? "className" : "class"), "stop_button");
Without seeing the exact markup, it's difficult to say, but the disappearing background image issue in IE is probably solved by adding a position: relative; declaration to the .button class and/or to its parent div.