I am trying to create an RGB color guessing game. The premise is that each time someone clicks on a div, the function should retrieve it's color value and match it with the random color value(pre-selected) out of a given number of color values.
Now, the game has two difficulty levels. Easy and hard. The code for the two levels is almost same, the number of color divs in easy are 3, while in the case of hard, the number of color divs is 6.
However, while in easy mode, the function is retrieving a color value which belongs to none of the three divs. In fact, it is returning the background color value.
Here is the code
var colors = randomColors(6);
var easyColor = [];
var squares = document.querySelectorAll(".square");
function color() {
var a = Math.floor(Math.random()*250);
var b = Math.floor(Math.random()*250);
var c = Math.floor(Math.random()*250);
return "rgb("+ [(a),(b),(c)].join(', ') + ")";
}
function randomColors(num) {
var arr = [];
for(var i =0; i < num; i++) {
arr.push(color());
}
return arr;
}
// Tried to generate different set of colors for easy mode. Still working on it.
for(var x = 0; x < 3; x++) {
easyColor[x] = color();
}
var easyRandomColor = easyColor[Math.floor(Math.random()*easyColor.length)];
// selecting hard difficulty works same as playing again, hence the reload()
document.getElementById("hard").addEventListener("click", function() {
window.location.reload();
});
document.getElementById("reset").addEventListener("click", function() {
window.location.reload();
});
var squareColor;
// setting up the easy level of the game
document.getElementById("easy").addEventListener("click", function() {
document.getElementById("header").style.background = "#232323";
for(var y = 0; y < 3; y++) {
squares[y].style.background = easyColor[y];
}
for(var z = 3; z < 6; z++) {
squares[z].style.background = "#232323";
}
easyRandomColor = easyColor[Math.floor(Math.random()*easyColor.length)];
document.getElementById("guess").textContent = easyRandomColor;
// setting up the background colors of easy level squares
for(var j = 0; j < easyColor.length; j++)
squares[j].addEventListener("click", function() {
squareColor = this.style.background;
console.log(squareColor, easyRandomColor);
if(squareColor === easyRandomColor) {
document.getElementById("header").style.background = name;
document.getElementById("display").textContent = "Correct!";
document.getElementById("reset").textContent = "Play again?";
for(var k = 0; k < easyColor.length; k++) {
squares[k].style.background = name;
}
} else{
this.style.background = "#232323";
document.getElementById("display").textContent = "Try again.";
}
});
document.getElementById("easy").classList.add("selected");
document.getElementById("hard").classList.remove("selected");
});
var randomColor = colors[Math.floor(Math.random()*colors.length)];
//changing the RGB in h1 to rgb of one the squares
document.getElementById("guess").textContent = randomColor;
//assigning colors to the squares and adding the click event
for(var j = 0; j < squares.length; j++) {
squares[j].style.background = colors[j];
squares[j].addEventListener("click", function() {
var name = this.style.background;
// console.log(name, randomColor);
if(name === randomColor) {
document.getElementById("header").style.background = name;
document.getElementById("display").textContent = "Correct!";
document.getElementById("reset").textContent = "Play again?";
for(var k = 0; k < squares.length; k++) {
squares[k].style.background = name;
}
} else{
this.style.background = "#232323";
document.getElementById("display").textContent = "Try again.";
}
});
}
body {
background-color: #232323;
margin: 0;
}
html {
margin: 0;
padding: 0;
}
.square {
width: 30%;
/*background: purple;*/
padding-bottom: 30%;
float: left;
margin: 1.66%;
transition: 0.2s ease-in;
border-radius: 6%;
}
#container {
margin: 0 auto;
max-width: 600px;
}
h1, h3 {
color: white;
padding-top: 1%;
padding-bottom: 0.5%;
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
#header {
transition: 0.2s ease-in;
}
#nav {
margin-top: 0;
padding-top: 0;
background: white;
max-width: 100%;
clear: left;
}
#nav p {
margin: 0 auto;
position: relative;
max-width: 580px;
}
#reset {
position: relative;
}
#hard {
position: absolute;
right: 0;
}
#easy {
position: absolute;
right: 50px;
}
#display {
position: relative;
left: 27%;
}
<!DOCTYPE html>
<html>
<head>
<title>RGBA Guess</title>
<link rel="stylesheet" type="text/css" href="colorgame.css">
</head>
<body>
<div id="header">
<h3>
The Great
</h3>
<h1>
<span id="guess">number</span>
</h1>
<h3>
Guessing Game
</h3>
</div>
<div id="nav">
<p>
<button id="reset">New Colors</button>
<span id="display"></span>
<button id="easy">Easy</button>
<button id="hard" class="selected">Hard</button>
</p>
</div>
<div id="container">
<div class="square" id="sqaure1"></div>
<div class="square" id="sqaure2"></div>
<div class="square" id="sqaure3"></div>
<div class="square" id="sqaure4"></div>
<div class="square" id="sqaure5"></div>
<div class="square" id="sqaure6"></div>
</div>
<script type="text/javascript" src="colorgame.js"></script>
</body>
</html>
I know, there is a better way to do this. I can instead call the randomColors(3) in easy mode, but I want to know what is it that I am doing wrong so that I can avoid it in the future.
Than You
The reason the function is retrieving the wrong colour in easy mode is because you did not remove your hard mode click event listeners from the elements.
To explain the weird behaviour you are seeing where the colour
being logged is rgb(35, 35, 35). What is happening is the original
click event still attached is running first, and going to the
statement's else condition and setting it to that colour. Ie. when you make a
block disappear. To understand this just run through in your head what
would happen if both those click events executed one after another.
First hard than easy.
What you instead want to do is attach your click events once, and use a declared function at global scope. Which you can use for both the easy clicks and hard clicks. The reason you want to declare it is so you can remove it from the hidden squares with removeEventListener.
So in the future, just remember to clean up your click events when changing states. That is the lesson to learn here.
JSFiddle fixing your bug:
https://jsfiddle.net/jx6y0gt1/5/
Here is a fixed code snippet:
var colors = randomColors(6);
var easyColor = [];
var squares = document.querySelectorAll(".square");
function color() {
var a = Math.floor(Math.random() * 250);
var b = Math.floor(Math.random() * 250);
var c = Math.floor(Math.random() * 250);
return "rgb(" + [(a), (b), (c)].join(', ') + ")";
}
function randomColors(num) {
var arr = [];
for (var i = 0; i < num; i++) {
arr.push(color());
}
return arr;
}
// Tried to generate different set of colors for easy mode. Still working on it.
for (var x = 0; x < 3; x++) {
easyColor[x] = color();
}
var easyRandomColor = easyColor[Math.floor(Math.random() * easyColor.length)];
// selecting hard difficulty works same as playing again, hence the reload()
document.getElementById("hard").addEventListener("click", function() {
window.location.reload();
});
document.getElementById("reset").addEventListener("click", function() {
window.location.reload();
});
var squareColor;
// setting up the easy level of the game
document.getElementById("easy").addEventListener("click", function() {
document.getElementById("header").style.background = "#232323";
for (var y = 0; y < 3; y++) {
squares[y].style.background = easyColor[y];
}
for (var z = 3; z < 6; z++) {
squares[z].style.background = "#232323";
squares[z].removeEventListener("click", squareClicked);
}
randomColor = easyColor[Math.floor(Math.random() * easyColor.length)];
document.getElementById("guess").textContent = easyRandomColor;
document.getElementById("easy").classList.add("selected");
document.getElementById("hard").classList.remove("selected");
});
var randomColor = colors[Math.floor(Math.random() * colors.length)];
//changing the RGB in h1 to rgb of one the squares
document.getElementById("guess").textContent = randomColor;
//assigning colors to the squares and adding the click event
for (var j = 0; j < squares.length; j++) {
squares[j].style.background = colors[j];
squares[j].addEventListener("click", squareClicked);
}
function squareClicked() {
var name = this.style.background;
// console.log(name, randomColor);
if (name === randomColor) {
document.getElementById("header").style.background = name;
document.getElementById("display").textContent = "Correct!";
document.getElementById("reset").textContent = "Play again?";
for (var k = 0; k < squares.length; k++) {
squares[k].style.background = name;
}
} else {
this.style.background = "#232323";
document.getElementById("display").textContent = "Try again.";
}
}
body {
background-color: #232323;
margin: 0;
}
html {
margin: 0;
padding: 0;
}
.square {
width: 30%;
/*background: purple;*/
padding-bottom: 30%;
float: left;
margin: 1.66%;
transition: 0.2s ease-in;
border-radius: 6%;
}
#container {
margin: 0 auto;
max-width: 600px;
}
h1,
h3 {
color: white;
padding-top: 1%;
padding-bottom: 0.5%;
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
#header {
transition: 0.2s ease-in;
}
#nav {
margin-top: 0;
padding-top: 0;
background: white;
max-width: 100%;
clear: left;
}
#nav p {
margin: 0 auto;
position: relative;
max-width: 580px;
}
#reset {
position: relative;
}
#hard {
position: absolute;
right: 0;
}
#easy {
position: absolute;
right: 50px;
}
#display {
position: relative;
left: 27%;
}
<body>
<div id="header">
<h3>
The Great
</h3>
<h1>
<span id="guess">number</span>
</h1>
<h3>
Guessing Game
</h3>
</div>
<div id="nav">
<p>
<button id="reset">New Colors</button>
<span id="display"></span>
<button id="easy">Easy</button>
<button id="hard" class="selected">Hard</button>
</p>
</div>
<div id="container">
<div class="square" id="sqaure1"></div>
<div class="square" id="sqaure2"></div>
<div class="square" id="sqaure3"></div>
<div class="square" id="sqaure4"></div>
<div class="square" id="sqaure5"></div>
<div class="square" id="sqaure6"></div>
</div>
</body>
Changes I have made
Add this to the bottom of your code:
function squareClicked() {
var name = this.style.background;
// console.log(name, randomColor);
if(name === randomColor) {
document.getElementById("header").style.background = name;
document.getElementById("display").textContent = "Correct!";
document.getElementById("reset").textContent = "Play again?";
for(var k = 0; k < squares.length; k++) {
squares[k].style.background = name;
}
} else{
this.style.background = "#232323";
document.getElementById("display").textContent = "Try again.";
}
}
Use it as a listener with your elements like this:
for(var j = 0; j < squares.length; j++) {
squares[j].style.background = colors[j];
squares[j].addEventListener("click", squareClicked);
}
In your switch to easy mode, set the value of randomColor from your easy colors, and delete your loop to reattach the click events, they are already there.
randomColor = easyColor[Math.floor(Math.random()*easyColor.length)];
Also a secondary bug when you switch to easy mode you can still click the hidden squares. Deactivate those squares in easy mode so they can not be clicked:
for(var j = 3; j < squares.length; j++) {
squares[j].removeEventListener("click", squareClicked);
}
Related
I am trying to create a set of elements from CMS. I have reproduced the problem here with a set of rectangles that are being generated in Javascript. How can I dynamically add a "onmouseover" method to each one of them, that changes the colour of the block hovered?
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", hoverCube);
}
function hoverCube(i) {
document.getElementById("coloured_div" + i).style.backgroundColor = "orange";
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>
As you're passing hoverCube as a callback to your event listener, it automatically gets passed an object which has information about the event (e). From this information, you can get the element which triggered the event by doing (e.target), which you can then set the style of:
for (var i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", hoverCube);
}
function hoverCube(e) {
e.target.style.backgroundColor = "orange";
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>
Alternatively, to achieve what you're trying to do in your code, you need to pass i as a parameter to hoverCube, which will then be able to access the correct element:
for (var i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", (function(i) { // ES5 closure (if using ES6 you can simply change var i to let i in the for loop)
return function() {
hoverCube(i);
};
})(i)
)}
function hoverCube(i) {
document.getElementById("coloured_div" + i).style.backgroundColor = "orange";
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>
Append event listener to all elements. Select them with querySelectorAll. No ids needed.
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
document.getElementById("body").appendChild(coloured_div);
}
document.querySelectorAll('.col_div_class').forEach(function(el) {
el.addEventListener('mouseover', function(e) {
e.currentTarget.style.backgroundColor = "orange";
});
});
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body"></body>
You have 2 options here. The first is to use just CSS to accomplish the task.
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
.col_div_class:hover {
background-color: orange;
}
<body id="body">
</body>
If you must use Javascript, please see below.
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", function(e){e.currentTarget.style.backgroundColor = "orange";});
coloured_div.addEventListener("mouseout", function(e){e.currentTarget.style.backgroundColor = "yellow";});
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>
I am trying to make a program where when the user clicks on any of the divs in the div of id types, countries, languages, genres that clicked div should be switching color to either green or black, and also list all the neighbor divs of that clicked div in the console. But for some reason it is only printing the divs of the last div of id genres in the console on any div clicked. Please Help
My code's snippet:
var filter_options_div = document.getElementById("filter_options").children;
for (var y = 0; y < filter_options_div.length; y++) {
if (filter_options_div[y].tagName == "DIV") {
var option = filter_options_div[y].querySelectorAll("div");
for (var x = 0; x < option.length; x++) {
option[x].style.backgroundColor = "green";
var inserting = option;
option[x].onclick = function() {
for (var z = 0; z < inserting.length; z++) {
console.log(inserting[z]);
}
if (this.style.backgroundColor == "rgb(51, 51, 51)") {
this.style.backgroundColor = "green";
} else {
this.style.backgroundColor = "rgb(51, 51, 51)";
}
};
}
}
}
#filter_options {
width: 50%;
height: 100%;
position: fixed;
top: 0;
z-index: 2;
background-color: orange;
float: left;
}
#filter_options p {
margin-top: 50px;
}
#filter_options div {
background-color: rgb(51, 51, 51);
text-align: center;
overflow: auto;
white-space: nowrap;
}
#filter_options div div {
font-size: 18px;
display: inline-block;
color: white;
padding: 14px;
background-color: rgb(51, 51, 51);
user-select: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div id="filter_options">
<p></p>
<div id="types">
<div>Film</div><div>Tv-Show</div><div>Music</div>
</div>
<p></p>
<div id="countries">
<div>Australia</div><div>China</div><div>France</div><div>Hong-Kong</div><div>India</div><div>Japan</div><div>Canada</div><div>Germany</div><div>Italy</div><div>Spain</div><div>U.K.</div><div>United States</div>
</div>
<p></p>
<div id="languages">
<div>English</div><div>Hindi</div><div>Punjabi</div>
</div>
<p></p>
<div id="genres">
<div>Action</div><div>Adventure</div><div>Animation</div><div>Biography</div><div>Comedy</div><div>Crime</div><div>Documentary</div><div>Drama</div><div>Fantasy</div><div>Family</div><div>Foreign</div><div>History</div><div>Horror</div><div>Kids</div><div>Music</div><div>Magical realism</div><div>Mystery</div><div>News</div><div>Philosophical</div><div>Political</div><div>Reality</div><div>Romance</div><div>Saga</div><div>Satire</div><div>Sci-Fi</div><div>Social</div><div>Speculative</div><div>Sport</div><div>Talk</div><div>Thriller</div><div>Urban</div><div>Western</div><div>War</div>
</div>
</div>
</body>
</html>
'onclick' event handler function needs to be updated.
Also, given the 'inserting' variable scope with respect to 'onlick' function, it will have the same value for all handlers which is the last variable in the loop.
One way of solving this is updating the code as follows:
function getSiblings(el, filter) {
var siblings = [];
el = el.parentNode.firstChild;
do { if (!filter || filter(el)) siblings.push(el); } while (el = el.nextSibling);
return siblings;
}
var filter_options_div = document.getElementById("filter_options").children;
for (var y = 0; y < filter_options_div.length; y++) {
if (filter_options_div[y].tagName == "DIV") {
var option = filter_options_div[y].querySelectorAll("div");
for (var x = 0; x < option.length; x++) {
option[x].style.backgroundColor = "green";
var inserting = option;
option[x].onclick = function(event) {
var neighbors = getSiblings(event.currentTarget);
for (var z = 0; z < neighbors.length; z++) {
console.log(neighbors[z]);
}
if (this.style.backgroundColor == "rgb(51, 51, 51)") {
this.style.backgroundColor = "green";
} else {
this.style.backgroundColor = "rgb(51, 51, 51)";
}
};
}
}
}
I don't know how to describe this without making it more complicated.
So look at the result of the code and click on the first link with "Show", then the second one and third one.
When the second link is clicked, first one closes but text remains "Hide" and i want it to change to "Show".
So, when clicking a link, detect if any other link has text "Hide" and change it to "Show".
And please no jQuery...
document.getElementsByClassName("show")[0].onclick = function() {
var x = document.getElementsByClassName("hide")[0];
var y = document.getElementsByClassName("show")[0];
if (x.classList.contains("visible")) {
x.classList.remove("visible");
y.textContent = "Show";
} else {
closeOther();
x.classList.add("visible");
y.textContent = "Hide";
}
};
document.getElementsByClassName("show")[1].onclick = function() {
var x = document.getElementsByClassName("hide")[1];
var y = document.getElementsByClassName("show")[1];
if (x.classList.contains("visible")) {
x.classList.remove("visible");
y.textContent = "Show";
} else {
closeOther();
x.classList.add("visible");
y.textContent = "Hide";
}
};
document.getElementsByClassName("show")[2].onclick = function() {
var x = document.getElementsByClassName("hide")[2];
var y = document.getElementsByClassName("show")[2];
if (x.classList.contains("visible")) {
x.classList.remove("visible");
y.textContent = "Show";
} else {
closeOther();
x.classList.add("visible");
y.textContent = "Hide";
}
};
function closeOther() {
var visible = document.querySelectorAll(".visible"),
i, l = visible.length;
for (i = 0; i < l; ++i) {
visible[i].classList.remove("visible");
}
}
.style {
background-color: yellow;
width: 200px;
height: 200px;
display: inline-block;
}
.hide {
background-color: red;
width: 50px;
height: 50px;
display: none;
position: relative;
top: 50px;
left: 50px;
}
.hide.visible {
display: block;
}
<div class="style">
Show
<div class="hide">
</div>
</div>
<div class="style">
Show
<div class="hide">
</div>
</div>
<div class="style">
Show
<div class="hide">
</div>
</div>
I tried to write a solution which didn't use any javascript at all and worked using CSS alone. I couldn't get it to work though - CSS can identify focus but it can't identify blur (ie. when focus has just been removed).
So here is a solution which uses javascript and the classList API, instead:
var divs = document.getElementsByTagName('div');
function toggleFocus() {
for (var i = 0; i < divs.length; i++) {
if (divs[i] === this) continue;
divs[i].classList.add('show');
divs[i].classList.remove('hide');
}
this.classList.toggle('show');
this.classList.toggle('hide');
}
for (let i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', toggleFocus, false);
}
div {
display: inline-block;
position: relative;
width: 140px;
height: 140px;
background-color: rgb(255,255,0);
}
.show::before {
content: 'show';
}
.hide::before {
content: 'hide';
}
div::before {
color: rgb(0,0,255);
text-decoration: underline;
cursor: pointer;
}
.hide::after {
content: '';
position: absolute;
top: 40px;
left: 40px;
width: 50px;
height: 50px;
background-color: rgb(255,0,0);
}
<div class="show"></div>
<div class="show"></div>
<div class="show"></div>
Like this?
Just added following to closeOther():
visible = document.querySelectorAll(".show"),
i, l = visible.length;
for (i = 0; i < l; ++i) {
visible[i].textContent="Show";
}
I am working on the Odin project's javascript/jquery project to make an etcha sketch(of sorts). Initially the webpage loads fine, but when I attempt to change the size of the "gridval" with a prompt, only the box sizes change but not how many boxes fill the given space.
Thanks for your help in advance.
HTML
<!DCOTYPE html>
<html>
<head>
<title>Java Project</title>
<link rel="icon" href="https://www.codementor.io/assets/page_img/learn-javascript.png">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<button class="clear_button">Clear screen</button>
<div id="container"></div>
<script>creategrid();</script>
<script>hovereffect();</script>
</body>
</html>
CSS
#container{
width:400px;
height:400px;
background-color: #fc6;
}
.box{
width:52px;
height:52px;
display:inline-block;
margin: 1px;
background-color: #f86;
}
.clear_button{
background-color: #fc6;
color: #ffe;
border:none;
border-radius: 2px;
padding: 10px;
margin: 10px;
}
.clear_button:hover{
background-color: #426;
}
JavaScript
gridval = 16;
function creategrid(){
$(document).ready(function(){
//make grid code
for(var x = 0; x < gridval; x++){
for(var y = 0; y < gridval; y++){
var box = $("<div class='box'></div>");
box.appendTo('#container');
}
}
var width_height = 400/gridval - 2;
var box_class = document.querySelectorAll(".box");
for(var i = 0; i < box_class.length; i++){
box_class[i].style.width = width_height;
box_class[i].style.height = width_height;
}
//clear button code
$(".clear_button").click(function(){
$(".box").css("background-color", "#f86");
var val = gridval;
gridval = prompt("Please enter a value between 2 and 100 for the grid size!", val);
if(gridval != null) {
var width_height = 400/gridval - 2;
var box_class = document.querySelectorAll(".box");
for(var i = 0; i < box_class.length; i++){
box_class[i].style.width = width_height;
box_class[i].style.height = width_height;
}
}
});
});
}
//hover effect code
function hovereffect(){
$(document).ready(function(){
$(".box").hover(function(){
$(this).css("background-color", "#0ba");
}, function(){
$(this).css("background-color", "#9dd");
});
});
}
Your code needs a total reform, see the comments:
//The ready event will only be triggred once; on your page load.
$(function() {
//Default value
var gridval = 16;
/**
* Create the grid
*/
function createGrid(gridval) {
//make grid code
for (var x = 0; x < gridval; x++) {
for (var y = 0; y < gridval; y++) {
var box = $("<div class='box'></div>");
box.appendTo('#container');
}
}
var width_height = (400 / gridval) - 2;
var box_class = document.querySelectorAll(".box");
for (var i = 0; i < box_class.length; i++) {
box_class[i].style.width = width_height+'px'; //You needed +'px' here
box_class[i].style.height = width_height+'px'; //You needed +'px' here
}
}
//Execute the function on load
createGrid(gridval);
//Event delegation on since your elements will be created dynamically
$(document).on({mouseenter: function() {
$(this).css("backgroundColor", "#0ba");//backgroundColor instead of background-color
}, mouseleave: function() {
$(this).css("backgroundColor", "#9dd");
}}, ".box");
//clear button code
$(".clear_button").click(function() {
//$(".box").css("backgroundColor", "#f86"); // you don't need this all the elements will be removed!
var val = gridval;
gridval = prompt("Please enter a value between 2 and 100 for the grid size!", val);
if (gridval != null) {
//Empty the container
$("#container").empty();
createGrid(gridval);
}
});
});
#container {
width: 400px;
height: 400px;
background-color: #fc6;
}
.box {
width: 52px;
height: 52px;
/* Remove inline block */
display: block;
/* Add float*/
float:left;
margin: 1px;
background-color: #f86;
}
.clear_button {
background-color: #fc6;
color: #ffe;
border: none;
border-radius: 2px;
padding: 10px;
margin: 10px;
}
.clear_button:hover {
background-color: #426;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clear_button">
Clear screen</button>
<div id="container"></div>
I am new to web development but highly fascinated by it. So, basically I am creating a light-box where thumbnails of images will be appear on screen and they will appear bigger in size when user clicks over them. Now, I want when user hovers over the gallery images/thumbnails then some text should appear over the current image with may be some animation or basically mouser-hover should cause some event to happen but I am unable to do it. Text should be added dynamically or may be previously stored in an array or something of that sort. Please have a look at my code and tell me how to modify it in order to achieve such effect and if you know a better and easier way to do so then feel free to share. Thank you so much!!
HTML:
<div class="gallery">
<ul id="images"></ul>
<div class="lightbox">
<div class='limage'>
</div>
<div class='left'>
</div>
<div class='right'>
</div>
<div class='close'>
x
</div>
</div>
</div>
JAVASCRIPT:
var gallery_slider = new Array();
gallery_slider[0] = "im1.jpg";
gallery_slider[1] = "im2.jpg";
gallery_slider[2] = "im3.jpg";
function displayAllImages() {
var i = 0,
len = gallery_slider.length;
for (; i < gallery_slider.length; i++) {
var img = new Image();
img.src = gallery_slider[i];
img.style.width = '200px';
img.style.height = '120px';
img.style.margin = '3px';
img.style.cursor = 'pointer';
document.getElementById('images').appendChild(img);
}
};
$(function() {
displayAllImages();
});
$(function() {
$('img').click(function() {
var hell = (this).src;
display(hell);
});
});
function display(hello) {
$('header').css('display', 'none'); /*for some other purposes*/
$('.limage').html("<img src=" + hello + " >");
$('.lightbox').css("display", "block");
$('.lightbox').fadeIn();
$('.right').click(function() {
var im = new Array();
var x;
var p;
for (x = 0; x < gallery_slider.length; x++) {
im[x] = gallery_slider[x];
}
for (p = 0; p < im.length; p++) {
if (im[p] == hello) {
break;
} else {
continue;
}
}
if (p >= (im.length - 1)) {
p = -1;
}
$('.limage').fadeOut(0);
$('.limage').html("<img src= " + im[p + 1] + ">");
$('.limage').fadeIn(500);
hello = im[p + 1];
});
$('.left').click(function() {
var im = new Array();
var x;
var p;
for (x = 0; x < gallery_slider.length; x++) {
im[x] = gallery_slider[x];
}
for (p = 0; p < im.length; p++) {
if (im[p] == hello) {
break;
} else {
continue;
}
}
if (p == 0) {
p = (im.length);
}
$('.limage').fadeOut(0);
$('.limage').html("<img src= " + im[p - 1] + ">");
$('.limage').fadeIn(500);
hello = im[p - 1];
});
$('.close').click(function() {
$('.lightbox').fadeOut();
$('header').css('display', 'block'); /*for some other purposes*/
});
};
CSS:
.gallery {
width: 100%;
height: 400px;
overflow: hidden;
margin: auto;
}
.gallery ul {
list-style: none;
}
.lightbox {
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 106;
}
.close {
color: #fff;
border: 1px solid #fff;
border-radius: 100px;
background-color: #000;
position: absolute;
top: 10px;
right: 20px;
padding: 10px;
font-family: firstfont;
font-size: 30px;
z-index: 101;
cursor: pointer;
}
.close:hover {
background-color: #ebebeb;
color: #000;
}
.left {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.right {
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.limage {
position: relative;
margin: auto;
top: 17%;
left: 15%;
max-width: 90%;
max-height: 90%;
}
There might be some bugs in coding. Watch out.
This code is working for displaying images as thumbnails as a matrix and as slider in lightbox when clicked upon them. I am not able to figure out how to add hover functionality to initial thumbnails.
Jsfiddle :
http://jsfiddle.net/psd6cbd7/1/
I'd suggest putting a div inside the image div containing the text and then using CSS to hide/show it.
HTML:
<div class="gallery">
<ul id="images"></ul>
<div class="lightbox">
<div class='limage'>
<div class=".caption">Caption here</div>
</div>
<div class='left'>
</div>
<div class='right'>
</div>
<div class='close'>
x
</div>
</div>
</div>
CSS:
.limage { position: relative; }
.caption { display: none; }
.limage:hover .caption { display: block; position: absolute;}
Why you using array to store the images? Anyways, assume that you still using array, below is some example code that you want try:
HTML:
<ul id="images">
</ul>
<!-- assume this is the place that you want to display the caption -->
<div id="caption"></div>
Javascript:
var images = new Array();
images[0] = "p1.png";
images[1] = "p2.png";
images[2] = "p3.png";
images[3] = "p4.png";
var captions = new Array();
captions[0] = "Picture 1";
captions[1] = "Picture 2";
captions[2] = "Picture 3";
captions[3] = "Picture 4";
var x = $("#images");
var y = $("#caption");
const prefix = "image-";
if you are using HTML5:
for (var i = 0; i < images.length; i++) {
x.append("<img class='roll' src='" + images[i] + "' data-caption='" + captions[i] + "'>");
}
$(".roll").mouseover(function(){
//do whatever effect here when mouse over
y.html($(this).attr("data-caption"));
});
If you want to backward compatible:
for (var i = 0; i < images.length; i++) {
x.append("<img id='" + prefix + i + "' class='roll' src='" + images[i] + "'>");
}
$(".roll").mouseover(function(){
//do whatever effect here when mouse over
var index = $(this).attr("id").substring(prefix.length);
y.html(captions[index]);
});
Hope that this will help.