Background overlapping issue - javascript

I'm building a questionnaire that asks 10 questions and keeps a score, called total. I want so that if the total < 10, the screen turns red, however I had to remove the wallpaper that was there previously:
/*body{
background-image: url("twins.jpg");
}*/ <-- which is now a comment
So that this code would work:
if (total < 10){
alert("...RED SCREEN OF DEATH!");
document.body.style.backgroundColor = "#AA0000";
}
So now, when a user scores lower than 10, the screen turns red successfully, however that's now just half of the issue solved.
My next issue is that I want twins.jpg to be my background before the screen turns red, meaning I have twins.jpg as my wallpaper, then when total < 10, screen turns red.
My question is, what is the correct way to do this so that I can still see my background change red when total < 10 ? When I use this:
body{
background-image: url("twins.jpg");
}
It changes the background to twins.jpg, but overlaps the red when it changes colour, therefore I cannot see it.

The best way to solve this would probably be that you create a <div id="redbg"></div> around your content which is the same size than your <body> element (by adding a height and width of 100%).
You then add the background color to the new div:
if (total < 10){
document.getElementById('redbg').style.backgroundColor = "#AA0000";
}
As soon as you want to remove the background color, you could do it by making it transparent:
document.getElementById('redbg').style.backgroundColor = "transparent";

In CSS, properties like background and its properties like it do not override each other. If you set the image, then color, they will not over one each other.
To solve you problem, instead of using "background-image" and "background-color", change them both to just "background" as this will override the other choice.
Let me know if this solves your problem! (COMMENT)
Bryce

Related

Javascript style.background not allowing me to adjust size of image

I want the background image of the red section to change when the user hovers over the blue section.
I have got this to work fine with the following code
<script>
document.getElementById('scrolling-background-column-left').onmouseover = function()
{
document.getElementById('scrolling-background-section').style.background = "url('https://media.cntraveler.com/photos/5698051378d099fc122487e3/master/w_820,c_limit/Sunset-Beach-Oahu-cr-getty.jpg') no-repeat center";
};
document.getElementById('scrolling-background-column-left').onmouseout = function()
{
document.getElementById('scrolling-background-section').style.background = "";
};
</script>
However is the result when i hover over the blue section. Is there a way to make the image span across the entire section/whole width of the page? I have tried adding cover to the code however this doesn't seem to work, if i try changing the size of the image through the code it breaks everything.
cover should work in your case. When you use the background shorthand property, you need to have a / separating the position and size values:
document.getElementById('scrolling-background-section').style.background = "url('media.cntraveler.com/photos/5698051378d099fc122487e3/master/…) no-repeat center / cover";

Javascript, need to change background image based on switch/variable

I am making a computer game on Twine, which accepts html, javascript, css.
I am trying to display images based on the state of the game.
This code below, works correctly i shows all 3 images overlapping correctly.
However, i want to display other images based on game state. For example if the player is at 20% health, it should display 2a.pgn instead of 2.pgn
or if it is poisoned, it should show 3a.pgn instead of 3.
And so on and so on, it does not make sense having to specify all possible combinations. Instead i just want to change a single layer at a time based on a variable/switch.
<html>
<div class="a1"></div>
<style>
.a1 {
width: 100%;
height: 1000px;
background-image: url(3.png),url(2.png),url(1.jpg);
background-repeat: no-repeat;}
</style>
</html>
Could you please help?
Thank you very much.
Cheers,
There are multiple ways - setting url() (and preloading everything on load), changing visibility, opacity or z-index, but if you want to stick with multiple backgrounds:
//imageIndex - your image for given HP
//imagesLen - images count
var HPimgArr = Array(imagesLen).fill('-9999px 0');
HPimgArr[imageIndex] = '0 0';
document.querySelector('.a1').style.backgroundPosition = HPimgArr.join(', ')
If you are refering to Javascript try this (you need jQuery for this):
var maxHealth = 10;
var health = 10; //He is apparently at full health
function updateHealth(newHealth){
health = newHealth;
if(health < maxHealth / 5) {
var stats = $('.a1').css('background-image').split(','); //Put every different stat in array
stats[1] = 'url(2a.png)';
$('.a1').css('background-image', stats.toString());
}
}
Whenever you want to change his health call updateHealth(...).
I haven't tested this but something along these lines should work.

