Develop Reference

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

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

css transition effect for divs

I've the below Code.
function showOrHideDiv() {
var e = document.getElementById('pageRightMenu');
var l = document.getElementById('pageLeftMenu');
if (e.style.display == 'block') {
e.style.display = 'none';
l.style.width = '99%';
l.style.transition = "all 2s"; // Standard syntax
l.style.WebkitTransition = "all 2s"
}
else {
l.style.width = '60%';
l.style.transition = "width 2s"; // Standard syntax
l.style.WebkitTransition = "width 2s";
e.style.display = 'block';
}
}
html,
body {
position: fixed;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
.blended_grid {
display: block;
width: 100%;
overflow: auto;
width: 100%;
height: 100%;
/* Webkit 35: */
-webkit-animation: fadeIn 1s linear;
/* Firefox 28, Opera 22, IE 11: */
animation: fadeIn 1s linear;
}
.pageHeader {
background-color: rgba(0, 0, 0, 0.5);
float: left;
clear: none;
height: 20%;
width: 100%;
border: 1px solid black;
}
.pageLeftMenu {
background-color: rgba(0, 0, 0, 0.5);
float: left;
clear: none;
height: 80%;
width: 100%;
border: 1px solid black;
}
.pageRightMenu {
background-color: rgba(0, 0, 0, 0.5);
float: right;
clear: none;
height: 80%;
width: 39%;
border: 1px solid black;
}
<div class="blended_grid">
<div class="pageLeftMenu" id="pageLeftMenu">
<input type="button" value="Click Me!" onClick="showOrHideDiv()" />
</div>
<div class="pageRightMenu" id="pageRightMenu" style="display: none">
This a textF
</div>
</div>
Here as part of my requirements, I've created 2 divs, and in left div there is a button, when I click, the other div will either appear or disappear, and everything is fine, but I want to have a css transition effect when I hide or show the div.
Update:
I'm able to do the transition. I've tried a js function that is doing what I actually require (updated in this question), but when you show the 2nd div, the div appears first below and then beside the other div. How can I fix it, I mean, after the entire transition, the 2nd div should be visible
please run the code snippet to get a better understanding of my issue.
please let me know how can I do this.
Thanks

I recommend using the jQuery fadeOut() function, which animates the opacity to zero and then sets the "display" property to "none" when the animation is finished:
function showOrHideDiv() {
var $e = $(document.getElementById('pageRightMenu'));
var l = document.getElementById('pageLeftMenu');
if ( $e.is(":visible") ) { //safer comparison in case you change things later
l.style.width = '100%';
$e.fadeOut(500); //fade out, taking 500ms
} else {
l.style.width = '60%';
$e.fadeIn(500); //fade in, taking 500ms
}
}

Here's how you do it:
Make this containing element a flexbox using display: flex
Give the pageLeftMenu a "fixed" width using flex: 0 0 auto, which means the width will be taken from the width property (and therefore animated)
Give the pageRightMenu a "flexible" width using flex: 1 1 0, which means it will take up all the remaining space in the parent not used by pageLeftMenu.
The example below shows the effect. Check out this guide for more on flexbox: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
function showOrHideDiv() {
var e = document.getElementById('pageRightMenu');
var l = document.getElementById('pageLeftMenu');
if (e.style.display == 'block') {
e.style.display = 'none';
l.style.width = '99%';
l.style.transition = "all 2s"; // Standard syntax
l.style.WebkitTransition = "all 2s"
}
else {
l.style.width = '60%';
l.style.transition = "width 2s"; // Standard syntax
l.style.WebkitTransition = "width 2s";
e.style.display = 'block';
}
}
html,
body {
position: fixed;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
.blended_grid {
display: flex; //instead of display: block
width: 100%;
overflow: auto;
width: 100%;
height: 100%;
/* Webkit 35: */
-webkit-animation: fadeIn 1s linear;
/* Firefox 28, Opera 22, IE 11: */
animation: fadeIn 1s linear;
}
.pageHeader {
background-color: rgba(0, 0, 0, 0.5);
float: left;
clear: none;
height: 20%;
width: 100%;
border: 1px solid black;
}
.pageLeftMenu {
background-color: rgba(0, 0, 0, 0.5);
float: left;
clear: none;
height: 80%;
width: 100%;
flex: 0 0 auto; //use the width property to determine width
border: 1px solid black;
}
.pageRightMenu {
background-color: rgba(0, 0, 0, 0.5);
float: right;
clear: none;
height: 80%;
flex: 1 1 0; //use up all remaining space
border: 1px solid black;
}
<div class="blended_grid">
<div class="pageLeftMenu" id="pageLeftMenu">
<input type="button" value="Click Me!" onClick="showOrHideDiv()" />
</div>
<div class="pageRightMenu" id="pageRightMenu" style="display: none">
This a textF
</div>
</div>

responsive height of div: shrink to a breakpoint then start growing again

I'm using an hero section to show some content.
It's responsive using the padding-bottom percentage technique and an inner absolute positioned container to center the content.
Now the catch: reaching a breakpoint, let's say 768px, and on lower window size I would like the box to start growing again.
I found some js/jQuery code around the web and was able to get the result but it only works if I load the page when the window is <768px. In that case it works brilliantly. But if the page is loaded in a larger window the below 768px resizing get lost.
This is the html:
<div class="row row-home-hero" id="hero">
<div class="cont">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="cta-hero-home">
» CTA1
<span class="cta-hero-spacer">or</span>
» CTA2
</div>
</div>
</div>
This is the JS.
It's a mess since it's a mix from different sources.
And I'm using Wordpress so I've to replace some $ with jQuery.
Please forgive me :)
function screenClass() {
if(jQuery(window).innerWidth() < 768) {
jQuery('.row-home-hero').addClass('small-hero');
} else {
jQuery('.row-home-hero').removeClass('small-hero');
jQuery('.row-home-hero').css("height", "");
}
}
// Fire.
screenClass();
// And recheck if window gets resized.
jQuery(window).bind('resize',function(){
screenClass();
});
if (document.documentElement.clientWidth < 768) {
var $li = jQuery('.small-hero'), // Cache your element
startW = $li.width(); // Store a variable reference
function setMarginDiff() {
area = 500000;
width = jQuery('.small-hero').width();
jQuery('.small-hero').height(Math.ceil(area/width/1.7));
}
setMarginDiff(); // Do on DOM ready
jQuery(window).resize(setMarginDiff); // and on resize
}
And this is the CSS
.row-home-hero {
background-position: center;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-color: red;
}
.row-home-hero:before {
display: block;
content: "";
width: 100%;
padding-top: 46%;
}
.row-home-hero .cont {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
text-align: center;
}
a.cta-hero-link {
display: block;
width: 100px;
max-width: 80%;
line-height: 40px;
background: white;
color: #1b9fdd;
text-transform: uppercase;
text-decoration: none;
margin: 10px auto;
text-align: center;
font-weight: 500;
box-shadow: 0px 0px 7px 1px rgba(0,0,0,.4);
}
#media screen and (max-width: 768px) {
.row-pre-footer .cont div {
width: 100%;
padding: 0 5%;
float: none;
margin: 0 auto 30px;
}
.progetto-footer, .loghi-footer {
width: 100%;
max-width: 320px;
margin: 0 auto 30px;
float: none;
}
.double-box .tib-tab {
float: none;
width: 90%;
margin: 5% auto;
padding-bottom: 90%;
}
.tib-box h2, .tab-box h2 {
font-size: calc(28px + (46 - 28) * (100vw - 320px) / (768 - 320));
margin-bottom: 18vw;
}
.double-box-inner p {
font-size: 22px;
line-height: 30px;
}
.row-home-hero.small-hero {
height: 500px;
}
.row-home-hero:before {
display: block;
content: "";
width: 100%;
padding-top: 0;
}
}
And this is a working demo
Thanks!

