I am trying to make a simple slide show by changing the pics in a DOM element.
Here is the HTML and the JavaScript..
The pics do NOT show up
What am I missing ?
here is the HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<img id="pictures" style = "width:50%">
<div>
<button type="button" id="reverse">Reverse</button>
<button type="button" id="forward">Forward</button>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
Here is the JavaScript Part
function slideshow(){
'use strict';
let i = 0;
// array to hold the pictures
let pics = [];
pics [0] = cave.jpg;
pics [1] = creek.jpg;
pics [2] = entrance.jpg;
pics [3] = tree.jpg;
// making the pictures the dom element
document.getElementById('pictures').value = pics[i];
// make the buttons rotate through the pics
document.getElementById('forward').onclick = i++;
document.getElementById('reverse').onclick = i--;
}
window.onload = init;
Any pointers would be most appriciated.
Few things are missing in your solution, so feel free to run and inspect the code below. Also, put images in HTML at the beginning. JS code running is making sure they are changing the order. Only the middle one is passing through the window (#pictures-container) - this code works only for the odd number of images.
Here's the code that will work:
HTML (index.html)
<html>
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="pictures-container">
<div id="pictures">
<img class="picture" alt="pic 1" data-id="1">
<img class="picture" alt="pic 2" data-id="2">
<img class="picture" alt="pic 3" data-id="3">
</div>
</div>
<div id="slideshow-actions">
<button type="button" id="reverse">Reverse</button>
<button type="button" id="forward">Forward</button>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
CSS (css/style.css)
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
}
#pictures-container {
width: 110px;
height: 90px;
border: 1px solid red;
border-radius: 15px;
position: relative;
overflow: hidden;
}
#pictures {
display: flex;
gap: 5px;
z-index: -1;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.picture {
width: 100px;
height: 80px;
display: block;
padding: 5px;
background-color: #dedede;
}
.picture[data-id="1"] {
background-color: yellow;
}
.picture[data-id="2"] {
background-color: magenta;
}
#slideshow-actions {
margin-top: 15px;
}
JS (js/script.js)
function registerEvents() {
let btnReverse = document.getElementById('reverse');
let btnForward = document.getElementById('forward');
btnReverse.onclick = () => {
let pictures = document.querySelectorAll('.picture');
let firstPic = pictures[0];
let parent = firstPic.parentElement;
parent.removeChild(firstPic);
parent.append(firstPic);
}
btnForward.onclick = () => {
let pictures = document.querySelectorAll('.picture');
let lastPic = pictures[pictures.length - 1];
let parent = lastPic.parentElement;
parent.removeChild(lastPic);
parent.prepend(lastPic);
}
}
registerEvents();
Related
I'm trying to make a simple gallery with a modal viewer. Almost there but 2 simple problems confuse my little brain and can't figure them out.
problem 1- why does it work for the first image only?
problem 2- how to un append the image from the viewer so it will show again where it was? I know it will work if I create the image as a new item and then append it, but I can't figure this out.
let img = document.querySelector("img");
let viewer = document.getElementById("viewer");
img.addEventListener("click" , viewImg);
function viewImg() {
if (viewer.style.visibility = "hidden") {
viewer.appendChild(img);
img.style.width = "60%";
viewer.style.visibility = "visible";
}
}
function closeViewer() {
if (viewer.style.visibility = "visible") {
viewer.style.visibility = "hidden";
viewer.removeChild(img);
}
}
.container {
line-height: 0;
column-count: 3;
column-gap: 0;
column-fill: balance;
}
.container img {
width: 100%;
}
.container img:hover {
scale: 1.1;
transition: 0.5s;
left: 120%;
cursor: pointer;
}
.viewer {
visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: rgb(255, 0, 0, 0.5);
/* transition: 1s; */
}
.closeViewer {
color: #000;
background: rgb(255, 255, 255, 0.5);
position: absolute;
top: 100px;
right: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
padding: 0 10px;
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>simple gallery</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container" id="container">
<!-- onclick="viewImg()" -->
<img class="img"src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
<img class="img"src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
<img class="img"src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
<img class="img"src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
<img class="img"src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
<img class="img"src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
<img class="img"src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
</div>
<div class="viewer" id="viewer">
<button class="closeViewer" id="closeViewer" onclick="closeViewer()">X</button>
</div>
<script src="./test.js"></script>
</body>
</html>
The reason why only the first <img> worked and none of the other ones did is because .querySelector() selects the first <img class='img'> it finds and then stops. Then when the modal is closed the appended image is permanently removed from the whole page so nothing works after that.
You need to bind the event handler to an parent tag of all of those <img> and then single out the <img> you clicked by using e.target. In the example <dialog> element is used instead of a plain <div>.
Details are commented in example
// Reference <dialog>, <figure>, <section>, and <button>
const viewer = document.querySelector(".viewer");
const frame = document.querySelector('.frame');
const gallery = document.querySelector('.gallery');
const close = document.querySelector('.close');
// Bind the click event to the parent tag of all of the <img>
gallery.addEventListener("click", viewImg);
// Bind the click event to the <button>
close.onclick = closeViewer;
// Event handler passes Event Object by default
function viewImg(e) {
// Reference the tag user clicked
const clk = e.target;
/*
If the user clicked an <img class='img'>...
...open <dialog>...
...make a clone of the clicked <img>
...then add the clone to <figure>
*/
if (clk.matches('.img')) {
viewer.showModal();
let copy = clk.cloneNode(true);
frame.append(copy);
}
}
// Close <dialog> and remove the clone from <figure>
function closeViewer(e) {
viewer.close();
frame.replaceChildren();
}
.gallery {
line-height: 0;
column-count: 3;
column-gap: 0;
column-fill: balance;
}
img {
width: 100%;
cursor: pointer;
}
.viewer {
position: relative;
width: 75%;
overflow: hidden;
}
.close {
color: #000;
background: rgb(255, 255, 255, 0.5);
position: absolute;
top: 4px;
right: 4px;
font-size: 3rem;
padding: 0 10px;
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>simple gallery</title>
</head>
<body>
<section class="gallery">
<img class="img" src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
<img class="img" src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
<img class="img" src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
<img class="img" src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
<img class="img" src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
<img class="img" src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
<img class="img" src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
</section>
<dialog class="viewer">
<button class="close">X</button>
<figure class='frame'></figure>
</dialog>
</body>
</html>
When I go to the second photo and I want to click on the back key, I have to click twice. If I change the value of n and make it 0. The next function breaks down and this is the problem. help me to fix ty for help me ..............................................................................................
// alert('');
let topImg = document.querySelector('.top-img img')
let downImgs = document.querySelectorAll('.imgs-down img')
let ArrayIMg = ["img/3-kid.jpeg","img/men-1.jpg","img/woamn-1.jpeg" ,"img/woman-2.jpg"]
let n = 1;
// let b = 1
downImgs.forEach(img=>{
img.addEventListener('click' , ()=>{
topImg.src = img.src
});
});
function nxt(){
topImg.setAttribute('src' , ArrayIMg[n])
n++
if(n>=ArrayIMg.length){n=0}
}
function prv(){
if(--n<0){
n = ArrayIMg.length -1
}
topImg.setAttribute('src' , ArrayIMg[n])
// console.log(n)
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
img{
width: 150px;
height: 150px;
}
.parent-all{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.top-img img{
width: 100%;
height:450px;
object-fit: cover;
}
.top-img{
position: relative;
}
.next,
.prv{
color:white;
cursor:pointer;
top:35%;
font-size: 30px;
padding:5px;
margin:5px;
background: black;
position: absolute;
z-index: 99;
}
.next{
right:0;
}
.prv{
left:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exam slider with if </title>
<link rel="stylesheet" href="exam.css">
</head>
<body>
<section class="parent-all">
<figure class="top-img">
<img src="img/3-kid.jpeg" alt="">
</figure>
<figure class="imgs-down">
<img src="img/3-kid.jpeg" alt="">
<img src="img/men-1.jpg" alt="">
<img src="img/woamn-1.jpeg" alt="">
<img src="img/woman-2.jpg" alt="">
</figure>
<span class="next" onclick="nxt()">❯</span>
<span class="prv" onclick="prv()">❮</span>
</section>
<script src="exam.js"></script>
</body>
</html>
Sorry to say, but you have overdone the javascript part for no reason.
Start from n=0, and stick to the basics.
let n = 0;
function nxt(){
n = n+1 === ArrayIMg.length ? 0 : n+1;
topImg.setAttribute('src' , ArrayIMg[n]);
}
function prv(){
n = n === 0 ? ArrayIMg.length-1 : n - 1;
topImg.setAttribute('src' , ArrayIMg[n])
}
demo: https://jsfiddle.net/mey3puzL/
Okay, okay. I know many people have asked this question on Stack Overflow, but the solutions don't work for me. So my problem is simple: how do I make the female-av-button and male-av-button have a background URL of female-avatar & male-avatar respectively? Here's my code:
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" onclick="chooseanav()" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
// document.getElementsByClassName("user-input").style.height="500px";
function chooseanav() {
document.getElementsByClassName('female-av').style.background = "url('../img/female-avatar.png') no-repeat";
}
</script>
</body>
</html>
Any help is greatly appreciated.
Thanks!
Change your code to be;
document.getElementsByClassName('female-av')[0].style.background = "url('../img/female-avatar.png') no-repeat";
Oddly, unlike .getElementById() when you use .getElementsByClassName() you need to index the object. I think this is because IDs are unique where classes can be many.
The clue is in the getElement vs getElements.
EDIT: to answer your comment regarding clicking outside it etc you will have to change up your code a bit. Check my snippet below and let me know if anything doesn't make sense!
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
var femaleAV = document.getElementsByClassName('female-av')[0];
var maleAV = document.getElementsByClassName('male-av')[0];
document.addEventListener('click', function(e) {
if (e.target.className == 'female-av') {
femaleAV.style.background = "url('../img/female-avatar.png') no-repeat";
maleAV.style.background = "";
} else if (e.target.className == 'male-av') {
femaleAV.style.background = "";
maleAV.style.background = "url('../img/male-avatar.png') no-repeat";
} else {
femaleAV.style.background = "";
maleAV.style.background = "";
}
});
</script>
</body>
</html>
Basically, I have removed your onclick="" event from the female-av and have put an overall listener in the <script>. From here I have set 2 variables (Female & Male) and then an if-statement to check what is being clicked. Depending on what is being clicked it will either set/unset the female or male background respectively and if neither of the two are clicked it resets both.
There is a downside to this though, should the user click ANYWHERE else it means it will reset the selection. Example, if you select your MALE or FEMALE and then click to change your username you will see it deselects/resets.
To fix this, you can narrow the function like so;
document.querySelector('.avatars').addEventListener('click', function(e) {...})
That way it only listens to clicks inside the .avatars box.
I hope it's clear! If not, let me know and I'll try explain further!
You don`t have to use javascript to change it. You can use :focus directly in css.
.male-av:focus{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
.female-av:focus{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
So this way when the button is clicked you can keep the image or change the background color.But it returns to normal when clicked outside of the button.
This will make any element that has class female-av change its background on click
let fa = document.getElementsByClassName("female-av-button");
for(let i = 0;i<fa.length;i++){
fa[i].addEventListener('click',function(){
this.style.background="url('../img/female-avatar.png') no-repeat";
});
}
if you want only one specific element to have this behavior give it an id and use
document.getElementById("elementID").addEventListener('click',function(){this.style.background="black";});
Maybe have the image contained in the button itself and not the CSS.
Then have a JavaScript function that changes the image.
Or (the easier option) have a JS function that toggles the class containing the new image and the one with the old image (with the old image class already in there).
Say...
<html>
<style>
/* add this to <style> the css (exept the image links) */
.confirm {
background: url('https://live.staticflickr.com/7057/7119974123_291cac34b7_b.jpg') no-repeat;
}
.unclicked {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Flag_of_Tabajd_%281-1_aspect_ratio%29.svg/480px-Flag_of_Tabajd_%281-1_aspect_ratio%29.svg.png') no-repeat;
}
</style>
<script>
/*add this to <script> block*/
function change() {
var btnImg= document.getElementById("btn")
btnImg.classList.toggle("confirm")
btnImg.classList.toggle("unclicked")
}
</script>
<div id="Copy this"></div>
<button class="unclicked" id="btn" onClick=change()></button>
</html>
The classes are so the background can be swapped and clicking it twice will result in the original image showing!
It does work for me, so I hope this helps!
Gypsy.jpg location (uploaded)
This will work:
//CSS
button {
background: blue;
}
<!-- HTML and JS -->
<!-- Blue to Gypsy.jpg -->
<button id="this" onclick="putimage('https://i.stack.imgur.com/8oMX9.jpg'); //<-- paste image here.">Click Me!</button>
<script>
var putimage = function(i) {
// i is image url.
document.getElementById("this").style = 'background: url("' + i + '") space !important';
};
</script>
I've put together a Codepen by mashing together a couple different examples by other people in order to get something pretty close to what I'm actually looking for. The only problem I have now is that I'd like to give the button in my example a default value of 3, rather than have somebody input a value of their choice, so that when the button is clicked, three images are selected at random.
I've tried
$(shuffle($all).slice(0, $("input").val(3))).addClass("selected");
whilst commenting out the input type, but that didn't work.
Thanks in advance for any tips!
http://codepen.io/asyi/pen/XMVwVg
<head>
<link rel="stylesheet" type="text/css" href="styles/style.css"> <title>This Webpage</title>
</head>
<body>
<div id="container">
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
</div>
<button>Click to win!:</button>
<input type="text" size="3" value="3" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts/script.js"></script>
</body>
CSS
* {
box-sizing: border-box;
}
#container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#container > div {
width: 50%;
height: 20vw;
border: white 10px solid;
}
.selected {
background: tan;
border: red 2px solid;
}
.square {
background-image: url('https://placebear.com/300/200');
background-repeat: no-repeat;
background-size: 85%;
background-position: center;
}
jQuery
$(document).ready(function(){
function shuffle(array) {
var m = array.length, t, i;
// While there remain elements to shuffle…
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
$(function() {
$("button").click(function() {
var $all = $(".square").removeClass("selected");
$(shuffle($all).slice(0, $("input").val())).addClass("selected");
});
});
});
I am making an etch-a-sketch in browser. Currently when I enter a size of 7200 it works fine, but I want to be able to enter a number and make a grid out of it. So say when one enters 16 it creates 16x16, or 100, 100x100 etc. Additionally, how do I get my div's to respond dynamically to that so that it fills up the screen regardless of the amount of divs I have?
My HTML:
<DOCTYPE html>
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="JS/jquery-1.12.0.js"></script>
<script type="text/javascript" src="JS/etch.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div class="button">
<button type="button" id="clear-button">Clear Board</button>
</div>
<div id="game"></div>
</div>
</body>
</html>
My CSS:
#wrapper {
width: 1000px;
height: 760px;
background-color: gray;
}
.grid {
width: 10px;
height: 10px;
float: left;
}
.draw {
background-color: black;
}
.button {
width: 1000px;
height: 40px;
}
#clear-button {
margin: auto;
display: block;
}
My .Js
var count = 0;
$(document).ready(function() {
while(count < 7200){
$('#game').append('<div id="grid-"'+ count +' class="grid"></div>');
count++;
};
$('.grid').on({
mouseenter: function () {
$(this).addClass('draw');
},
mouseleave: function () {
$(this).addClass('draw');
}
});
$('button').click(function() {
$('#game').empty();
count = 0;
var size = prompt("What size would you like the new etch-a-sketch to be?");
while(count < size){
$('#game').append('<div id="grid-"'+ count +' class="grid"></div>');
count++;
};
$('.grid').on({
mouseenter: function () {
$(this).addClass('draw');
},
mouseleave: function () {
$(this).addClass('draw');
}
});
});
});
I think you would like to read more about flexbox layouts. Here is a basic example in which you can add as many elements in a single row.
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 250px;
background-color: lightgrey;
}
.flex-item {
-webkit-flex: 1;
flex: 1;
margin: 10px;
background: blue;
}
<div class="flex-container">
<div class="flex-item item1">flex item 1</div>
<div class="flex-item item2">flex item 2</div>
<div class="flex-item item3">flex item 3</div>
</div>