How to create a sticky notification in plain HTML CSS and JS - javascript

Hello everyone I need to create 3 different types of dialog boxes for school but the way it's worded I cannot find information online of how to do it. I need to create a sticky popup that is unintrusive! to the screen and untimed. Closed by clicking the x in the popup. I have a growl notification already that is timed. Now I don't even know what to look for as the internet has me going in circles the image I attached best explanation of nitication I need
is the closest description of what I need to create. If anyone can point me in the right direction I would be very grateful.
I tried searching on the internet. I have created a flash notification and can figure out an alert but "sticky" popup dialog box I cannot find. To be able to scroll and have an unintrusive, untimed, notification or dialog box as my school calls them this is the assignmentschool assignment.

One way of doing it with good animations, is to create an element with a position: fixed in CSS.
then push the element outside of the screen by a 100% of it's width with transform: translateX().
then add a class to it that returns the element to its original position with the same CSS function.
you can add or remove the class using JavaScript through an onclick attribute on the HTML element or adding a click listener on the element
const closeElement = document.getElementById('notification');
const toggleNotification = () => {
closeElement.classList[closeElement.classList.contains('open') ? 'remove' : 'add']('open');
}
const closeNotification = () => {
closeElement.classList.remove('open')
}
const openNotification = () => {
closeElement.classList.add('open')
}
* {
box-sizing: border-box;
}
.growl {
position: fixed;
right: 1rem;
bottom: 1rem;
background-color: aquamarine;
min-width: 300px;
min-height: 50px;
padding: 8px;
border-radius: 8px;
transform: translateX(calc(100% + 1rem));
transition: all 0.2s ease;
}
.open {
transform: translateX(0px);
}
.growl .close-btn {
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="openNotification()">Open</button>
<button onclick="toggleNotification()">toggle</button>
<div id="notification" class="growl">
<p>This is a small notification</p>
<span id="close-btn" onclick="closeNotification()" class="close-btn">X</span>
</div>
</body>
</html>

This notification will be at the bottom even if you will scroll.
function addNotification(){
//create notification
const NotiElement = document.createElement("div");
NotiElement.id = "stickyNotification";
NotiElement.style.display = "block";
NotiElement.style.position = "absolute";
NotiElement.style.width = "290px";
NotiElement.style.height = "90px";
NotiElement.style.padding = "10px";
NotiElement.style.borderRadius = "5px";
NotiElement.style.border = "1px solid black";
NotiElement.style.backgroundColor = "red";
NotiElement.style.right = "10px";
NotiElement.style.bottom = "10px";
NotiElement.innerHTML = " <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.</span><div id='closeBtn'>X</div>";
document.body.appendChild(NotiElement);
//keep it always at the bottom corner of the window
document.addEventListener("scroll", (event) => {
let btmPos = -window.scrollY + 10;
NotiElement.style.bottom = btmPos + "px";
});
//add close event to remove child
document.getElementById("closeBtn").addEventListener("click", (event) => {
document.body.removeChild(NotiElement);
});
}
//call function
addNotification();
#stickyNotification #closeBtn{
position: absolute;
top: 0;
right: 0;
padding: 5px;
}
#stickyNotification #closeBtn:hover{
color: white;
cursor: pointer;
}
body{
height: 200vh;
}

You can use window.alert("Hello World") to open a pop up you are trying to define.

<!DOCTYPE html>
<html>
<body>
<p>
Here is your HTML Content
</p>
<div id="pop_up">
<div id="close_pop_up">X</div>
Here is your text
</div>
<style>
#pop_up{
background: gray;
position: absolute;
width: 100px;
height: 100px;
right: 20px;
bottom: 20px;
}
</style>
<script>
const closePopUp = document.getElementById("close_pop_up");
closePopUp.addEventListener("click", () =>{
document.getElementById("pop_up").style.display = "none";
});
</script>
</body>
</html>
In your HTML code you can add a element that have an absolute position and will be your pop-up.
<div id="pop_up">
Here is your text
</div>
#pop_up{
position: absolute;
width: 100px;
height: 100px;
right: 20px;
bottom: 20px;
}
This is the first step if you want a sticky notification on your website.You can change the values of the css above depending on your needs.
Now if you want to close it you need to 1. add you x to you element:
<div id="pop_up">
<div id="close_pop_up">X</div>
Here is your text
</div>
Add a listener with javascript to hide the notification when you cilck on the X.
const closePopUp = document.getElementById("close_pop_up");
closePopUp.addEventListener("click", () =>{
document.getElementById("pop_up").style.display = "none";
});
You can add this script in a <script></script> just before the end on the enclosure tag body of your html.

