I've got multiple divs with working collapsible, I would like to fit them within a section that will change size upon clicking the collapsible, said collapsible is located at the bottom, hence the size change
I have tried a script that changes the section's size upon clicking the collapsible button, only to have not react at all.
var drop = document.getElementsByClassName("drop");
var panel = document.getElementById("panel");
var i;
for (i = 0; i < drop.length; i++) {
drop[i].addEventListener("click", function() {
this.classList.toggle("active");
var collapse = this.previousElementSibling;
if (collapse.style.maxHeight) {
collapse.style.maxHeight = null;
} else {
collapse.style.maxHeight = collapse.scrollHeight + "px";
}
});
}
for (i = 0; i < drop.length; i++) {
drop[i].addEventListener("click", function() {
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
#panel {
background-color: black;
float: center;
position: relative;
width: 500px;
height: 500px
}
#box1 {
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
#box2 {
background-color: yellow;
position: absolute;
bottom: 0;
right: 0;
float: right;
}
.drop {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .drop:hover {
background-color: #ccc;
}
.collapse {
padding: 0 18px;
background-color: red;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div id=panel>
<div id="box1">
<br>this is red</br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box2">
<br>this is yellow</br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
</div>
I wanted the whole section to expand downwards upon the collapsible being triggered, instead, nothing happens.
Related
< script >
document.getElementById("bottommenu").style.bottom = "-10vh";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("bottommenu").style.bottom = "-10vh";
} else {
document.getElementById("bottommenu").style.bottom = "0";
}
if (currentScrollPos == 0) {
document.getElementById("bottommenu").style.bottom = "-10vh";
}
prevScrollpos = currentScrollPos;
}
<
/script>
<style>body,
html {
height: 100%;
margin: 0;
font-family: 'Karla';
font-size: 22px;
}
* {
box-sizing: border-box;
}
.container1 {
height: 10vh;
background-color: white;
z-index: 100;
position: absolute;
top: 0;
}
.header {
margin-left: 190px;
margin-top: 40px;
text-align: left;
opacity: 0.4;
z-index: 100;
}
.backgroundimage {
background-image: url("M0000-021-014_edited.jpg");
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.7;
position: relative;
}
.leftthing {
width: calc(100% - 400px);
float: left;
}
.leftthing img {
width: 100%;
}
.clear {
clear: both;
}
.show {
display: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
height: 10vh;
background-color: white;
}
a {
text-decoration: none;
font-family: 'Karla';
}
a:visited {
text-decoration: none;
}
/* menu*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
height: 10vh;
margin-right: 30px;
margin-bottom: 30px;
}
li {
float: right;
}
li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
opacity: 0.4;
padding: 16px 16px;
margin-left: 30px;
margin-right: 30px;
transition: 0.2s;
}
li a:hover,
li a:focus {
color: black;
opacity: 1;
}
/* menu moving footer*/
#bottommenu {
position: fixed;
z-index: 100;
/* margin-left: 60px;*/
bottom: 0px;
background-color: transparent;
/* padding: 0px;*/
/* text-align: left;*/
width: 100%;
display: block;
transition: bottom 0.5s;
height: 10vh;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<div class="backgroundimage"></div>
<div class="container1">
<div class="header">
<div class="logo" onclick="scrollWin()">|bacheva
</div>
</div>
</div>
<div class="leftthing">
<img src="82213112_611171039713397_1145784978357878784_n.jpg" alt="building concept">
<img src="INTERIOR%20RENDER.jpg" alt="interior render">
<img src="exterior%20render.jpg" alt="exterior render">
<img src="big%20ground%20floor%20plan.jpg" alt="floor plan">
<img src="READY%20CLIMATE%20SCHEME.jpg" alt="climate scheme">
</div>
<div class="clear"></div>
<div class="container">
<ul style="font-family: 'Karla';font-size:22px;">
<li>|about</li>
<li>|work</li>
<li>|home</li>
</ul>
</div>
<div id="bottommenu">
<ul style="font-size:22px;">
<li>|about</li>
<li>|work</li>
<li>|home</li>
</ul>
</div>
</body>
</html>
I have the following page:
I full-screen background picture
some content with pictures when you scroll down
and a menu on the bottom right (with a height of 10vh)
I am using a javascript function that does the following: When you scroll down the menu is not shown, but when you scroll up the content, the menu appears on the bottom right. When you reach the full-screen background picture on the top the menu is set to hide again to not obstruct the picture. However, currently when you reach the top of the page, you see the menu for a millisecond before it hides again. Therefore, my question is: Can I alternate the javascript function and tell the menu to disappear 10vh before it reaches the full-size background picture so I would not see it before it disappears when I reach the top of the page.
Here is the function I am using:
<script>
document.getElementById("bottommenu").style.bottom = "-10vh";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("bottommenu").style.bottom = "-10vh";
} else {
document.getElementById("bottommenu").style.bottom = "0";
}
if (currentScrollPos == 0) {
document.getElementById("bottommenu").style.bottom = "-10vh";
}
prevScrollpos = currentScrollPos;
}
</script>
Looking at the last 'if' the menu disappears when the current scroll is '0', but I would rather have it disappear before it reaches this last possible scroll (before it reaches the full-screen background picture.)
Thank you in advance for your help.
I'm struggling with animated accordion for my site.
Second level of my accordion does not have animation and is not visible.
It happens only on the second level of my accordion.
This animation is from W3school https://www.w3schools.com/howto/howto_js_accordion.asp
Here is my code:
var acc = document.getElementsByClassName("click");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
/* Logo - Homepage */
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
/* Post Menu - Homepage */
.container-1 {
display: block;
margin: 30px auto;
width: 78%;
border: 0px solid #00000052;
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.198);
}
.accordion {
display: block;
margin-left:auto;
margin-right: auto;
background-color: #052650;
color: #CDD8E2;
font-size: 25px;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: 1px solid #00000052;
border-radius: 20px;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .hover:hover {
background-color: #063064;
}
.accordion-sub {
display: block;
margin-left:auto;
margin-right: auto;
background-color: #083A79;
color: #CDD8E2;
font-size: 25px;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: 1px solid #00000052;
border-radius: 20px;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion-sub:hover {
background-color: #0A4DA1;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
display: none;
overflow: hidden;
transition: max-height 0.5s ease-out;
max-height: 0;
}
.box {
padding: 18px 18px;
background-color: #04233C;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.thumbnail {
flex: 20%;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 20px;
margin: 10px 10px;
transition: 0.5s;
}
.thumbnail h3 {color: #F69578;}
.thumbnail img {
width: 300px;
}
.thumbnail:hover {
transform: scaleX(1.06) scaleY(1.06);
}
<div class="container-1">
<button class="accordion hover click">Podróżowanie</button>
<div class="accordion panel">
<button class="accordion-sub click" id="slide-down">Nad wodę</button>
<div class="panel box">
<div class="grid">
<div class="thumbnail">
<a href="index.html">
<img src="/Posts/Dziura w lodzie/thumb.jpg">
<h3>Dziura w lodzie</h3>
<p>Nigdy wcześniej nie wykułam tak równej dziury, niesamowite przeżycie. Polecam każdemu książkę "równe kucie mamucie!"</p>
</a>
</div>
<div class="thumbnail">
<img src="/Posts/Dziura w lodzie/thumb.jpg">
<h3>Dziura w lodzie</h3>
<p>Nigdy wcześniej nie wykułam tak równej dziury, niesamowite przeżycie. Polecam każdemu książkę "równe kucie mamucie!"</p>
</div>
<div class="thumbnail">
<img src="/Posts/Dziura w lodzie/thumb.jpg">
<h3>Dziura w lodzie</h3>
<p>Nigdy wcześniej nie wykułam tak równej dziury, niesamowite przeżycie. Polecam każdemu książkę "równe kucie mamucie!"</p>
</div>
<div class="thumbnail">
<img src="/Posts/Dziura w lodzie/thumb.jpg">
<h3>Dziura w lodzie</h3>
<p>Nigdy wcześniej nie wykułam tak równej dziury, niesamowite przeżycie. Polecam każdemu książkę "równe kucie mamucie!"</p>
</div>
</div>
</div>
<button class="accordion-sub click">W góry</button>
<div class="panel box">
<p>UGABUGABUAAGGAGAGAGGAGAG</p>
</div>
</div>
</div>
Many thanks for any help.
My EventListener isn't targeting elements added after the page initially loads. I originally thought it might have been the order I have it in but I changed where the code is located and tried nesting it within the area the new div is created but it either breaks the color change as a whole or the original issue continues.
My final thought was maybe I need to add an EventListener to update the elems variable. I was unsuccessful in finding something to guide me.
If you click the original 4 squares they load, but after using the "Add a Square!" button the added divs dont behave the same.
//Turn div red if clicked
var elems = document.getElementsByClassName("square");
Array.from(elems).forEach(v => v.addEventListener('click', function() {
if (this.style.backgroundColor !== "red") {
this.style.backgroundColor = "red";
} else {
this.style.backgroundColor = "#1E1E1E";
}
}));
//Slider
var slider = document.getElementById("range");
var output = document.getElementById("value");
output.innerHTML = slider.value;
slider.oninput = function() {
var parent = document.getElementById("parent");
output.innerHTML = this.value;
parent.style.width = this.value + "%";
}
//Add Div
function addDiv(parent_div) {
var div = document.createElement("div");
var parent = document.getElementById(parent_div);
if (parent) {
parent.appendChild(div);
}
}
var button = document.getElementById("addsquare");
if (button) {
button.addEventListener("click", function() {
// change dynamically your new div
addDiv('parent', {
'class': 'square'
});
});
}
#parent {
margin: 0 auto;
min-width: 200px;
max-width: 94.2%;
width: 25%;
border: 1px dashed grey;
overflow: hidden;
}
#parent>div {
float: left;
margin: 1px;
width: calc(50px - 2px);
height: calc(50px - 2px);
background-color: #1E1E1E;
}
input,
button {
margin: 0;
}
.controls {
border: 1px solid black;
padding: 10px;
margin-bottom: 10px;
}
.controls>h2 {
margin: 0;
padding: 0;
text-align: center;
}
#addsquare {
padding: 8px;
margin-bottom: 5px;
}
.slidewrap {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 25%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
<div class="controls">
<h2>Controls</h2>
<button id="addsquare">Add a Square!</button>
<div class="slidewrap">
<input type="range" min="25" max="100" value="25" class="slider" id="range">
<div>Game zone is set to: <span id="value"></span>%</div>
</div>
</div>
<div id="parent">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
You need to add the event listener to the dynamically created divs:
button.addEventListener("click", function() {
// change dynamically your new div
var newDiv = addDiv('parent', { 'class': 'square' });
newDiv.addEventListener('click', squareClickHandler)
});
squareClickHandler is just the old anonymous function you used to change the square color.
//Turn div red if clicked
var elems = document.getElementsByClassName("square");
Array.from(elems).forEach(v =>
v.addEventListener('click', squareClickHandler));
function squareClickHandler() {
if (this.style.backgroundColor !== "red") {
this.style.backgroundColor = "red";
} else {
this.style.backgroundColor = "#1E1E1E";
}
}
//Slider
var slider = document.getElementById("range");
var output = document.getElementById("value");
output.innerHTML = slider.value;
slider.oninput = function() {
var parent = document.getElementById("parent");
output.innerHTML = this.value;
parent.style.width = this.value + "%";
}
//Add Div
function addDiv(parent_div) {
var div = document.createElement("div");
var parent = document.getElementById(parent_div);
if (parent) {
parent.appendChild(div);
}
return div;
}
var button = document.getElementById("addsquare");
if (button) {
button.addEventListener("click", function() {
// change dynamically your new div
var newDiv = addDiv('parent', {
'class': 'square'
});
newDiv.addEventListener('click', squareClickHandler)
});
}
#parent {
margin: 0 auto;
min-width: 200px;
max-width: 94.2%;
width: 25%;
border: 1px dashed grey;
overflow: hidden;
}
#parent>div {
float: left;
margin: 1px;
width: calc(50px - 2px);
height: calc(50px - 2px);
background-color: #1E1E1E;
}
input,
button {
margin: 0;
}
.controls {
border: 1px solid black;
padding: 10px;
margin-bottom: 10px;
}
.controls>h2 {
margin: 0;
padding: 0;
text-align: center;
}
#addsquare {
padding: 8px;
margin-bottom: 5px;
}
.slidewrap {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 25%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
<div class="controls">
<h2>Controls</h2>
<button id="addsquare">Add a Square!</button>
<div class="slidewrap">
<input type="range" min="25" max="100" value="25" class="slider" id="range">
<div>Game zone is set to: <span id="value"></span>%</div>
</div>
</div>
<div id="parent">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
I would solve this with event delegation instead of binding the event to each single element. This means you bind the listener to the parent or any other ancestor element and then do what you want to the event.target instead.
//Turn div red if clicked
var elems = document.getElementsByClassName("square");
var parent = document.getElementById("parent");
parent.addEventListener('click', (event) => {
let target = event.target;
if (target.style.backgroundColor !== "red") {
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "#1E1E1E";
}
});
//Slider
var slider = document.getElementById("range");
var output = document.getElementById("value");
output.innerHTML = slider.value;
slider.oninput = function() {
var parent = document.getElementById("parent");
output.innerHTML = this.value;
parent.style.width = this.value + "%";
}
//Add Div
function addDiv(parent_div) {
var div = document.createElement("div");
var parent = document.getElementById(parent_div);
if (parent) {
parent.appendChild(div);
}
}
var button = document.getElementById("addsquare");
if (button) {
button.addEventListener("click", function() {
// change dynamically your new div
addDiv('parent', {
'class': 'square'
});
});
}
#parent {
margin: 0 auto;
min-width: 200px;
max-width: 94.2%;
width: 25%;
border: 1px dashed grey;
overflow: hidden;
}
#parent>div {
float: left;
margin: 1px;
width: calc(50px - 2px);
height: calc(50px - 2px);
background-color: #1E1E1E;
}
input,
button {
margin: 0;
}
.controls {
border: 1px solid black;
padding: 10px;
margin-bottom: 10px;
}
.controls>h2 {
margin: 0;
padding: 0;
text-align: center;
}
#addsquare {
padding: 8px;
margin-bottom: 5px;
}
.slidewrap {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 25%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
<div class="controls">
<h2>Controls</h2>
<button id="addsquare">Add a Square!</button>
<div class="slidewrap">
<input type="range" min="25" max="100" value="25" class="slider" id="range">
<div>Game zone is set to: <span id="value"></span>%</div>
</div>
</div>
<div id="parent">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
This is my menubar code. it works fine. But, I want to implement one thing that at present, when I click outside of the menubar it does not hide or close.
I want to hide the menubar even when I click anywhere on the webpage when menu bar active.
function openNav() {
document.getElementById("mySidenav").style.width = "50%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
(function ($) {
// Instantiate MixItUp:
// $('Container').mixItUp();
// Add smooth scrolling to all links in navbar + footer link
$(".sidenav a").on('click', function(event) {
event.preventDefault();
var datanew= this.href;
var str2 = '.html';
if(datanew.indexOf(str2) != -1){
window.location.href = datanew;
}else{
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top},
900, function(){
alert(window.location);
window.location.hash = hash;
});
}
});
})(jQuery);
.sidenav {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-color: #ef4f50;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
/*max-height: 551px;*/
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
.menu-icon
{
color: #114576;
font-size: 30px;
margin-top: 40px;
margin-left: 40px;
cursor: pointer;
}
.control {
margin-top: 15px;
margin-right: 40px;
}
.menu{
min-height: 100px;
}
<header id="header">
<div id="mySidenav" class="sidenav">
×
Home
About Us
What We Do
Get Involved
Contact Us
</div>
<div class="control">
<div class="col-md-4">
<img src="assets/img/logohome.png" class="pull-left img-responsive logo" alt="SAF Logo">
</div>
<div class="col-md-8">
<!-- Use any element to open the sidenav -->
<span onclick="openNav()" class="pull-right menu-icon">☰</span>
<button type="button" class="pull-right btn btn-danger btn-round donate">DONATE NOW</button>
</div>
</div>
</header>
Try use something like
$(window).click(function(event) {
if ($(event.target).closest('div#mySidenav').length === 0 && $(event.target).closest('.menu-icon').length === 0) {
closeNav()
}
})
This will check if you click on your "openNav" or anywhere in the menu
function openNav() {
document.getElementById("mySidenav").style.width = "50%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
(function($) {
// Instantiate MixItUp:
// $('Container').mixItUp();
// Add smooth scrolling to all links in navbar + footer link
$(".sidenav a").on('click', function(event) {
event.preventDefault();
var datanew = this.href;
var str2 = '.html';
if (datanew.indexOf(str2) != -1) {
window.location.href = datanew;
} else {
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
},
900,
function() {
alert(window.location);
window.location.hash = hash;
});
}
});
})(jQuery);
$(window).click(function(event) {
if ($(event.target).closest('div#mySidenav').length === 0 && $(event.target).closest('.menu-icon').length === 0) {
closeNav()
}
})
.sidenav {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-color: #ef4f50;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
/*max-height: 551px;*/
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
.menu-icon {
color: #114576;
font-size: 30px;
margin-top: 40px;
margin-left: 40px;
cursor: pointer;
}
.control {
margin-top: 15px;
margin-right: 40px;
}
.menu {
min-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div id="mySidenav" class="sidenav">
×
Home
About Us
What We Do
Get Involved
Contact Us
</div>
<div class="control">
<div class="col-md-4">
<img src="assets/img/logohome.png" class="pull-left img-responsive logo" alt="SAF Logo">
</div>
<div class="col-md-8">
<!-- Use any element to open the sidenav -->
<span onclick="openNav()" class="pull-right menu-icon">☰</span>
<button type="button" class="pull-right btn btn-danger btn-round donate">DONATE NOW</button>
</div>
</div>
</header>
I made a content tile that when clicked, activates another part of the screen. On the tile, I have a couple links that, when clicked, go to new pages. I made a non-javascript version that works fine.
No javascript:
https://jsfiddle.net/raazqqks/2/
HTML:
<div class="tile activeTile" id="response0">
<div class="responseContainer">
<div class="left">
<h4 class="title">
<a class="topLink" href="javascript:alert('Link clicked')">Title</a>
</h4>
<p>Foo bar</p>
<p>Foo bar?</p>
<p class="extra">
<a class="topLink" href="javascript:alert('Link clicked')">Extra foo bar!</a>
</p>
</div>
<div class="bonus">
<p>Bonus</p>
</div>
<a class="noJavaLink" id="0" href="javascript:alert('Tile clicked');"></a>
</div>
</div>
CSS:
.responseContainer {
position: relative;
overflow: hidden;
z-index: 0;
transition: all linear .2s;
border: 1px solid grey;
border-radius: 4px;
background-color: white;
}
.responseContainer p {
margin: 0;
}
.tile {
width: 80%;
text-align: left;
margin: 16px 48px 16px 32px;
margin-top: 0;
transition: all linear .2s;
z-index: 0;
border-radius: 4px;
background-repeat: no-repeat;
}
.activeTile {
width: 90%;
border-radius: 4px;
color: white;
}
.activeTile > div {
background-color: rgba(33, 33, 33, .5);
}
.left {
float: left;
margin: 10px;
margin-top: -10px;
max-width: 50%;
}
.title {
font-size: 1.2em;
}
.title h4 {
margin: 20px 0 20px;
}
.bonus {
float: right;
margin-top: 10px;
margin: 10px;
font-size: 1.5em;
max-width: 50%;
}
.topLink {
position: relative;
z-index: 100;
}
.noJavaLink {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
background-color: white;
border-radius: 4px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
.active .noJavaLink {
pointer-events: none;
cursor: default;
}
I want to add simple animations to it, so if javascript is available, this version loads.
Javascript:
https://jsfiddle.net/n4svaLut/
Javascript:
document.addEventListener("DOMContentLoaded", setJavascriptTileAnimation(), false );
/* Set onclick events for tile animation
|
*/
function setJavascriptTileAnimation() {
var tiles = document.getElementsByClassName('tile')
var links = document.getElementsByClassName('noJavaLink');
for (var i = 0; i < tiles.length; i++) {
var tile = tiles[i];
var id = tile['id'];
tile.onclick = function() {
changeActiveTile(this.id);
//return false;
};
links[i].removeAttribute('href');
};
}
/* Toggle active tile
|
*/
function changeActiveTile(id) {
id_number = getIdNumber(id);
active_tile = document.getElementsByClassName('tile activeTile')[0];
active_tile.classList.remove('activeTile');
setTimeout(function() {
tile = document.getElementById(id);
tile.classList.add('activeTile');
}, 300);
}
function getIdNumber(id) {
return id.replace( /^\D+/g, '');
}
Notice how the links only work on a double click. Ive been playing around with this for two days and havent made any progress at all. Any ideas?
SOLUTION: Remove 'return false' from the onclick setter.