I am trying to generate HTML to pdf in javascript using the html2pdf plugin. The page is working fine if I open the HTML file in the browser but when I generate it to pdf, the image is not rendered in PDF and the date is also not in a proper format in PDF. I am new to this. Anyone, please do help. Thanks in advance
body {
background-color: #eee;
}
.card-0 {
min-height: 110vh;
background: linear-gradient(-20deg, rgb(204, 204, 204) 50%, #f66700 50%);
color: white;
border: 0px;
}
p {
font-size: 15px;
line-height: 25px !important;
font-weight: 500
}
.container {
border-radius: 20px
}
.btn {
letter-spacing: 1px;
}
select:active {
box-shadow: none !important;
outline-width: 0 !important
}
select:after {
box-shadow: none !important;
outline-width: 0 !important
}
input,
textarea {
padding: 10px 12px 10px 12px;
border: 1px solid lightgrey;
border-radius: 0px !important;
margin-bottom: 5px;
margin-top: 2px;
width: 100%;
box-sizing: border-box;
color: #2C3E50;
font-size: 14px;
letter-spacing: 1px;
resize: none
}
select:focus,
input:focus {
box-shadow: none !important;
border: 1px solid #2196F3 !important;
outline-width: 0 !important;
font-weight: 400
}
label {
margin-bottom: 2px;
font-weight: bolder;
font-size: 14px
}
input:focus,
textarea:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 1px solid #304FFE;
outline-width: 0
}
button:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
outline-width: 0
}
.form-control {
height: calc(2em + .75rem + 3px)
}
.inner-card {}
.card-0 {}
.card-1 {
border-radius: 17px;
color: black;
box-shadow: 2px 4px 15px 0px rgb(0, 0, 0, 0.5) !important
}
#file {
border: 2px dashed #92b0b3 !important
}
.color input {
background-color: #f1f1f1;
}
.files:before {
position: absolute;
bottom: 60px;
left: 0;
width: 100%;
content: attr(data-before);
color: #000;
font-size: 12px;
font-weight: 600;
text-align: center
}
#file {
display: inline-block;
width: 100%;
padding: 95px 0 0 100%;
background: url('https://i.imgur.com/VXWKoBD.png') top center no-repeat #fff;
background-size: 55px 55px
}
#Gstbtndiv {
padding: 20px;
}
table td {
vertical-align: middle !important;
text-align: center;
}
table th,
table td {
padding-top: 08px;
padding-bottom: 08px;
}
table thead {
vertical-align: middle !important;
text-align: center;
background: #f66700;
}
#AddBtn {
width: 100%;
text-align: center;
}
.inptfield {
border-color: #f66700;
}
#cardstyle {
padding-bottom: 40px;
}
table tr input {
text-align: center;
}
#Exportid {
background-color: #f66700;
color: black;
text-align: center;
font-weight: bold;
border-color: #f66700;
}
#ExportDiv {
text-align: right;
margin: 1px;
}
table tbody tr:first-child i {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js">
</script>
<link rel="stylesheet" type="text/css" href="C:\Users\sylaja\Documents\Dttemplate\dttemplate.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="printThis.js"></script>
<script>
function generate() {
var dateelement = document.getElementById('cardstyle');
html2pdf(dateelement);
}
</script>
</head>
<body>
<div id="cardstyle">
<div class="row justify-content-center round">
<div class="col-lg-10 col-md-12 ">
<div class="card shadow-lg card-1">
<div class="card-body inner-card" >
<div class="row justify-content-center">
<div class="col-md-12 col-lg-12 col-sm-12">
<h3 class="font-weight-bold ml-md-0 mx-auto text-center text-sm-left"style="padding: 10px;text-decoration: underline;" id="invoicehead"> INVOICE</h3>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 sm-order-2">
<div class="form-group mb-2" id="invoicenumberdiv">
<input type="text" class="form-control" id="InvoiceNumber" placeholder="Invoice Number">
</div>
<div class="form-group mb-2" id="invoicedatediv">
<input type="Date" class="form-control" id="InvoiceDate">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 sm-order-1" style="text-align:right;">
<img src="digitallogo.png">
</div>
</div>
</div>
<div id="ExportDiv">
<button type="button" class="btn btn-outline-primary" class="exptopdf" id="Exportid" onclick="generate();">Export to PDF</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I need to load my company logo in pdf
For the date format, I don't think there's a solution other than just making a text input where you write the date as the format you want.
For the background issue, try changing where you're assigning the brackground image, like this:
.container { /* don't set the background image here, you're not rendering this*/
background:transparent;
}
#cardstyle { /* use it here. you're rendering from this div on */
background:linear-gradient(-20deg, rgb(204, 204, 204) 50%, #f66700 50%)
}
I'm trying to make a simple light switch. My code turns off lights on first click but doesn't turn it back on on second click.
The problem is that my check variable is always false and I don't know why that is.
I was able to make a light switch with classList.toggle. But I still want to know why my code doesn't work.
Can someone please explain why variable "check" is always false in my code?
HTML
<!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>Button</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<button class="btn">LIGHTS ON</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background: #333;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.btn {
padding: 30px 100px;
font-size: 30px;
font-family: monospace;
text-shadow: 1px 1px 1px #eee, -1px -1px 3px #333;
background-color: orange;
border: none;
box-shadow: 0 0 3px 2px orange, 0 0 20px orange;
cursor: pointer;
transition: all 0.1s;
}
.btn:active {
transform: scale(0.97);
box-shadow: 0 0 3px 2px orange, 0 0 10px orange;
}
.clickedClass {
background-color: rgb(30, 30, 30) !important;
color: #eee !important;
text-shadow: 0 0 6px #eee !important;
box-shadow: none !important;
}
JS
'use strict';
const btn = document.querySelector('.btn');
const clickedClass = document.querySelector('.clickedClass');
const check = btn.classList.contains('clikedClass');
function clicked() {
if (!check) {
btn.classList.add('clickedClass');
btn.textContent = `LIGHTS OFF`;
console.log(`${check}`);
} else {
btn.classList.remove('clickedClass');
btn.textContent = `LIGHTS ON`;
console.log(`${check}`);
}
}
btn.addEventListener('click', clicked);
The problem is that you access the class list initially and never check it after
const check = btn.classList.contains('clikedClass');
You should do this inside your event handler
function clicked() {
const check = btn.classList.contains('clikedClass');
if (!check) {
...
}
EDIT
I provide a working codepen of your code here : https://codepen.io/aSH-uncover/pen/yLKReWp
You will never believe what the problem was... :D
Carefully read the two lines of code below and you will find it :D (and this is the perfect opportunity to learn about the usage of constant rather than free strings)
const check = btn.classList.contains('clikedClass');
btn.classList.add('clickedClass');
From the above comment ...
"Why does the OP want to script a button element when the expected behavior can be achieved without JS by an adequately styled checkbox control ... <input type="checkbox"/>?"
body {
margin: 0;
padding: 5px;
background: #333;
}
[data-lightswitch] {
position: relative;
display: inline-block;
margin: 0 10px 10px 10px;
}
[data-lightswitch] > [type="checkbox"] {
position: absolute;
left: 10px;
top: 10px;
z-index: -1;
}
[data-lightswitch] > [data-light-on],
[data-lightswitch] > [data-light-off] {
/* OP's styling rules */
padding: 30px 100px;
font-size: 30px;
font-family: monospace;
text-shadow: 1px 1px 1px #eee, -1px -1px 3px #333;
background-color: orange;
border: none;
box-shadow: 0 0 3px 2px orange, 0 0 20px orange;
cursor: pointer;
transition: all 0.1s;
}
[data-lightswitch] > [type="checkbox"] ~ [data-light-off],
[data-lightswitch] > [type="checkbox"]:checked ~ [data-light-on] {
display: none;
}
[data-lightswitch] > [type="checkbox"] ~ [data-light-on],
[data-lightswitch] > [type="checkbox"]:checked ~ [data-light-off] {
display: inline-block;
}
[data-lightswitch] > [type="checkbox"]:focus ~ [data-light-on],
[data-lightswitch] > [type="checkbox"]:focus ~ [data-light-off] {
outline: 3px dotted black;
}
[data-lightswitch] > [type="checkbox"]:checked ~ [data-light-off] {
/* OP's styling rules */
background-color: rgb(30, 30, 30) !important;
color: #eee !important;
text-shadow: 0 0 6px #eee !important;
box-shadow: none !important;
transform: scale(0.97);
box-shadow: 0 0 3px 2px orange, 0 0 10px orange;
}
<label data-lightswitch>
<input type="checkbox" checked />
<span data-light-off>Light on</span>
<span data-light-on>Light off</span>
</label>
<label data-lightswitch>
<input type="checkbox" />
<span data-light-off>On</span>
<span data-light-on>Off</span>
</label>
I'm trying to make the background (only the search bar) to be a backdrop blur background without blurring the whole background image behind it.
I've tried webkit filter: blur & filter: blur, but they both blur the whole body and not just make the transparent background of the search bar blurred.
Note: I'm not using a background image in the code below because I'll embed this code in an iframe, which the background before it will be an image.
EDIT: I have removed the domain name in the ORIGINAL code so it doesn't conflict in search results for that domain name. Thanks everyone for helping me fix this issue! You're amazing!
<html>
<head>
<base target="_blank" />
<base target="_blank" />
<script type="text/javascript">
function submitSearch() {
var siteSearchUrl = "https://*DOMAIN_NAME*/_/search?query="; // Replace with your site's search URL
var query = document.getElementById("search-query-input").value;
var url = siteSearchUrl + query;
if (typeof IE_fix != "undefined") {
// IE8 and lower fix to pass the http referer
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
} else {
window.open(url, "_blank");
} // All other browsers
}
function searchKeyPress(e) {
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById("search-icon").click();
return false;
}
return true;
}
</script>
<link
rel="stylesheet"
type="text/css"
href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 14px 6px 0 6px;
background-color: transparent;
font-family: "Roboto", sans-serif;
overflow: hidden;
}
#search-icon {
margin: 4px 4px 4px 10px;
padding: 8px;
height: 24px;
vertical-align: middle;
cursor: pointer;
}
#search-icon:hover {
background: rgba(155, 153, 176, 0.2);
border-radius: 100px;
}
#search-query {
background: inherit;
}
body:before {
background: inherit;
}
#search-query:before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
filter: blur(10px);
}
#search-query {
width: max-content;
margin: 0 auto;
overflow: hidden;
border: 0;
border-radius: 14px;
color: #212121;
font-size: 16px;
line-height: 24px;
transition: 0.4s;
}
#search-query:hover {
color: #212121;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
font-size: 16px;
line-height: 24px;
}
#search-query-input {
width: 60vw;
height: 24px;
font-size: 16px;
font-stretch: normal;
letter-spacing: normal;
line-height: 24px;
border: 0;
color: #000;
background-color: transparent;
cursor: text;
margin-left: -5px;
text-align: start;
vertical-align: middle;
}
#media (max-width: 500px) {
#search-query-input {
width: 80vw;
}
}
#media (min-width: 900px) {
#search-query-input {
width: 60vw;
}
}
</style>
</head>
<body>
<!-- <input type="text" id="query" />
<button id="search" onclick="submitSearch()">Search</button> -->
<div id="search-query">
<img
id="search-icon"
alt="Search"
onclick="submitSearch();"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII="
/>
<input
type="text"
id="search-query-input"
placeholder="Search"
enterkeyhint="go"
onkeypress="return searchKeyPress(event);"
style="box-shadow: none"
;=""
/>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.sections {
background-image: url(https://images.pexels.com/photos/3293148/pexels-photo-3293148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size:100vw;
background-size:cover;
background-repeat:no-repeat;
height: 100vh;
padding-top: 15vh;
}
.search-bar {
border: 1px solid transparent;
width: 300px;
align-items: center;
display: flex;
margin: 0 auto;
padding-left: 2vh;
border-radius: 10px;
transition: 0.5s;
}
.search-bar:hover {
border: 1px solid rgb(142, 141, 141);
backdrop-filter: blur(5px);
}
.search-text {
padding: 4vh 8vh;
background: transparent;
border: none;
height: 100%;
width: 100%;
border-radius: 50px;
font-size: 18px;
color: #424242;
font-weight: 500;
}
.search-text:focus {
outline: none;
}
.fa-search {
color: #fff;
}
<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" />
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/2dba9f6187.js" crossorigin="anonymous"></script>
<title>Blur Background Project</title>
</head>
<body>
<header>
<div class="center">
<div class="sections">
<div class="search-bar">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search" class="search-text" />
</div>
</div>
</div>
</header>
</body>
function submitSearch(){
var siteSearchUrl = 'https://support.yssf.ml/_/search?query='; // Replace with your site's search URL
var query = document.getElementById("search-query-input").value;
var url = siteSearchUrl + query
if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
{
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
}
else { window.open(url,'_blank'); } // All other browsers
}
function searchKeyPress(e){
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('search-icon').click();
return false;
}
return true;
}
body {
margin:0;
padding:14px 6px 0 6px;
background-color:transparent;
font-family: 'Roboto', sans-serif;
overflow:hidden;
background: url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
background-size:100vw;
background-size:cover;
background-repeat:no-repeat;
}
#search-query{
background: transparent;
width:max-content;
margin:0 auto;
overflow:hidden;
border:0;
border-radius:14px;
color: #212121;
font-size:16px;
line-height:24px;
transition:0.4s;
}
#search-query::before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px);
}
#search-query:hover {
color: #212121;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
0 3px 1px -2px rgba(0,0,0,0.12),
0 1px 5px 0 rgba(0,0,0,0.2);
font-size:16px;
line-height:24px;
backdrop-filter:blur(3px);
}
#search-query-input {
width:60vw;
height:24px;
font-size:16px;
font-stretch: normal;
letter-spacing: normal;
line-height:24px;
border:0;
color:#000;
background-color:transparent;
cursor:text;
margin-left:-5px;
text-align:start;
vertical-align:middle;
}
#search-query-input:hover{
color:white;
}
#search-icon {
margin: 4px 4px 4px 10px;
padding:8px;
height:24px;
vertical-align:middle;
cursor:pointer;
}
#search-icon:hover {
background: rgba(155,153,176, 0.2);
border-radius: 100px;
}
#search-query-input:hover::placeholder{
color:white;
}
#media (max-width:500px) {
#search-query-input {
width:80vw;
}
}
#media (min-width:900px) {
#search-query-input {
width:60vw;
}
}
<html>
<head>
<base target="_blank">
<base target="_blank">
<link rel="stylesheet" type="text/css" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
<!-- <input type="text" id="query" />
<button id="search" onclick="submitSearch()">Search</button> -->
<div id="search-query">
<img id="search-icon" alt="Search" onclick="submitSearch();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII=">
<input type="text" id="search-query-input" placeholder="Search" enterkeyhint="go" onkeypress="return searchKeyPress(event);" style="box-shadow:none" ;="">
</div>
</body>
Use CSS filter on any page element. This may require you to duplicate the existing background into the #search-query Div (so that there is an image present to be blurred, it then appears like a blur of the original image behind it) but also try it with no background as a test. It's been a while since I used it but you may find that the blur applies to everything behind it regardless.
#search-query{
filter: blur(10px);
}
I have an input box that I'd like to slide up/down so that it looks like it is coming from behind the element above.
My input HTML looks like this:
<input type="text" placeholder="Add New Todo">
The CSS for the input looks like this:
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
And my JS looks like this:
$("#dropdown").click(function(){
$("input[type='text']").slideToggle(2000);
})
Currently, the slide gets stuck at the start/finish, as it seems the height cannot be reduced to 0.
Here is a full example of what happens.
How can I make my input box animate smoothly?
I'd wrap the input in a containing element with hidden overflow and animate that one.
$("#dropdown").click(function(){
$(".input_container").toggleClass('hide');
})
#container {
background-color: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
margin: 100px auto;
width: 360px;
}
.completed {
color: gray;
text-decoration: line-through;
}
body {
font-family: Roboto;
background: #2BC0E4;
background: -webkit-linear-gradient(to left, #EAECC6, #2BC0E4);
background: linear-gradient(to left, #EAECC6, #2BC0E4);
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 0px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
input:focus {
background-color: #fff;
border: 3px solid #2980b9;
outline: none;
}
::placeholder {
color: #9e9e9e;
opacity: 1;
}
h1 {
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
#dropdown {
float: right;
}
.input_container{
height:30px;
transition: height 2s;
overflow:hidden;
}
.input_container.hide{
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
</head>
<body>
<div id="container">
<h1>TO-DO LIST <button id = "dropdown">X</button> </h1>
<div class='input_container'>
<input type="text" placeholder="Add New Todo">
</div>
</div>
</body>
</html>
You can add condition
http://jsfiddle.net/pr2szjhu/1/
<input type="text" placeholder="Add New Todo" id="test">
JS
$("#dropdown").click(function(){
if ($('#test').is(':visible')){
$("#test").removeAttr('placeholder');
$("input[type='text']").slideToggle(1800);
}else{
$("input[type='text']").slideToggle(1800,function() {
$("#test").attr('placeholder','Add New Todo');
});
}
})
Hey guys i get the error
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=loginApp&p1=Error%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A17%3A381)
I dont know why but here is my files all in the same folder i think it has something to do with ngRoute not getting implemented correctly in login.html but not sure. You guys dont need to read the css as im preety sure they arent the spot of problem.Thanks for your help!
login.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<!-- load Bootstrap and custom style.css -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="login.css">
<!--Google Font - Work Sans-->
<link href='https://fonts.googleapis.com/css?family=Work+Sans:400,300,700' rel='stylesheet' type='text/css'>
<!--Login-->
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="main.js"></script>
</head>
<body ng-app="loginApp" ng-controller = "loginController">
<div id="container_demo" >
<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 -->
<a class="hiddenanchor" id="toregister"></a>
<a class="hiddenanchor" id="tologin"></a>
<div id="wrapper">
<div id="login" class="animate form">
<form autocomplete="on">
<h1>Log in</h1>
<p>
<label for="username" class="uname" data-icon="u" > Your email or username </label>
<input id="username" name="username" required="required" type="text" placeholder="myusername or mymail#mail.com"/>
</p>
<p>
<label for="password" class="youpasswd" data-icon="p"> Your password </label>
<input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />
</p>
<p class="keeplogin">
<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
<label for="loginkeeping">Keep me logged in</label>
</p>
<p class="login button">
<input type="submit" value="Login" />
</p>
<p class="change_link">
Not a member yet ?
Join us
</p>
</form>
</div>
<div id="register" class="animate form">
<form autocomplete="on">
<h1> Sign up </h1>
<p>
<label for="usernamesignup" class="uname" data-icon="u">Your username</label>
<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
</p>
<p>
<label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail#mail.com"/>
</p>
<p>
<label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
</p>
<p>
<label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
</p>
<p class="signin button">
<input type="submit" value="Sign up"/>
</p>
<p class="change_link">
Already a member ?
Go and log in
</p>
</form>
</div>
</div>
</div>
</body>
</html>
login.css:
#subscribe,
#login{
position: absolute;
top: 0px;
width: 88%;
padding: 18px 6% 60px 6%;
margin: 0 0 35px 0;
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189,0.8);
box-shadow:
0pt 2px 5px rgba(105, 108, 109, 0.7),
0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
border-radius: 5px;
}
#login{
z-index: 22;
}
/**** general text styling ****/
#wrapper h1{
font-size: 48px;
color: rgb(6, 106, 117);
padding: 2px 0 10px 0;
font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
font-weight: bold;
text-align: center;
padding-bottom: 30px;
}
/** For the moment only webkit supports the background-clip:text; */
#wrapper h1{
background:
-webkit-repeating-linear-gradient(-45deg,
rgb(18, 83, 93) ,
rgb(18, 83, 93) 20px,
rgb(64, 111, 118) 20px,
rgb(64, 111, 118) 40px,
rgb(18, 83, 93) 40px);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
#wrapper h1:after{
content:' ';
display:block;
width:100%;
height:2px;
margin-top:10px;
background:
linear-gradient(left,
rgba(147,184,189,0) 0%,
rgba(147,184,189,0.8) 20%,
rgba(147,184,189,1) 53%,
rgba(147,184,189,0.8) 79%,
rgba(147,184,189,0) 100%);
}
/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder {
color: rgb(190, 188, 188);
font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
color: rgb(190, 188, 188);
font-style: italic;
}
input {
outline: none;
}
/* all the input except submit and checkbox */
#wrapper input:not([type="checkbox"]){
width: 92%;
margin-top: 4px;
padding: 10px 5px 10px 32px;
border: 1px solid rgb(178, 178, 178);
box-sizing : content-box;
border-radius: 3px;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
transition: all 0.2s linear;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus{
border: 1px solid rgba(91, 90, 90, 0.7);
background: rgba(238, 236, 240, 0.2);
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
#font-face {
font-family: 'FontomasCustomRegular';
src: url('fonts/fontomas-webfont.eot');
src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/fontomas-webfont.woff') format('woff'),
url('fonts/fontomas-webfont.ttf') format('truetype'),
url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/** the magic icon trick ! **/
[data-icon]:after {
content: attr(data-icon);
font-family: 'FontomasCustomRegular';
color: rgb(106, 159, 171);
position: absolute;
left: 10px;
top: 35px;
width: 30px;
}
/*styling both submit buttons */
#wrapper p.button input{
width: 30%;
cursor: pointer;
background: rgb(61, 157, 179);
padding: 8px 5px;
font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
color: #fff;
font-size: 24px;
border: 1px solid rgb(28, 108, 122);
margin-bottom: 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
box-shadow:
0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
0px 0px 0px 3px rgb(254, 254, 254),
0px 5px 3px 3px rgb(210, 210, 210);
transition: all 0.2s linear;
}
#wrapper p.button input:hover{
background: rgb(74, 179, 198);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
background: rgb(40, 137, 154);
position: relative;
top: 1px;
border: 1px solid rgb(12, 76, 87);
box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
text-align: right;
margin: 5px 0;
}
/* styling the checkbox "keep me logged in"*/
.keeplogin{
margin-top: -5px;
}
.keeplogin input,
.keeplogin label{
display: inline-block;
font-size: 12px;
font-style: italic;
}
.keeplogin input#loginkeeping{
margin-right: 5px;
}
.keeplogin label{
width: 80%;
}
p.change_link{
position: absolute;
color: rgb(127, 124, 124);
left: 0px;
height: 20px;
width: 440px;
padding: 17px 30px 20px 30px;
font-size: 16px ;
text-align: right;
border-top: 1px solid rgb(219, 229, 232);
border-radius: 0 0 5px 5px;
background: rgb(225, 234, 235);
background: repeating-linear-gradient(-45deg,
rgb(247, 247, 247) ,
rgb(247, 247, 247) 15px,
rgb(225, 234, 235) 15px,
rgb(225, 234, 235) 30px,
rgb(247, 247, 247) 30px
);
}
#wrapper p.change_link a {
display: inline-block;
font-weight: bold;
background: rgb(247, 248, 241);
padding: 2px 6px;
color: rgb(29, 162, 193);
margin-left: 10px;
text-decoration: none;
border-radius: 4px;
border: 1px solid rgb(203, 213, 214);
transition: all 0.4s linear;
}
#wrapper p.change_link a:hover {
color: rgb(57, 191, 215);
background: rgb(247, 247, 247);
border: 1px solid rgb(74, 179, 198);
}
#wrapper p.change_link a:active{
position: relative;
top: 1px;
}
#register{
z-index: 21;
opacity: 0;
}#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
z-index: 22;
animation-name: fadeInLeft;
animation-delay: .1s;
}.animate{
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register{
animation-name: fadeOutLeftBig;
}
#keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<!-- load Bootstrap and custom style.css -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" type="text/css" href="main.css">
<!--Login-->
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="main.js"></script>
</head>
<body ng-app="app" ng-controller = "ToDoController">
<h1 style = "text-align:center;" id = "ToDoHeader">Todo List</h1>
<input type="text" class="form-control" id="text" placeholder= "What Needs To Be Done?" ng-model = "textValue">
<a class="button-0" ng-click = "submit()">Submit</a>
<ul id = "tasks">
<li ng-repeat = "messages in toDo">{{messages.textValue}}</div>
</li>
</ul>
</body>
</html>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css"> -->
main.css:
#ToDoHeader{
font-family : Impact;
text-shadow: 2px 2px 5px blue;
text-shadow: -1px -1px 1px #000, 1px 1px 1px #ccc;
text-shadow: 0 1px 0 #999999, 0 2px 0 #888888,
0 3px 0 #777777, 0 4px 0 #666666,
0 5px 0 #555555, 0 6px 0 #444444,
0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4),
0 9px 10px rgba(0, 0, 0, 0.2);
/* 16 * 0.0625 = 1px */
letter-spacing: 0.0625em;
font-size:100px;
}
#text{
width:500px;
position:relative;
left:430px;
top:40px;
height:60px;
}
:placeholder-shown {
font-family: "Times New Roman", Georgia, Serif;
color:white;
font-size:25px;
opacity: 0.4;
font-style: italic;
font-weight:bold;
}
.button-0 {
position: relative;
bottom:20px;
left:920px;
height:60px;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Helvetica', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
/* Animation */
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.button-0:hover,
.button-0:focus {
text-decoration: none;
color: #fff;
}
.button-0:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
#tasks{
position: relative;
top:100px;
text-align: left;
right:50px;
list-style-type: none;
font-family : Impact;
font-size:40px;
text-align: center;
}
main.js:
var app = angular.module('app', ["firebase"])
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.js',
controller: 'loginController',
})
.when('/ToDo', {
template: 'Loged In!'
})
.otherwise({
redirectTo: '/login'
});
}]);
app.controller("ToDoController", ["$scope", "$firebaseArray",
function($scope, $firebaseArray) {
var ref = new Firebase("https://todolistt.firebaseio.com/");
$scope.toDo = $firebaseArray(ref);
$scope.submit = function(){
if(!($scope.textvalue == ""))
ref.push({
'textValue' :$scope.textValue
})
}
}
]);
/*
app.config(function($routeProvider){
$routeProvider.
when('/About', {
templateUrl: 'About.html'
})
.otherwise({d
redirectTo:'/'
})
})*/
EDIT Problem
Here is my Plunk. The problem here is two things, first for some reason i cant start the plunk with login.html and second i cant use app.config for some reason. When ever i take away app.config the todo page becomes good for some reason. Thankyou
Your app name in js and view are different, change
from
<body ng-app="loginApp" ng-controller = "loginController">
to
<body ng-app="app" ng-controller = "loginController">
Well not only do you have to do what was previously mentioned by Goldenowner and Sajeetharan. You actually need to include the ngroute module to your project.
<script src="https://code.angularjs.org/1.3.15/angular-route.min.js"></script>
https://plnkr.co/edit/e4PsZ0WUpwjY4HH4FFzO
The link in your error message tells you this.
I changed the AngularJS reference, added JQuery (because Bootstraps needs JQuery), added Angular-route and added ngRoute as I said earlier.
Working Plunker.
These are the tags I added (in an important order else it doesn't work):
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
And this in your main.js:
var app = angular.module('app', ["firebase", "ngRoute"]);