We Keep Coding

Hovering over pseudo after element to change the style

I'm trying to create a simple demo where rolling over a pseudo element will change the style of its parent. In other words, I want to be able to roll over the letter e in the top right corner of the image and then display the text content.
I've managed to get it working when rolling over the image itself, but not the pseudo element. I've commented out the working code for rolling over the image itself, and left the incorrect pseudo rollover code uncommented out.
I wonder whether you can actually select pseudo elements in JS as it shows null when trying to select any pseudo element.
Any ideas would be appreciated. Thanks for any help. The code is below:
Codepen: https://codepen.io/anon/pen/NZvdzr
/*document.querySelector('#img-wrap').onmouseover = function() {
document.querySelector('#caption-wrap').style.opacity = 1;
}
document.querySelector('#img-wrap').onmouseout = function() {
document.querySelector('#caption-wrap').style.opacity = 0;
}*/
document.querySelector('#img-wrap:after').onmouseover = function() {
document.querySelector('#caption-wrap').style.opacity = 1;
}
document.querySelector('#img-wrap:after').onmouseout = function() {
document.querySelector('#caption-wrap').style.opacity = 0;
}
#img-wrap {
width: 30%;
position: relative;
}
#caption-wrap {
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
img {
width: 100%;
}
#img-wrap:after {
content: 'e';
position: absolute;
top: 0;
right: 0;
}
<div id='img-wrap'>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-bCnPPMYp6QIfrCr2BR-imm_Sw9IHCXIXzE5fei7R8PTBKYGd'>
<div id='caption-wrap'>
<p>some text will appear</p>
</div>
</div>

You cannot listen to pseudo elements, but you can find out some interesting info via window.getComputedStyle(). Below is a demo.
I'm listening to mouse move on the image element and comparing the coords to see if they fall between the rectangle of the pseudo element.
There is a padding of 2px on each tolerance, you could change that to something else if you want to be more forgiving with the mouse over detection.
CanIUse.com says window.getComputedStyle() is supported by all browsers, but I haven't tested if they all return the proper coordinate information for this to work – you should cross browser test this before using.
var element = document.querySelector('#img-wrap')
element.onmousemove = function(event){
var elementRect = element.getBoundingClientRect()
var pseudo = window.getComputedStyle(element, ':after')
var pseudoRect = {
top: parseFloat(pseudo.top),
left: parseFloat(pseudo.left),
width: parseFloat(pseudo.width),
height: parseFloat(pseudo.height),
}
var mouseX = event.clientX
var mouseY = event.clientY
var yTolTop = elementRect.top + pseudoRect.top - 2
var yTolBot = elementRect.top + pseudoRect.top + pseudoRect.height + 2
var xTolLeft = elementRect.left + pseudoRect.left - 2
var xTolRight = elementRect.left + pseudoRect.left + pseudoRect.width + 2
//console.log(elementRect.top, yTolTop, mouseY, yTolBot, " | ", elementRect.left, xTolLeft, mouseX, xTolRight)
if(mouseY > yTolTop && mouseY < yTolBot && mouseX > xTolLeft && mouseX < xTolRight){
document.querySelector('#caption-wrap').style.opacity = 1;
}else{
document.querySelector('#caption-wrap').style.opacity = 0;
}
}
element.onmouseout = function(){
document.querySelector('#caption-wrap').style.opacity = 0;
}
#img-wrap {
width: 30%;
position: relative;
}
#caption-wrap {
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
img {
width: 100%;
}
#img-wrap:after {
content: 'e';
position: absolute;
top: 0;
right: 0;
}
<div id='img-wrap'>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-bCnPPMYp6QIfrCr2BR-imm_Sw9IHCXIXzE5fei7R8PTBKYGd'>
<div id='caption-wrap'>
<p>some text will appear</p>
</div>
</div>
Codepen: https://codepen.io/bergy/pen/YoxZBp
(edit: since the JS was getting the rects outside of the mouse move function, if the element was ever moved it would stop working. Now it looks for rects in mouse move so the bug is fixed)

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>

Why is the object not moving on clicking the button?

The object is not moving on clicking the button. Why is it so?
function animate() {
var object = document.getElementById('object').style;
var x = 100;
object.left = x + 'px';
}
#object {
position: absolute;
top: 50px;
right: 20px;
left: 20px;
height: 40px;
width: 80px;
background-color: green;
}

