JavaScript and CSS not working as intended

Question

In the following code, when I put the div with class thumb-bar, the JavaScript I have written works but if place use it after full-img div tag, it doesn't work also the CSS attribute cursor: pointer for the thumb-bar div is not applied.

Edit - I mean the click listeners I apply using JavaScript are not working

CSS:

body {
  width: 640px;
  margin: 0 auto;
}

.full-img {
  position: relative;
  display: block;
  width: 640px;
  height: 480px;
}

button {
  border: 0;
  background: rgba(150, 150, 150, 0.6);
  text-shadow: 1px 1px 1px white;
  border: 1px solid #999;
  position: absolute;
  cursor: pointer;
  top: 2px;
  left: 2px;
}

.thumb-bar img {
  display: block;
  width: 20%;
  float: left;
  cursor: pointer;
}

HTML:

<div class="thumb-bar"></div>
  <div class="full-img">
    <img class="displayed-img" src="images/pic1.jpg">
    <button class="dark">Darken</button>
  </div>

JavaScript:

var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');

btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');

for (var i = 1; i <= 5; i++) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', 'images/pic' + i + '.jpg');
  thumbBar.appendChild(newImage);
  newImage.addEventListener('click', function(e) {
    displayedImage.setAttribute('src', e.target.getAttribute('src'))
  });
}

What do you think the selector .thumb-bar img means?

user9315861
– user9315861

2018-07-18 16:55:27 +00:00
Commented Jul 18, 2018 at 16:55 — user9315861
– user9315861, Commented Jul 18, 2018 at 16:55
I am adding the images using the javascript

dj43
– dj43

2018-07-18 17:51:14 +00:00
Commented Jul 18, 2018 at 17:51 — dj43
– dj43, Commented Jul 18, 2018 at 17:51

Lennholm · Accepted Answer · 2018-07-18 18:34:10Z

1

Because you're floating .thumb-bar img, those images are taken out of the page flow which results in the .thumb-bar element to have a height of 0, which in turn causes subsequent content to not be pushed down. That means that the .full-img element is rendered on top of the images and obscures them from the mouse pointer.

You need to clear the floats in order to get the .full-img element to render below them. This can be done by either making sure the .thumb-bar clear it's own content:

.thumb-bar {
  overflow: hidden;
}

... or make the .full-img element itself clear them:

.full-img {
  clear: both;
}

answered Jul 18, 2018 at 18:34

Lennholm

7,5301 gold badge23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Krii Over a year ago

Forgot about that. Hehe, I'm a bit rusty. @user678413 Please accept this answer.

Collectives™ on Stack Overflow

JavaScript and CSS not working as intended

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related