i am working on my game but i have some problems...
1. if the image is in the class .room it has a another src but if you drop it in the class .items it should change to a icon. And if you drag it again to .room it will turn back.
2. There are many different image so i want to have a switch. if the draged objekt is dragging to .items the image should change. so the id of the image should go to the switch and check if the id and case is the same. the scr should be from the icon.
3. if it is possible i want to safe the id of the image in local.storage so i can use the objekt in the next page
<html>
<head>
<style>
.room {
width: 500px;
height: 150px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.items {
width: 500px;
height: 150px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
if (ev.target.className === "items") {
ev.target.style.border = "3px dashed black";
}
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("img", ev.target.id);
}
function dragleave(ev) {
if (ev.target.className === "items") {
ev.target.style.border = "0px dashed transparent";
}
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("img");
ev.target.style.border = "0px dashed transparent";
if (ev.target=="[object HTMLImageElement]"){
ev.target = ev.target.parentNode;
}
else {
ev.target.appendChild(document.getElementById(data));
}
if (ev.target.id === ev.dataTransfer.getData("ori")) {
return;
}
var image = document.createElement("img");
image.id =
image.draggable = true;
image.addEventListener('dragstart', drag);
if (ev.target.className === 'items') {
icon();
} else if (ev.target.className === 'room') {
room();
}
var originEle = document.getElementById(ev.dataTransfer.getData("ori"));
originEle.outerHTML = '';
delete originEle;
ev.target.appendChild(image);
}
function icon(){
switch(image.id) {
case "teddy": image.src="pic/Icons/teddy.png";break;
case "book": image.src="pic/Icons/Buch.png";break;
}
}
function room(){
switch(image.id) {
case "teddy": image.src= "pic/Home/HomeRoom_booksL.png";break;
case "booksR": image.src= "pic/Home/HomeRoom_buch.png";break;}
}
function reset(){
var container = document.getElementById("field");
container.innerHTML= html;
}
var html;
window.onload = function(){
html = document.getElementById('field').innerHTML;
};
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<div>
<div class="room" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<h2>items</h2>
<div class="items" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="book" src="pic/Icons/Buch.png" draggable="true" ondragstart="drag(event)" id="drag1">
<img id="teddy" alt="booksL"src="pic/Home/HomeRoom_teddy.png" id="drag2" draggable="true" ondragstart="drag(event)" >
</div>
</div>
</body>
</html>
About the 3rd question - saving to localStorage:
add the code below to your drop function.
localStorage.setItem("name", data);
I have an array notes having nine jpg's on it, and an array items nine label and nine url's on it.
this code has three boxes It selected 3 items randomly from an array items.
I have placed the randomly selected item's label inside 3 boxes, inside <P> tags, and corresponding image on background from array items
I have stored currosponding images of notes on randomIndex selection to array notesselected this is called to box002 img src
Class box002 can be dragged and dropped to the corresponding number in four boxes displayed. then blue digit and background in box dissappears.
I have a working code now
My problem is that I want the box002 item should be same as the box digit, now drop is form left side box onwards
ie if box002 digit is 2 the drop(leftmost box) should be blue 2 number with background url image2
how to change my code to make this happen.
var array2 = [];
var items = [{
label: '1',
url: 'https://via.placeholder.com/150x150.jpg?text=image1'
},
{
label: '2',
url: 'https://via.placeholder.com/150x150.jpg?text=image2'
},
{
label: '3',
url: 'https://via.placeholder.com/150x150.jpg?text=image3'
},
{
label: '4',
url: 'https://via.placeholder.com/150x150.jpg?text=image4'
},
{
label: '5',
url: 'https://via.placeholder.com/150x150.jpg?text=image5'
},
{
label: '6',
url: 'https://via.placeholder.com/150x150.jpg?text=image6'
},
{
label: '7',
url: 'https://via.placeholder.com/150x150.jpg?text=image7'
},
{
label: '8',
url: 'https://via.placeholder.com/150x150.jpg?text=image8'
},
{
label: '9',
url: 'https://via.placeholder.com/150x150.jpg?text=image9'
}
];
var notes = ['https://via.placeholder.com/75x75?text=1',
'https://via.placeholder.com/75x75?text=2',
'https://via.placeholder.com/75x75?text=3',
'https://via.placeholder.com/75x75?text=4', 'https://via.placeholder.com/75x75?text=5',
'https://via.placeholder.com/75x75?text=6',
'https://via.placeholder.com/75x75?text=7',
'https://via.placeholder.com/75x75?text=8',
'https://via.placeholder.com/75x75?text=9'
];
var tempimages = [];
var notesselected = [];
array2 = items.slice();
var item;
function rvalue() {
ptags = document.querySelectorAll('[name="values"]');
boxtags = document.getElementsByClassName("box");
for (var index = 0; index < 3; index++) {
randomIndex = Math.floor(Math.random() *array2.length)
item = array2[randomIndex];
array2.splice(randomIndex, 1);
try {
ptags[index].style.visibility = "visible";
ptags[index].textContent = item.label;
ptags[index].dataset.itemIndex = randomIndex;
tempimages.push({data: item,index: randomIndex
});
notesselected.push({data: notes[randomIndex],
index: randomIndex});
boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
} catch (err) {
console.log('Exception');
}
}
var tlen = tempimages.length;
}
function displayAllImages() {
try {
if (tempimages.length == 0) {
rvalue();
}
var arr2 = notesselected;
item = arr2.shift();
image = document.getElementById('slide');
//image.src = "images/"+item.data.url;
image.src = item.data;
image.dataset.itemIndex = item.index;
} catch (err) {
console.log(err.message);
}
};
$(function() {
displayAllImages();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var el = document.getElementById(data);
var x = document.getElementById("slide").dataset.itemIndex;
var y = ev.target.dataset.itemIndex;
if (x == y) {
ev.currentTarget.style.backgroundColor = 'initial';
ev.currentTarget.style.backgroundImage = 'initial';
ev.currentTarget.style.border = 'initial';
var pParagraph = ev.currentTarget.firstElementChild;
pParagraph.style.visibility = "hidden";
item = this.item;
var arrayvalue = item.dataindex;
tempimages.splice(arrayvalue, 1);
if (tempimages.length == 0)
{
rvalue();
}
displayAllImages();
}
else {
alert("WRONG PLACED");
}
}
body {
overflow: hidden;
}
.box {
width: calc(10.3% - 4px);
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border: #000 border-color: #e6e600;
margin: -2px;
border-radius: 0%;
background-color: #99ffff;
}
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-size: contain;
}
.box002 {
position: absolute;
top: 10.3vh;
left: 40.98vw;
cursor: pointer;
}
.box002 img {
width: 14.0vw;
height: 23.0vh;
border-radius: 50%;
}
p {
font: "Courier New", Courier, monospace;
font-size: 30px;
color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
color: #005ce6;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
<p name="values"></p>
</div>
</div>
</div>
</div>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" border="rounded" />
</div>
I think you have many things going wrong here:
Using index is a wrong idea, you can use the label as the key as you have unique item for each object.
Your displayAllImages returns wrong iterations, I have applied proper filter to display the random image from the available tempImages.
Things you need to take care of:
Assign proper levels
You can possibly use 1 array instead of 2 notes, items.
Here is the demo to resolve your problem to display the image right from the available items randomly.
I have added comments to the code, so you can check the changes.
var array2 = [];
var items = [{
label: '1',
url: 'https://via.placeholder.com/150x150.jpg?text=image1'
},
{
label: '2',
url: 'https://via.placeholder.com/150x150.jpg?text=image2'
},
{
label: '3',
url: 'https://via.placeholder.com/150x150.jpg?text=image3'
},
{
label: '4',
url: 'https://via.placeholder.com/150x150.jpg?text=image4'
},
{
label: '5',
url: 'https://via.placeholder.com/150x150.jpg?text=image5'
},
{
label: '6',
url: 'https://via.placeholder.com/150x150.jpg?text=image6'
},
{
label: '7',
url: 'https://via.placeholder.com/150x150.jpg?text=image7'
},
{
label: '8',
url: 'https://via.placeholder.com/150x150.jpg?text=image8'
},
{
label: '9',
url: 'https://via.placeholder.com/150x150.jpg?text=image9'
}
];
var notes = ['https://via.placeholder.com/75x75?text=1',
'https://via.placeholder.com/75x75?text=2',
'https://via.placeholder.com/75x75?text=3',
'https://via.placeholder.com/75x75?text=4', 'https://via.placeholder.com/75x75?text=5',
'https://via.placeholder.com/75x75?text=6',
'https://via.placeholder.com/75x75?text=7',
'https://via.placeholder.com/75x75?text=8',
'https://via.placeholder.com/75x75?text=9'
];
var tempimages = [];
var notesselected = [];
array2 = items.slice();
var item;
function rvalue() {
ptags = document.querySelectorAll('[name="values"]');
boxtags = document.getElementsByClassName("box");
//if array length is 0 then we need to identify the game as completed
if (array2.length === 0) {
alert('Game completed');
return;
}
for (var index = 0; index < 3; index++) {
randomIndex = Math.floor(Math.random() * array2.length)
item = array2[randomIndex];
array2.splice(randomIndex, 1);
try {
ptags[index].style.visibility = "visible";
ptags[index].textContent = item.label;
ptags[index].dataset.itemLabel = item.label;
//using label as an identity
tempimages.push({
data: item,
label: item.label
});
notesselected.push({
data: item.url,
label: item.label
});
boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
} catch (err) {
console.log('Exception');
}
}
var tlen = tempimages.length;
}
function displayAllImages() {
try {
if (tempimages.length == 0) {
rvalue();
}
if(tempimages.length === 0){
image = document.getElementById('slide');
image.style.display = 'none';
return;
}
// getting random item from the available items
var arr2 = tempimages;
item = arr2[Math.floor(Math.random() * arr2.length)]
image = document.getElementById('slide');
//getting notes item
var dataURL = notes.filter(a => a.indexOf("?text=" + item.label) > 0)[0];
image.src = dataURL;
image.dataset.itemLabel = item.label;
} catch (err) {
console.log(err.message);
}
};
$(function() {
displayAllImages();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var x = document.getElementById("slide").dataset.itemLabel;
var y = ev.target.dataset.itemLabel;
//add improvisation box drag is valid
if(ev.target.tagName === "DIV"){
y = ev.target.children[0].dataset.itemLabel;
}
if (x == y) {
ev.currentTarget.style.backgroundColor = 'initial';
ev.currentTarget.style.backgroundImage = 'initial';
ev.currentTarget.style.border = 'initial';
var pParagraph = ev.currentTarget.firstElementChild;
pParagraph.style.visibility = "hidden";
item = this.item;
tempimages = tempimages.filter(a => a.label !== item.label);
if (tempimages.length == 0) {
rvalue();
}
displayAllImages();
} else {
alert("WRONG PLACED");
}
}
body {
overflow: hidden;
}
.box {
width: calc(10.3% - 4px);
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border: #000 border-color: #e6e600;
margin: -2px;
border-radius: 0%;
background-color: #99ffff;
}
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-size: contain;
}
.box002 {
position: absolute;
top: 10.3vh;
left: 40.98vw;
cursor: pointer;
}
.box002 img {
width: 14.0vw;
height: 23.0vh;
border-radius: 50%;
}
p {
font: "Courier New", Courier, monospace;
font-size: 30px;
color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
color: #005ce6;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
<p name="values"></p>
</div>
</div>
</div>
</div>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" border="rounded" />
</div>
I have a two images and when you click on one, text (relevant to image) slides into view below the image. Currently the method for closing/toggling the text is to click on the image again.
If I click on the second image while the text on the first image is still visible, it closes the text. I then have to click on the second image again to see its text content appear.
I'd like to be able to click on the second image and either the text content just swaps OR it closes the text for the first image and opens the text for the second image (in just one click, not two).
Any input appreciated!
I have a fiddle here
JS:
var teamMember = document.getElementsByClassName("team-member");
var teamRow = document.getElementsByClassName("team-row");
var bioContainer = $( "<div class='container' id='bio-container'></div>" );
$(bioContainer).hide();
$(teamMember).click(function() {
$(this).toggleClass('member-selected');
$('.team-grid').toggleClass('member-active');
$(bioContainer).html("");
var thisBio = $(this).find(".team-bio");
var thisRow = $(this).parent(teamRow);
$(thisRow).after(bioContainer);
var bioHTML = $(thisBio).html();
$height = $(thisBio).outerHeight(true)
$(bioContainer).css('height', $height);
$(bioContainer).slideToggle( "slow", function() {
$(this).html(bioHTML);
});
});
HTML:
<section class="team-grid">
<div class="team-row">
<div class="col-sm-6 team-member">
<img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg">
<div class="team-bio">
<div class="team-bio-inner">
JOHN'S Bio
</div>
</div>
</div>
<div class="col-sm-6 team-member">
<img src="https://r.hswstatic.com/w_907/gif/tesla-cat.jpg">
<div class="team-bio">
<div class="team-bio-inner">
SALLY'S Bio
</div>
</div>
</div>
</div>
</section>
CSS:
.col-sm-6 {
width:50%;
float:left;
}
img {
width:100%;
height:200px;
object-fit:cover;
cursor:pointer;
}
.close-bio {
color:pink;
font-weight:bold;
}
.team-bio {
visibility: hidden;
padding: 80px 20%;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#bio-container {
background: #666;
width: 100%;
max-width: none;
position: relative;
float: left;
padding: 25px;
color:#fff;
font-size:20px;
}
Please check this answer,
Js Fiddle
var teamMember = document.getElementsByClassName("team-member");
var teamRow = document.getElementsByClassName("team-row");
var bioContainer = $( "<div class='container' id='bio-container'></div>" );
var bioContainerExpanded = false;
$(bioContainer).hide();
$(teamMember).click(function() {
if(bioContainerExpanded){
$(bioContainer).slideToggle( "slow", function() {});
bioContainerExpanded = false;
}
$('.team-grid').toggleClass('member-active');
// Resets bioContainer html to blank
$(bioContainer).html("");
$(this).toggleClass('member-selected');
// Assign 'this' team bio to variable
var thisBio = $(this).find(".team-bio");
// Assign 'this' row to variable (find teamRow parent of this teamMember)
var thisRow = $(this).parent(teamRow);
// Place bio after row
$(thisRow).after(bioContainer);
// Assign 'this' bio html to variable
var bioHTML = $(thisBio).html();
// Dynamically calculte height of the bio including padding
$height = $(thisBio).outerHeight(true)
//assign height to bioContainer before the toggle so that it slides smoothly
$(bioContainer).css('height', $height);
// Slide toggle the bioContainer
$(bioContainer).slideToggle( "slow", function() {
// Insert bioHTML into 'this' bioContainer
$(this).html(bioHTML);
});
bioContainerExpanded = true;
});
.col-sm-6 {
width:50%;
float:left;
}
img {
width:100%;
height:200px;
object-fit:cover;
cursor:pointer;
}
.close-bio {
color:pink;
font-weight:bold;
}
.team-bio {
visibility: hidden;
padding: 80px 20%;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#bio-container {
background: #666;
width: 100%;
max-width: none;
position: relative;
float: left;
padding: 25px;
color:#fff;
font-size:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="team-grid">
<div class="team-row">
<div class="col-sm-6 team-member">
<img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg">
<div class="team-bio">
<div class="team-bio-inner">
JOHN'S Bio
</div>
</div>
</div>
<div class="col-sm-6 team-member">
<img src="https://r.hswstatic.com/w_907/gif/tesla-cat.jpg">
<div class="team-bio">
<div class="team-bio-inner">
SALLY'S Bio
</div>
</div>
</div>
</div>
</section>
How can make a draggable element to remain displayed on its source box after being dragged?
Below the script to illustrate it:
function dragStart(ev) {
ev.dataTransfer.setData('text1', ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData('text1');
ev.target.appendChild(document.getElementById(data));
}
function allowDrop(ev) {
ev.preventDefault();
}
.boxarticle {
width: 200px;
height: 150px;
border: 1px solid blue;
margin: 0 0 10px 20
}
div#panier {
width: 150px;
height: 150px;
background-color: ;
border: 1px solid blue;
}
<!-- I want that image to remain here after I dragged it -->
<div class='boxarticle'>
<img src="https://cdn-images-1.medium.com/max/1200/1*QQvzwKk7rdC1JkY0XiPVUQ.png" draggable="true" id='image' data-price='9200' ondragstart="dragStart(event)" width=80 height=80>
</div>
<!-- where draggable element go in -->
<div id="panier" ondrop='drop(event)' ondragover="allowDrop(event)"> Drag and drop image here..but leave it in the source place </div>
You need to clone it and give it a new id, otherwise it will assume "drag".
HTML5 drag and copy?
function dragStart(ev)
{
ev.dataTransfer.setData('text1',ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("text1");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "randomId";
ev.target.appendChild(nodeCopy);
}
function allowDrop(ev)
{
ev.preventDefault();
}
.boxarticle {
width:200px;height: 150px; border:1px solid blue;margin: 0 0 10px 20
}
div#panier {
width:150px;height: 150px;background-color: ; border: 1px solid blue;
}
<!-- I want that image to remain here after I dragged it -->
<div class='boxarticle'>
<img src="https://cdn-images-1.medium.com/max/1200/1*QQvzwKk7rdC1JkY0XiPVUQ.png" draggable="true" id='image' data-price='9200' ondragstart="dragStart(event)" width=80 height=80>
</div>
<!-- where draggable element go in -->
<div id="panier" ondrop='drop(event)' ondragover="allowDrop(event)"> Drag and drop image here..but leave it in the source place </div>
im trying to get a set of four different colored div's to flash for a second in a random sequence that keeps repeating adding one more flash each time, by adding a class that sets their opacity to 0, but only the last div in the sequence appears to be flashing, here is the javascript code:
$(function() {
x="";
for(i=0;i<3;i++){
x+=String(Math.floor(Math.random()*4)+1);
$("#test").append(x);
j=0;
flashinglight();
$("#red").removeClass("redflash");
$("#blue").removeClass("blueflash");
$("#yellow").removeClass("yellowflash");
$("#green").removeClass("greenflash");
};
})
function flashinglight(){
if(j<x.length){
setTimeout(function(){
$("#red").removeClass("redflash");
$("#yellow").removeClass("yellowflash");
$("#green").removeClass("greenflash");
$("#blue").removeClass("blueflash");
if(x[j]=="1"){
$("#red").addClass("redflash");
}
else if(x[j]=="2"){
$("#yellow").addClass("yellowflash");
}
else if(x[j]=="3"){
$("#green").addClass("greenflash");
}
else if(x[j]=="4"){
$("#blue").addClass("blueflash");
}
j+=1;
flashinglight();
},1000);
}
else{
return;
}
}
You'll be glad to know it can ba a lot simpler than that. :-) See comments inline:
// Your existing ready callback
$(function() {
// Array of color names
var colors = ["red", "blue", "yellow", "green"];
// Start
flashlight();
function flashlight() {
// Get a random color
var c = colors[Math.floor(Math.random() * colors.length)];
// Get the matching element
var elm = $("#" + c);
// And class
var cls = c + "flash";
// Add the class
elm.addClass(cls);
// A second later...
setTimeout(function() {
// Remove it
elm.removeClass(cls);
// And run again
flashlight();
}, 1000);
}
});
.container div {
display: inline-block;
width: 40px;
height: 40px;
}
#red {
border: 2px solid red;
}
#blue {
border: 2px solid blue;
}
#yellow {
border: 2px solid yellow;
}
#green {
border: 2px solid green;
}
.redflash {
background-color: red;
}
.blueflash {
background-color: blue;
}
.yellowflash {
background-color: yellow;
}
.greenflash {
background-color: green;
}
<div class="container">
<div id="red"></div>
<div id="blue"></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
That "flashes" for a full second before moving on to the next. If you need a shorter flash and a delay between them, it's just a matter of setting up a second timer.
Watching that for a moment, it bothered me when the same color was picked twice. So if you want a version that excludes the current color when picking the next:
// Your existing ready callback
$(function() {
// Array of color names
var colors = ["red", "blue", "yellow", "green"];
// The current color
var color = null;
// Start
flashlight();
function flashlight() {
// Pick a random color, excluding the one we're currently using
var available = colors.filter(function(c) {
return c !== color;
});
color = available[Math.floor(Math.random() * available.length)];
// Get the matching element
var elm = $("#" + color);
// And class
var cls = color + "flash";
// Add the class
elm.addClass(cls);
// A second later...
setTimeout(function() {
// Remove it
elm.removeClass(cls);
// And run again
flashlight();
}, 1000);
}
});
.container div {
display: inline-block;
width: 40px;
height: 40px;
}
#red {
border: 2px solid red;
}
#blue {
border: 2px solid blue;
}
#yellow {
border: 2px solid yellow;
}
#green {
border: 2px solid green;
}
.redflash {
background-color: red;
}
.blueflash {
background-color: blue;
}
.yellowflash {
background-color: yellow;
}
.greenflash {
background-color: green;
}
<div class="container">
<div id="red"></div>
<div id="blue"></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>