You should not detach style object from DOM element. Also the name of your function conflicts with native Element.animate function, name your function diffrently.
This should work:
function animateX() {
var object = document.getElementById('object');
var x = 100;
object.style.left = x + 'px';
}
#object {
position: absolute;
top: 50px;
right: 20px;
left: 20px;
height: 40px;
width: 80px;
background-color: green;
}
<div id="object" onclick="animateX()"></div>

If we assume that your element with the object id is the button, then all you need to do is attach an event listener to it so that the animate function is called when you click it.
const object = document.getElementById('object');
object.addEventListener('click', animate, false);
Now we just need to rewrite your animate function so that it moves the element associated with the click.
function animate() {
var x = 100;
this.style.left = x + 'px';
}
DEMO
If you don't want your button to be that object, add a button to the HTML:
<button id="button">Click me</button>
then add the event listener to the button:
const button = document.getElementById('button');
button.addEventListener('click', animate, false);
And then revert your animate function back to the way it was. Here I've captured the element only in the object variable, as it makes more sense with the variable name you're using.
function animate() {
const object = document.getElementById('object');
var x = 100;
object.style.left = x + 'px';
}
DEMO
Note: if the browsers with which you're working support template literals the last line of your animate function can be:
object.style.left = `${x}px`;

You would need to include the styling at the end of the statement
function animate() {
var x = 100;
var object = document.getElementById('object').style.left = x + 'px';
}
#object {
position: absolute;
top: 50px;
right: 20px;
left: 20px;
height: 40px;
width: 80px;
background-color: green;
}

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>

The Best Way To Create Reusable Objects in Javascript

I have use the prototype and jQuery library. However I want to learn OOP JS more extensively. The kind of things I would like to do is create multiple instances of a JS object to run at the same time. In the example I am working with here, I want to create 7 different boxes to bounce around. I read the best way to create an object multiple times with using prototype. Here is a working script example I have created.
The problem I run into is if uncomment the "this.int = setInterval(this.move,20);", the I get an error that says it can't find "this.box.style.left" in the move function. It seems that the move function gets broken from the bounce object. I have tried everything I can think to make this work. I kind of need to have the int as a variable of the object so I can make a stop function to kill it.
like "bounce.prototype.stop = function() { clearInterval(this.int); });"
HTML
<body onload="dothis()">
<div id="case">
<div class="boxclass" id="box1">BOX</div>
</div>
</body>
CSS
<style type="text/css">
body {
background-color: #3F9;
text-align: center;
margin: 0px;
padding: 0px;
}
#case {
background-color: #FFF;
height: 240px;
width: 480px;
margin-right: auto;
margin-bottom: 72px;
position: relative;
margin-top: 72px;
margin-left: auto;
}
.boxclass {
background-color: #F96;
height: 36px;
width: 36px;
position: absolute;
}
</style>
JAVASCRIPT
<script type="text/javascript">
function bounce(frame,box,speed,x,y) {
this.speed = speed;
this.frame = frame;
this.box = box;
this.fw = frame.offsetWidth;
this.fh = frame.offsetHeight;
this.bx = x;
this.by = y
this.int = '';
return this;
}
bounce.prototype.position = function () {
if (this.box.offsetLeft <= 0 && this.bx < 0) {
console.log('LEFT');
this.bx = -1 * this.bx;
}
if ((this.box.offsetLeft + this.box.offsetWidth) >= this.frame.offsetWidth) {
console.log('RIGHT');
this.bx = -1 * this.bx;
}
if (this.box.offsetTop <= 0 && this.by < 0) {
console.log('TOP');
this.y = -1 * this.y;
}
if ((this.box.offsetTop + this.box.offsetHeight) >= this.frame.offsetHeight) {
console.log('BOTTOM');
this.y = -1 * this.y;
}
return this;
}
bounce.prototype.move = function() {
this.box.style.left = this.box.offsetLeft + this.bx+"px";
this.box.style.top = this.box.offsetTop + this.by+"px";
//this.int = setInterval(this.move,20);
}
function dothis() {
bn1 = new bounce( document.getElementById('case'), document.getElementById('box1'), 10,20,30).position();
bn1.move();
}
</script>

You are missing the context when you call this.move.
Basically, in JS you need to pass the context for calling the method otherwise this.move will run in another context.
You can cache this pointer outside of SetInterval and use that to call it like this:
setInterval(function(context) {
return function() {context.move(); }
} )(this), 20);
OR this:
var that = this;
setInterval(function(){
that.move();
}, 20);