change css on scroll event w/ requestAnimation Frame

I want to change the background color of in-viewport elements (using overflow: scroll)
So here was my first attempt:
http://jsfiddle.net/2YeZG/
As you see, there is a brief flicker of the previous color before the new color is painted. Others have had similar problems.
Following the HTML5 rocks instructions, I tried to introduce requestAnimationFrame to fix this problem to no avail:
http://jsfiddle.net/RETbF/
What am I doing wrong here?
Here is a simpler example showing the same problem: http://jsfiddle.net/HJ9ng/
Filed bug with Chromium here: http://code.google.com/p/chromium/issues/detail?id=151880
if it is only the background color, well why don't you just change the parent background color to red and once it scroll just change it to pink?
I change your CSS to that
#dad
{
overflow-y: scroll;
overflow-x: hidden;
width: 100px;
height: 600px;
background-color:red;
}​
I remove some of you Jquery and change it to this
dad.bind('scroll', function() {
dad.css('background-color', 'pink');
});
And I remove this line
iChild.css('backgroundColor', 'red');
But is the Red color it is important that won't work for sure http://jsfiddle.net/2YeZG/5/
I like Manuel's Solution.
But even though I don't get what you're exactly trying to do, I want to point out a few things.
In your fiddle code, I saw that you included Paul Irish's Shim for requestAnimationFrame.
But you never use it.
(It's basically a reliable setTimeOut, nothing else) it's from frame based animations.)
So since you just want to change some CSS properties, I don't see why you would need it. Even if you want transitions, you should rely on CSS transitions.
Other than that your code could look something like
dad.bind('scroll', function() {
dad.css('background-color', 'pink');
eachElemNameHere.css('background-color','randomColor');
});
Also you should ideally not use something like that if you can help it. You should just add and remove class names and add all these properties in your CSS. Makes it work faster.
Also, again I don't quite get it, but you could use the jQuery function to find out each elements' position from the top to have better control.
Your problem seems to be that you only change the background color of the elements which have already been scrolled into view. Your code expects that the browser waits for your code to handle the scroll event before the browser redraws its view. This is most probably not a guarantee given by the HTML spec. That's why it flickers.
What you should do instead is to change the elements which are going to be scrolled into view. This is related to off screen rendering or double buffering as it is called in computer games programming. You build your scene off screen and copy the finished scene to the visible frame buffer.
I modified your first JSFiddle to include a multiplier for the height of the scroll area: http://jsfiddle.net/2YeZG/13/.
dad.bind('scroll', function() {
// new: query multiplier from input field (for demonstration only) and print message
var multiplier = +($("#multiplier")[0].value);
$("#message")[0].innerHTML=(multiplier*100)-100 + "% of screen rendering";
// your original code
var newScrollY = newScrollY = dad.scrollTop();
var isForward = newScrollY > oldScrollY;
var minVal = bSearch(bots, newScrollY, true);
// new: expand covered height by the given multiplier
// multiplier = 1 is similar to your code
// multiplier = 2 would be complete off screen rendering
var newScrollYHt = newScrollY + multiplier * dadHeight;
// your original code (continued)
var maxVal;
for (maxVal = minVal; maxVal < botsLen; maxVal++) {
var nxtTopSide = tops[maxVal];
if (nxtTopSide >= newScrollYHt) {
break;
}
}
maxVal = Math.min(maxVal, botsLen);
$(dadKids.slice(minVal, maxVal)).css('background', 'pink');
});
Your code had a multiplier of 1, meaning that you update the elements which are currently visible (100% of scroll area height). If you set the multiplier to 2, you get complete off screen updates for all your elements. The browser updates enough elements to the new background color so that even a 100% scroll would show updated elements. Since the browser seldom scrolls 100% of the area in one step (depends of the operating system and the scroll method!), it may be sufficient to reduce the multiplier to e.g. 1.5 (meaning 50% off screen rendering). On my machine (Google Chrome, Mac OS X with touch pad) I cannot produce any flicker if the multiplier is 1.7 or above.
BTW: If you do something more complicated than just changing the background color, you should not do it again and again. Instead you should check whether the element has already been updated and perform the change only afterwards.

Creating a grid to draw on

