I made a "To-List" with two icons that animate on the side. the icon on the right is not in the table. So when animating you can see it moving beyond the table. I can't understand why? any help please?
Thank you!
Hi, here is the fiddle:
https://jsfiddle.net/rggo2tmv/
As you can see, the garbage-bin icon disappears inside the table while the other icon (on the right) continues outside the table.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>To-Do List Project</title>
<!-- local css file sheet-->
<link rel="stylesheet" type="text/css" href="assets\css\todo.css">
<!-- Local JQuery js file-->
<script type ="text/javascript" src="assets/js/lib/jquery-3.1.0.min.js"></script>
<!-- googel fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!-- howel sounds -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.0/howler.core.min.js"></script>
<!-- Paper -->
<script type="text/javascript" src="papaer\dist\paper-full.js"></script>
<script type="text/paperscript" canvas="myCanvas">
<!-- two numbers are placing, last number is a radious-->
var circles = [];
var colors = ['blue', 'red', 'orange', 'purple'];
<!-- //DEFINING AN OBJECT -->
var keyData = {
a: {
color: 'purple',
},
b: {
color: 'green',
},
c: {
color: 'yellow',
},
d: {
color: 'orange',
},
e: {
color: 'NavajoWhite',
},
f: {
color: 'yellow',
},
g: {
color: 'orange',
},
h: {
color: 'grey',
},
i: {
color: 'SpringGreen',
},
j: {
color: 'black',
},
k: {
color: 'white',
},
l: {
color: 'darkgrey',
},
m: {
color: 'darkblue',
},
n: {
color: 'darkblue',
},
o: {
color: 'yellow',
},
p: {
color: 'cyan',
},
q: {
color: 'Maroon',
},
r: {
color: 'Red',
},
s: {
color: 'pink',
},
t: {
color: 'Salmon',
},
u: {
color: 'cyan',
},
v: {
color: 'FireBrick',
},
w: {
color: 'Tan',
},
x: {
color: 'Brown',
},
y: {
color: 'Olive',
},
z: {
color: 'YellowGreen',
},
};//closes keyData
function onKeyDown(event) {
if(keyData[event.key]){ //if key is defined
keyData[event.key].color;
<!-- will calc the max size of visible canvas-->
var maxPoint = new Point(view.size.width, view.size.height);
<!-- random is between 0 and 0.99 -->
var randomPoint = Point.random();
<!-- so multiplying max and a random decimal nmber will give us random locaiton inside the canvas -->
var point = maxPoint * randomPoint;
var newCircle = new Path.Circle(point, 200);
newCircle.fillColor = keyData[event.key].color;
<!-- adds the circle to the array -->
circles.push(newCircle);
}//if
};
function onFrame(event) {
<!-- // Each frame, change the fill color of the path slightly by
// adding 1 to its hue: -->
for(var i = 0; i<circles.length; i++){
circles[i].fillColor.hue += 1;
circles[i].scale(.955);
};
};
</script>
</head>
<body>
<div id="container">
<h1>To-Do List <button <i class="fa fa-plus" aria-hidden="true"></i> </button></h1>
<input type="text" placeholder="Add New To-Do">
<!-- span is the button and its inside the li which contains the text -->
<!-- added table to each so they won't all aniamte toghther -->
<table>
<tr>
<td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>
<td colspan="2">Hello There</td>
<td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
</tr>
</table>
<table>
<tr>
<td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>
<td colspan="2">Hello There</td>
<td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
</tr>
</table>
<table>
<tr>
<td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>
<td colspan="2">Hello There</td>
<td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
</tr>
</table>
</div>
<canvas id="myCanvas" resize></canvas>
<!-- Javascript -->
<!-- //icons -->
<script src="https://use.fontawesome.com/9430f1a1cb.js"></script>
<!-- local javascript -->
<script type="text/javascript" src="assets/js/todo.js"></script>
</body>
</html>
Javascript:
///// check-off and remove spicific to-do by clicking or restore it to not-done-yet
//will add/remove class "completed" - grey and line-through
$("div").on("click", "span.spanRight", function(){
$(this).parent().parent().toggleClass("completed"); //if class exists will remove and the opposite according to aprent from span.spanRight
});
var sound = new Howl({
src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/clay.mp3']
});
//click on delete button to remove to-do
$("div").on("click", "span.spanLeft", function(){
//will remove the to-do, which its li is the parent element of the span
$(this).parent().parent().fadeOut(500, function() //this here refers to the span, but now because of parent()
//fadeOut will not remove only hide element, so we add remove()
{$(this).remove();}); //this refers to the parent
event.stopPropagation(); //will stop the toggle to "completed" class
});
/////creation of new to-do
//event on key press. When we click "enter" it will add the new to-do (input)
$("input[type='text'").keypress(function(){ //only if input is 'text' it will select the input
if (event.which === 13){//if "enter" is clicked in input field
//grabbing text from input
var todoText = $(this).val(); //takes value that inside input
//create a new li and add to ul
if( todoText!== ''){
$("div").append("<table>" + "<tr><td><span class='spanLeft'><i class='fa fa-trash'></i></span></td>" +
"<td colspan='2'>" + todoText + "</td>" +
"<td><span class='spanRight'><i class='fa fa-check-square-o'></i></span></td>" +
"</tr></table>");
$("input").val('');
sound.play();
}
}
});
/////Add button
// selecting the icon
$(".fa-plus").on("click", function() {
if ( $("input").val() === "") {
// empty
$("input").focus();
} else { //make it do enter key /simulate an enter key, sends the input value and clears the input field (and value)
var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 13;
$("input").trigger(press);
//wil ladd input value to feild
$("div").append("<table>" + "<tr><td><span class='spanLeft'><i class='fa fa-trash'></i></span></td>" +
"<td colspan='2'>" + $("input").val() + "</td>" +
"<td><span class='spanRight'><i class='fa fa-check-square-o'></i></span></td>" +
"</tr></table>");
$("input").val('');
sound.play();
} //else
$("input").val('');
});
CSS:
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*layer index*/
z-index: -5;
}
body{
height: 100%;
margin: 0px;
background: linear-gradient(to left, #16BFFD , #CB3066);
}
#container {
width: 360px;
/*to center:*/
margin: 200px auto 200px auto;
/*slight black shadow around*/
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
background: #e6f3ff;
/**/
}
tbody, table {
/*removes bulletpoints*/
padding: 0;
border: none;
margin: 0;
width: 100%;
height: 100%;
/*removes annoying border from table that broswer creates*/
border-collapse:collapse;
background-color: white;
}
tr {
color: #666;
height: 40px;
/*centers the text*/
line-height: 40px;
width: 100%;
}
/*every second li will get this background color IMPORTANT*/
tr:nth-child(2n){
background: #f7f7f7;
}
td {
padding: 0;
margin: 0;
height: 100%;
border: none;
width: 20px;
}
/*mae the delete button appear. animated at span*/
tr:hover span{
/*40px so we'll see the icons which were set to 0 at start*/
width: 40px;
opacity: 1.0;
border: rgb(0, 0, 0, 0,);
}
span {
width: 0%;
padding: 0;
margin: 0;
}
.spanLeft {
background: #e74c3c;
height: 40px;
margin-right: 20px;
margin-left: 0px;
float: left;
text-align: center;
color: white;
/*set zero for animation*/
width: 0px;
/* display: inline-block;*/
/*animates*/
transition: 0.5s;
opacity: 1;
}
.spanRight {
background: blue;
height: 40px;
margin-right:0px;
margin-left: 20px;
float: right;
text-align: center;
color: white;
/*set zero for animation*/
width: 0px;
/* display: inline-block;*/
/*animates*/
transition: 0.5s;
opacity: 0;
}
input {
padding: 13px 13px 13px 20px;
font-size: 16px;
background-color: #f7f7f7;
width: 100%;
/*box sizing includes the padd, margin etc*/
box-sizing: border-box;
/*takes a way the small gaps around input*/
border: 3px solid rgba(0,0,0,0);
}
/*pnly when focued on an input*/
input:focus{
background: #fff;
border: 3px solid #2980b9;
outline: none;
}
.completed {
color: grey;
text-decoration: line-through;
}
/*the plus sign*/
.fa-plus{
background: none;
border: none;
float: right;
}
h1 {
color: white;
text-transform: uppercase;
background: #2980b9;
margin: 0;
padding: 10px 20px;
font-size: 24px;
font-weight: normal;
/*a google font*/
font-family: 'Roboto', sans-serif;
}
The icon inside the span element that you animate, doesn't "shrink" with the span as you might expect. It is shown to the right of the 0 width span instead (i.e. it overflows). You have the same effect both on the left and right side which is visible if you change the color of the icons.
Span is an inline element so it normally doesn't have the overflow property but you can use display: inline-block to display it with a given width and height. Use overflow: hidden to hide the icon when squeezing the width of the span element.
Related
I have a navigation bar. In it, I have some anchors. One of the anchors has the text 'Guides'. I want a div to appear when I hover over the anchor, and I want it to remain on the screen as long as I am hovering over the anchor. I also want the the div to remain on the screen as long as I am hovering over the div itself. All of this is working fine. When I scroll down, I decrease the size of the navigation bar and change the top position of the div. After I do this, the eventListener that I have set up to keep the div on the screen as long as I am hovering over it stops working. Please note that the div still appears when I hover over the anchor, and it remains on the screen as long as I am hovering over it.
Here's the code. The div is the one with id="dropdown-guides":
// Show dropdown on hovering over 'guides' in navigation bar
let guidesAnchor = document.querySelector('#nav-anchor-guides')
let guidesDropdown = document.querySelector('#dropdown-guides')
function showGuidesDropdown() {
guidesDropdown.style.display = 'block'
}
function hideGuidesDropDown() {
guidesDropdown.style.display = 'none'
}
guidesAnchor.addEventListener('mouseenter', showGuidesDropdown)
guidesAnchor.addEventListener('mouseleave', hideGuidesDropDown)
guidesDropdown.addEventListener('mouseenter', showGuidesDropdown)
guidesDropdown.addEventListener('mouseleave', hideGuidesDropDown)
// Show search bar on clicking search icon
let searchIcon = document.querySelector('#search-icon_anchor')
let searchBar = document.querySelector('#search-bar')
searchIcon.addEventListener('click', function() {
if (searchBar.style.display === 'none') {
searchBar.style.display = 'block'
} else {
searchBar.style.display = 'none'
}
})
// Change navigation bar on scrolling down
let navBar = document.querySelector('nav')
let mainIcon = document.querySelector('#nav-main-icon')
let navAnchors = document.querySelectorAll('nav a')
let iconDesignGuideAnchor = document.querySelector('#nav-dropdown-guides-icon-design-guide')
let pixelPerfectIconsAnchor = document.querySelector('#nav-dropdown-guides-crafting-pixel-perfect-icons')
let dribbbleAudienceAnchor = document.querySelector('#nav-dropdown-guides-build-your-dribbble-audience')
window.onscroll = () => {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
navBar.style.height = '42px'
navBar.style.paddingTop = '10px'
navBar.style.boxShadow = '0px 0px 7px #0000001A'
mainIcon.style.top = '10px'
mainIcon.style.width = '97px'
mainIcon.style.height = '30px'
navAnchors.forEach(navAnchor => {
navAnchor.style.top = '14px'
navAnchor.style.height = '23px'
})
guidesDropdown.style.top = '42px'
searchBar.style.top = '52px'
iconDesignGuideAnchor.style.top = '65px'
pixelPerfectIconsAnchor.style.top = '108px'
dribbbleAudienceAnchor.style.top = '174px'
} else {
navBar.style.height = '80px'
navBar.style.paddingTop = '0px'
navBar.style.boxShadow = 'none'
mainIcon.style.top = '18px'
mainIcon.style.width = '139px'
mainIcon.style.height = '43px'
navAnchors.forEach(navAnchor => {
navAnchor.style.top = '28px'
navAnchor.style.height = '52px'
})
guidesDropdown.style.top = '80px'
searchBar.style.top = '80px'
iconDesignGuideAnchor.style.top = '103px'
pixelPerfectIconsAnchor.style.top = '146px'
dribbbleAudienceAnchor.style.top = '212px'
}
}
body {
margin: 0;
font-family: "Open Sans", Arial, sans-serif;
}
nav {
width: 100%;
height: 80px;
position: fixed;
border-bottom: 1px solid #E5E5E5;
z-index: 1;
background-color: #FFFFFF;
}
#nav-main-icon {
left: 135px;
top: 18px;
width: 139px;
height: 43px;
position: fixed;
}
a {
text-decoration: none;
}
nav a {
position: fixed;
top: 28px;
height: 52px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
color: #666666;
}
nav a:hover {
color: #333333;
}
#nav-anchor-blog {
left: 748px;
}
#nav-anchor-guides {
left: 802px;
}
#nav-anchor-free-icons {
left: 887px;
}
#nav-anchor-free-wallpapers {
left: 979px;
}
#nav-anchor-about-me {
left: 1110px;
}
#nav-search-icon {
position: fixed;
left: 1197px;
width: 18px;
height: 17px;
font-size: 14px;
fill: #00000080;
}
#nav-search-icon:hover {
fill: #E74225;
}
.nav-dropdown {
top: 80px;
box-shadow: 0 2px 5px #0000001A;
border-top: 3px solid #E74225;
background-color: #FFFFFFFF;
display: none;
}
#dropdown-guides {
position: relative;
left: 776px;
width: 200px;
height: 175px;
padding: 20px;
z-index: 3;
}
#dropdown-guides a {
left: 796px;
width: 160px;
padding: 10px 20px;
line-height: 23px;
}
#dropdown-guides a:hover {
background-color: #00000008;
}
#nav-dropdown-guides-icon-design-guide {
top: 103px;
height: 23px;
}
#nav-dropdown-guides-crafting-pixel-perfect-icons {
top: 146px;
height: 46px;
}
#nav-dropdown-guides-build-your-dribbble-audience {
top: 212px;
height: 46px;
}
#search-bar {
position: absolute;
left: 895px;
width: 280px;
height: 35px;
padding: 20px;
z-index: 2;
}
#search-field {
left: 915px;
top: 103px;
width: 240px;
height: 15px;
padding: 10px 20px;
border: hidden;
background-color: #F8F8F8;
font-family: Arial;
font-weight: 400;
font-size: 13.3333px;
color: #757575;
}
#search-field:focus {
outline: none;
}
h1, h3, h4, p, a {
margin: 0;
font-weight: 500;
}
h1, h3, h4 {
text-align: center;
}
h1 {
font-size: 30px;
line-height: 30px;
color: #333333;
}
h3 {
font-size: 22px;
line-height: 22px;
color: #333333;
}
h4 {
font-size: 14px;
line-height: 24px;
color: #666666;
}
p {
font-size: 16px;
line-height: 27px;
color: #666666;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Main - Icon Utopia</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="index-styles.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<img id="nav-main-icon" src="icon-utopia.png">
<a id="nav-anchor-blog" href="blog.html">Blog</a>
<a id="nav-anchor-guides" href="www.iconutopia.com">Guides</a>
<a id="nav-anchor-free-icons" href="https://iconutopia.com/free-icons/">Free Icons</a>
<a id="nav-anchor-free-wallpapers" href="https://iconutopia.com/free-phone-wallpapers/">Free Wallpapers</a>
<a id="nav-anchor-about-me" href="https://iconutopia.com/about/">About Me</a>
<a id="search-icon_anchor"><svg id="nav-search-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32.2 32.2"><path d="M19 0C11.8 0 6 5.8 6 13c0 3.1 1.1 5.9 2.9 8.2l-8.6 8.6c-0.5 0.5-0.5 1.4 0 2 0.5 0.5 1.4 0.5 2 0l8.6-8.6C13.1 24.9 15.9 26 19 26c7.2 0 13-5.8 13-13S26.2 0 19 0zM19 24C12.9 24 8 19.1 8 13S12.9 2 19 2 30 6.9 30 13 25.1 24 19 24z"/></svg></a>
<div id="dropdown-guides" class="nav-dropdown">
<a id="nav-dropdown-guides-icon-design-guide" href="free-icon-design-guide.html">Icon Design Guide</a>
<a id="nav-dropdown-guides-crafting-pixel-perfect-icons" href="crafting-pixel-perfect-icons-the-right-way.html">Crafting Pixel Perfect Icons – The Right Way!</a>
<a id="nav-dropdown-guides-build-your-dribbble-audience" href="build-your-dribbble-audience.html">Build your Dribbble audience</a>
</div>
<div id="search-bar" class="nav-dropdown">
<form id="search-form">
<input id="search-field" type="text" placeholder="Search ...">
</form>
</div>
</nav>
</header>
</body>
<script src="nav.js"></script>
</html>
Please note that since the top set in CSS for the div is originally 80px, if I remove the code for changing the top of the div, after scrolling down, I can't reach it if I am hovering over the anchor, before it disappears. That's why I was not able to tell whether the eventListener stopped working because I scrolled down, or because I changed the top of the div.
I figured out the problem. In my javascript, I was setting the height of each navAnchor to fit only the text of the anchor. That's why the dropdown disappeared before I could hover over it. So I increased the height to extend the anchors to reach the bottom of the navigation bar. (I increased the height from 23px to 39px)
So I want to replace the text inside of an input field with a h1 tag as soon as the user hits submit because i want the text to have an animation but i can't animate the text inside the text field.
I linked the code pen project version of it to make it easier then organizing all the code in here. I added all the code I had so I wouldn't leave anything out although some of it may be irrelevant.
Basically I want the h1 tag to appear exactly where the input text was so it looks like nothing ever got replaced.
https://codepen.io/timvancowabunga/pen/rNOqdYd
$(document).ready(function() {
$('#btn1').click(function() {
$('#test').text($("#message").val());
$('#message').val('');
$('#test').val('');
});
});
function onTextClick() {
document.getElementById('btn1').className = "show";
}
function showButton() {
document.getElementById('btn1').style.display = 'block';
}
function showSendButton() {
document.getElementById('btn2').style.display = 'block';
}
function formCheck() {
var input = $('#message').val();
if (input == '') {
alert("Please Submit a Valid Message");
} else {
hideButton();
showSendButton();
}
}
function hideButton() {
document.getElementById('btn1').style.display = 'none';
}
function hideSendButton() {
document.getElementById('btn2').style.display = 'none';
document.getElementById('sent').style.display = 'block';
}
function myMove() {
var textWrapper = document.querySelector('.ml13');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline()
.add({
targets: '.ml13 .letter',
translateY: [0, -1600],
opacity: [1, 0],
easing: "easeInSine",
duration: 3600,
delay: (el, i) => 800 + 60 * i
});
}
body {
background-color: #368670;
font-family: sans-serif;
}
.ml13,
.ml14,
.ml15 {
font-size: 1.9em;
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 600;
}
.ml15 {
letter-spacing: 0em;
text-align: center;
}
.ml13 .letter {
display: inline-block;
line-height: 1em;
}
.line {
display: flex;
margin: auto;
width: 50%;
margin-top: 500px;
}
.wrappy {
position: relative;
}
.wrappy h1 {
position: absolute;
left: 48.5%;
top: 20%
}
.butt {
padding-top: 50px;
display: flex;
margin: 0 auto;
width: 100%;
}
#btn1,
#btn2 {
display: table;
margin: 0 auto;
}
input {
z-index: 1000;
margin-left: 10%;
width: 80%;
background: transparent;
border: 0;
border-bottom: 1px solid;
padding: 1em 0 .1em;
text-align: center;
font-size: 18px;
font-family: inherit;
font-weight: 300;
line-height: 1.5;
color: inherit;
outline: none;
}
input:focus {
border-color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<div class="truth">
<!-- <div class="line"> -->
<div class="message-box">
<form class="message-form">
<h2 class="ml15" for="message">TELL A TRUTH</h2>
<div class="wrappy">
<input type="text" id="message" name="message" autocomplete="off" class="ml14">
<!-- <h1 id="test" class="ml13">I love your music!</h1> -->
<h1 id="test" class="ml13"></h1>
</div>
</form>
</div>
<div class="butt">
<button id="btn1" onclick="formCheck();">Ready to Send?</button>
<button id="btn2" style="display: none" onclick="myMove(); setTimeout(showButton, 3000); hideSendButton();">Send!</button>
</div>
</div>
You want to put H1 below the input.
Then you make the text input transparent. Bind the input value to h1.
So in effect when user clicks and type, they are selecting the input and changing its value, but it's transparent, to be shown by the h1 below the input that you will eventually animate.
Also because you mentioned you want it to display correctly in all platforms. You then have to be cognisant of the default behaviours of DOM and CSS properties. If you alter them to get what you want without knowing its natural order, you can get unexpected behaviour and reduce cross-browser compatibility. I have made changes to reflect that.
$(document).ready(function () {
$("#btn1").click(function () {
$("#test").text($("#message").val());
$("#message").val("");
$("#test").val("");
});
});
function onTextClick() {
document.getElementById("btn1").className = "show";
}
function showButton() {
document.getElementById("btn1").style.display = "block";
}
function showSendButton() {
document.getElementById("btn2").style.display = "block";
}
function formCheck() {
var input = $("#message").val();
if (input == "") {
alert("Please Submit a Valid Message");
} else {
hideButton();
showSendButton();
}
}
function hideButton() {
document.getElementById("btn1").style.display = "none";
}
function hideSendButton() {
document.getElementById("btn2").style.display = "none";
document.getElementById("sent").style.display = "block";
}
// attach this to bind h1 to the input value at all times.
$("#message").keyup(function () {
var self = this;
$("#test").text($(this).val());
});
function myMove() {
var textWrapper = document.querySelector(".ml13");
textWrapper.innerHTML = textWrapper.textContent.replace(
/\S/g,
"<span class='letter'>$&</span>"
);
anime.timeline().add({
targets: ".ml13 .letter",
translateY: [0, -1600],
opacity: [1, 0],
easing: "easeInSine",
duration: 3600,
delay: (el, i) => 800 + 60 * i
});
}
body {
background-color: #368670;
font-family: sans-serif;
}
.ml13,
.ml14,
.ml15 {
font-size: 1.9em;
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 600;
}
.ml15 {
letter-spacing: 0em;
text-align: center;
}
.ml13 .letter {
display: inline-block;
line-height: 1em;
}
.line {
display: flex;
margin: auto;
width: 50%;
margin-top: 500px;
}
.wrappy {
position: relative;
text-align: center;
}
.wrappy h1 {
position: absolute; /* you then want to give wrappy h1 this to make it occupy no space. */
width: 100%; /* to centralize the text, your option here is to make this 100% width and use text-align */
text-align: center;
padding-top: 21px;
}
.butt {
padding-top: 50px;
display: flex;
margin: 0 auto;
width: 100%;
}
#btn1,
#btn2 {
display: table;
margin: 0 auto;
}
input {
position: relative; /* in order for z-index to work, you need to give an element `position` attribute of value `static`, `relative` or `absolute`. */
z-index: 1000; /* now this will work. wrappy h1 is not given a `z-index` so it defaults to `1`, hence input will be on top of wrappy h1 now. */
width: 80%;
background: transparent;
border: 0;
border-bottom: 1px solid #000; /* you need the line back because we are going to assign color to be transparent */
padding: 35px 0 0 0;
text-align: center;
font-size: 18px;
font-family: inherit;
font-weight: 300;
line-height: 1.5;
color: transparent; /* make the text transparent */
outline: none;
}
input:focus {
border-color: #ffffff;
}
<div class="truth">
<!-- <div class="line"> -->
<div class="message-box">
<form class="message-form">
<h2 class="ml15" for="message">TELL A TRUTH</h2>
<div class="wrappy">
<!-- for natural flow, you want to shift #test to above the input, so that input can stack on top of it -->
<h1 id="test" class="ml13"></h1>
<input type="text" id="message" name="message" autocomplete="off" class="ml14">
<!-- <h1 id="test" class="ml13">I love your music!</h1> -->
</div>
</form>
</div>
<div class="butt">
<button id="btn1" onclick="formCheck();">Ready to Send?</button>
<button id="btn2" style="display: none" onclick="myMove(); setTimeout(showButton, 3000); hideSendButton();">Send!</button>
</div>
</div>
I have a bar graph created in JavaScript to display values using colors. I am having trouble resetting the bar graph. Basically what needs to happen is when the "reset" button is clicked, all bars clear values and reset to "0". Then the button needs to give the option to "Generate" and the previous values are shown again. Also, this is my first time using constant velocity to ease the bars up and down as the button is clicked to give it a little flair. Not sure what I am missing to have the data clear and be set to zero on the bottom line of the graph while using constant velocity to make it ease down and when button is clicked to restore the values to previous state. Any help is appreciated. Here is the code so far:
HTML
/*
* Some base values.
*/
var millisecondsPerFrame = 30;
/*
* Helper function for managing button event handlers.
*/
var setupButton = function(button, label, onclickHandler) {
button.value = label;
button.onclick = onclickHandler;
button.disabled = false;
};
var startConstantVelocityAnimation = function() {
// Grab the desired velocity.
var velocity = parseFloat(document.getElementById("chart").value);
// Grab the object to animate, and initialize if necessary.
var colors = document.getElementById("colors");
chart.style.bottom = chart.style.bottom || "0px";
// Start animating.
var intervalID = setInterval(function() {
var newBottom = parseInt(box.style.bottom) + velocity;
if ((newBottom < 0) || (newBottom > maxBottom)) {
velocity = -velocity;
} else {
chart.style.bottom = newBottom + "px";
}
}, millisecondsPerFrame);
// Toggle the start button to stop animation.
setupButton(document.getElementById("Reset"), "Reset", function() {
clearInterval(intervalID);
// Toggle the start button to stop animation.
setupButton(document.getElementById("Reset"),
"Generate", startConstantVelocityAnimation);
});
};
window.onload = function() {
// Set up the initial event handlers.
document.getElementById("Reset").onclick = startConstantVelocityAnimation;
};
**
* Graph JS Code ** *
function createBarChart(data) {
// Start with the container.
var chart = document.createElement("div");
// The container must have position: relative.
chart.style.position = "relative";
// The chart's height is the value of its largest
// data item plus a little margin.
var height = 0;
for (var i = 0; i < data.length; i += 1) {
height = Math.max(height, data[i].value);
}
chart.style.height = (height + 10) + "px";
// Give the chart a bottom border.
chart.style.borderBottomStyle = "solid";
chart.style.borderBottomWidth = "1px";
// Iterate through the data.
var barPosition = 0;
// We have a preset bar width for the purposes of this
// example. A full-blown chart module would make this
// customizable.
var barWidth = 48.30;
for (i = 0; i < data.length; i += 1) {
// Basic column setup.
var dataItem = data[i];
var bar = document.createElement("div");
bar.style.position = "absolute";
bar.style.left = barPosition + "px";
bar.style.width = barWidth + "px";
bar.style.backgroundColor = dataItem.color;
bar.style.height = dataItem.value + "px";
bar.style.borderStyle = "ridge";
bar.style.borderColor = dataItem.color;
// Visual flair with CSS Level 3 (for maximum compatibility
// we set multiple possible properties to the same value).
// Hardcoded values here just for illustration; a
// full module would allow major customizability.
bar.style.MozBoxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
bar.style.WebkitBoxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
bar.style.boxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
bar.style.MozBorderRadiusTopleft = "8px";
bar.style.WebkitBorderTopLeftRadius = "8px";
bar.style.borderTopLeftRadius = "8px";
bar.style.MozBorderRadiusTopright = "8px";
bar.style.WebkitBorderTopRightRadius = "8px";
bar.style.borderTopRightRadius = "8px";
bar.style.backgroundImage =
"-moz-linear-gradient(" + dataItem.color + ", black)";
bar.style.backgroundImage =
"-webkit-gradient(linear, 0% 0%, 0% 100%," +
"color-stop(0, " + dataItem.color + "), color-stop(1, black))";
bar.style.backgroundImage =
"linear-gradient(" + dataItem.color + ", black)";
// Recall that positioning properties are treated *relative*
// to the corresponding sides of the containing element.
bar.style.bottom = "-1px";
chart.appendChild(bar);
// Move to the next bar. We provide an entire bar's
// width as space between columns.
barPosition += (barWidth * 2);
}
return chart;
};
window.onload = function() {
var colors = [{
color: "red",
value: 40
},
{
color: "blue",
value: 10
},
{
color: "green",
value: 100
},
{
color: "black",
value: 65
},
{
color: "yellow",
value: 75
},
{
color: "purple",
value: 120
},
{
color: "grey",
value: 121
},
{
color: "orange",
value: 175
},
{
color: "olive",
value: 220
},
{
color: "maroon",
value: 275
},
{
color: "brown",
value: 300
},
{
color: "teal",
value: 15
}
];
var chart = createBarChart(colors);
document.querySelector("#wrapper").appendChild(chart); // keeps chart inside wrapper div
};
#wrapper {
margin-left: auto;
margin-right: auto;
width: 85%;
border: groove;
border-color: white;
padding: 2px;
}
#loginwrap {
margin-left: auto;
margin-right: auto;
padding: 3px;
text-align: center;
}
body {
font-family: Georgia;
padding: 10px;
background: #f1f1f1;
font-weight: bold;
}
/* top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* three columns next to each other */
.column1 {
float: left;
width: 30%;
padding: 15px;
height: 300px;
text-align: center;
background-color: #aaa;
}
.column2 {
float: left;
width: 30%;
padding: 15px;
height: 300px;
text-align: center;
background-color: #bbb;
}
.column3 {
float: left;
width: 30%;
padding: 15px;
height: 300px;
text-align: center;
background-color: #aaa;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Card-like background for each section */
.card {
background-color: white;
padding: 30px;
margin-top: 20px;
overflow: auto;
}
/* Align about section image to right */
.aboutimg {
float: right;
}
/* Footer */
.footer {
padding: 20px;
background: #ddd;
margin-top: 20px;
}
.copyright {
margin-right: auto;
margin-left: auto;
width: 85%;
text-align: center;
font-size: 10px;
padding: 5px;
}
/*Chart Color Legend*/
.legend .legend-scale ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
}
.legend .legend-scale ul li {
display: block;
float: left;
width: 50px;
margin-bottom: 6px;
text-align: center;
font-size: 80%;
list-style: none;
}
.legend ul.legend-labels li span {
display: block;
float: left;
height: 15px;
width: 50px;
}
.legend a {
color: #777;
}
.subs {
font-size: 10px;
font-style: italic;
padding: 5px;
text-align: center;
}
.reset-button {
text-align: right;
padding-top: 2px;
padding-right: 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tissue: Titan Issue Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Issue Tracking System" />
<meta name="author" content="S Morris">
<link rel="stylesheet" type="text/css" href="tissue.css">
<script src="js/animation.js"></script>
</head>
<body>
<div id="wrapper">
<h2>TISSUE: Sales Subscription Dashboard</h2>
<div class="topnav">
Home
Tracker Login
</div>
<div>
<div class="legend">
<div class="legend-scale">
<div class="reset-button">
<input type="button" value="Reset Graph" id="Reset">
</div>
<ul class="legend-labels">
<li><span></span>40</li>
<li><span></span>10</li>
<li><span></span>100</li>
<li><span></span>65</li>
<li><span></span>75</li>
<li><span></span>120</li>
<li><span></span>121</li>
<li><span></span>175</li>
<li><span></span>220</li>
<li><span></span>275</li>
<li><span></span>300</li>
<li><span></span>15</li>
</ul>
</div>
</div>
<div class="legend">
<div class="legend-scale">
<ul class="legend-labels">
<li><span style='background:red;'></span>Jan</li>
<li><span style='background:blue;'></span>Feb</li>
<li><span style='background:green;'></span>March</li>
<li><span style='background:black;'></span>Apr</li>
<li><span style='background:yellow;'></span>May</li>
<li><span style='background:purple;'></span>June</li>
<li><span style='background:grey;'></span>July</li>
<li><span style='background:orange;'></span>Aug</li>
<li><span style='background:olive;'></span>Sept</li>
<li><span style='background:maroon;'></span>Oct</li>
<li><span style='background:brown;'></span>Nov</li>
<li><span style='background:teal;'></span>Dec</li>
</ul>
</div>
</div>
<br><br><br><br>
<hr>
<div class="subs">***Subscribers in Thousands***</div>
<script src="js/subscriptions_graph.js"></script>
</div>
</div>
<div class="copyright">
Copyright © 2018 Titan Issue Tracker
</div>
</body>
</html>
I have these elements created inside a "querySelector('ul'). It's working property.
I want the "blue-Save" button to have the same function as the "yellow-Save".
But the Blue-save button was created in the HTML file, and the Yellow-Save button was created in JavaScript to listen to an event from the "querySelector('ul').
Is there anyway I can just link the Blue-Save to react as if I was clicking in the Yellow-Save?
(I'm sorry if I didn't explain it property or If it seems too confused, this is my first application, It doesn't seems too organized but I'm focused in making things work before dive in 'well developed apps').
Thank You Everyone!
var todoList = {
todos: [],
addTodo: function (todoText) {
this.todos.push({
todoText: todoText,
/*the name of the property (even if it is the same name as the parameter) never change. Only the value, which follows in this case is following the parameter*/
completed: false
});
},
changeTodo: function (position, todoText) {
this.todos[position].todoText = todoText;
},
deleteTodo: function (position) {
this.todos.splice(position, 1);
},
toggleCompleted: function (position) {
var todo = this.todos[position];
todo.completed = !todo.completed;
/*Here we flip the boolean to his oposite value. if todo.completed is equal false, so changes it to true, and so on. */
},
toggleAll: function () {
// recording the number of todos and completed todos
var totalTodos = this.todos.length;
var completedTodos = 0;
// get the number of completed todos.
this.todos.forEach(function (todo) {
if (todo.completed === true) {
completedTodos++;
}
});
this.todos.forEach(function (todo) {
// Case 1: If everything is true, make everything.
if (completedTodos === totalTodos) {
todo.completed = false;
// Case 2: Otherwise, make everything true.
} else {
todo.completed = true;
}
});
}
};
var handlers = {
addTodo: function () {
var addTodoTextInput = document.getElementById('add-todo-text-input');
todoList.addTodo(addTodoTextInput.value);
addTodoTextInput.value = '';
view.displayTodos();
},
changeTodo: function (position) {
var changeTodoTextInput = document.getElementById('change-todo-text-input');
todoList.changeTodo(position, changeTodoTextInput.value);
changeTodoTextInput.value = '';
view.displayTodos();
},
deleteTodo: function (position) {
todoList.deleteTodo(position);
view.displayTodos();
},
toggleCompleted: function (position) {
todoList.toggleCompleted(position);
view.displayTodos();
},
toggleAllButton: function () {
todoList.toggleAll();
view.displayTodos();
}
};
var view = {
displayTodos: function () {
var todosUl = document.querySelector('ul');
todosUl.innerHTML = '';
todoList.todos.forEach(function (todo, position) {
var todoLi = document.createElement('li');
var todoTextWithCompletion = '';
if (todo.completed === true) {
todoTextWithCompletion = todo.todoText;
todoLi.classList.add('item-completed');
} else {
todoTextWithCompletion = todo.todoText;
}
todoLi.id = position;
todoLi.textContent = todoTextWithCompletion;
todoLi.appendChild(this.createEditButton());
todoLi.appendChild(this.createToggleButton());
todoLi.appendChild(this.createDeleteButton());
todoLi.appendChild(this.createSaveButton());
todosUl.appendChild(todoLi);
}, this);
},
createDeleteButton: function () {
var deleteButton = document.createElement('button');
deleteButton.textContent = '\u2715';
deleteButton.className = 'delete-button';
return deleteButton;
},
createToggleButton: function () {
var toggleButton = document.createElement('button');
toggleButton.textContent = '\u2713';
toggleButton.className = 'toggle-button';
return toggleButton;
},
createSaveButton: function () {
var saveButton = document.createElement('button');
saveButton.textContent = 'Save';
saveButton.className = 'save-button';
return saveButton;
},
createEditButton: function () {
var editButton = document.createElement('button');
editButton.textContent = '\u270E';
editButton.className = 'edit-button';
return editButton;
},
setUpEventListeners: function () {
var todosUl = document.querySelector('ul');
todosUl.addEventListener('click', function (event) {
// Get the element that was clicked on.
var elementClicked = event.target;
// Check if elementClicked is a delete button.
if (elementClicked.className === 'delete-button') {
handlers.deleteTodo(parseInt(elementClicked.parentNode.id));
} else if (elementClicked.className === 'toggle-button') {
handlers.toggleCompleted(parseInt(elementClicked.parentNode.id));
} else if (elementClicked.className === 'save-button') {
handlers.changeTodo(parseInt(elementClicked.parentNode.id));
} else if (elementClicked.className === 'edit-button') {
}
});
}
};
view.setUpEventListeners();
body {
font-family: Helvetica, sans-serif;
font-size: 25px;
background: rgb(236, 236, 236);
}
h1 {
color: rgb(255, 255, 255);
text-align: center;
font-family: Helvetica, sans-serif;
font-size: 50px;
text-transform: uppercase;
background: rgb(48, 48, 48);
position: relative;
}
.container {
margin: auto;
width: 50%;
}
ul {
list-style: none;
padding:0px;
margin: 10px;
}
.add-button {
background-color: rgb(68, 165, 230); /* Blue */
border: none;
color: white;
margin:auto;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
width:20%;
}
.add-button:hover {
background-color :rgb(53, 127, 177); /* Green */
color: white;
}
.save-change-button {
background-color: rgb(68, 165, 230); /* Blue */
border: none;
color: white;
margin:auto;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
width:20%;
}
.save-change-button:hover {
background-color :rgb(53, 127, 177); /* Green */
color: white;
}
.toggle-all-button {
background-color: rgb(38, 156, 38); /* Green */
border: none;
color: white;
margin: 10px 0;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
border-radius: 5px;
width: 100%;
}
.toggle-all-button:hover {
background-color : rgb(36, 114, 36); /* Green */
color: white;
}
.edit-button {
background-color: rgb(219, 208, 50); /* Green */
border: none;
color: white;
padding: 0;
text-align: center;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
width: 25px;
height: 25px;
margin: 0 0 0 10px;
}
.edit-button:hover {
background-color: rgb(185, 175, 26); /* Green */
color: white;
}
.toggle-button {
background-color: rgb(38, 156, 38); /* Green */
border: none;
color: white;
padding: 0;
text-align: center;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
width: 25px;
height: 25px;
margin: 0 0 0 10px;
}
.toggle-button:hover {
background-color: rgb(36, 114, 36); /* Green */
color: white;
}
.delete-button {
background-color: rgb(168, 44, 44); /* Green */
border: none;
color: white;
margin: 0 0 0 10px;
padding: 0;
text-align: center;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
width: 25px;
height: 25px;
}
.delete-button:hover {
background-color :rgb(128, 31, 31); /* Green */
color: white;
}
.save-button {
background-color: rgb(219, 208, 50); /* Green */
border: none;
color: white;
padding: 0;
text-align: center;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
width: 55px;
height: 25px;
margin: 0 10px;
}
.save-button:hover {
background-color :rgb(185, 175, 26); /* Green */
color: white;
}
.add-input {
margin: 10px 0;
padding: 6px 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
width: 78%;
}
.edit-input {
margin: 10px 0;
padding: 6px 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
width: 78%;
}
.item-completed {
text-decoration: line-through;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: rgba(209, 209, 209, 0.555);
font-family: 'Times New Roman', Times, serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Todo List</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h1>Todo List</h1>
<div>
<input id="add-todo-text-input" class="add-input" placeholder="Add a New Todo to Your List" type="text">
<button class="add-button" onclick="handlers.addTodo()">Add</button>
</div>
<ul>
</ul>
<div id="edit-todo"">
<input id="change-todo-text-input" class="edit-input" placeholder="Add the Changes Your Want to Make" type="text">
<button class="save-change-button">Save</button>
</div>
<div id="toggle-all"">
<button class="toggle-all-button" onclick="handlers.toggleAllButton()">Toggle All</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
You can add a common class to both blue and yellow buttons, and attach a click event by the class name like below
$(".custom_save_button").on("click", function() {
//your code
});
Since you are creating that button, sharing the same class won't just work as expected, instead use delegated events which allow you to attach events on new elements added to the DOM
Add a common class for both and then add an event listener for that class using event delegation.
For this example Let's suppose you chose the class name: stack_class
//I added this function for you to be able to know if an element has a class
function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
//you could change body to the closest parent's selector both buttons share
document.querySelector('body').addEventListener('click', function(event) {
var clickedElement = event.target;
if(hasClass(clickedElement, "stack_class")) {
//create your functionality for both buttons here
}
});
If you assign a common class to both buttons, then you can add the same event listener to all buttons that have that class. Here is a simple example:
var saveButton = document.createElement('button');
saveButton.textContent = 'Save';
saveButton.className = 'save-button yellow-button';
body = document.querySelector('body');
body.appendChild(saveButton);
buttons = document.getElementsByClassName('save-button');
for (var i = 0; i < buttons.length; i += 1) {
buttons[i].addEventListener('click', function (event) {
alert('Hello!');
});
}
.yellow-button {
background: #ffff00;
}
.blue-button {
background: #0000ff;
}
<button class="save-button blue-button">Save</button>
I am reading highstock documentation and its hover over formatting but it is not getting to the format I want it to be for the hover-over tooltip. What I want to do is, when the user hover over a point on the graph, it should display the name and the value such as shown here in this jsfiddle http://jsfiddle.net/w5h6rffo/7/
As you can see from the hovering over a point, the format is
Date on top of the line, and the next line is Series 1: current point.
I want to get rid of the Date line, how can I accomplish this ?
<HTML>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<button type="button" class="btn" onclick="graphX();">Details</button>
<div id="container" style="height: 400px; min-width: 310px"></div>
</HTML>
<CSS>
.btn {
background: #3498db;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 2px 2px 2px 2px;
text-decoration: none;
height: 30px;
width: 70px;
margin-top: 5px;
margin-bottom: 5px;
display: block;
}
.btn.active, .btn:active {
background: #000000;
text-decoration: none;
}
</CSS>
<JavaScript>
$('.btn').click(function() {
$(this).toggleClass('active');
});
$(function graphX() {
var data = [];
for(var i = 0; i < 899; i++) {
data[i] = {X: i};
}
var processedData = [];
Highcharts.each(data, function (d) {
processedData.push(Math.sin(d.X));
});
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
series: [{
data: processedData,
pointStart: Date.UTC(2010, 1, 1),
}],
});
});
</JavaScript>
I have been referring to the following documentations
http://www.highcharts.com/docs/chart-concepts/tooltip
http://api.highcharts.com/highcharts#tooltip
You can reset headerFormat by pasting empty string.
headerFormat:''
http://jsfiddle.net/sccbymha/