Javascript functionallity FAILED. HELP!

thisispetrus · March 17, 2023, 11:14am

Hi all,

this portfolio took me quite sometime to make. HTML and CSS were not a very big deal although Javascript is driving me nuts. Actually I am looking for some help to resolve JS functionallity.

I believe it took me 10 days - 5 hours a day more or less.

Please find the link here:

https://iampetrus.github.io/portfolio-V0/

The problem I can not resolve is placed at JS.js file.
It should work as follows - 2 steps:
step 1: you click an image (.imagenes), its opacity goes down to 0.1 and other info (.logo) pops up from behind the image.
step 2:: you click again on .logo, it gets hidden again and the image pops up again full opacity.

What happens is that step 1 works but step 2 does not.

Can any body give me a hand to resolve this? I am just burnt after researching trying and testing quite a lot of things whith no joy.

Thank you

mirja_t · March 17, 2023, 11:27am

I cannot tell you what’s wrong with your current code since you haven’t posted it here. The easiest way to achieve what you described would be to toggle the parent container’s class on click and then style the children with CSS/SCSS, like:

.box .imagenes {
  opacity: 1;
  transition: opacity .5s ease;
}
.box.clicked .imagenes {
  opacity: 0.2;
  transition: opacity .5s ease;
}
.box .logo {
  opacity: 0;
  transition: opacity .5s ease;
}
.box.clicked .logo {
  opacity: 1;
  transition: opacity .5s ease;
}

thisispetrus · March 17, 2023, 11:49am

Hola mirja_t,
thank you for the reminder.
Code can be seen here:

mirja_t · March 17, 2023, 11:51am

Could you please post the relevant code snippet (properly formatted) here?
Did you try the approach I suggested?

thisispetrus · March 17, 2023, 12:25pm

This is the code,

I have not tried your suggestion just yet. I tried similar approach however, adding classes through Javascript to switch styles on click but the process was failing as well.

You will see on css ( line 181 ) visibility: hidden; I tried to use opacity: 0; instead but it was behaving in a way I am not getting.

The actual code you can see working on gihub Company Home Page with Flexbox works different depending on what picture you click on which, is something I was not expecting.

HTML:

github.com

Iampetrus/portfolio-V0/blob/main/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Company Home Page with Flexbox</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="modal.css">

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Cardo&family=Oswald&display=swap" rel="stylesheet"> 
</head>

<body>

	<header>

		<div class="about">
			<h4><span class="primero">A work selection by </span><a id="boton" class="sobre">Petrus</a></h4>

This file has been truncated. show original

CSS:

github.com

Iampetrus/portfolio-V0/blob/main/style.css

html {
  box-sizing: border-box;
  font-size: 16px;
}

body {
    max-width: 1500px;
    margin: 0 auto;
}

