CODEWITHSUNDEEP
javascripthtmlcss
dj43
dj43

Reputation: 73

JavaScript and CSS not working as intended

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'))
  });
}

Upvotes: 1

Views: 123

Answers (1)

Lennholm
Lennholm

Reputation: 7470

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;
}

Upvotes: 1

Related Questions