This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
My webpage should display a slideshow on page load but the script functions doesn't seem to be working. I have tried running simple scripts containing prompt() and confirm() functions and they are working fine but custom functions doesn't seem to work. Same is the case with my "modal.js" script which should display a modal box on button click. Please help me out
<!doctype html>
<html lang = "en">
<head>
<title> Ice Cream </title>
<link rel="stylesheet" href="main_ice.css" />
<script type = "text/javascript" src = "slideShow.js"> </script>
<script src = "modal.js"> </script>
<meta charset = "utf-8" />
</head>
<body>
<div id = "big_wrapper">
<header class= "top_header">
<hgroup>
<h1> ICE Funky </h1>
<h3> ice cream production </h3>
</hgroup>
</header>
<nav class= "nav_bar">
<ul>
<label><li name = "home"> Home </li>
<li> About Us </li>
<li> Products </li>
<li> Services </li>
<li> Contacts </li>
</label>
</ul>
</nav>
<div id = "slideshow">
<span class = "image_slide"><img src = "4072.jpg" width = "500px" height = "300px"/> </span>
<span class = "image_slide"><img src = "26551.jpg" width = "500px" height = "300px"/> </span>
<span class = "image_slide"><img src = "30225.jpg" width = "500px" height = "300px"/> </span>
<span class = "image_slide"><img src = "74223.jpg" width = "500px" height = "300px"/> </span>
<span class = "image_slide"><img src = "74285.jpg" width = "500px" height = "300px"/> </span>
</div>
<button id = "modalButton"> Modal </button>
<div id = "myModal">
<div id = "modal_title"> Main Title </div><br><br>
<div id = "modal_body"> Body </div>
</div>
</div>
</body>
</html>
!-----------CSS File ----------------!
*{
margin:0px;
padding:0px;
}
header, footer, nav, hgroup, aside, article, section{
display : block;
}
body{
width:100%;
display: -webkit-box;
-webkit-box-pack: center;
}
#big_wrapper{
max-width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
.top_header{
position: absolute;
margin: 20px 0px 0px 120px;
border: 2px solid black;
width: 180px;
padding: 25px;
}
.nav_bar{
margin-left: 350px;
margin-top: 85px;
text-align: center;
}
.nav_bar li{
position: relative;
list-style: none;
display: inline-block;
-webkit-box-flex: 1;
margin: 20px;
border: 2px solid white;
padding: 5px;
-webkit-transition: border-left 1s, border-top 3s, border-right 4s,
border-bottom 6s;
}
.nav_bar li:hover{
border-left: 2px solid black;
border-top: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
#slideshow{
position: absolute;
margin-top: 50px;
margin-left: 400px;
width: 500px;
}
.image_slide{
position: absolute;
/*display: none;*/
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 150px;
width: auto;
margin-top: -22px;
padding: 16px;
color: yellow;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
/*left: 458px;*/
right: 0px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
#modalButton{
background: rgba(0,256,0,0.5);
padding: 5px;
margin-left: 40px;
margin-top: 40px;
color: chocolate;
}
#myModal{
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background-color: rgba(0,0,0,0.4);
display: none;
}
#modal_title{
width: 95%;
height: 5%;
position: fixed;
bottom: 15%;
left: 30px;
background: rgba(0,256,0,0.4);
}
#modal_body{
width: 95%;
height: 10%;
position: fixed;
top: 85%;
left: 30px;
background: rgba(256,256,256,0.4);
}
!--------------JS File(slideShow.js)----------------!
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("image_slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
!---------------JS File(modal.js)------------------!
modalButton = getElementById("modalButton");
myModal = getElementById("myModal");
modalButton.onclick = function(){
prompt("hi");
myModal.style.display = "block";
}
First, as mentioned by ricky, you need to use document.getElementById("modalButton") instead of getElementById("modalButton").
Second, your scripts are evaluated before the markup is parsed. Either move the script tags out of your head to the end of the body tag, or alternatively wrap the contents of both files in event listeners for load:
window.addEventListener( 'load', function() {
// your code here
} );
For example modal.js should look like this:
window.addEventListener( 'load', function() {
var modalButton = document.getElementById("modalButton");
var myModal = document.getElementById("myModal");
modalButton.onclick = function(){
prompt("hi");
myModal.style.display = "block";
}
} );
You have to use document.getElementById() instead of getElementById() being used directly.
Make modifications to your modal.js file.
modalButton = document.getElementById("modalButton");
myModal = document.getElementById("myModal");
modalButton.onclick = function(){
prompt("hi");
myModal.style.display = "block";
}
Working fiddle - https://jsfiddle.net/arjunskumar47/L8Lvwywe/
Related
i created a dom event that when i click a specific button it will show me the specific image related to that button but when i close the modal the image gets taken in the modal section and dissapears from the page. how to prevent this from happening?
jsfiddle
I changed a little bit of your buttonsGallery.forEach code add this in your example and see
buttonsGallery.forEach(btn => {
btn.addEventListener('click', () => {
galleryModal.style.display = 'flex';
// creating element img
let modalIMG = document.createElement('img')
// adding src to it's
modalIMG.src = btn.nextElementSibling.src;
// remove first child if there is any inside modalContent
modalContent.innerHTML = ""
// adding current child
modalContent.appendChild(modalIMG);
modalContent.firstElementChild.className = 'modalImgTaken';
modalContent.firstElementChild.style.width = '100%';
modalContent.firstElementChild.style.height = '100%';
modalContent.firstElementChild.style.objectFit = 'contain';
})
})
To keep at maximum code you have done, but with "mandatory" changes only...
First don't use id several times, very bad idea.
Second the src is the next sibling src not the next sibling.
Second when you create your modalIMG, you append it, and you still have the element modalIMG to add style, class... whatever, no need to search first element child...
const galleryModal = document.querySelector('#modalGallery');
const modalContent = document.querySelector('.modal-content');
const buttonsGallery = document.querySelectorAll('button.modalGalleryBtn');
const mainGallery = document.querySelectorAll('.containerGallery');
buttonsGallery.forEach(btn => {
btn.addEventListener('click', () => {
galleryModal.style.display = 'flex';
const modalIMG = document.createElement('img');
modalContent.innerHTML = '';
modalContent.appendChild(modalIMG);
modalIMG.src = btn.nextElementSibling.src;
modalIMG.classList.add('modalImgTaken');
modalIMG.style.width = '100%';
modalIMG.style.height = '100%';
modalIMG.style.objectFit = 'contain';
})
})
const modalGalleryClose = document.querySelector('#closeGalleryModal');
modalGalleryClose.addEventListener('click', () => {
galleryModal.style.display = 'none';
})
#import url('https://fonts.googleapis.com/css2?family=Junge&family=Montserrat:wght#300&family=Quicksand&family=Rubik+Mono+One&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: auto;
background: #360882;
}
.gallery {
width: 100%;
height: auto;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
gap: 10vh;
margin-top: 8vh;
}
.gallery-container {
position: relative;
width: 400px;
height: 350px;
background: none;
}
.gallery-container img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(20px 10px 10px rgba(0, 0, 0, 0.507));
cursor: pointer;
}
.gallery-container button {
position: absolute;
left: 19.5vh;
bottom: -2vh;
z-index: 1;
padding: 10px 30px;
border: none;
border-radius: 10px;
background: #ac3925;
color: #fff;
cursor: pointer;
font-size: 17px;
font-family: 'Quicksand', 'sans-serif';
font-weight: 300;
letter-spacing: 1px;
box-shadow: 20px 15px 10px #00000086;
transition: background .3s ease-in-out;
}
.gallery-container button:hover {
background: #DC2B0B;
}
.modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.712);
backdrop-filter: blur(8px);
z-index: 2;
display: none;
justify-content: center;
align-items: center;
}
.modal-content {
position: relative;
transform: translateY(6vh);
width: 85%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
object-fit: contain;
}
.modalCloseBtn {
transform: translate(132vh, -32vh);
cursor: pointer;
z-index: 1;
}
.modalCloseBtn img {
width: 70px;
height: 70px;
}
<section class="gallery">
<div class="gallery-container containerGallery">
<button class="modalGalleryBtn">See Image</button>
<img src=https://images.unsplash.com/photo-1674821503660-9445aab3d662?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80 alt="01">
</div>
<div class="gallery-container containerGallery">
<button class="modalGalleryBtn">See Image</button>
<img src=https://images.unsplash.com/photo-1674718061623-2d1902f6889d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80 alt="02">
</div>
<div class="gallery-container containerGallery">
<button class="modalGalleryBtn">See Image</button>
<img src=https://images.unsplash.com/photo-1674763973434-75e1930d4959?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80 alt="03">
</div>
</section>
<div class="modal" id="modalGallery">
<div class="modalCloseBtn" id="closeGalleryModal">
<img src=https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-512.png>
</div>
<div class="modal-content" id="modal-contentGallery"></div>
</div>
My goal is something similar to what YouTube has when you click their menu icon; the rest of the page gets darker and nothing on that part of the page is accessible to the user until the button is clicked again and the menu recedes. Any help with this would be greatly appreciated.
<!DOCTYPE html>
<body lang = 'en-US'>
<head>
<meta charset = 'UTF-8'>
<meta http-equiv = 'X-UA-Compatible' content = 'IE = edge'>
<meta name = 'viewport' content = 'width = device-width, initial-scale = 1'>
<title>Testing</title>
<!-- links to relative files -->
<link rel = 'stylesheet' href = '/Custom_Scrollbar.CSS'>
<link rel = 'shortcut icon' type = 'image/png' href = '/Images/Odd_Jobs_Favicon.png'>
</head>
<body>
<div class = 'headerBar'>
<style>
.headerBar {
position: absolute;
width: 100%;
height: 80px;
top: 0px;
left: 0px;
background-color: #e0e0e0;
}
</style>
</div>
<div class = 'headerStrip'>
<style>
.headerStrip {
position: absolute;
width: 100%;
height: 5px;
top: 80px;
left: 0px;
background-color: #5e00bc
}
</style>
</div>
<div class = 'bodyBar'>
<style>
.bodyBar {
position: absolute;
width: 100%;
height: 100%;
top: 85px;
left: 0px;
background-color: #000000
}
</style>
</div>
<div class = 'jobLinks'>
<li><a class = 'find' href = '#'>Link</a></li>
<style>
.jobLinks {
text-decoration: none;
list-style: none;
}
.find {
position: absolute;
width: 80px;
height: 40px;
top: 30px;
left: 300px;
font-family: 'comfortaa';
font-size: 18px;
font-weight: 800;
color: #000000;
text-decoration: none;
text-align: center;
transition: ease-out 0.4s;
background-color: #e0e0e0;
}
.find:hover {
color: #5e00bc;
}
</style>
</div>
<div class = 'menu'>
<button class = 'menuButton'></button>
<div class = 'linkList'>
<ul>
<li><a class = 'links' href = '#'>Link 1</a></li>
<li><a class = 'links' href = '#'>Link 2</a></li>
<li><a class = 'links' href = '#'>Link 3</a></li>
<li><a class = 'links' href = '#'>Link 4</a></li>
<li><a class = 'links' href = '#'>Link 5</a></li>
<li><a class = 'links' href = '#'>Link 6</a></li>
<li><a class = 'links' href = '#'>Link 7</a></li>
</ul>
</div>
<style>
.menuButton {
position: absolute;
width: 30px;
height: 30px;
top: 25px;
left: 1303px;
border: none;
outline: none;
transition: ease-out 0.5s;
background-image: url('/Images/Menu_Icon.png');
background-color: #e0e0e0;
cursor: pointer;
}
.links {
font-family: 'comfortaa';
font-size: 18px;
font-weight: 500;
color: #000000;
text-decoration: none;
transition: ease-out 0.4s;
}
.links:hover {
color: #5e00bc;
}
.linkList {
position: fixed;
width: 150px;
height: 100%;
right: -150px;
top: 85px;
transition: ease-out 0.5s;
background: #e0e0e0;
}
.linkList ul li {
list-style: none;
padding: 15px;
}
.menuButton:focus ~ .linkList {
right: 0px;
}
</style>
<script>
menuBtn = document.getElementsByClassName('menuButton')[0];
menuBtn.addEventListener('click', function() {
menu = document.getElementsByClassName('linkList')[0];
menu.style.webkitTransition = '0.6s';
if (menu.style.right == '0px') {
menu.style.right = '-150px';
} else {
menu.style.right = '0px';
}
});
</script>
</div>
</body>
</html>
It can be achieved by some css and js.
I am adding menuOpen class when the menu is open. and removing it when the menu is closed.
menuOpen class css is setting other content besides menu unaccesseiable.
const open = document.querySelector("#open");
const close = document.querySelector("#close");
const menu = document.querySelector("#menu");
open.addEventListener("click", () => {
menu.classList.add("active");
document.body.classList.add("menuOpen");
});
close.addEventListener("click", () => {
menu.classList.remove("active");
document.body.classList.remove("menuOpen");
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
overflow-x: hidden;
}
#menu {
display: flex;
flex-direction: column;
gap: 15px;
width: 100px;
position: absolute;
top: 0;
left: -100px;
background-color: #f5f5f5;
padding: 20px;
transition: .5s;
}
#menu.active {
left: 0;
}
.menuOpen {
position: relaive;
transition: .5s;
}
.menuOpen::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.5;
height: 100vh;
width: 100vw;
overflow: hidden;
}
<button id="open">open</button>
<div id="menu">
<button id="close">close</button>
<button>a</button>
<button>a</button>
<button>a</button>
</div>
<p>content</p>
I got this code off of codepen and I am trying to edit it. I am trying to make it so that when you actually click the X in the corner of the popup, the box actually closes, and that after hitting the add button after putting in text, the box closes. Can anyone help me accomplish this? I am having trouble getting it to work. Any help is appreciated. Thanks!
https://codepen.io/pokyparachute66/pen/QzXYjL
var date = document.getElementsByClassName("day");
for(i = 0; i < 50; i++){
var event = document.createElement("div");
event.id = "add";
event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span
class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";
date[i].appendChild(event);
var btn = document.createElement("button");
btn.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";
event.appendChild(btn);
btn.addEventListener("click", createEvent);
date[i].addEventListener("click", clickEvent);
event.getElementsByClassName("close")[0].addEventListener("click",
closeEvent);
}
function createEvent(){
var parent = this.parentElement;
var parentDay = parent.parentElement;
if(parent.getElementsByTagName("input")[0].value === "" ){
alert("type something");
}
else{
var createDiv = document.createElement("div");
createDiv.id = "eventDiv";
parent.appendChild(createDiv);
parentDay.classList.add("active");
var txt = parent.getElementsByTagName("input")[0].value;
createDiv.innerHTML = txt;
parent.getElementsByTagName("input")[0].value = "";
//parent.style.visibility = "visible";
}
}
function clickEvent(){
var a = this.getElementsByTagName("div")[0];
a.classList.toggle("active");
}
function closeEvent(){
document.getElementById("add").classList.remove("active");
}
button:focus, input:focus{outline: none;}
.calendar{
margin: calc(50vh - 100px) auto 0 auto;
width: 260px;
height: 200px;
text-align: center;
transform: scale(2.5);
}
.day{
position: relative;
margin: 2px;
width: 33px;
height: 33px;
font-size: 12px;
line-height: 30px;
border-radius: 100%;
float: left;
cursor: pointer;
transition: all .4s ease 0s;
}
.day:hover{
color: #fff;
background: #3f64fd;
}
.day-week{
margin: 0px;
width: 37px;
height: 20px;
color: #515067;
font-size: 9px;
line-height: 20px;
text-transform: uppercase;
float: left;
}
.blank{
margin: 0px ;
width: 37px;
height: 37px;
float: left;
}
#add{
padding: 15px;
position: absolute;
left: -90px;
bottom: 50px;
width: 200px;
min-height: 50px;
background: linear-gradient(to top left, #3f64fd, #14c0ff);
transition: all .2s ease 0s;
visibility: hidden;
opacity: 0;
box-shadow: 0 0 25px rgba(0,0,0,.6);
}
#add.active,
#add:hover{
bottom: 30px;
visibility: visible;
opacity: 1;
transition: all .4s ease 0s;
z-index: 999;
}
#add .close{
position: absolute;
top: 0px;
right: 5px;
color: white;
}
#add input[type="text"]{
width: 140px;
padding: 3px 5px;
color: #fff;
background: none;
border: none;
border-bottom: 1px solid white;
}
#add button{
height: 50px;
width: 50px;
color: #fff;
line-height: 23px;
text-align: center;
background: #3f64fd;
border: none;
left: 70%;
top:53%;
position: absolute;
border-radius: 100%;
cursor: pointer;
}
#eventDiv{
padding: 5px;
line-height: 12px;
text-align: left;
}
.day.active{
color: black;
border: 2px solid #3f64fd;
}
<div class="calendar">
<div class="day-week">s</div>
<div class="day-week">m</div>
<div class="day-week">t</div>
<div class="day-week">w</div>
<div class="day-week">t</div>
<div class="day-week">f</div>
<div class="day-week">s</div>
<div class="blank"></div>
<div class="blank"></div>
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day">13</div>
<div class="day">14</div>
<div class="day">15</div>
<div class="day">16</div>
<div class="day">17</div>
<div class="day">18</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="day">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day">29</div>
<div class="day">30</div>
<div class="day">31</div>
</div>
Instead of doing that really complicated thing why you should do something like:
<input type="date">
I don't understand what are you trying to accomplish!
It's closing when you hit X or + BUT the code is really confusing...
It's creating a div element with id="add" around 50 times?!
for(i = 0; i < 50; i++){
var event = document.createElement("div");
event.id = "add"; // should make this event.className = 'add';
event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";
date[i].appendChild(event);
DO NOT FORGET to change CSS (#add -> .add) and closing event (getElementById -> getElementsByClassName)
During the closeEvent function, you're removing the 'active' class, but the element doesn't have that class. So it's not closing the popup until you've moused away from the box itself.
I would remove the closeEvent function and the reference to it on line 18 of your JS, and would change the clickEvent() function to something like this:
function clickEvent(){
var a = this.getElementsByTagName("div")[0];
a.classList.toggle("active");
if (!a.classList.contains('active')) {
var parentOfA = a.parentNode;
parentOfA.removeChild(a);
}
}
That way you're removing the element from the document entirely, rather than just changing the class on it.
I have a menu for a game that I am making. It uses JavaScript to switch between the menu pages by changing the styles of the buttons and the display of the content. However, when I run it and click on any one of the three menu buttons nothing happens. It says the functions are not functions. It's probably a silly mistake but please help. Thanks for the help in advance.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
background: linear-gradient(to bottom,#7EC0EE,#C1E5FF);
height: 100%;
width: 100%;
margin: 0;
}
#menu {
color: rgba(0,0,0,0.7);
font-family: Segoe UI;
background: #915921;
padding-left: 15px;
padding-top: 45px;
font-size: 17px;
position: fixed;
height: 50%;
width: 100%;
left: 0px;
top: 0px;
}
#menubar {
background: transparent;
color: rgba(0,0,0,0.6);
text-align: center;
line-height: 40px;
font-size: 20px;
position: fixed;
height: 40px;
width: 100%;
left: 0px;
top: 0px;
}
#first {
transition: background 0.5s;
background: transparent;
position: absolute;
height: 40px;
width: 33%;
left: 0px;
top: 0px;
}
#first:hover {
background: transparent;
}
#firstcontent {
display: block;
}
#second {
transition: background 0.5s;
background: rgba(0,0,0,0.2);
position: absolute;
height: 40px;
width: 33%;
left: 33%;
top: 0px;
}
#second:hover {
background: transparent;
}
#secondcontent {
display: none;
}
#third {
transition: background 0.5s;
background: rgba(0,0,0,0.2);
position: absolute;
height: 40px;
width: 34%;
left: 66%;
top: 0px;
}
#third:hover {
background: transparent;
}
#thirdcontent {
display: none;
}
</style>
</head>
<body>
<div id="menu">
<div id="menubar">
<div id="first" onclick="first()">FIRST</div>
<div id="second" onclick="second()">SECOND</div>
<div id="third" onclick="third()">THIRD</div>
</div>
<div id="firstcontent">
First
</div>
<div id="secondcontent">
Second
</div>
<div id="thirdcontent">
Third
</div>
</div>
<script>
var first = document.getElementById("first");
var firstcontent = document.getElementById("firstcontent");
var second = document.getElementById("second");
var secondcontent = document.getElementById("secondcontent");
var third = document.getElementById("third");
var thirdcontent = document.getElementById("thirdcontent");
function first() {
first.style.background = "transparent";
firstcontent.style.display = "block";
second.style.background = "rgba(0,0,0,0.2)";
secondcontent.style.display = "none";
third.style.background = "rgba(0,0,0,0.2)";
thircontent.style.display = "none";
}
function second() {
first.style.background = "rgba(0,0,0,0.2)";
firstcontent.style.display = "none";
second.style.background = "transparent";
secondcontent.style.display = "block";
third.style.background = "rgba(0,0,0,0.2)";
thircontent.style.display = "none";
}
function third() {
first.style.background = "rgba(0,0,0,0.2)";
firstcontent.style.display = "none";
second.style.background = "rgba(0,0,0,0.2)";
secondcontent.style.display = "none";
third.style.background = "transparent";
thircontent.style.display = "block";
}
</script>
</body>
</html>
That's may be because you have named the variable and function as same. Like first() { } and first = somevalue?
Either rename your variables or rename your functions. Having a variable and function with the same name just causes problems.
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.