We Keep Coding

Angular - How to disable/grey out screen on load and save

I haven't found much out there specifically relating to Angular, but is there a way to grey out/disable the screen on a button click? Right now I have a button which is tied to saving some data, but I need to show a loading icon and not allow the user to edit any other fields while the save is in progress.
I currently have it set to where I can show the loading icon fine on the screen, I'm just wondering what I need to do so that the user isn't able to edit the DOM.
Right now I just have a spinner that is tied to an *ngIf, which displays towards the top of my page.
HTML:
<div id="nav">
<button type="submit"
class="btn btn-primary"
style="height: 46px;
width: 188px;
margin: 0 auto;
display:block;"
(click)="saveHandler()">
Save & Calculate
</button>
</div>
<span id="nav" *ngIf="saveInProgress">
<div class="submit-spinner" style="margin-top: 20px; display:block">
</div>
</span>

What I ended up doing was simply adding a new CSS ID tag to the root CSS file (styles.css). This way I'm able to reference the ID tag from anywhere in my application in order to apply this to anything within my project.
I drive the toggling of the CSS element with a variable, this way I'm able to execute logic in order to toggle the grey/disable. The grey/disablement starts out on a button click, and ends when the save has completed from the database. The user is unable to edit any field on screen and is forced to wait for the completion of the save before modifying any more fields.
Here's the documentation that helped me achieve this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_overlay
Here's what I added to styles.css at the root project level:
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
Here's my HTML of my component where I applied the styling (I added this right at the bottom of my HTML file):
<div id="overlay">
<span id="nav" *ngIf="saveInProgress">
<div class="spinner" style="display: block; position: fixed">
</div>
</span>
<span id="nav" *ngIf="saveInProgress">
<div class="submit-message" style="display: block; color: #FFFFFF; position: fixed; left: 49.7%; top: 54.5%;">
Saving...
</div>
</span>
</div>
Here's my logic in the corresponding TS component:
save(): Observable<any> {
if(...) {
this.saveInProgress = true;
document.getElementById("overlay").style.display = "block";
}
....some more logic....
if(...){
this.saveInProgress = false;
document.getElementById("overlay").style.display = "none";
}
}

You can add the following css property to #nav (use div instead of span). This should work, as it will create an overlay over your website content so that the content is not accessible:
#nav {
background: #e9e9e9;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
Also, It would be very helpful if you provide a working example on a website like jsfiddle, stackblitz etc so that we can have a look at what it is you're trying to accomplish.
Update:
Also, give this div an 'id' other than 'nav' so that the css does not conflict between your content and overlay.

Totally download image before showing the page

is there a way to download images inside an HTML page before showing the page? Because I got an issue where the div underneath doesn't show up correctly. I am pretty sure that it is due to the image loading after the page was shown. I have no issue locally, but once I deploy it with Heroku, I have a visual error like so:
The local version:
Would anyone have an idea on how to download them before showing the rest of the page? I tried to use the following JavaScript but it didn't work:
preload([
'./webapp/dist/images/chantier1.jpg',
'./webapp/dist/images/chantier2.jpg',
'./webapp/dist/images/chantier3.jpg'
]);
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
Thank you for your help and time

a fast way to do it, by the way i think it's really strange that an image load delay can create this kind of view problem:
$(window).load(function() {
$('.loader').fadeOut(1000);
});
img{
width: 100%
}
.loader{
position: fixed;
height: 100vh;
width: 100%;
background-color: white;
top: 0px;
left: 0px;
}
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images.unsplash.com/39/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
<img src="https://static.pexels.com/photos/1029/landscape-mountains-nature-clouds.jpg">
<div class="loader">
<p> loading </p>
</div>

Please try to set the height of the images container and the width and height on img tags.

Tumblr photosets, image on image

I'm working on a tumblr theme for a magazine I am working on, but I'm stuck with the photosets blocks.
I'd like to have two image layered with a hover function to make the first one disappear when you put your mouse.
I think my css is quite good for that but the problem is that for photosets tumblr create an external page with its own css and I don't know how to modify it. I just can get opacity effect using iframe.photoset but it's not enough to modify the place of my image.
This is the css I apply to the photoset:
.photoset {
position: absolute;
top: 0;
left: 0;
display: none;
}
.photoset_row {
position: relative;
display: block;
width: 500px;
}
.photoset_row:first-child {
display: block;
}
.photoset:hover .photoset_row {
display: block;
}
.html_photoset:hover .photoset_row:fisrt-child {
display: none;
}
I was thinking to use maybe JS like that (test with a shake effect) but I'm not a web designer and that look too hard for me.
{block:Photoset}
<div class="photoset">
<div class="shakeImage" onMouseover="init(this);rattleimage()" onClick="top.focus()"/>
{Photoset-500}
</div>
So if you have an idea for this problem that would be really great!