I moved the if (document.documentElement.clientWidth < 768) { block inside the resize event. So that it gets called whenever the window is resized.
In the original version, it would only get called when the page was loaded (and only if the screen was smaller than 768). With this adjustment, it will always be rechecked when resized.
I also merged all your code into one smaller function.
var breakpoint = 768
var area = 500000
var target = $('.row-home-hero')
$(window).bind('resize', function() {
if(window.innerWidth < breakpoint) {
var width = target.width()
target.addClass('small-hero')
target.height(Math.ceil(area / width / 1.7))
} else {
target.removeClass('small-hero')
target.css('height', '')
}
})
.trigger('resize')

How do I check whether the right/left edge of an element is overlapping the side of it's container?

I'm trying to display a right / left navigation arrow within a container (the arrows replace the existence of a scrollbar) when the corresponding edge of the content overlaps the container's sides.
Also, when the content is scrolled all the way to the end and can't scroll any further, the arrow should disappear.
My problem is, I'm confused as to how I write the function to check whether the element's contents are overlapping one edge or the other to hide one arrow or the other.
I started writing logic like this:
function setArrows(elem){
if (elem.scrollLeft() > 0) { //scroll position is greater than zero
// show left arrow
}
if () { //scroll position is less than zero
//show right arrow
}
}
but that doesn't seem to be the right logic. It sounded simpler in my head before I went to actually write the function.
How do I check whether the right/left edge of an element is overlapping the side of it's container?
Here's a Stack Snippet:
$('#wrapper').scroll(function(){
//check edges
});
div {
padding: 0px;
margin: 0px;
}
#wrapper {
width: 500px;
height: 100px;
background-color: blue;
overflow-x: scroll;
overflow-y:hidden;
}
#content {
width: 1000px;
height: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="wrapper">
<div id="content">
</div>
</div>

