So, I am working angular project using yeoman angular-generator. I have a.png. I want this image to be the background for login page only. after I click the submit button then it will redirect to #/about.html and using body class as fullscreen background style. How can I do that?
Here’s my css:
body {
padding-top: 50px;
background-color: #EEF2F5;
font-family: 'Montserrat', sans-serif;
}
body2,
.body2 {
background: url(powercube-09.png);
background-repeat: no-repeat;
font-family: 'Montserrat', sans-serif;
}
Here’s my index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/dashboard.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
<!-- endbuild -->
</head>
<body ng-app="loginApp" class="body2">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div ng-view=“"></div>
Here’s my view/main.html:
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"><br><br><br><br><br><br><br>
<div class="widget2 widget_tally_box">
<div class="x_panel" style="background:#edf1f4;">
<div class="x_content"><br>
<center>
<br><br>
<div class="col-md-12 form-group has-feedback">
<input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="Username">
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-12 form-group has-feedback">
<input type="password" class="form-control has-feedback-left"
id="inputSuccess2" placeholder="Password">
<span class="fa fa-lock form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-12">
<a ng-href="#/about"><button type="submit" class="btn2 btn-success3"><h15>SIGN IN</h15></button></a><br>
</div>
<div class="col-md-12 form-group has-feedback"> <br/>
<h32><strong>Forgot your password?</strong></h32>
<div class="divider"></div>
<h32>Not on PowerCube? <strong>Get started here.</strong></h32>
</div>
</center>
</div>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
Here’s my view/about.html:
<p>This is the about view.</p>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
</div>
Add css at the end of view/main.html.
<style>
body {
padding-top: 50px;
background-color: #EEF2F5;
font-family: 'Montserrat', sans-serif;
}
body2,
.body2 {
background: url(powercube-09.png);
background-repeat: no-repeat;
font-family: 'Montserrat', sans-serif;
}
</style>
This style will effect to view/main.html.
Well first you would want to correct your css. 'body2' isn't a tag.
I'm not entirely sure where you want that 'body2' css class to appear, but deciding what class to apply based on the route you are on (this is pb what you want to do) can be done with controller logic:
main.controller('MainCtrl', function($scope, $location) {
$scope.getClass = function(path) {
if ($location.path().substr(0, path.length) == path) {
return "active";
} else {
return "";
}
}
});
Html code :
<ul class="nav nav-pills">
<li ng-class="getClass('/main')">Phone List
</li>
<li ng-class="getClass('/module1')">Phone details
</li>
<li ng-class="">Module 2
</li>
</ul>
Here is the wrking plunker code
http://plnkr.co/edit/16iOyo6dz5RBNI91AD28?p=preview
Do it with ng-style (or ng-class), add a controller to check when you are in login page or not and use a scope variable to change the style, example:
<div class="row" ng-controller="MainController>
<div class="col-md-4"></div>
<div class="col-md-4"><br><br><br><br><br><br><br>
<div class="widget2 widget_tally_box">
<div class="x_panel" ng-style="loginBackground">
MainController:
$scope.loginBackground = null;
If (islogin) {
$scope.loginBackground = "background:#edf1f4;"
}
Use the following css to set background image to the largest div of the routed homepage. It might be easier to simply include it in the HTML rather than separating it. Once other pages are loaded, the background-image will return to the default.
#bigDiv {
background-image: url("paper.gif");
background-color: #cccccc;
}
I encounter this issue yesterday and turn out with this solution, not so smart but it's working.
+ Assign each page with custom directive: changebg
+ Name the body in index.html with a id (#example)
+ Now hook up angular body and change background style.
angular.module('app').directive('changebg',function(){
return{
restrict:'C',
controller:'changebgctrl'
}
}).controller('changebgctrl',changebgctrl);
changebgctrl.$inject =['$location','$scope'];
function changebgctrl($location,$scope){
angular.element("#example").removeClass(); // remove any class exist
angular.element("#example").addClass("whitebody");
}
You can give directive a data if you want to use this directive multiple time across pages, or try modify .css() if you don't want .addClass()
Related
I'm doing a project. At a certain point i want to have two buttons, one for changing to a lighter theme and another to change to a darker theme and apply the changes to the whole website and not just the page in question
This is the page where i have the functionality:
ConfLayout.cshtml:
<!DOCTYPE HTML>
<html>
<head>
<title>TekSell</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="~/Content/styles.css" rel="stylesheet" />
<link href="~/Content/styles-admin.css" rel="stylesheet" />
</head>
<body id="top">
<section id="banner">
<div class="inner">
Learn More
</div>
</section>
<!-- Main1 -->
<div id="main">
<p style="text-align:center">Serviços</p>
<div class="inner">
<!-- Services -->
<div class="thumbnails">
<div class="box">
<img src="~/Content/Images/gallery.jpg" />
<div class="inner">
<h7>Galeria</h7>
</div>
</div>
<div class="box">
<img src="~/Content/Images/location.jpg" />
<div class="inner">
<h7>Localização</h7>
</div>
</div>
</div>
</div>
</div>
<!-- Main2 -->
<div class="page">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="section-title">Sobre Nós</h3>
<figure><img src="~/Content/Images/logo.jpg" /></figure>
<h4>Acerca de nós</h4>
<p>Somos uma empresa fictícia de venda de software informático</p>
</div>
<div class="col-md-4">
<h3 class="section-title">Âmbito</h3>
<h4>Projeto desenvolvido no âmbito da unidade curricular de Laboratório de Desenvolvimento de Software</h4>
</div>
<div class="col-md-4">
<h3 class="section-title">Configurar página</h3>
<h4>Administrador, altere aqui o layout da página</h4>
<div class="dropdown">
<button class="dropbtn">Layout Configuration</button>
<div class="dropdown-content">
Change to lighter theme
Change to darker theme
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<h7>TekSell</h7>
<p>Email: teksell#lds.pt</p>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="~/Scripts/changeLayout.js"></script>
</body>
</html>
As you can see i've two css files created. The 'styles.css' is the lighter theme, and 'styles-admin.css' is the darker theme. The functionality is implemented at "div class="dropdown-content"
What happens is, as i have both css files linked, when i run it, by default, the view assumes the darker theme(styles-admin.css).
This is the javascript file i use to try the changes:
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}
What is missing? Am i doing it the wrong way?
If you include two CSS files with the same selectors inside, the second file will always override the first.
Just use one <link> and change its href.
Also, why load jQuery and not use it?
<link href="~/Content/styles.css" rel="stylesheet" />
$("link").attr("href","~/Content/styles-admin.css");
Job done!
Use similar way. Preset the theme colours and change the root attribute like this
const colors =['#317EEB', '#6427BA'];
let index = 0;
function changeBackground(){
index = (index+1)%2;
document.documentElement.style.setProperty('--main-color', colors[index]);
}
:root {
--main-color: #317EEB;
}
.set-background{
background: var(--main-color);
width: 10em;
height: 10em;
}
button{
margin-top: 5px;
}
<div class="set-background">
</div>
<button onClick="changeBackground()">Change color</button>
I have a small e-commerce project where i am trying to build cart
I am using the following stack Node.js, Express.js, Ejs(templating)
The issue is I have 2 js Files
Index.js (the main controller file for node js)
showProducts.js (Normal Js File)
So Basically i want to export a function or module from show Products.js file to call it in index.js. The error i am getting is document is not defined.
I am a newbie on Node js. I have roughly looked into Browserify and JSDOM but i am confused are those the Solution to the problem.
I have been stuck onto this problem since 2 days please help.
// Index.js File the Controller
const express = require("express");
const app = express();
const mysql = require("mysql");
const bodyParser = require("body-parser");
const fileUpload = require("express-fileupload");
const uuid = require("uuid");
const kam = require("./public/js/showProducts"); // I am requring it here
kam(); // calling the function
//Showproducts Normal Js file
function kam() {
console.log("kamran is the best in the world");
}
module.exports = kam;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="scss/all.css" />
<title>Products</title>
</head>
<style>
.product-box li {
float: left;
list-style-type: none;
width: 300px;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px;
text-align: center;
}
.filter-cat {
display: none;
}
.show {
display: block;
}
/* Add a light grey background on mouse-over */
.btn:hover {
background-color: #ddd;
}
/* Add a dark background to the active button */
.btn.active {
background-color: #666;
color: white;
outline: 0;
box-shadow: none;
}
.bag-btn {
background: black;
color: white;
border: transparent;
padding: 5px 10px;
}
</style>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container">
<div class="row">
<div class="col-3">
<!-- Brand -->
<a class="navbar-brand" href="#">Kamran</a>
</div>
<!-- Links -->
<div class="col-9">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="products">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart"
>Cart <span class="badge"></span
></a>
</li>
<button>
<a style="float: right;" href="addProducts">Backend </a>
</button>
</ul>
</div>
</div>
</div>
</nav>
<div class="space-50"></div>
<div class="container">
<h1>Our Products</h1>
<div class="space-50"></div>
<div class="search-bar text-center">
<input
type="text"
id="search-bar"
placeholder="Search Products"
onkeyup="searchProducts()"
/>
</div>
<div class="space-30"></div>
<div id="myBtnContainer" class="text-center">
<button class="btn active" onclick="filterSelection('all')">
All Products
</button>
<button class="btn" onclick="filterSelection('cable')">Cables</button>
<button class="btn" onclick="filterSelection('charger')">
Car Charger
</button>
<button class="btn" onclick="filterSelection('powerbank')">
Power Bank
</button>
<button class="btn" onclick="filterSelection('glass')">
Tempered Glass
</button>
</div>
<div class="space-50"></div>
<div class="products-area">
<div class="row">
<% for (var i = 0; i < data.length; i++) { %>
<ul class="product-box text-center filter-cat">
<li class="single-product">
<p><%= data[i].id %></p>
<img src="<%= data[i].productImage %>" width="50%" />
<h3><%= data[i].productName %></h3>
<h4>Rs. <%= data[i].productPrice %></h4>
<div class="space-20"></div>
<button class="bag-btn" onclick="addCart();">Add To Bag</button>
</li>
</ul>
<% } %>
</div>
</div>
</div>
<script src="./js/showProducts.js"></script>
</body>
</html>
The issue is document is not available in node.js environment. You have 2 options to solve this issue.
Option 1. Create 2 files
Create a file for server side part (for nodejs) and another file for client side (and access document here). You can include second file in your html file.
Option 2. Split node.js part of the file
You can check if the file is running on server side and run specific code here. Here's an example:
const isNode = typeof window === 'undefined';
if (isNode) {
function kam() {
console.log("kamran is the best in the world");
}
// Note that module.exports is not available on browser js
module.exports = kam;
} else {
function filterSelection() {
document.doSomething();
}
}
Conclusion
I prefer to place server side and client side code in different files (1st option) because it will make its easy to maintain code, also it will not leak server-side code to clients (users will not able to view server code by using developer tools).
When a user goes to a page that requires them to register, I want to display a Bootstrap modal dialog with id and password. When the user presses the submit button, I want to:
Validate the password and sign them up
Dismiss the dialog
Take them to another page to display some information
What happens currently is when the user presses the Submit button. I go through the validation and try to hide the Bootstrap modal dialog, but then the page re-displays and the dialog comes back. This happens over and over again.
Here is the jsfiddle
Here is the HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Immedia Signup</title>
<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<!-- Immedia stylsheet overrides -->
<!-- <link href="css/im-styles.css" rel="stylesheet" /> -->
<style>
html,
body {
background: url() no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* color: #212529; */
/* color: #bccee0; */
color: #bccee0;
}
.big-text-on-bg-img {
width: 75%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
font-size: 2.5rem;
font-weight: 400;
line-height: 1.2;
}
#media (min-width: 450px) {
.container-xs {
max-width: 500px;
}
}
.display-5 {
font-size: 2.5rem;
font-weight: 300;
line-height: 1.2;
}
</style>
<title>Immedia Home</title>
</head>
<body onload="onloadHandler()">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h1 class="masthead-brand">Modal Test Page</h1>
</div>
</header>
</div>
<!-- cover-container -->
<!-- Modal -->
<div
class="modal fade"
id="signupModal"
data-backdrop="static"
tabindex="-1"
role="dialog"
aria-labelledby="signupModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signup-title">
Thanks for entering an email address and password to protect your
account.
</h5>
</div>
<!-- modal-header -->
<div class="modal-body">
<form id="signup-form" onsubmit="submitHandler()">
<div class="form-group">
<label for="email">Email address</label>
<input
type="email"
autocomplete="username"
class="form-control"
id="email"
aria-describedby="emailHelp"
required
/>
<small id="emailHelp" class="form-text text-muted"
>We'll never spam you or share your email.</small
>
</div>
<!-- form-group -->
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
autocomplete="new-password"
class="form-control"
id="pwd-field"
aria-describedby="passwordHelp"
required
/>
<small id="passwordHelp" class="form-text text-muted">
Passwords must have at least 8 characters with one uppercase
one lowercase, one digit and one special character
"!##$%&*()"
</small>
</div>
<!-- form-group -->
<div class="form-group">
<button
id="submit-button"
type="submit"
class="btn btn-primary"
>
Submit
</button>
</div>
<!-- form-group -->
</form>
</div>
<!-- modal-body -->
</div>
<!-- modal-content -->
</div>
<!-- modal-dialog -->
</div>
<!-- modal fade-->
<!-- JavaScript -->
<script>
// Function definitions
//
$("#signupModal").on("hidden.bs.modal", function() {
$("body").removeClass("signupModal");
});
// Hide a DOM element on the page
// Process the signup when the user presses submit
$("#submit-button").click(function() {
const email = $("#email").val();
const password = $("#pwd-field").val();
console.info("email: " + email + ', password: "' + password + '"');
if (true) {
// Do not check for valid password. Assume it is for now.
console.info("valid password: ", password);
try {
// Signup user here
console.info("submitHandler(): successfully signed up");
$("#signupModal").modal(hide);
// They signed up successfully. Send them to the next page (for example only)
window.location.href = "https://www.duckduckgo.com";
} catch (err) {
console.error("Error signing up: ", err);
}
} else {
// invalid password
$("#pwd-field").val("");
}
console.info("submitHandler(): exiting function");
});
// Begin page execution
function onloadHandler() {
console.info("onloadHandler()");
$("body").addClass("#signupModal");
$("#signupModal").modal("toggle");
}
</script>
</body>
</html>
You are clicking on a submit button inside a form. This will trigger a form submit where it attempts to redirect the submit request. since you have not specified any action and method attributes on the form tag, the browser does not know where to redirect the form submit request and you see a blank page.
In your code you have specified an action listener using js on the submit button. The code inside the listener will execute and after this the default action i.e. the form submit will execute. To prevent this add e.preventDefault() and the form submit event is not executed.
Below code works. You will get a blank page with console error Refused to display 'https://duckduckgo.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'" while running the code in jsfiddle or stackoverflow snippet. This shows the page redirect happened correctly and will work in your application. SO and JSFiddle doesnt like to display other websites within its code snippets.
$("#signupModal").on("hidden.bs.modal", function() {
$("body").removeClass("signupModal");
});
// Hide a DOM element on the page
// Process the signup when the user presses submit
$("#submit-button").click(function(e) {
// ************Add below code to prevent defauilt submit button form submit **********
e.preventDefault();
const email = $("#email").val();
const password = $("#pwd-field").val();
console.info("email: " + email + ', password: "' + password + '"');
if (true) {
// Do not check for valid password. Assume it is for now.
console.info("valid password: ", password);
try {
// Signup user here
console.info("submitHandler(): successfully signed up");
$("#signupModal").modal('hide');
// They signed up successfully. Send them to the next page (for example only)
// ************ Change code to replace so that register page is removed from browser history on redirect **********
window.location.replace("https://www.duckduckgo.com");
} catch (err) {
console.error("Error signing up: ", err);
}
} else {
// invalid password
$("#pwd-field").val("");
}
console.info("submitHandler(): exiting function");
});
// Begin page execution
function onloadHandler() {
console.info("onloadHandler()");
$("body").addClass("#signupModal");
$("#signupModal").modal("toggle");
}
html,
body {
background: url() no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* color: #212529; */
/* color: #bccee0; */
color: #bccee0;
}
.big-text-on-bg-img {
width: 75%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
font-size: 2.5rem;
font-weight: 400;
line-height: 1.2;
}
#media (min-width: 450px) {
.container-xs {
max-width: 500px;
}
}
.display-5 {
font-size: 2.5rem;
font-weight: 300;
line-height: 1.2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="viewport" content="width=device-width" />
<title>Immedia Signup</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<!-- Immedia stylsheet overrides -->
<!-- <link href="css/im-styles.css" rel="stylesheet" /> -->
</head>
<body onload="onloadHandler()">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h1 class="masthead-brand">Modal Test Page</h1>
</div>
</header>
</div>
<!-- cover-container -->
<!-- Modal -->
<div class="modal fade" id="signupModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="signupModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signup-title">
Thanks for entering an email address and password to protect your account.
</h5>
</div>
<!-- modal-header -->
<div class="modal-body">
<!-- ************ Remove form submit code ***********-->
<form id="signup-form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" autocomplete="username" class="form-control" id="email" aria-describedby="emailHelp" required />
<small id="emailHelp" class="form-text text-muted">We'll never spam you or share your email.</small
>
</div>
<!-- form-group -->
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
autocomplete="new-password"
class="form-control"
id="pwd-field"
aria-describedby="passwordHelp"
required
/>
<small id="passwordHelp" class="form-text text-muted">
Passwords must have at least 8 characters with one uppercase
one lowercase, one digit and one special character
"!##$%&*()"
</small>
</div>
<!-- form-group -->
<div class="form-group">
<button id="submit-button" type="submit" class="btn btn-primary">
Submit
</button>
</div>
<!-- form-group -->
</form>
</div>
<!-- modal-body -->
</div>
<!-- modal-content -->
</div>
<!-- modal-dialog -->
</div>
<!-- modal fade-->
</body>
</html>
Aloha,
I am trying to a make a Chrome App that replaces the Chrome Dev Editor. Here is what I have currently:
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('backstage.html', {
'outerBounds': {
'width': 1036,
'height': 583
}
});
});
backstage.html
<!DOCTYPE html>
<html>
<head>
<title>Celestia Pro</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet" href = "material.css">
<link rel = "stylesheet" href = "material.min.css">
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always shown,
even in small screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="fixed-header-drawer-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="fixed-header-drawer-exp">
</div>
</div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<style>
.demo-card-wide.mdl-card {
width: 100%;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('welcome-card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
div.start-cards {
padding-top: 25px;
padding-left: 50px;
padding-right: 50px;
}
</style>
<div class="start-cards" align = center>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome to Celestia Pro</h2>
</div>
<div class="mdl-card__supporting-text">
Celestia Pro is a new integrated development environment (IDE) that allows developers to create Chrome apps quickly and efficiently. We're still in our baby stages, but we hope this tool works for you.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="runWizard()">
Get Started
</a>
<script>
</script>
</div>
</button>
</div>
</div>
</div>
</main>
</div>
</div>
<script src = "./material.min.js">
<script src = "./material.js">
</body>
</html>
This seems all fine and dandy until I try to make the Get Started button I mention actually open something. I want it to open a page called 'backstage2.html', but no matter what combination I try, it doesn't seem to work. Here is what I have tried.
The <a href=""> method
Using the chrome.app.window.current and/or chrome.app.window.create script by adding a script to the button ("runWizard()")
None of these seem to work. I want to be able to open backstage2.html in the same Chrome app windows! How can I do this, if it is even possible? Any help is extremely appreciated.
You may want to use web components and import the file in your main file. Then you can use it as regular web component.
Other option is to send the request to the background page where you can hold a reference to opened window. This reference has contentWindow property which is a JavaScript's window object. You can use it to replace the content of man window (after you read new file data using e.g. fetch).
You may use webview into backstage.html (or in a new window).
Could be...
backstage.html:
<a id="wizard" class="···">Get Started</a>
<!-- onclick doesn't work by CSP (see note bellow) ··· -->
<webview></webview>
<!-- ··· -->
<script src="./main.js"></script>
main.js:
onload = function {
// ···
document.querySelector('#wizard').addEventListener('click', runWizard);
// ···
};
// ···
function runWizard() {
// ···
document.querySelector('webview').src = 'backstage2.html';
// ···
};
CSP -Content Security Policy-, note:
"You can’t use inline scripting..."
#abarisone: Thanks!
Use href ="your html file" target = "_self"
I want to add a spinner to show that the content is loading, when someone clicks on an icon. Basically when someone clicks the hyper-link, the page takes time to load and meanwhile I want to show a spinner/'loading image'. How to implement that?
Thanks in advance
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/fav-icon.png" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="keywords" content=" my webpage" />
</head>
<body>
<div class="content">
<div class="wrap">
<!--- start-top-grids---->
<div class="top-grids">
<div class="top-grid">
<div class="product-pic">
<img src="img/search_page.png" title="watch" />
</div>
Directory
</div>
<div class="top-grid">
<div class="product-pic">
<img src="img/news.png" title="shoe" />
</div>
News
</div>
<div class="top-grid">
<div class="product-pic">
<img src="img/payment.png" title="view pay" />
</div>
View Pay
</div>
<div class="clear"> </div>
<div class="clear"> </div>
<div class="clear"> </div>
<div class="clear"> </div>
</div>
</body>
</html>
You can try something like below:
1) Place "spinning wheel" image in one div.
2) Add "Loading..." text
When your page is loading set that div to display and once your page is loaded successfully set div to display: none.
<div id="progressIndicator" style="display: none;">
<div style="background-color: Transparent;" >
<img src="Images/indicator_mozilla_blu.gif" style="font-family: Tahoma; font-size: small; cursor: wait"
align="absMiddle" alt="" /> Loading...
</div>
</div>
UPDATE
When you are clicking on Image button do not directly call server side function. Instead call a client side function like "CallServerSideFunction()" and from that function call your server side function. You can try something like below:
In Javascript function:
function DisplayProgress() {
document.getElementById('progressIndicator').style.display = '';
}
function HideProgress() {
document.getElementById('progressIndicator').style.display = none;
}
function CallServerSideFunction() {
DisplayProgress();
document.getElementById("btnCallServerSideFunction").click();
HideProgress();
}
Let me know if this helps.