Related
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 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 wonder how you actually use a dependency such as jQuery for your script. I tried linking it in index.html without success. My test function nor the function I'll later use works with jQuery, but the js file works when I link it in the head of HTML. How does the html & js files "know" what dependencies they can use? Thanks
/*package.json*/
{
"name": "principles",
"version": "1.0.0",
"description": "This is the life-long project of constantly updating principles for 4 AoL, Intellectual, Physical, Relationships, Spiritual",
"main": "IntPrin.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "Ronnlidd",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1"
}
}
/*NEW FILE, IntPrin.js , linked in head of HTML and working with vanilla js*/
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
window.onload = function() {
$("#toggleAllElms").click(function() {
$(".toggleAcronym").toggle('slow');
});
};
function oneElmToggle(elm) {
const display = elm.nextSibling.style.display;
if (display === "none" || display === "") {
elm.nextSibling.style.display = "block";
} else {
elm.nextSibling.style.display = "none";
}
}
* {
text-align: center;
height: auto;
padding: 10px 0;
}
.BOLD {
font-weight: 800;
}
.UNDERLINED {
text-decoration: underline;
}
.MARKED {
background-color: rgba(251, 255, 0, 0.315);
padding: 2px;
display: inline;
}
.CURSIVE {
font-style: italic;
}
.REDTEXT {
color: red;
}
body {
min-width: 700px;
}
header {
width: 100%;
min-width: 700px;
height: 80px;
text-align: center;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
color: rgb(250,220,255);
position: absolute;
top: 0;
left: 0;
box-shadow: 0 3px 3px rgb(0,0,0);
}
header h1 {
margin-top: 23px;
}
.ChooseMetaPrinciple {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 100px auto 0 auto;
}
.container {
display: flex;
width: 90%;
margin: 0 auto 30px auto;
flex-direction: column;
justify-content: space-around;
align-content: space-around;
}
.grid-item {
width: auto;
background: linear-gradient(to top left, rgb(255, 220, 200), rgb(250, 170, 70));
border-radius: 1%;
box-shadow: 0 7px 7px black;
position: relative;
top: 20%;
margin-top: 25px;
font-size: 2rem;
font-weight: 700;
}
.Meta-Principle {
width: 70%;
background: linear-gradient(to top left, rgb(0,0,0), rgb(0, 10, 70));
border-radius: 1%;
box-shadow: 0 7px 7px black;
color: white;
margin: 0 auto 30px auto;
position: relative;
top: 20%;
font-size: 2rem;
font-weight: 700;
}
.ChooseSubPrinciple {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 20px auto 20px auto;
}
.flex {
display: flex;
justify-content: space-evenly;
flex-direction: row;
width: 98%;
margin: 0px auto 20px auto;
}
.flex > h4 {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
border-radius: 10px;
text-align: center;
font-size: 20px;
width: 25%;
margin: 0 5px;
padding: 5px 2px;
}
.a, .b, .c, .d, .e, .f {
font-size: 1.6rem;
text-align: center;
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
width: 86%;
margin: 20px auto;
}
.d {
margin-top: 200px;
}
.p {
font-size: 1.5rem;
text-align: center;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
border-radius: 1%;
box-shadow: 0 7px 7px black;
width: 70%;
margin: 25px auto;
color: aliceblue;
padding: 10px;
}
.p1container {
border: 1px solid black;
border-radius: 30%;
width: 40%;
margin: 0 auto;
height: 540px;
padding: 0 180px;
}
#p1 {
margin-top: 15px;
width: 97%;
border-right: 1px solid grey;
}
#badEcon {
margin-top: -35px;
height: 100px;
}
#p11, #p12 {
font-size: 1.416rem;
}
#p11 {
float: left;
width: 57%;
height: 100%;
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
border-right: 2px solid black;
}
#p12 {
width: 30%;
height: 100%;
float: right;
background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
border-right: 1px solid grey;
}
#p121 {
width: 30%;
float: right;
border-right: 1px solid grey;
font-size: .8rem;
margin: 0 0 0 100%;
background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
}
#p1211 {
width: 30%;
float: right;
background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
font-size: .8rem;
border-right: 1px solid grey;
}
#p2, #p3, #p4 {
width: 56%;
}
.p5container {
border: 1px solid black;
border-radius: 30%;
width: 40%;
margin: 0 auto;
height: 280px;
padding: 20px 80px 20px 80px;
}
#p5 {
width: 500px;
}
.flex5 {
width: 105%;
margin: -30px auto 0 auto;
}
#p51, #p52, #p53 {
width: 28%;
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
color: white;
font-size: 1rem;
height: 100px;
}
#p6Acronyms {
width: 30%;
border: 1px solid blue;
margin: 0 auto;
padding: 10px;
}
#p6Acronyms button {
width: 100%;
border: 1px solid blue;
margin: 0 auto;
padding: 20px;
background: rgb(0, 152, 223);
color: azure;
}
#p6Acronyms button:hover {
background: rgb(0, 47, 255);
color: antiquewhite;
}
#p6Acronyms p {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML5><html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intellectual Principles</title>
<meta name="description" content="Intellectual Principles">
<meta name="author" content="Ronnlidd">
<link rel="stylesheet" type="text/css" href="IntPrin.css">
<script type="text/javascript" src="IntPrin.js"></script>
</head>
<body>
<header>
<h1>Intellectual Principles</h1>
</header>
<h2 class="ChooseMetaPrinciple">Choose Meta-Principle</h2>
<div class="container">
<div class="grid-item">
<a>Boost your odds of success through de-centralized principle-guided decision-making.</a>
</div>
<div class="grid-item">
<a>Learn, Grow, Evolve. Be Anti-Fragile.</a>
</div>
<div class="grid-item">
<a>Apply principles in complex sub-systems of reality.</h2>
</div>
</div>
<div class="Meta-Principle">Boost your odds of success through de-centralized principle-guided decision-making.</div>
<h2 class="ChooseSubPrinciple">Choose Sub-Principle</h2>
<div class="flex">
<h4>Find out what reality looks like through <a>The Scientific Method</a> & phenomenology of consciousness.</h4>
<h4><a>Find your meaning/Why</a> <i>What do you want reality to be like?</i></h4>
<h4>Write down principles for making decisions in future realities.</h4>
<h4>Turn principles into algorithms.</h4>
<h4>Incrementally RUD principles for 4 AoL.</h4>
<h4>Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h4>
</div>
<a><h4 class="a">Find out what reality looks like through <a>The Scientific Method</a> & phenomenology of consciousness.</h4></a>
<a><h4 class="b"><a>Find your meaning/Why</a> <i>What do you want reality to be like?</i></h4></a>
<a><h4 class="c">Write down principles for making decisions in future realities.</h4></a>
<div class="p1container">
<div class="p" id="p1">Meta-principles make sub-principles obsolete.</div>
<div id="badEcon">
<div class="p" id="p11">Principles serve you, you don't serve them. //Plan unrigidly & keep an open mind.</div>
<div class="p" id="p12">Delay decisions AMA(subj.)P.</div><br>
</div>
<div class="p" id="p121">Use situational awareness in combination with more general principles as basis for decisions. //Instead of seeking order and getting pseudoorder when planning.</div>
<div class="p" id="p1211">If subjective brain thinks, at a deliberate level in a state of happy intelligent consiousness, that a decision should be made, that decision can be made even though it violates some meta-principle.</div>
</div>
<div class="p" id="p2">If principle is subj. practically re-usable, Then write it down. Else embrace the subj. experience of principle.</div>
<div class="p" id="p3">Summarize books & experiences by principles and then transfer them to their place in the principle-hierarchy.</div>
<div class="p" id="p4">If subj. practical, Then write down what will falsify and make obsolete, the principle that you’re using/pondering. //Else keep it in top of mind.</div>
<div class="p5container">
<div class="p" id="p5">Use markers, colors and distinguishers. //To communicate with your future self.</div>
<div class="flex flex5">
<div class="p" id="p51"><span class="BOLD">Bold, </span><span class="UNDERLINED">underlined</span> or <span class="MARKED">marked</span> means part of principle is important.</div>
<div class="p" id="p52"><span class="CURSIVE">Cursive</span> means referencing something which has a mental representation.</div>
<div class="p" id="p53"><span class="REDTEXT">Red text</span> means it is not ordered enough for level of principle in which it currently is located, //Work has to be done in area.</div>
</div>
</div>
<div class="p" id="p6">Use acronyms to increase efficiency of principle-CRUD.</div>
<div id="p6Acronyms">
<button onclick="oneElmToggle(this)">RWE</button><p class="toggleAcronym">Real World Example</p>
<button onclick="oneElmToggle(this)">CRUD</button><p class="toggleAcronym">Create, Read, Update, Delete</p>
<button onclick="oneElmToggle(this)">CNS</button><p class="toggleAcronym">Central Nervous System</p>
<button onclick="oneElmToggle(this)">MPS</button><p class="toggleAcronym">Muscle Protein Synthesis</p>
<button onclick="oneElmToggle(this)">I.e.</button><p class="toggleAcronym">In essence</p>
<button onclick="oneElmToggle(this)">ALAP</button><p class="toggleAcronym">As Long As Possible</p>
<button onclick="oneElmToggle(this)">AMAP</button><p class="toggleAcronym">As Much As Possible</p>
<button onclick="oneElmToggle(this)">CoC</button><p class="toggleAcronym">Contents of Consciousness</p>
<button onclick="oneElmToggle(this)">RR(P)(F)-R</button><p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>
<button onclick="oneElmToggle(this)">AoL</button><p class="toggleAcronym">Area of Life (=Intellectual, Physical, Relationships & Intellectual)</p>
<button onclick="oneElmToggle(this)">MBS</button><p class="toggleAcronym">Mind Body & Spirit</p>
<button onclick="oneElmToggle(this)">QoC</button><p class="toggleAcronym">Quality of Consciousness</p>
<button onclick="oneElmToggle(this)">PFC</button><p class="toggleAcronym">Pre-Frontal Cortex</p>
<button onclick="oneElmToggle(this)">SRV</button><p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>
<button onclick="oneElmToggle(this)">P/T-R</button><p class="toggleAcronym">Practice/Theory-Ratio</p>
<button id="toggleAllElms"><h2>Toggle All</h2></button><p class="toggleAcronym">This button toggles all acronym descriptions to Show/Hide</p>
</div>
<a><h4 class="d">Turn principles into algorithms.</h4></a>
<a><h4 class="e">Incrementally RUD principles for 4 AoL.</h4></a>
<a><h4 class="f">Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h4></a>
<!-- <div class="Meta-Principle">
<h2>Learn, Grow, Evolve. Be Anti-Fragile.</h2>
</div>
<div class="Meta-Principle">
<h2>Apply principles in complex sub-systems of reality.</h2>
</div> -->
<footer>
</footer>
</body>
</html>
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"]);
I am using the dhtmlmodal window of dynamic drive
(http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/)
please help me out.. i spent around three days in a row just to get this done. I even tried colorbox plugin and it also kept messing up.
thanks in advance
i am trying to load my form into it which have a specified set of styling.
actually when i load it using "iframe" or "ajax" the form loads into modal but it is not as per the desired width and height. and even the form content looks messy.
here is the html for form
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<title>Login and Registration Form with HTML5 and CSS3</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body bgcolor="red">
<div class="wrapper">
<div class="login">
<table>
<tr>
<td>
<form action="mysuperscript.php" autocomplete="on">
<h1>Log in</h1>
<p>
<label>Username</label>
<br>
<input id="username" name="username" required="required" type="text" Username"
/>
</p>
<p>
<label>Your password</label>
<br>
<input id="password" name="password" required="required" type="password"
/>
</p>
<p class="signin button">
<input type="submit" value="Login" />
</p>
<p class="change_link">
Not a member yet? Join us
</p>
</form>
</td>
<td>
<section class="logformside-container">
<h1>Log in with</h1>
<div>
<span class="button">
<a href="#">
<img src="images/facebook.png" alt="">Login with facebook</a>
</span>
<br>
<span class="button">
<a href="#">
<img src="images/twitter_standing.png" alt="">Login with twitter</a>
</span>
<br>
<span class="button">
<a href="#">
<img src="images/mail.png" alt="">Login with gmail</a>
</span>
</div>
</section>
</td>
</tr></table>
</div></div></body></html>
here is its styling...
.wrapper {
width:680px;
}
/**** Styling the form elements **/
/**** general text styling ****/
.wrapper a {
color: rgb(95, 155, 198);
text-decoration: none;}
.wrapper h1 {
font-size: 24px;
color: rgb(6, 106, 117);
padding: 2px 0 10px 0;
font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
font-weight: bold;
text-align: center;
}
.wrapper h4 {
font-size: 20px;
color: rgb(6, 106, 117);
padding: 2px 0 10px 0;
font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
font-weight: bold;
text-align: center;}
/** For the moment only webkit supports the background-clip:text; */
.wrapper h1,
.wrapper h4 {
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;
}
/**** 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: focus;
}
/* all the input except submit and checkbox */
.wrapper input:not([type="checkbox"]) {
width: 80%;
margin-top: 4px;
padding: 10px 5px 10px;
border: 1px solid #c7d0d2;
border-radius: 2px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
outline: none;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
.wrapper input:not([type="checkbox"]):active,
.wrapper input:not([type="checkbox"]):focus {
border: 1px solid #a8c9e4;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
/*styling both submit buttons */
.wrapper p.button input {
width: 80px;
cursor: pointer;
padding: 8px 5px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef;
margin-left: 45px;
}
.wrapper p.button input:hover
.wrapper p.button input:active,
.wrapper p.button input:focus {
position: relative;
top: 1px;
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}
p.signin.button {
text-align: right;
margin: 5px 0;
}
.login 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;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid rgb(203, 213, 214);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.login p.change_link a:hover {
color: rgb(57, 191, 215);
background: rgb(247, 247, 247);
border: 1px solid rgb(74, 179, 198);
}
.login p.change_link a:active {
position: relative;
}
/** Styling both forms **/
.login {
position: absolute;
top: 0;
padding: 0 10px 60px 10px;
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189,0.8);
-webkit-box-shadow: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.login table,.register table {
width: 100%;
}
.login td,.register td {
width: 50%;
}
section.logformside-container {
margin-left: 20px;
margin-top: 27px;
border-left: 2px solid rgb(219, 229, 232);
height: 280px;
}
section.logformside-container div {
margin-left:50px;
}
section.regformside-container {
margin-top: -106px;
border-left: 2px solid rgb(219, 229, 232);
height: 560px;
}
section.regformside-container div {
margin-left: 80px;
}
.reg-benefits {
margin-top: 100px;
}
.button a {
font-family: arial, sans-serif;
font-size: 13px;
text-shadow: 1px 1px 0 white;
background: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
padding: 6px 12px;
text-decoration: none;
color: #333333;
}
.button a:hover {
background: #ffffff;
-moz-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
}
.button a:active {
background: #dfdfdf;}
.button a > img {
padding-right: 8px;
position: relative;
}
this is the js for modal window i downloaded,
var dhtmlmodal={
veilstack: 0,
open:function(t, contenttype, contentsource, title, attr, recalonload){
var d=dhtmlwindow //reference dhtmlwindow object
this.interVeil=document.getElementById("interVeil") //Reference "veil" div
this.veilstack++ //var to keep track of how many modal windows are open right now
this.loadveil()
if (recalonload=="recal" && d.scroll_top==0)
d.addEvent(window, function(){dhtmlmodal.adjustveil()}, "load")
var t=d.open(t, contenttype, contentsource, title, attr, recalonload)
t.controls.firstChild.style.display="none" //Disable "minimize" button
t.controls.onclick=function(){dhtmlmodal.close(this._parent, true)}
t.show=function(){dhtmlmodal.show(this)}
t.hide=function(){dhtmlmodal.close(this)}
return t
},
loadveil:function(){
var d=dhtmlwindow
d.getviewpoint()
this.docheightcomplete=
(d.standardbody.offsetHeight>d.standardbody.scrollHeight)?
d.standardbody.offsetHeight : d.standardbody.scrollHeight
this.interVeil.style.width=d.docwidth+"px" //set up veil over page
this.interVeil.style.height=this.docheightcomplete+"px" //set up veil over page
this.interVeil.style.left=0 //Position veil over page
this.interVeil.style.top=0 //Position veil over page
this.interVeil.style.visibility="visible" //Show veil over page
this.interVeil.style.display="block" //Show veil over page
},
adjustveil:function(){ //function to adjust veil when window is resized
if (this.interVeil && this.interVeil.style.display=="block")
this.loadveil() //readjust veil},
closeveil:function(){
this.veilstack--
if (this.veilstack==0)
this.interVeil.style.display="none"
},
close:function(t, forceclose){ //DHTML modal close function
t.contentDoc=
(t.contentarea.datatype=="iframe")? window.frames["_iframe-"+t.id].document:
t.contentarea
if (typeof forceclose!="undefined")
t.onclose=function(){return true}
if (dhtmlwindow.close(t)) //if close() returns true
this.closeveil()
},
show:function(t){
dhtmlmodal.veilstack++
dhtmlmodal.loadveil()
dhtmlwindow.show(t)
}
} //END object declaration
document.write('<div id="interVeil"></div>')
dhtmlwindow.addEvent(window, function(){if (typeof dhtmlmodal!="undefined")
dhtmlmodal.adjustveil()}, "resize")
and here is its styling
.drag-handle{ /*Overwrite default drag handle bar background color with below*/
background-color: #03277C;
}
#interVeil{ /*CSS for veil that covers entire page while modal window is visible*/
position: absolute;
background: black url(blackdot.gif);
width: 10px;
left: 0;
top: 0;
z-index: 5;
visibility: hidden;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
opacity: 0.8;
}
the main page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="windowfiles/dhtmlwindow.js">
</script>
<body>
<!-- 3) DHTML Window Example 3: -->
<p>Play around with Window 3 (Ajax content)</p>
<script type="text/javascript">
function openmypage(){
ajaxwin=dhtmlwindow.open("ajaxbox", "ajax", "a.html","TITLE",
"width=680px,height=380px,center=1,left=300px,top=100px,resize=1,scrolling=0")
ajaxwin.onclose=function(){return window.confirm("Close window 3?")}
}
</script>
<ul>
<li><b>Create/ Open Window
</b> </li>
</ul>