How to get this kind of web page effect

The little popup window appears in the middle of the original page.
The original page is covered by grey shade if not by the popup window.
The underneath original page can still be scrolled up and down.

Follow these steps:
1) Create this CSS rule:
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background: #666;
filter: alpha(opacity=50); /* opacity for IE browsers */
}
2) Add this code to your jQuery:
$("body").prepend("<div class='overlay'></div>");
3) When done, remove it like this:
$(".overlay").remove();
Didn't test this, but it should work (maybe with very minor modifications). This is one way, if you prefer doing it by yourself. You can, however, use existing solutions such as Twitter's Bootstrap lib which is cool, and I recommend it.
http://twitter.github.com/bootstrap/
Regards.

You could use the JQueryUI dialog widget http://jqueryui.com/dialog/#modal

This is easy enough to achieve with some simple CSS...
The overlay (the grey background) is fixed in place and covers everything below:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
z-index: 2; // above content
}
The "dialog" itself is similar in style, but smaller:
#dialog {
display: none;
position: fixed;
width: 500px;
height: 250px;
background-color: #fff;
z-index: 3; // above 'overlay'
}
The top and left attributes can be calculated with simple JavaScript, so that the dialog can be positioned in the center of the browser:
positionDialog = function() {
if (typeof window.innerHeight != 'undefined') {
dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
}
}
And also upon window resize:
$(window).resize(function() {
positionDialog();
}
Notice how the CSS sets these DIVs to display: none. They are hidden until called, which is done by setting them to display: block.
These days, I find that it's much simpler and more robust to rely on jQuery UI's excellent dialog widget.

It's called a light box. There's a way that you can do it using only CSS:
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
The key for darkening the background is the CSS opacity property of a box that you cover the background with, which you can set a black background and use this CSS for transparency:
-moz-opacity: 0.8;
opacity:.80;

You could take a look at the modal included in Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals

javascript onclick events on image points

I have a world map image (png image), now I am planning to add markers on the map for various cities like new york, san francisco, london, tokya, mumbai etc..
The markers will be like red dots
I have this image inside my application, what I finally want is these markers should have an associated onclick javascript function like loadstasticschart(cityname).
So once the marker is clicked graphical charts for that city is loaded in the neighboring div in the page.
So basically I want is a way to associate javascript function onclick of the city points in the map. How can I achieve this functionality?
Edit: I did figure the way is to user image maps and have <area> tags and have onclick event on these area tags. The are tags have coordinate attribute which define the clickable area. The last thing remaining now is to color the individual area tags with some color since there are invisible in the map right now. I saw a post where they have suggested to set id to area tags and set the color of the id by document.getElementbyId since style tag change to background color or anything is not making the areas visible.
Regards
Priyank

I have two small suggestions, one is to avoid using area tags and place above the image a canvas tag, and use Paper.js to draw on it and associate to each draw an onclick event. If you wan't something that will work in older browsers I recommend Raphael.js instead.
Any way... if you still want to use the area tag, you could have a small dot.png image and place it as background to the area tag and change it's position for each country's area tag, i.e.:
.area {
background: url("../images/dot.png") no-repeat;
}
.area#poland {
background-position: 100px 150px;
}
.area#argentina {
background-position: -100px -300px;
}
I hope it helps, cheers.
---------------------------EDIT-------------------------------
Ok, here you have a working solution: http://jsfiddle.net/8gDLV/1/
The html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="map-container">
<img src="http://www.theodora.com/maps/new4/world_color.gif"/>
<div id="tucuman" class="location"></div>
<div id="buenosaires" class="location"></div>
<div id="paris" class="location"></div>
</div>
</body>
</html>
main.css:
#map-container {
width: 648px;
height: 413px;
border: 1px solid black;
position: relative;
}
#map-container .location {
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
background: red;
cursor: pointer;
}
#map-container .location.active {
background: yellow;
}
#map-container .location#tucuman {
top: 337px;
left: 126px;
}
#map-container .location#buenosaires {
top: 350px;
left: 130px;
}
#map-container .location#paris {
top: 139px;
left: 264px;
}
main.js:
$(document).ready(function () {
$(".location").click(function() {
if (!$(this).hasClass(".active")) {
$(".location.active").removeClass("active");
$(this).addClass("active")
}
});
});
I hope it's clear as it is, now I don't have time to explain it better, but if you have any doubt please ask it and I'll edit it later.
Cheers!!