I'm working on some type of simple notification system.
Here is the jsfiddle: https://jsfiddle.net/t9pvmzhh/3/
I don't know why, but jsfiddle wont display all 4 of the notifications although it works just fine on my page. I'm probably doing something wrong, you can also help me correct the jsfiddle code...
I have started working on clearing each notification after 1000ms, but got stuck at the end of the JS code. The "id" var returns clear0(), clear1(), just as intended, but now I have to call a function and function id { } isn't working. Is that even possible? Can I call a function like this, or I need to find another workaround (I am probably gonna add an X to close the notification, but auto-closing would be nicer)
HTML
<div class="notificontainer" id="notificontainer">
</div>
CSS
.notificontainer {
position: fixed;
border: 1px solid blue;
width: 40vw;
height: 20px;
left: 30%;
bottom: 10px;
}
.notification {
display: none;
transition: visibility .5s;
position: absolute;
border: 1px solid #44DDFF;
background-color: rgb(0, 0, 0);
width: 50%;
height: auto;
padding: 0;
left: 25%;
bottom: 0px;
color: #ffffff;
}
.tooltipheader {
margin: 0px;
padding: 2%;
text-align: center;
border-bottom: 1px groove #949494;
background-color: rgba(165,165,175, .1);
}
JS
notification("Hi world1");
notification("Hi world2");
notification("Hi world3");
notification("Hi world4");
var counted = 0;
function notification(what) {
counted++;
var elem = document.getElementById("notificontainer");
elem.innerHTML += "<div class=\"notification\" id=\"noty" + counted + "\"><div class=\"tooltipheader\"" + what + "</div></div>";
document.getElementById("noty" + counted).style.bottom = counted * 40 + "px";
document.getElementById("noty" + counted).style.display = "initial";
var id = "clear" + counted + "()";
window.setTimeout("clear" + counted, 1000);
}
You can pass parameters to the setTimeOut()'s function callback.
How can I pass a parameter to a setTimeout() callback?
setTimeout(function(param){
console.log("noty"+param);
document.getElementById("noty" + param).style.display = "none";
}.bind(null,counted), 3000);
Updated Fiddle:
https://jsfiddle.net/t9pvmzhh/5/
function clear(id) {
document.getElementById("noty"+id).parentElement.removeChild(document.getElementById("noty"+id));
}
Basically, you haven't defined the clear function, so the call wasn't successfull.
Also, to "remove" an item with pure js, you can't remove the item directly, only his parent can:
As James said, the DOM does not support removing an object directly. You have to go to its parent and remove it from there. Javascript won't let an element commit suicide, but it does permit infanticide... – Mark Henderson Aug 1 '10 at 23:36
Remove element by id
Try to always work with the debug window open, so you can check this kind of stuff.
Related
I have built a kind of password generator that should display a new password whenever the countdown expires. Unfortunately, I have only managed to figure out how to run my code once. The countdown consists of a simple CSS transition, which I would like to keep, because it is much smoother than my other attempts, wherein i tried to repeatedly update the width using JavaScript.
var dictionary = {
"adverbs": [
"always",
"usually",
"probably"
],
"adjectives": [
"useful",
"popular",
"accurate"
],
"nouns": [
"computer",
"software",
"terminal"
]
};
function capitalizeFirst(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function randomIndex(object) {
return object[Math.floor(Math.random() * object.length)];
}
function generatePassword() {
var category = ["adverbs", "adjectives", "nouns"];
var password = [];
for (i = 0; i < category.length; i++) {
password.push(capitalizeFirst(randomIndex(dictionary[category[i]])));
}
password.push(Math.floor(Math.random() * 8999) + 1000);
return password.join("");
}
function updatePassword() {
document.getElementById("countdown-fill").style.width = 100 + '%';
document.getElementById("text-field").value = generatePassword();
document.getElementById("countdown-fill").style.width = 0 + '%';
}
setInterval(updatePassword, 5000);
#import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
body {
margin: 0;
width: 100%;
height: 100%;
background-color: #f8f8f8;
}
.container {
max-width: 400px;
margin: 0 auto;
}
#text-field {
font-size: 15px;
font-weight: 400;
font-family: 'Nunito', sans-serif;
margin-top: 100px;
margin-bottom: 10px;
width: 100%;
height: 30px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #e5e5e5;
background-color: #ffffff;
}
#countdown-background {
width: 100%;
height: 10px;
box-sizing: border-box;
border: 1px solid #e5e5e5;
background-color: #ffffff;
}
#countdown-fill {
width: 100%;
height: 100%;
transition: width 5s;
transition-timing-function: linear;
background-color: #1e87f0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Password Generator</title>
</head>
<body>
<div class="container">
<input id="text-field" type="text" spellcheck="false">
<div id="countdown-background">
<div id="countdown-fill"></div>
</div>
</div>
</body>
</html>
Currently, I have two apparent issues with my code:
The transition becomes delayed due to setInterval. This is not the case if I simply call updatePassword on its own.
The CSS transition only animates once. I would like to reset the animation every time i call updatePassword.
I came across a few jQuery solutions for my problem, but I am not very interested in those, as I want to rely on standard JavaScript as much as possible. However, I am okay with alternative CSS tools like keyframes, which seem to work well:
#countdown-fill {
width: 100%;
height: 100%;
animation: refresh 5s infinite;
background-color: #1e87f0;
}
#keyframes refresh {
from {
width: 100%;
}
to {
width: 0;
}
}
Although, I do worry about synchronization issues as the animation is not coupled with updatePassword in any way.
Question: Is there a way to have updatePassword reset the animation each time I call the function, and remove the initial delay?
JSFiddle: https://jsfiddle.net/MajesticPixel/fxkng013/
I've modified your JSFiddle, here's the explanation.
#countdown-fill {
width: 100%;
height: 100%;
transform-origin: left;
background-color: #1e87f0;
}
.reset {
transition: transform 5s linear;
transform: scaleX(0);
}
The trick is to bind the transition to a class, and when you want to reset it you just remove the class (reset the transition to the initial status) and add it again (restart it).
But there are a few gotchas: the most important is that instantly removing and adding the class will be optimized by the browser, which will just merge the actions and no transition at all will happen. The trick is to wrap the calls in a nested rAF call, which will force the browser to execute, render, and then execute again.
window.requestAnimationFrame(function() {
document.getElementById("countdown-fill").classList.remove('reset');
window.requestAnimationFrame(function() {
document.getElementById("countdown-fill").classList.add('reset');
});
});
The second is related to transitions: to optimize browser rendering, avoid transitioning properties like width or height, and try to limit to transforms and opacity. I've changed your width transition into a transform transition: same effect, more performance.
I second what NevNein has posted, and would also like to add that if you want to couple the transition with updatePassword so that they have a linked relationship and not just matched timeouts, you should replace setInterval(updatePassword, 5000) with:
updatePassword();
document.getElementById('countdown-fill').addEventListener("transitionend", updatePassword)
The countdown and password change will now run at any speed you set in the CSS.
I have been banging my head against this for a few hours and am no closer to a solution than I was before. I am dynamically generating <img> tags, each with their own unique ID, via an AJAX call and JavaScript and giving them certain border colors upon generation (marking whether they are 'good' or 'bad`).
// the div that the screenshots go in
<div id ="screenshots_holder"> </div>
// the JS that is generating the screenshots
var screenshots_holder = document.getElementById("screenshots_holder");
var x = "";
for(i in data.screenshots) {
var image_name = data.screenshots[i].split("/")
x += '<img id="' + image_name[2] +'"src="/static/';
x += data.screenshots[i];
x += '" style = "height: auto; border-style: solid; border-width: 5px; border-color: #1ebe1e; max-width: 10%; margin-right: 10px; margin-bottom: 10px; "';
x += 'onclick="blueifyScreenshot(this.id)" >'; <-- the problem is here!!
}
screenshots_holder.innerHTML = x;
This above code worked just fine... minus the very last part where I add the onclick attribute!
I am trying to make it so that when I click on a screenshot, its border changes color, it scales just a bit, and adds a box-shadow, all of which is done through a JavaScript function called blueifyScreenshot(id) which takes the unique id of the image as a parameter so it can be grabbed through jQuery.
Right now, I can get the screenshot to do that when I hover over it but that's not permanent. Unfortunately, I cannot get any of my CSS changes to go through.
Right now I am grabbing each image element by a jQuery id selector. I know that this is working and updated_id is what it should be because I've verified it through HTML/JS breakpoints in the debugger and matched it to the screenshot that I want to change the border of. blueifyScreenshot IS being called, but none of the CSS is changing no matter what I do.
I have tried using the .css method, which I know only works on existing elements, which my screenshots are.
function blueifyScreenshot(id) {
console.log("#" + id);
var updated_id = "#" + id;
// this isn't changing anything
$(updated_id).css({
"border-color": "#0614d1 !important",
"cursor" : "pointer" ,
"transform": "scale(1.1)",
"box-shadow": "0 0 12px #0614d1" });
}
I have tried adding a class with .addClass() and defining it in my .css sheet.
function blueifyScreenshot(id) {
console.log("#" + id);
var updated_id = "#" + id;
// this isn't changing anything either..
$(updated_id).addClass('selected_screenshot');
}
/* CSS */
.selected_screenshot {
border-color: #0614d1 !important;
cursor : pointer;
transform: scale(1.1);
box-shadow: 0 0 12px #0614d1;
}
I have even tried updating the style attribute of the image with the .attr() method.
function blueifyScreenshot(id) {
console.log("#" + id);
var updated_id = "#" + id;
// and THIS wont change anything.
$(updated_id).attr('style', "height: auto; border-style: solid; border-width: 5px; border-color: #0614d1; max-width: 10%; margin-right: 10px; margin-bottom: 10px;");
}
None of this has worked and my screenshots do not change when I click on them. I've tried browsing through StackOverflow to see if other people had this issue and it looks like everyone was able to resolve their problems through the methods I've tried.
Anyone able to assist, or maybe spot something I have not?
Just reference the element
onclick="blueifyScreenshot(this)"
and toggle a class
function blueifyScreenshot(elem) {
elem.classList.toggle('active')
}
Personally I would just use a dom method
var images = [
'http://placekitten.com/100/300',
'http://placekitten.com/200/200',
'http://placekitten.com/200/300',
'http://placekitten.com/100/200'
]
var outElem = document.getElementById('out')
images.forEach(function(src) {
var img = document.createElement('img');
img.className = 'example'
img.src = src
img.addEventListener('click', function() {
this.classList.toggle('selected')
})
outElem.appendChild(img)
})
img.example {
height: auto;
border-style: solid;
border-width: 5px;
border-color: #1ebe1e;
max-width: 10%;
margin-right: 10px;
margin-bottom: 10px;
}
img.example.selected {
border-color: #0614d1 !important;
cursor: pointer;
transform: scale(1.1);
box-shadow: 0 0 12px #0614d1;
}
<div id="out"></div>
I've got a simple text button with an image of an arrow next to it. I'm wanting the arrow image to move when someone hovers over the button.
I currently have this working in one instance with JS 'document.getElementById...', but I have several buttons across my site that I'd like to have the same behavior. My first thought would be to use a class instead of an id, and use the same functions.
For whatever reason, document.getElementsByClassName doesn't work - even in one instance.
Here's a simpler version to demonstrate - View on Codepen: https://codepen.io/sdorr/pen/JxYNpg
HTML
<HTML>
hover over me
<div id="block"></div>
hover over me
<div class="block"></div>
CSS
* {
margin: 0;
padding: 0;
}
.button {
color: #000000;
text-decoration: none;
background-color: cyan;
margin: 0;
display: block;
width: 300px;
padding: 20px;
text-align: center;
}
#block {
width: 30px;
height: 30px;
background-color: red;
}
.block {
width: 30px;
height: 30px;
background-color: green;
}
JS
function move() {
document.getElementById("block").style.marginLeft = "35px";
}
function moveBack() {
document.getElementById("block").style.marginLeft = "0px";
}
function moveAlt() {
document.getElementsByClassName("block").style.marginLeft =
"35px";
}
function moveBackAlt() {
document.getElementsByClassName("block").style.marginLeft =
"0px";
}
First off, why isn't the behavior with a class working but an id works fine?
Secondly, would a class solve this issue and be scalable across all buttons with the same two functions (onmouseover / onmouseout)?
If not, any ideas on a solution? I currently have a solution I found using jQuery that does work, but when hovering over one button, all arrow images move across the site. I don't necessarily mind this behavior because only one button is really in view at a time - but I'm trying to learn JS and solve problems with my own solutions!
I greatly appreciate your desire to learn on your own and not rely on premade solutions. Keep that spirit and you will go places!
When it comes to getElementsById, we know this should work for one element, since the function returns a single Element.
However, what does getElementsByClassName return?
(see: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName)
It returns an HTMLCollection which you can iterate over to change an single element's style.
So, to get this to work with JavaScript you need to write a function that will be able to identify the particular div.block you want to move. But, this puts you back to where you started, needing some particular identifier, like an id or a dataset value to pass to the function.
Alternately, based on the HTML structure you provide, you could look for nextElementSibling on the a that get's clicked. But I would set up an eventListener rather than adding a JS function as a value to the onmouseenter property.
const btns = document.getElementsByTagName('a');
/*** UPDATE forEach is a NodeList method, and will fail on HTMLCollection ***/
/* this fails -> Sorry! ~~btns.forEach(button=>{~~
/* the following will work
/**********/
for (let i = 0; i < btns.length; i++){
btns[i].addEventListener('mouseenter', function(e) {
//we pass e to the function to get the event and to be able to access this
const block = this.nextElementSibling;
block.style.marginLeft = "35px";
})
btns[i].addEventListener('mouseleave', function(e) {
const block = this.nextElementSibling;
block.style.marginLeft = "0";
})
}
But with siblings, there is a CSS-only solution.
We can use the Adjacent Sibling Selector combined with the :hover state selector and no JavaScript is needed, if we are just moving back and forth.
.button:hover+.block {
margin-left: 35px;
}
See the Snipped Below
* {
margin: 0;
padding: 0;
}
.button {
color: #000000;
text-decoration: none;
background-color: cyan;
margin: 0;
display: block;
width: 300px;
padding: 20px;
text-align: center;
}
.block {
width: 30px;
height: 30px;
background-color: green;
}
.button:hover+.block {
margin-left: 35px;
}
hover over me
<div class="block"></div>
hover over me
<div class="block"></div>
As Vecta mentioned, getElementsByClassName returns an array-like. You'll need to do something like this to get the first element:
function moveAlt() {
document.getElementsByClassName("block")[0].style.marginLeft = "35px";
}
function moveBackAlt() {
document.getElementsByClassName("block")[0].style.marginLeft = "0px";
}
However a better solution might be to use document.querySelector, which operates similarly to jQuery's $() syntax:
function moveAlt() {
document.querySelector(".block").style.marginLeft = "35px";
}
function moveBackAlt() {
document.querySelector(".block").style.marginLeft = "0px";
}
In a specific page a user will press a button but on button press before the actual processing, I need occasionally to present to the user a list of options to select the appropriate one and use that selection in order to be able to proceed the processing.
So essentially I need to display a pop-up window that shows a select box with available options and get the user's selection and then continue processing.
So to do this I found that I need a combination of window->open/prompt/showModalDialog
I found a way to present a pop-up window to the user with the options via
var newWindow = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
newWindow.document.write("<select>");
newWindow.document.write("<option>");
newWindow.document.write(obj);
newWindow.document.write("</option>");
newWindow.document.write("</select>");
Example for passing just one option.
But I can not seem to find how to get back the selection.
The prompt on the other hand returns the selection, but I don't think I can make it display my select.
The showModalDialog returns the selection, but seems to expect another web page as a parameter. So it is not suitable for me.
How can I create my pop-up using plain javascript?
Here is a simple solution that will allow you to fetch value from opened window. All you need is to inject JavaScript code into opened window that will interact with the parent window using window.opener:
HTML
<input id="value" />
<button onclick="openWindow();">Open</button>
JavaScript
function openWindow() {
var i, l, options = [{
value: 'first',
text: 'First'
}, {
value: 'second',
text: 'Second'
}],
newWindow = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
newWindow.document.write("<select onchange='window.opener.setValue(this.value);'>");
for(i=0,l=options.length; i<l; i++) {
newWindow.document.write("<option value='"+options[i].value+"'>");
newWindow.document.write(options[i].text);
newWindow.document.write("</option>");
}
newWindow.document.write("</select>");
}
function setValue(value) {
document.getElementById('value').value = value;
}
Working example here: http://jsbin.com/uqamiz/1/edit
The easiest way is to have a superimposed div with a a high z-index, with transparent background acting as an overlay. You could then have another div which is centered above the overlay(with higher z-index) and containing the list markup
CSS
#shim {
opacity: .75;
filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
-khtml-opacity: .75;
-moz-opacity: .75;
background: #B8B8B8;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
z-index:990
}
#msgbx {
position: absolute;
left: 50%;
top: 50%;
height: 150px;
width: 350px;
margin-top: -75px;
margin-left: -175px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 3px 3px 7px #777;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
z-index:999
}
HTML
<div id="shim"></div>
<div id="msgbx">inject list markup here</div>
To show popup
document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="block";
To Hide
document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="none";
I wrote an alert bar like this:
alertmsg{
font-family:Arial,Helvetica,sans-serif;
font-size:135%;
font-weight:bold;
overflow: hidden;
width: 100%;
text-align: center;
position: fixed;
top: 0px;
left: 0px;
background-color: #fff;
height: 56px;
color: #000;
font: 20px/40px arial, sans-serif;
display:none;
padding-top:12px;
-webkit-box-shadow: 3px 3px 5px #888;
-moz-box-shadow: 3px 3px 5px #888;
box-shadow: 3px 3px 5px #888;
}
function alertbar(m, timeout){
if(!timeout){
var timeout = 3000;
}
var $alertdiv = $('<div id = "alertmsg"/>');
$alertdiv.text(m);
$alertdiv.bind('click', function() {
$(this).slideUp(200);
});
$(document.body).append($alertdiv);
$("#alertmsg").slideDown("slow");
setTimeout(function() { $alertdiv.slideUp(200) }, timeout);
return false
}
Pretty simple. I call alertbar("Go go go!"); to have this alert drop down.
However, it covers the body's page. I want it to sort of "push down" on the entire page (all the elements)....sort of like StackOverflow does it I guess.
I think it's the position: fixed that is your problem. This will place your element relative to the window and take it out of the normal flow.
Use position:static (or relative) and make sure the alertmsg element is at the top of the markup.
There's a couple things you must do:
Change the position CSS attribute of the "alert bar" to not be fixed and just be normal (remove that property).
Change your JavaScript to prepend the alertdiv, rather than append it. This will make it the first thing in the body.
$('body').prepend($alertdiv);
Slide your $alertdiv down normally.
Now something that you didn't take into account in your code is what happens when you run alertbar more than once. You'll append more than one to the body. If this is a concern, try doing something like this:
var exists = $('#alertmsg').length > 0;
var $alertdiv = exists ? $('#alertmsg') : $('<div id="alertmsg" />');
Now only prepend to the body if it doesn't exist already.
if (!exists)
$('body').prepend($alertdiv);
If you want to keep the position: fixed then just expand the body's top padding to the size of the alertbox.
$("#alertmsg").slideDown("slow", function() {
var paddingTopStr = "+" + $(this).outerHeight().toString() + "px";
$('body').css({ paddingTop: paddingTopStr });
});
You will also have to return the padding after:
setTimeout(function() {
var paddingTopStr = "-" + $(this).outerHeight().toString() + "px";
$('body').css({ paddingTop: paddingTopStr });
$alertdiv.slideUp(200) }, timeout);
}
Same for the click event.
You could wrap the rest of your content (to be pushed down) in a separate div and then insert your alert bar before it