/* -------------------------------------- fonts */
/*
@font-face {
    font-family: 'Alternate Gothic';
    src: url('Alternate Gothic W01 No 3.ttf') format('truetype');
}

@font-face {
    font-family: 'Times Roman';
    src: url('OPTITimes-Roman.otf') format('opentype');

This file has been truncated. show original

Javascript:

github.com

Iampetrus/portfolio-V0/blob/main/JS.js

let imagenes = document.querySelectorAll('.imagenes');
let logos = document.querySelectorAll('.logo');

imagenes.forEach((imagen, index) => {

  let count = 0;

  imagen.addEventListener('click', () => {
    if (count % 2 == 0) {
      imagen.style.opacity = 0.2;
      logos[index].classList.add("visib");
    } else {
      imagen.style.opacity = 1;
      logos[index].classList.add("novisib");
    }
    count++;
  });

});

This file has been truncated. show original

Thank you for giving it a go.
I will try again once I get your thoughts about it

mirja_t · March 17, 2023, 1:33pm

What you try to do is really simple, your initial approach is rather complicated. And it will never reverse.
So you should try the approach I suggested as it is much easier.
Also: you just need to change the opacity of the image – not the logo, if I understand your idea correctly? The logo would be hidden behind the image anyway, right? So you would just need to toggle the class on the image.
No need to set the opacity with JS. Just toggle the class ‘visib’ on click and do the opacity with CSS. Leave the logo image container as it is.

This would be an example for the Javascript:

const topImages = document.querySelectorAll('.imagenes');
topImages.forEach(topImg => {
	topImg.addEventListener('click', e => {
  	e.target.classList.toggle("visib")
  });
});

By “posting it here” I meant in this window. You have a lot of code, but only a small excerpt is relevant for your question. So nobody would have to work their way through the whole code.

Aside: Wouldn’t it be enough to have that effect just on hover – not click? Then you wouldn’t need any JS in the first place.

thisispetrus · March 17, 2023, 3:22pm

Yes you understand my idea correctly mirja_t. Muchas gracias for answering!

Why will it never reverse? Is it because (I think) I am not specific on the second click being it on .logo? Would you please explain that?
Is that the reason why it loops through click 1 - click 2 on certain .imagenes but not on some other .imagenes? Did you see that?

I thought about the hover effect but I did not do it because of the mobile version. Rather, Javascript solution would cover both desktop and mobile.

You really got me with the image opacity thing you mention, you are crazy right. Just .imagenes opacity and Z-index with .logo. Visibility is not needed at all.

Trying your suggestions.
Lets see if I finish this today

mirja_t · March 17, 2023, 3:52pm

This is the snippet, right?:

imagenes.forEach((imagen, index) => {

  let count = 0;

  imagen.addEventListener('click', () => {
    if (count % 2 == 0) {
      imagen.style.opacity = 0.2;
      logos[index].classList.add("visib");
    } else {
      imagen.style.opacity = 1;
      logos[index].classList.add("novisib");
    }
    count++;
  });

});

The opacity you set does get reversed. But the classes do not. Once you clicked one element twice, it has both classes: ‘novisib’ and ‘visib’ altogether because you never call .classList.remove(). That’s where the toggle method comes in handy.

You count all clicks and apply the same counter for all images, that makes it buggy, I guess. Anyway, it is not a good practice. But I haven’t checked what the classes do. Since they’re set arbitrary and all at once for some images, they will cause unwanted effects, I guess.

But are you aware that mobile browsers interpret the :hover pseudo class when the element is tapped?

thisispetrus · March 17, 2023, 3:55pm

(…post must be at least 20 characters)

mmm…
not at all!

mirja_t · March 17, 2023, 4:04pm

You might need to add :active as well and I am not sure if all mobile browsers behave the same then. But maybe that serves your purposes already. Otherwise go with toggling.

thisispetrus · March 17, 2023, 4:11pm

This is working as expected:

const imagenes = document.querySelectorAll('.imagenes');

imagenes.forEach((imagen, index) => {
  let count = 0;
  imagen.addEventListener('click', (e) => {
    if (count % 2 == 0) {
      imagen.style.opacity = 0.2;
    } else {
      imagen.style.opacity = 1;
    }
    count++;
  });
});

.box {
position: relative;
}

.imagenes {
    position: relative;
    z-index: 2;
}


.logo {
    position: absolute;
    /*visibility: hidden;*/
    top:0;
}


.youtube-link2 {
    position: absolute;
    top: 75%;
    left: 42%;
    width: 15%;
} 

.youtube-link2:hover {
    opacity: .6;
}

But the anchor tags shown here:

<div id ="A" class="box">
    				<div class="imagenes">
    					<img src="spotify-still.jpg">
    				</div>

    				<div class="logo">
    					<img id="Alog" src="Spotify Logo (PNG720p) - Vector69Com.png">
    					<a>
    						<a class="youtube-link2" target="_blank"	href="https://www.youtube.com/watch?v=7ob_q2HsHWM">
                    			<img id="youspot" src="pngwing.com(1) copy.png" class="youtube-btn"></a>
                    	</a>
    					
    				</div>
    			</div>

are not active.
Thats the thing Im figuring out now which, must be an easy thing (please trust me I really hope so)

thisispetrus · March 17, 2023, 4:49pm

It seems to be the Z-index what is stopping the anchor tag from being active as it was

mirja_t · March 17, 2023, 4:51pm

Why are you nesting anchor tags? And an anchor tag must have an href attribute.
And this pngwing.com(1) copy.png is not a valid source.

thisispetrus · March 17, 2023, 4:57pm

anchors nesting thing amended.
You are also right about the source which is noted down in a loOong list of things to amend.
Do you think Z-index is the palce to look so anchors are hoverable - ready to use?

mirja_t · March 17, 2023, 5:05pm

Yes, but once you put a z-index on your logo, your toggle construct wouldn’t work anymore as the logo would always be visible. You could put pointer-event: none; on the top image, but then your Javascript wouldn’t work anymore. So you would need to put the click event listener to the parent element.

thisispetrus · March 17, 2023, 5:22pm

thank you mirja_t.
That .logo Z-index should not be there, its been amended

thisispetrus · March 21, 2023, 9:50am

so finally, I have chosen the option of :hovering through .imagenes.
The mobile version of it does interpret the :hover pseudo class in way that works for me. You can give it a go to see the result on mobile. I had no idea about it.
mirja_t you are s star!
Thank you

I am pretty new to Javascript and I am finding quite a few problems in my way to use it as I do CSS, although I am going to make what mirja_t suggested above which I quote:

Javascript is making me research a lot to see example after example how things are written. I am finding it sometimes quite a challenge to learm which, is very aligned with my idea of great things requiring hard work.

This portfolio is just another exercise that I am also using on my current job. Its been tested on several search engines and it will be online once the latest campaign I worked on is released. Its also an opportunity to keep practicing this Front-End-Developer path. I will reinterpret it to make the one I will use as Junior Front-E-D. That one will be a different animal.
Do you have any thoughts about it? Please add them to conversation.
Thank you for reading!