We Keep Coding

DOM assign an id to child Javascript

I have created a grid with div, class and id. I want to randomly create a yellow square and I want to assign an id= 'yellowSquare' how do I do it?
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 100; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var playerOne = [];
while (playerOne.length < 1) {
var randomIndex = parseInt(99 * Math.random());
if (playerOne.indexOf(randomIndex) === -1) {
playerOne.push(randomIndex);
var drawPone = document.getElementById('square' + randomIndex);
drawPone.style.backgroundColor = 'yellow';
}
}
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
<div id="grid-box"></div>
I am new to Javascript / jQuery. Any help will be much appreciated ! Thank you

There are two options to your question. You can either change the id of the yellow square which is already created from your code, or create a child element within the square, which looks the same as your current solution. Creating a new child element will let you keep the numeric id pattern for the grid:
Changing the ID :
var element = document.getElementById('square' + randomIndex)
element.id = "yellowSquare";
Adding new element inside:
var node = document.createElement("DIV");
node.id = "yellowSquare";
node.style = "background-color:yellow;height:100%;width:100%;";
var element = document.getElementById('square' + randomIndex)
element.appendChild(node);
I set the styling of the div child to 100% width and height, as it has no content, and would get 0 values if nothing was specified. This should make it fill the parent container.
There are also multiple other ways to achieve the same result, for instance with JQuery.

Use the HTMLElement method setAttribute (source);
...
var drawPone = document.getElementById('square' + randomIndex);
drawPone.style.backgroundColor = 'yellow';
drawPone.setAttribute('id', 'yellowSquare');
...

