I have elements that do things when a user hovers over them. I am able to do this in CSS with ease. When loading the site on a mobile device I need to do these things on click.
So I follow the path of creating classes that contain the changes and then remove default classes and add new classes for the element being clicked on and then remove new classes and add default classes back again when the user clicks off the element.
Everything works 100%, though I am quite certain there is a much simpler way to do this. I could not imagine following this path if I was developing a game or a bigger site.
I have only been learning web development for a month so I don't know what I don't know.
Can you take a look and let me know if you have a simpler approach?
ok. here we go.
I have 4 divs that share classes for a column, color, and content. They all look as follows:
<div class="portfolio_columns">
<div class="colorful_box box1"></div>
<div class='portfolio_piece piece1'>
</div>
</div>
I am using CSS to style these divs. As a part of my CSS I have pseudo-classes for hover:
.portfolio_columns:hover {
}
.portfolio_columns:hover .portfolio_piece {
}
.portfolio_columns:hover .colorful_box,
.portfolio_columns:active .colorful_box {
}
I then create javascript so that I can listen for clicks so that that mobile users can use this site as they don't hover over elements on the page.
I follow these steps:
Step 1. I add an ID to my HTML elements:
<div id="pc1" class="portfolio_columns">
<div id="box_1" class="colorful_box box1"></div>
<div id="piece_1" class='portfolio_piece piece1'>
</div>
</div>
Step 2. I create some new classes in CSS which contain the style changes I had for hover:
.pcc {
}
.ppc {
}
.cbc {
}
Step 3.1. In JS I create a const that holds the element object before I make changes to it after mouse event:
const pcc1 = document.getElementById('pc1'),
pcc2 = document.getElementById('pc2'),
pcc3 = document.getElementById('pc3'),
pcc4 = document.getElementById('pc4'),
pcc5 = document.getElementById('pc5'),
pcc6 = document.getElementById('pc6'),
cbc1 = document.getElementById('box_1'),
cbc2 = document.getElementById('box_2'),
cbc3 = document.getElementById('box_3'),
cbc4 = document.getElementById('box_4'),
cbc5 = document.getElementById('box_5'),
cbc6 = document.getElementById('box_6'),
ppc1 = document.getElementById('piece_1'),
ppc2 = document.getElementById('piece_2'),
ppc3 = document.getElementById('piece_3'),
ppc4 = document.getElementById('piece_4'),
ppc5 = document.getElementById('piece_5'),
ppc6 = document.getElementById('piece_6');
Step 3.2. I create a global variable called cnt and add an eventListener for a click on the document. Inside the eventListener I use an if statement to identify what was clicked on and if it is anything I am listening to then I add and remove classes to my element objects accordingly:
let cnt = 0;
document.addEventListener('click', function(e) {
if (e.target.classList.contains('box1')) {
cnt = 1;
pcc1.classList.remove('portfolio_columns');
pcc1.classList.add('pcc');
cbc1.classList.remove('colorful_box');
cbc1.classList.add('cbc');
ppc1.classList.remove('portfolio_piece');
ppc1.classList.add('ppc');
}
else
if (e.target.classList.contains('box2')) {
cnt = 2;
pcc2.classList.remove('portfolio_columns');
pcc2.classList.add('pcc');
cbc2.classList.remove('colorful_box');
cbc2.classList.add('cbc');
ppc2.classList.remove('portfolio_piece');
ppc2.classList.add('ppc');
}
else
if (e.target.classList.contains('box3')) {
cnt = 3;
pcc3.classList.remove('portfolio_columns');
pcc3.classList.add('pcc');
cbc3.classList.remove('colorful_box');
cbc3.classList.add('cbc');
ppc3.classList.remove('portfolio_piece');
ppc3.classList.add('ppc');
}
else
if (e.target.classList.contains('box4')) {
cnt = 4;
pcc4.classList.remove('portfolio_columns');
pcc4.classList.add('pcc');
cbc4.classList.remove('colorful_box');
cbc4.classList.add('cbc');
ppc4.classList.remove('portfolio_piece');
ppc4.classList.add('ppc');
}
else
if (e.target.classList.contains('box5')) {
cnt = 5;
pcc5.classList.remove('portfolio_columns');
pcc5.classList.add('pcc');
cbc5.classList.remove('colorful_box');
cbc5.classList.add('cbc');
ppc5.classList.remove('portfolio_piece');
ppc5.classList.add('ppc');
}
else
if (e.target.classList.contains('box6')) {
cnt = 6;
pcc6.classList.remove('portfolio_columns');
pcc6.classList.add('pcc');
cbc6.classList.remove('colorful_box');
cbc6.classList.add('cbc');
ppc6.classList.remove('portfolio_piece');
ppc6.classList.add('ppc');
}
else
if (cnt > 0) {
switch (cnt) {
case 1: {
pcc1.classList.remove('pcc');
cbc1.classList.remove('cbc');
ppc1.classList.remove('ppc');
pcc1.classList.add('portfolio_columns');
cbc1.classList.add('colorful_box');
ppc1.classList.add('portfolio_piece');
}
break;
case 2: {
pcc2.classList.remove('pcc');
cbc2.classList.remove('cbc');
ppc2.classList.remove('ppc');
pcc2.classList.add('portfolio_columns');
cbc2.classList.add('colorful_box');
ppc2.classList.add('portfolio_piece');
}
break;
case 3: {
pcc3.classList.remove('pcc');
cbc3.classList.remove('cbc');
ppc3.classList.remove('ppc');
pcc3.classList.add('portfolio_columns');
cbc3.classList.add('colorful_box');
ppc3.classList.add('portfolio_piece');
}
break;
case 4: {
pcc4.classList.remove('pcc');
cbc4.classList.remove('cbc');
ppc4.classList.remove('ppc');
pcc4.classList.add('portfolio_columns');
cbc4.classList.add('colorful_box');
ppc4.classList.add('portfolio_piece');
}
break;
case 5: {
pcc5.classList.remove('pcc');
cbc5.classList.remove('cbc');
ppc5.classList.remove('ppc');
pcc5.classList.add('portfolio_columns');
cbc5.classList.add('colorful_box');
ppc5.classList.add('portfolio_piece');
}
case 6: {
pcc6.classList.remove('pcc');
cbc6.classList.remove('cbc');
ppc6.classList.remove('ppc');
pcc6.classList.add('portfolio_columns');
cbc6.classList.add('colorful_box');
ppc6.classList.add('portfolio_piece');
}
}
}
});