I would like to create a grid on my website where you can somehow draw on.
There are however a few problems:
I want it to be compatible with IE7/8 (hence no HTML5/canvas).
I would also like to be able to store the image drawn in the end.
The grid has to be able to have several sizes (from 10x10 up to 1000x1000 preferably even more). Probably with a zoom in/out function.
I also want to support all RGB colors
In addition to this the whole grid should be drawn on a fixed size (i.e. 800x600)
NO FLASH
I however have no idea how to do so, hence I would like to ask if anyone knows a way of doing so.
I have been looking at jquery myself, although I have no idea how I could implement it this way since I never used it before.
edit: added a few more requirements
if you are only wanting to save the image drawn and not the grid lines, why not use an image?
Have several images in the sizes you want. that way you arnt putting extra processing on the browser.
you can just use an image in the smalles grid size and tile/repeat it on the background. Should be a fairly small image and a fast load
If I understand correctly; you want a grid with cells, the user can select a color en drag/move over the cells to draw something. Then when the user is happy, then they must be able to save the picture to continue on it later..
I will describe what I would do if it was my project (jQuery and CSS).
I would start with a list:
<ul id="grid"></ul>
Then I would create the grid with li for the rows and div's for the cells. You can set the size and color of the cells with CSS and jQuery.
Here is a simple example of the generate grid and the event for the cell.
function createGrid() {
$('#grid').html('');
for(var row = 0; row < total_rows; row++) {
$('#grid').append('<li id="row_' + row + '"></li>');
var current_row = $('#row_' + row);
for(cell = 0; cell < total_cells; cell++) {
$(current_row).append('<div id="cell_' + cell + '" class="cell"></div>');
//set events
$('#cell_' + cell).mouseenter(paint_cell);
}
}
}
function paint_cell(event) {
//mouse down?
if(event.which==1) {
//give it a color
$(this).addClass('red');
}
}
Simple CSS:
.cell {
float: left;
width: 20px;
height: 20px;
background: white;
}
.cell .red {
background: red; //all the rgb you want ;)
}
You'll need a javascript function that loops trough all the rows and cells and saves the information in a xml file or something to be able to save the drawing. And you'll need one to read the xml and generate the grid based on the information.
For bullit 5; you can wrap the grid in a div and set the width and height to 800x600 and the CSS to overflow: scroll.
Hope this helps you in the right direction.
You can draw whatever you want with colored spans
Here is a quick demo that can be a start to develop further.

jQuery hide div, remove background and change page width on click

I'm trying to hide a div on click (well i'm trying to slide it to the left), but what it will have to do is also from the main page div swap the background and also i think, swap the width of another div. I've got it swapping the background and removing the things I don't want (although they slide down rather then to the left)
This video shows what happens (and then at the end i use firebug to show you what i want to happen) http://www.youtube.com/watch?v=tti_L_ofelg&feature=youtu.be (edit: video online now)
Here is my html for the sliding div:
The CSS:
.slidingDiv {
}
.show_hide {
display:none;
}
And the jQuery:
var defOpen = 1;
jQuery(".slidingDiv").show();
jQuery(".show_hide").show();
jQuery('.show_hide').click(function(){
if(defOpen == 1)
{
jQuery(".show_hide").show();
jQuery("#bgwrap").css("background","url(assets/stripeclear.png) fixed 0 0 repeat-y")
jQuery("#primary_right").css("width","")
jQuery(".slidingDiv").slideToggle();
defOpen = 0
} else {
jQuery(".show_hide").show();
jQuery("#bgwrap").css("background","url(assets/stripe.png) fixed 0 0 repeat-y")
jQuery(".slidingDiv").slideToggle();
defOpen = 1
}
So it's bgwrap that has the image in it that i have to swap to a clear one (to stop it being there as it's a fixed image on the left)
and primary_right seems to be the one when I remove the width goes full screen (what i'm really trying to acheive)
It also needs to be able to toggle closed and open!
Thanks for any help you can give!
question is not clear..but as far as i understood...you want to hide a left side division by which the right side division occupies full screen and vice versa..is it?????
if yes defOpen variable will not help u..use JQuery toggle function...datz the best way to do it...
I think you need to set the width to "inherit". That's essentially what you're doing when you are selecting the delete style in Firebug.
jQuery("#primary_right").css("width","inherit")

Categories