As you requested in your comment how to move the square i made an example how you can move it left and right using jQuery next() and prev() functions. However because your html elements are 1 dimensional it's not easy to move them up/down and check the sides for collisions. Better would be to create your html table like with rows and columns and this way create a 2 dimensional play field.
Also added a yellowSquery class for selection with $drawPone.addClass('yellowSquare');.
Also since you like to use jQuery I changed your existing code to jQuery function. Might help you learn the framework.
var $grid = $("#grid-box");
for (var i = 1; i <= 100; i++) {
var $square = $("<div>");
$square.addClass('square');
$square.attr('id','square' + i);
$grid.append($square);
}
var playerOne = [];
while (playerOne.length < 1) {
var randomIndex = parseInt(99 * Math.random());
if (playerOne.indexOf(randomIndex) === -1) {
playerOne.push(randomIndex);
var $drawPone = $('#square' + randomIndex);
$drawPone.addClass('yellowSquare');
}
}
$('#button_right').on('click', function(){
$yellowSquare = $('.yellowSquare')
$yellowSquareNext = $yellowSquare.next();
$yellowSquare.removeClass('yellowSquare');
$yellowSquareNext.addClass('yellowSquare');
});
$('#button_left').on('click', function(){
$yellowSquare = $('.yellowSquare')
$yellowSquarePrev = $yellowSquare.prev();
$yellowSquare.removeClass('yellowSquare');
$yellowSquarePrev.addClass('yellowSquare');
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.yellowSquare {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid-box"></div>
<button id="button_left">left</button>
<button id="button_right">right</button><br>

How can I repeat an animation after changing the text inside the element?

I have an text element (HTML) that plays an animation when the page loads and I'm trying to create a script to change the original text to a different one and then play the same animation. Here is part of my code:
setTimeout(function typewriter() {
let txt;
let themes = document.getElementById("themes");
txt = "Games";
themes.innerText = txt;
themes.classList.add("changer");
}, 4000);
.typewriter h1 {
color: #ffffff;
background-color: #000000a8;
border-radius: 5px;
padding: 10px;
font-family: monospace;
font-size: 35px;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid #333333; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
animation:
typing 2s steps(30, end),
blink-caret .5s step-end infinite;
}
.changer {
animation: typing 2 s steps(30, end),blink - caret .5 s step - end infinite;
}
/* The typing effect */
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #333333 }
}
<div class="typewriter">
<h1 id="themes">Science</h1>
</div>
The problem is that after 4 seconds when the text changes I can't play the animation again. Can anyone help me, please? Thank you.

First, you are using setTimeout (This is wrong)
If you want it to repeat the function, you should use setInterval.
Second, you are changing the same "Text" every time you call the function, which is "Games". If you want it to change to a certain text, you need to store it first in an array,
var texts = [];
//Add a counter
var curr = 0;
//Store in array
texts.push("Games");
texts.push("Science");
setInterval(function() {
let txt;
//Change the texts array value with curr variable (the Counter)
txt = texts[curr];
let themes = document.getElementById("themes");
themes.innerText = txt;
themes.classList.add("changer");
//Change the counter variable
curr += 1;
//Change the counter to the start of the array
if(curr >= texts.length) curr = 0;
}, 4000);
In my case, the animation doesn't work. But if you want to change the text for every 4s, this code will help you.
You can add any number of text that you want.

I found a solution using JavaScript to increase the width of the element from 1% to 100%!
Here is my JavaScript code:
var texts = [];
//Add a counter
var curr = 0;
//Store in array
texts.push("Games");
texts.push("Science");
setInterval(function() {
let txt;
//Change the texts array value with curr variable (the Counter)
txt = texts[curr];
let themes = document.getElementById("themes");
themes.innerText = txt;
var width = 0;
var id = setInterval(frame,10);
function frame(){
if(width >= 100){
clearInterval(id);
} else {
width++;
themes.style.width = width + "%";
}
}
//Change the counter variable
curr += 1;
//Change the counter to the start of the array
if(curr >= texts.length) curr = 0;
}, 4000);
Thank you for the help!

Create custom square grid using jquery

I am working on a project trying to make something resembling an etch-a-sketch. I have a 780x780px square, and I am trying to get a 16x16 grid, using a series of smaller square divs.
It is on this grid that I have the hover effect. I keep getting a 15x17 grid of square divs because the last square of the row won't fit. I have margins set to 1px and padding set to 0 so I figured that to fit 16 squares on a 780px wide row, it would require me to take into account the margins (15 1px margins) and from there I could divide (780-15) by 16, the number of squares I want.
That isn't working, and the next step of this project is to have a button where the user could input any number of squares for the row/column and have either a larger or smaller squared grid STILL ON the 780x780 square. Does anyone have any ideas? I'm pretty stumped.
$(document).ready(function() {
var original = 16;
for (var y = 0; y < original * original; y++) {
$(".squares").width((780 - 15) / original);
$(".squares").height((780 - 17) / original);
$("<div class='squares'></div>").appendTo('#main');
}
$('.squares').hover(
function() {
$(this).addClass('hover');
}
)
});
function gridq() {
$('.squares').removeClass('hover');
$('div').remove('.squares');
var newgrid = prompt("How many squares on each side?");
var widthscreen = 192;
if (newgrid > 0) {
for (var x = 0; x < newgrid * newgrid; x++) {
$(".squares").width(widthscreen / newgrid);
$(".squares").height(widthscreen / newgrid);
$("<div class='squares'></div>").appendTo('#main');
}
$('.squares').hover(
function() {
$(this).addClass('hover');
}
)
}
}
#main {
height: 780px;
width: 780px;
background-color: antiquewhite;
position: relative;
}
.squares {
margin: 1px;
padding: 0;
background-color: aquamarine;
display: inline-block;
float: left;
}
.hover {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id=main>
</div>
<button onclick="gridq()">Go Again!</button>

Try this snippet? Grid initialisation is set in the grid() function and then called later when necessary. The width is set dynamically to the 16th square's right side.and the remaining squares fill out as necessary.
var wide = (780 - 15) / 16,
tall = (780 - 17) / 16; // set the square dimensions. this can be incorporated into the grid() function with 16 replaced by 'original'
function grid(x, y) {
var original = x,
y = y;
$("#main").empty(); // empty and restart
$("#main").width(wide * (original + 1));
for (var i = 0; i < original * y; i++) {
$("<div class='squares'></div>").appendTo('#main');
}
var square = $(".squares");
square.width(wide);
square.height(tall);
var side = square.eq(original - 1).position().left + square.width() + 2; // tighten the #main width
$("#main").width(side);
$('.squares').hover(
function() {
$(this).addClass('hover');
}
)
}
grid(16, 16); // starting dimension
function gridq() {
$('.squares').removeClass('hover');
$('div').remove('.squares');
var newgrid = prompt("How many squares on each side?");
var widthscreen = 192;
if (newgrid > 0) {
grid(newgrid, newgrid);
}
}
#main {
background-color: antiquewhite;
position: relative;
}
.squares {
margin: 1px;
padding: 0;
background-color: aquamarine;
display: inline-block;
float: left;
}
.hover {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='main'>
</div>
<button onclick="gridq()">Go Again!</button>

just got beat to it...ill post this as it answers the question slightly differently and I feel is a little cleaner. Also I added in a width and a height prompt.
see the codepen here
As a side note...its good practice to make the names of your variables make sense. Also I find that breaking down your code problems into smaller more manageable chunks makes it seem less overwhelming...one step at a time :)
Enjoy and good luck!
$(document).ready(function() {
//declare the variables at the top of your functions...it enables us to change them later
var columnWidthCount = 16;
var columnHeightCount = 16;
function makeBoxes() {
//boxcount lets us set how many times we want the for loop to run...when we change the columns/rows later this variable will be updated
var boxCount = columnWidthCount * columnHeightCount;
//
for (var i = 0; i < boxCount; i++) { //loop through each box
//any code you place in here will execute each time we loop around
$("<div class='squares'></div>").appendTo('#main');
}
//we only want to declare this once so we place it after the loop
$(".squares").width((780 / columnWidthCount) - 2);
$(".squares").height((780 / columnHeightCount) - 2);
$('.squares').hover(
function() {
$(this).addClass('hover');
}
);
}
//fire the initial function
makeBoxes();
// fire function after click
$('button').on("click", function() {
$('div').remove('.squares');
var squaresHigh = prompt("How many squares high? (must be a number)");
var squaresWide = prompt("How many squares wide? (must be a number)");
//prompt returns a string...use parseInt to turn that number string into an integer
columnWidthCount = parseInt(squaresWide);
columnHeightCount = parseInt(squaresHigh);
makeBoxes();
});
});
#main {
height: 780px;
width: 780px;
background-color: antiquewhite;
position: relative;
font-size:0;
white-space:nowrap;
}
.squares {
margin: 1px;
padding: 0;
background-color: aquamarine;
display: inline-block;
float: left;
}
.hover {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id=main>
</div>
<button>Go Again!</button>

Image overlapping a span in another li element

EDIT: I have created a JS-Fiddle that shows you the code in action and you can see how the caption's text is being overlapped. https://jsfiddle.net/wj76sv1h/
So I have a list of divs that display images obtained from a Database. This list is created by PHP, but when I have attempted to add a caption, as you can see from the image (sorry I can't include the image directly in the post), it is being overlapped by another Li element's image. The caption is a span tag.
I have attempted to change the z-index of the images and the divs, however it seems like it has no effect. I am also using this code in order to create the grid system using the lis.
function createListStyles(rulePattern, rows, cols) {
var rules = [], index = 0;
for (var rowIndex = 0; rowIndex < rows; rowIndex++) {
for (var colIndex = 0; colIndex < cols; colIndex++) {
var x = (colIndex * 100) + "%",
y = (rowIndex * 100) + "%",
transforms = "{ -webkit-transform: translate3d(" + x + ", " + y + ", 0); transform: translate3d(" + x + ", " + y + ", 0); }";
rules.push(rulePattern.replace("{0}", ++index) + transforms);
}
}
var headElem = document.getElementsByTagName("head")[0],
styleElem = $("<style>").attr("type", "text/css").appendTo(headElem)[0];
if (styleElem.styleSheet) {
styleElem.styleSheet.cssText = rules.join("\n");
} else {
styleElem.textContent = rules.join("\n");
}
}
If anyone could help me, that would be great. Thanks. This is the html used for the item/caption.
<div class="item" id="item-covert"><span>Caption</span> <div id="item-price"> $54.36</div><img class="item-image" src="image.url"></div>
Css:
.item {
position: relative
}
.item span {
display: none;
position: absolute;
bottom: 0;
padding: 10px;
background: rgba(255,255,255,0.99);
/*top: 20px;
width: 300px;
height: 50px;*/
font-family: Open Sans;
/*margin-left: 110px;*/
left: 110px;
}
.item:hover span {
display: block
}

Your positioning of the span moves it onto the image. Move it ten pixels farther to the right, and it looks fine. https://jsfiddle.net/yak613/5p3uuzfg/
I've taken some liberties with the caption text :)
And some suggestions for cool caption colors :)
Live Example

How to make marquee when hover in - text scroll and infinite loop, out - back to start position?

here is my jsfiddle http://jsfiddle.net/9XdV7/, how to make when hover in - text scroll and infinite loop, out - back to start position? now it can't infinite loop scroll
for (var i = 0; i < $('.list').length; i++) {
var this_el = $('.list').eq(i);
var interval = null;
$(this_el).hover(function() {
var that = $(this);
var this_indent = 0;
interval = setInterval(function(){
this_indent--;
if (this_indent == -($(that).find('.text').width())) {
clearInterval(interval);
this_indent = 0;
// how to loop scroll
}
$(that).css('text-indent', this_indent);
},20);
}, function() {
clearInterval(interval);
$(this).css('text-indent', 0);
});
}
html & css
<div class="list"><div class="text">stringstringstringstring</div></div>
<div class="list"><div class="text">stringstringstring</div></div>
<div class="list"><div class="text">stringstringstringstring</div></div>
.list {
width: 100px;
overflow: hidden;
white-space:nowrap;
height: 15px;
background-color: red;
margin: 10px;
}
.text {
text-align: left;
background-color: purple;
display: inline;
}

Is this what you're looking for? Fiddle
I used mouseenter and mouseleave instead of hover.
$(elem).on("mouseenter",function() { ... });
I stored the identifier belonging to the element in its data: $(this).data("interval",interval);
I added
if(this_indent < -150) {
this_indent = 100;
}
to make the effect infinite. -150 is a value I got from the developer tools. 100 is pure testing.

This still wants some tweaking for determining the point at which to loop, but I think it's basically what you want:
$(function() {
for (var i = 0; i < $('.list').length; i++) {
var this_el = $('.list').eq(i);
var interval = null;
$(this_el).hover(function() {
var that = $(this);
var this_indent = 0;
interval = setInterval(function(){
this_indent--;
if (this_indent < that.width() * -1)
this_indent = that.width();
that.css('text-indent', this_indent);
},20);
}, function() {
clearInterval(interval);
$(this).css('text-indent', 0);
});
}
});
It's looping based on the width of the div, rather than the actual length of the text. If you want the text width, you could look here: Calculating text width