Related

Undo does not work for a replaced content on a div in html

I am trying to create a code that works when you put it on the google search bar, that is a must and i created a div you can edit, also i created a reset button that replaces the content on the div with the default text, but when I try to press ctrl + z it does not go back, and i don't know how to make it work
-I cannot get rid of the: data:text/html, part because it wouldn't work in the search bar for google
-i do have to have all the code types in just one document, because i have to copy paste it all on the google search bar
function reset() {
div_1.innerHTML = '<p> Default text<p>';
}
.div_1 {
display: block;
background-color: rgba(255, 0, 0, 0.5);
height: 80%;
position: relative;
width: 60%;
position-left: 100px;
}
<div contenteditable="true" class="div_1" id="div_1">
<p> Default text<p>
</div>
<button onclick="reset()">reset</button>
function reset() {
div_1.innerHTML = ''; //set the inner HTML to empty string
}
.div_1 {
display: block;
background-color: rgba(255, 0, 0, 0.5);
height: 80%;
position: relative;
width: 60%;
position-left: 100px;
}
<div contenteditable="true" class="div_1" id="div_1">
<p> Default text<p>
</div>
<button onclick="reset()">reset</button>
I think you are trying to make the form empty when you press reset button.
So you have to change the inner HTML to an empty string in order to do that.
I hope it helped
i was able to find an option with the memento pattern and creating an event for the ctrl + z input on the keyboard
function copy(){
inp1.select();
navigator.clipboard.writeText(inp1.value);
ctn.innerHTML = inp1.value;
}
var mementos = [];
function reset() {
mementos.push(document.getElementById('div_1').innerHTML);
div_1.innerHTML= '<p>caller name: </p><p>reason for the call:</p><p>CTN: <div class="ctn" id="ctn"></p><p><br></p><p></p>';
}
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 'z') {
var lastMemento = mementos.pop();
div_1.innerHTML = lastMemento;
}
});
function undo() {
var lastMemento = mementos.pop();
div_1.innerHTML = lastMemento;
}
input{
width:200px;
height: 100%;
}
.div_1{
display: block;
background-color:rgba(255, 0, 0, 0.5);
height:400px;
position: relative;
width: 400px;
padding-left: 2px;
}
button{
position: relative;
}
.ctn {
display: inline;
background-color: red;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notes</title>
</head>
<body>
<link rel="stylesheet" href="syles.css">
<input placeholder="(000)-000-0000" maxlength="10" id="inp1">
<button onclick="reset()">reset</button>
<button onclick="copy()">copy</button>
<button onclick="undo()">Undo</button>
<div contenteditable="true"class="div_1" id="div_1">
<p>caller name: </p><p>reason for the call:</p><p>CTN: <div class="ctn" id="ctn"></p><p><br></p><p></p>
</div>
</body>
</html>

Meme Generator: Event Listener not allowing for multiple images on the page at once

const form = document.querySelector('#memeForm');
const imageInput = document.querySelector('#imageURL');
const topText = document.querySelector('#textOnTop');
const bottomText = document.querySelector('#textOnBottom');
const results = document.querySelector('#results');
form.addEventListener('submit', function(e) {
e.preventDefault();
const meme = document.createElement('div');
const image = document.createElement('img');
const textTop = document.createElement('div');
const textBottom = document.createElement('div');
const removeBtn = document.createElement('button');
//allows file to be read by the DOM as an image?
image.src = imageInput.value;
textTop.classList.add('textTop');
textTop.innerHTML = topText.value;
textBottom.classList.add('textBottom');
textBottom.innerHTML = bottomText.value;
//allows the button created in line 16 and appended to the 'meme' div in line 40 to remove all contained within the parent 'meme' div
removeBtn.innerText = "Delete Meme";
removeBtn.addEventListener('click', function(e) {
e.target.parentElement.remove();
});
//Does classList.add allow the append methods that follow to be added to 'meme'?
meme.classList.add('meme');
meme.append(image);
meme.append(textTop);
meme.append(textBottom);
meme.append(removeBtn);
//appends ALL meme inputs to the specified location(section tag)?
results.append(meme);
//clears form's inputs once form is submitted
form.reset();
});
//cool and colorful mousemove feature!
document.addEventListener('mousemove', function(e) {
// console.log('e.pageX, e.pageY');
const r = Math.round(e.pageX * 255 / window.innerWidth);
const b = Math.round(e.pageY * 255 / window.innerHeight);
const color = `rgb(${r}, 0, ${b})`;
document.body.style.backgroundColor = color;
});
h1 {
font-family: 'Montserrat', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
h4 {
font-family: 'Montserrat', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
label {
font-weight: bolder;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
.meme {
position: relative;
}
.textTop {
position: absolute;
top: 30px;
right: 200px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
z-index: 2;
font-size: 40px;
}
.textBottom {
position: absolute;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 40px;
z-index: 2;
bottom: 100px;
}
.meme image {
max-width: 100%;
z-index: 1;
}
input {
width: 50%;
box-sizing: border-box;
margin-bottom: 20px;
}
.submitBtn {
width: 12%;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meme Generator</title>
<link rel="stylesheet" href="meme.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200&display=swap" rel="stylesheet">
</head>
<body>
<div>
<h1>Meme Generator</h1>
<h4>Fill out the form to start creating memes!</h4>
</div>
<form action="" id="memeForm">
<p>
<label for=""> Image URL
<input type="url" placeholder="What's the URL for your meme?" id="imageURL">
</label>
</p>
<p>
<label for=""> Text on Top
<input type="text" placeholder="(Optional) What text do you want at the top of your meme?" id="textOnTop">
</label>
</p>
<p>
<label for=""> Text on Bottom
<input type="text" placeholder="(Optional) What text do you want at the bottom of your meme?" id="textOnBottom">
</label>
</p>
<p>
<input type="submit" value="Create Meme!" class="submitBtn"></input>
</p>
</form>
<!-- saw many people use canvas but when I tried to use that tag my image wouldn't load -->
<div id="results"></div>
<script src="meme.js"></script>
</body>
</html>
First post here and a relatively new coder so bear with me.
I've been working on this meme generator and so far it can take an image URL and text and add those to the specified div that results in something that is on the verge of looking like a meme.
I have 2 main problems:
Once I fill in the inputs and press the "Create Meme!" button, the image and text are appended to their respective and elements contained within the "meme" div but I'm not able to create another meme until I delete the meme using the "Delete Meme" button I've created in my js file. Essentially, the "Create Meme!" button is not clickable once a meme has been generated. One of the goals of this project is for a user to add multiple memes to the page by submitting the form multiple times.
I can't figure out how to position the text that is shown on the top and bottom of the image correctly. I'm sure if I were to play with the positioning in CSS more it would look more like a standard meme but I'd rather have the text be automatically centered in the top and bottom of the image. For example, if I adjust the size of the page the image and text don't adjust along with it.
Please let me know if I can provide more clarity on my issue, I've been stuck here since last night and my googling efforts are becoming more and more futile.
The clicking of the button problem is the fact your div overlays the button so when you click, you click on the div, not the button.
For the layout, there is many ways to tackle it. One way is just to use some relative and absolute positioning.
.wrapper {
position: relative;
width: 80%;
}
.wrapper p {
position: absolute;
left: 0;
text-align: center;
width: 100%;
font-size: 1.4em;
}
.wrapper img {
width: 100%;
}
.wrapper p.top {
top: 0;
}
.wrapper p.bottom {
bottom: 0;
}
<div class="wrapper">
<p class="top">Hello World</p>
<img src="http://placekitten.com/400/300" />
<p class="bottom">Bacon Bacon Bacon Bacon Bacon Bacon Bacon Bacon</p>
</div>

href link not working with innerHTML script with "onmouseover change text" and onmouseout

My goal is to have text change onmouseover from "hello" (without a link) to "Google" and provide an 'href' on the resulting "Google" text, and then revert to "hello" onmouseout without a link.
The code below works in changing the text from "hello" to "Google" but,
the link on "Google" does not work (even though I can right-click on "Google" and open the link on another tab)
the text does not change back to "hello" onmouseout.
Thanks for your help in advance!
Here is my code:
<style>
.container {
margin-top: 6vw;
margin-left: 40%;
margin-right: 40%;
}
</style>
<div class="container">
<h1>
<div class="hello" id="hello1" onmouseover="changeText()" onmouseout="changeText(this,'Hello.')">Hello.</div>
</h1>
</div>
<script>
function changeText() {
if (document.getElementById("hello1")) {
a = document.getElementById("hello1")
a.innerHTML = 'Google'
}
}
</script>
try this way onmouseout="this.innerHTML='Hello.';"
function changeText() {
if (document.getElementById("hello1")) {
a = document.getElementById("hello1")
a.innerHTML = 'Google'
}
}
.container {
margin-top: 6vw;
margin-left: 40%;
margin-right: 40%;
}
<div class="container">
<h1>
<div class="hello" id="hello1" onmouseover="changeText()" onmouseout="this.innerHTML='Hello.';">Hello.</div>
</h1>
</div>
By changing a class of a parent tag, any and all child tags can be affected via CSS. Having the HTML ready when the page loads and then hiding it is better than constantly creating and destroying HTML for trivial effects.
The events "mouseenter" and "mouselrave" are handled by a property event handler and an event listener. Either one is sufficient, but avoid using attribute event handlers:
<div onmouselame="lameAttributeEventHandler()">...</div>
Details are commented in the example below
// Reference the <header>
const hdr = document.querySelector('.title');
/* This is a property event handler
// Whenever the mouse enters within the borders of
// the <header>:
// '.google' class is added
// '.hello' class is removed
*/
hdr.onmouseenter = function(event) {
this.classList.add('google');
this.classList.remove('hello');
};
/* This is an even listener
// Whenever the mouse exits the <header> the
// opposite behavior of the previous handler
// happens
*/
hdr.addEventListener("mouseleave", function(event) {
this.classList.add('hello');
this.classList.remove('google');
});
.title {
height: 50px;
margin-top: 3vh;
border: 3px solid black;
text-align: center;
}
h1 {
margin: auto 0;
}
.hello span {
display: inline-block;
}
.hello a {
display: none;
}
.google a {
display: inline-block;
}
.google span {
display: none;
}
<header class="title hello">
<h1>
<span>Hello</span>
Google
</h1>
</header>
You can try this, May it help u to solve the problem
<!DOCTYPE html>
<head>
<title>change text on mouse over and change back on mouse out
</title>
<style>
#box {
float: left;
width: 150px;
height: 150px;
margin-left: 20px;
margin-top: 20px;
padding: 15px;
border: 5px solid black;
}
</style>
</head>
<html>
<body>
<div id="box" onmouseover="changeText('Yes, this is Onmouseover Text')" onmouseout="changeback('any thing')" >
<div id="text-display" >
any thing
</div>
</div>
<script type="text/javascript">
function changeText(text)
{
var display = document.getElementById('text-display');
display.innerHTML = "";
display.innerHTML = text;
}
function changeback(text)
{
var display = document.getElementById('text-display');
display.innerHTML = "";
display.innerHTML = text;
}
</script>
</body>
</html>

How to reverse effect of a JS action using an IF ELSE statement using Global variable?

Creating a very basic IF ELSE statement in JavaScript to create a clickable overlay on a DIV. The open action works however close does not.
Using the onClick function to select the div, with the idea a var will tell it whether to run the function or not.
<div onclick="myFunction()" class="outer">
<div class="inner" id="overlay">
<h1>Title</h1>
<p>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry'sstrong text standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has?</p>
</div>
.outer {
position: relative;
width: 25rem;
height: 15rem;
border-radius: 1em;
background-image: url("https://user-images.githubusercontent.com/16360374/37567282-e1932872-2a81-11e8-807b-efc5a997f2f1.jpg");
background-position: center;
background-size: cover;
box-shadow: 0px 0px 10px #888888;
overflow: hidden;
}
.inner {
position: absolute;
bottom: 0;
width: 100%;
height: 5rem;
background-color: rgba(0,0,0,0.7);
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
transition: 0.5s;
}
.inner > * {
color: white;
padding: 1rem;
}
function myFunction() {
var overlay = false;
if(overlay == false) { document.getElementById("overlay").style.height = "100%";
overlay = true;
}
else
{document.getElementById("overlay").style.height = "20%";
overlay = false;}
}
Everytime you run myFunction() the overlay variable is set to false. This making the height always set to 100%.
Placing the overlay variable outside the myFunction() fixed the problem! Now since the overlay variable is global, it switches states when clicked on [hidded <==> shown].
let overlay = false;
function myFunction() {
if(overlay == false) {
document.getElementById("overlay").style.height = "100%";
overlay = true;
} else {
document.getElementById("overlay").style.height = "20%";
overlay = false;
}
}
When you run myFunction you always set the local variable overlay to false. This means that when you check the value of overlay it is always false.
You need to move the variable to a higher scope in order for it to persist its value between different calls to myFunction.
Try to create the variable outside myFunction like this instead.
var overlay = false;
function myFunction() {
if(overlay == false) {
document.getElementById("overlay").style.height = "100%";
overlay = true;
} else {
document.getElementById("overlay").style.height = "20%";
overlay = false;
}
}
Your overlay variable will always be false. Move overlay out of the function.
var overlay = false;
function myFunction() {
if(overlay == false) {
document.getElementById("overlay").style.height = "100%";
overlay = true;
} else {
document.getElementById("overlay").style.height = "20%";
overlay = false;
}
}
Here are 3 versions of solutions.
Uses the global variable to keep track of overlay status
Uses the element data-attribute parameter instead of a global variable
Uses the 'id' and data-attribute without the global variable
`
<!DOCTYPE html>
<html lang="en">
<head>
<title> Image Overlays Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- From: https://stackoverflow.com/questions/62538838/how-to-reverse-effect-of-a-js-action-using-an-if-else-statement-using-global-var -->
<style>
.outer {
position: relative;
width: 25rem;
height: 15rem;
border-radius: 1em;
background-image: url("https://user-images.githubusercontent.com/16360374/37567282-e1932872-2a81-11e8-807b-efc5a997f2f1.jpg");
background-position: center;
background-size: cover;
box-shadow: 0px 0px 10px #888888;
overflow: hidden;
}
.inner {
position: absolute;
bottom: 0;
width: 100%;
height: 20%;
background-color: rgba(0,0,0,0.7);
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
transition: 0.5s;
}
.inner > * {
color: white;
padding: 1rem;
}
h1 { margin: 0; padding: 0; }
div { display: inline-block; } /* optional setting */
</style>
</head><body>
<div onclick="myFunction()" class="outer">
<div class="inner" id="overlay">
<h1>Title</h1>
<p>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry
Lorem Ipsum has been the industry's strong text standard dummy text ever since the 1500s
when an unknown printer took a galley of type and scrambled it to make a type specimen book it has?</p>
</div>
</div>
<div onclick="myFunction2()" class="outer" data-overlay='false'>
<div class="inner" id="overlay2">
<h1>Title 2</h1>
<p>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>This version uses an internal status data-attribute.</p>
</div>
</div>
<div onclick="myFunction3('overlay3')" class="outer" data-overlay='false'>
<div class="inner" id="overlay3">
<h1>Title 3</h1>
<p><br />This version uses element 'ID' and data-attribute.</p>
</div>
</div>
<script>
console.clear();
/* Version #1 - uses global variable */
var overlay = false;
function myFunction() {
overlay = !overlay;
let ht = (overlay) ? '100%' : '20%';
document.getElementById("overlay").style.height = ht;
}
/* */
/* Version #2 - uses element attribute */
function myFunction2() {
let overlay = document.getElementById('overlay2');
let status = overlay.getAttribute('data-overlay');
if (status === 'false') {
overlay.style.height = '20%'; overlay.setAttribute('data-overlay','true');
} else {
overlay.style.height = '100%'; overlay.setAttribute('data-overlay','false');
}
}
/* */
/* Version #3 - uses ID and element attribute */
function myFunction3(IDS) {
let overlay = document.getElementById(IDS);
let status = overlay.getAttribute('data-overlay');
if (status === 'false') {
overlay.style.height = '20%'; overlay.setAttribute('data-overlay','true');
} else {
overlay.style.height = '100%'; overlay.setAttribute('data-overlay','false');
}
}
/* */
</script>
</body>
</html>
`

Attaching an image to an overlay using javascript

I have searched several posts but cannot find something similar to what I need to do, or what I have found I cannot get to work - pretty sure that is just me though!
So, there are 3 links on a page. When a link is clicked it should display the photo (on the same page) with an overlay applied to it. I can get the image to open but for the life of me cannot figure out how to get the overlays to attach. When the image opens it should stay on the same page (with the links visible through the overlay). The user should be able to click a close button or the image itself to go back to the links display.
I know the code is a mess as I've been trying anything I can think of to try and get this to work, since I'm currently stuck on getting everything to display properly and have not even gotten to the close function yet if someone can give me a hint I would really appreciate it.
Thanks!
HTML
<!doctype html>
<html>
<head>
<title> Image preview </title>
<meta charset="utf-8">
<link rel="stylesheet" href="preview.css">
<script src="preview.js"></script>
<script>
window.onload = function() {
Preview.init();
};
</script>
</head>
<body>
<ul>
<li><a href="https://courses.oreillyschool.com/advancedjavascript
/homework/images/image1.jpg" data-preview="image1">Mt. Rainier,
1</a></li>
<li><a href="https://courses.oreillyschool.com/advancedjavascript
/homework/images/image2.jpg" data-preview="image2">Mt. Rainier,
2</a></li>
<li><a href="https://courses.oreillyschool.com/advancedjavascript
/homework/images/image3.jpg" data-preview="image3">Mt. Rainier,
3</a></li>
</ul>
</body>
</html>
CSS
.previewOverlay {
position: absolute;
display: none;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
}
.previewOverlay img {
position: relative;
border: 20px solid white;
border-radius: 10px;
top: 50px;
left: 50px;
}
.close {
position: absolute;
top: 0px;
left: 0px;
color: #fdfdfd;
font-size: 50px;
text-shadow: 0px 0px 5px black;
}
.close:after {
content: "\2717";
}
.close:hover {
color: orange;
}
JavaScript
function Preview () {
var mtnPics = document.querySelectorAll("a");
console.log(mtnPics);
mtnPics.addEventListener("click", function(event) {
event.preventDefault()
});
for (var i = 0; i < mtnPics.length; i++) {
mtnPics[i].onclick = showPicture;
}
function showPicture (pictureURL) {
var picPicked = document.getElementById("a").value;
console.log(picPicked);
//Create Div's for image display.
var ul = document.getElementById("ul");
var picDiv = document.createElement("div");
picDiv.setAttribute("class", "previewOverlay");
var imgDiv = document.createElement("div");
imgDiv.setAttribute("class", "previewOverlay img");
var imgSelected = document.getElementById("a").value;
console.log(imgSelected);
imgDiv.src = imgSelected;
var buttonClose = document.createElement("button");
//Assign divs and buttons
buttonClose = document.setAttribute("class", "close");
ul.appendChild(imgDiv);
imgDiv.appendChild(pictureURL);
imgDiv.appendChild(buttonClose);
picDiv.appendChild(imgDiv);
picDiv.insertBefore(ul, picDiv.firstChild);
//document.body.appendChild(picDiv);
buttonClose.onclick = closePicture;
}
function closePicture(targetURL) {
document.removeElement('picDiv');
}
}

Categories