You need to check if the content width minus the scrollLeft is greater than the wrapper width. If it is show the right scroller..
Something like this
$(function() {
var content = $('#content'),
arrows = $('.arrow'),
wrapper = $('#wrapper').scroll(function() {
//check edges
// handle left arrow
if (this.scrollLeft > 0) {
arrows.filter('.left').addClass('visible');
} else {
arrows.filter('.left').removeClass('visible');
};
// handle right arrow
if (content.outerWidth() - this.scrollLeft > wrapper.width()) {
arrows.filter('.right').addClass('visible');
} else {
arrows.filter('.right').removeClass('visible');
};
});
arrows.on('click', function() {
if ($(this).is('.left')) {
wrapper[0].scrollLeft -= 100;
} else {
wrapper[0].scrollLeft += 100;
}
return false;
});
// initialize
wrapper.trigger('scroll');
});
div {
padding: 0px;
margin: 0px;
}
#wrapper {
width: 500px;
height: 100px;
background-color: blue;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
#content {
width: 1000px;
height: 100px;
background: url('http://lorempixel.com/1000/100/abstract/2') 0 0 no-repeat;
}
#full-container {
position: relative;
display: inline-block;
}
.arrow {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
background-color: black;
display: none;
z-index: 100;
cursor: pointer;
color: #fff;
text-align: center;
line-height: 100px;
}
.arrow.visible {
display: block;
}
.arrow.left {
left: 0
}
.arrow.right {
right: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="full-container">
<div class="arrow left"><</div>
<div id="wrapper">
<div id="content"></div>
</div>
<div class="arrow right">></div>
</div>

Javascript popup in html table

I have a 10 x 10 with data table that is created using html tags. If it is possible to create a onClick function to each cell? I mean, if I click on a cell, then it gives me its value in a n alert window? If yes, then how?

Plain JS - assuming <table id="table1">:
window.onload=function() {
var cells = document.getElementById('table1').getElementsByTagName('td');
for (var i=0, n=cells.length;i<n;i++) {
cells[i].onclick=function() { alert(this.innerHTML) }
}
}

A good example could be found here
HTML CODE:
<div id='page-wrap'>
Your content goes here.
<a id='show' href='#'>show overlay</a>
JavaScript & JQuery:
$(document).ready(function() {
$("#show").click(function() {
showPopup();
});
$("#popup").click(function() {
$(this).hide();
$("#mask").hide();
});
});
function showPopup() {
// show pop-up
$("#mask").fadeTo(500, 0.25);
// show the popup
$("#popup").show();
}
---------------------------------------
CSS CODE:
* { margin: 0, padding 0}
#mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
display: none;
z-index: 10000;
}
#popup
{
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid #333;
background-color: #ffffdd;
cursor: pointer;
padding: 10px;
position: relative;
z-index: 10001;
display: none;
}
[![enter image description here][1]][1]