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

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.

Related

prevent automatically page scroll up when using jquery fadein/out founction on fixed position div

I have a web page and I want to make a div that appears on the right side of screen by click a button (both div and button have fixed position)
I made it appear by using jQuery fadein/out
it works fine but when I click the button, the page slides to top automatically
htmlCode:
<div class="fixedDiv">
<div class="fixedDiv liveSupportFrame" style="background: #f8aa00;display: none" id="lsf">
<div class="container" style="background-color:#d8d6d6;">
............
</div>
</div>
<a class="btn btn-warning sideBtn" onclick="showOrHideLiveSupport();" role="button" href="#">FAQ</a>
CSS code:
.fixedDiv{
position: fixed;
bottom: 25%;
right: 0em;
}
.fixedDiv .liveSupportFrame{
margin-right: 2em;
margin-bottom: 1em;
font-size:1.6vw;
bottom: 30%;
}
JS code:
var isLsfOpen = 0;
function showOrHideLiveSupport() {
if(!isLsfOpen){
showLiveSupport()
}
else{
hideLiveSupport()
}
}
function showLiveSupport() {
$('#lsf').fadeIn();
isLsfOpen=true;
}
function hideLiveSupport() {
$('#lsf').fadeOut();
isLsfOpen=false;
}
That's because of href="#". Use event.preventDefault(); in your handler.

How to create an interactive navigation, in a circular design, using HTML, CSS, and JQuery

// JavaScript Document
$('.page').hide();
$(".btns").click(function(e){
e.preventDefault(); //this method stops the default action of an element from happening.
var $me = $(this); //$(this) references .btns, the object in local scope.
var $myContent = $($me.attr('href')); //pulls href of page 01, 02, or 03.
$('.page').hide(); //hides all pages
$myContent.fadeIn();//fades in clicked href connected to btn
$(".btns").removeClass('selected');//
$me.addClass('selected');
});
*{
border-spacing: 0px;
}
body{
margin: 0px;
padding: 0px;
}
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em;
/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
border: dashed 1px;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
position: absolute;
top: 50%; left: 50%;
width: 4em; height: 4em;
margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); }
<div class="body_content">
<div class="page" id="page_01">
<h2>1. Category 1</h2>
</div>
</div>
<div class="circle-container">
<nav class="navigation">
<a href="#page_01" class="btns deg0" >
<img id="one" src="imgs/button.png" alt="page01"/>
</a>
</nav>
</div>
I have a unique situation that I would like to discuss with you all. I am trying to create a web page that has a circular navigation, as shown here enter image description here
Each one of these buttons would display content when clicked, like an in-page link. The JQuery is as shown enter image description here
The concept seems simple enough, force all content to hide, when a user clicks a button, the page content linked to that button shows. It works when the links are inline or block display, but when in a circle, the links don't work, the button content doesn't show. Has anyone worked with a similar issue? Or would anyone have a potential solution? I apologize for the vagueness of the questions but the issue seems multi-faceted. Any advice or ideas would be greatly appreciated.
Are you sure your jQuery reference is working? I don't see any issue with the code, the click event should fire when you click on the links. Check the console for any errors, I strongly believe jQuery might not get loaded.

Can't get Modal to work with carousel-video sourced

So I have this carousel from http://kenwheeler.github.io/slick/. I decided with my carousel that once you click the image-a video appears. Well I want this video to load into a Modal Image-with a closeout function. The first line of code for div id....is the image onced clicked the video appears. The rest below it I'll just copy and paste the first part. (Repeat of the same image/video four times-until I decide to switch things out)
<section class="center slider">
<div id="video" style="display:none;"><iframe width="560" height="315" src="https://www.youtube.com/embed/36_e3qbYhEs" frameborder="0"></iframe></div>
<a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);">
<img id="videopic" src="images/350x300.png" alt="Video Picture" /></a>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
</section>
I have the JS and CSS all working fine I just can't implant a function where you click the image the "image(video)" will open in a new window. Sorry about my wording. I am beginner and learning as I go. I know what I want it to do but can't figure out how.
Please let me know if I need to provide anything further.
I think the term you're looking for that might help you in Googling would be that you want your video to open in a lightbox.
Answering specifically how to do this in your particular circumstance is too broad for this site, even if you give us more code to look at. But generally the way you can accomplish this is to use JavaScript to toggle a class on one or more elements when your slideshow images are clicked, and adding that class would trigger the video to show up, while clicking the exit button would remove the class so things go back to their original appearance.
Here is a really basic example, but you can basically take this concept and make it as simple or complicated as you want. You could, for example, toggle a class on the html or body tag of your page and then adjust the CSS of a bunch of stuff on the page based on whether that class is applied.
If you're using jQuery, there are plugins designed exactly for this purpose that will automatically give you a ton of settings to do things like automatically size and perfectly center your lightbox in the viewport and take care of mobile functionality and whatnot. Fancybox and Colorbox are a couple examples.
var lightboxImg = document.getElementsByTagName('img')[0];
lightboxImg.addEventListener('click', function(){
this.parentNode.classList.toggle('lightbox');
});
document.getElementById('exit').addEventListener('click', function(){
lightboxImg.parentNode.classList.toggle('lightbox');
});
/* relevant stuff */
#iframe {
display: none;
position: absolute;
top: -100px;
left: -100px;
}
#exit {
position: absolute;
top: 10px;
right: -290px;
padding: 5px;
background-color: white;
}
section div.lightbox #iframe {
display: block;
}
img:hover, #exit:hover {
cursor: pointer;
}
/* just for display purposes */
html, body {
height: 100%;
}
section {
width: 400px;
height: 300px;
background-color: gold;
position: relative;
left: calc(50% - 200px);
top: calc(50% - 150px);
}
section div {
position: relative;
top: 50px;
left: 50px;
width: 300px;
height: 200px;
}
<section class="center slider">
<div>
<img src="http://placehold.it/300x200?text=click%20me">
<div id="iframe"><img src="http://placehold.it/600x400?text=your%20iframe"><span id="exit">X</span></div>
</div>
</section>

Check if the user is on a certain location on the page

I have an Angular application that has multiple accordion groups. They are closed by default. One section is quite large so when it opens, the users need to scroll down if they want to see the end of the section. This section has some calculations on it. The problem is that I have a calculate button on the top of the section so when the user wants to recalculate it they have to scroll to the top again to see the button.
Is there any possibility to get the location when the user reached a certain location so it would trigger a ng-if with an overlay button.
Thanks,
Brent
You can use the JQuery .scroll(), it might look like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $document) {
$scope.pos = {
scrollPos:0
};
$("#outer").scroll(function() {
$scope.pos.scrollPos = $("#outer").scrollTop().valueOf();
$scope.$apply();
});
});
#outer {
overflow: auto;
height: 250px;
width: 200px;
border: solid 1px #ccc;
}
.inner {
height: 1000px;
position: relative;
width: 198px;
}
.top {
position: absolute;
top: 0px;
}
.bottom {
position: absolute;
bottom: 0px;
}
.scrolled {
position: fixed;
top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{pos.scrollPos}}<br>
<div id="outer">
<div class="inner">
<div class="scrolled ng-hide" ng-show="pos.scrollPos > 50">Passed Point.</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</div>
</div>
Yes this can be achieved with javascript try reading through this article on Mozilla it will help you achieve your goal, basically it lets you know the position of the mouse on the client. Apart from this if there is a specific element on the page that you need to know if the cursor is inside you can use Jquery and mouseenter event and then trigger some action.

Map not opening without refreshing page once closed

The website i am currently working on has a pop out div with a map of locations on it, my problem is once the pop up div has been closed i then have to refresh the page to open the div again
It is running jquery - here is the code
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#view_map_of_stocklists_link').click(function() {
//$('#popupdiv').show('slow');
$("#popupdiv").css('visibility', 'visible');
$("#mappy").css('opacity', '1');
});
$('.closepopup').click(function() {
$('#popupdiv').hide('slow');
});
});
</script>
The styling
<style>
#popupdiv
{
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 600px;
margin-top: -200px;
width: 960px;
margin-left: -500px;
padding: 20px;
}
#view_map_of_stocklists_link:hover {
cursor:pointer;
}
.closepopup {
margin-top: 60px;
border: 1px solid #ccc;
background-color: #000;
color: white;
cursor: pointer;
}
</style>
and then the HTML itself
<div id="popupdiv" style="visibility:hidden;">
<center>
<iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
<div class="closepopup" style="width:200px">Close</div>
</center>
</div>
<h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
<h5 class="skin-font-color1 p-wrapper"><!-- client txt --> <div id="view_map_of_stocklists_link" class="skin-font-color4">
<h4>View map of stockists</h4>
</div>
The website is http://www.tee-ze.co.uk/sosmoothies/
Cheers
You are setting 'visibility' to 'visible' instead of 'display' to 'block'.
When jQuery .hide() is called it ultimately saves the previous display value and sets it to display:none; So you should be doing something like:
$('#view_map_of_stocklists_link').click(function() {
$('#popupdiv').hide('slow');
});
Which I just realized you have commented out in your code. I wish I could leave a comment but I need more rep.
Edit:
Sorry for complaining in may previous answer.
I just tried uncommenting the existing code and removing the visibilty stuff and that works just fine in your site. Try it.
The way you're showing the popup map doesn't match the way you're hiding it.
You show it with:
$("#popupdiv").css('visibility', 'visible');
But you hide it with:
$('#popupdiv').hide('slow');
That fades it out but ultimately sets the CSS style display: none on the #popupdiv element.
When you try to show it again, it still has display: none on it. Setting the visibility doesn't affect the display style.
You need to make the hide and show match up. Either use the visibility style, or the display style, but use the same one for both hiding and showing (and jQuery's .show() method uses display).
For example, you might create the <div> with display: none instead of visibility: hidden, and then you can use jQuery's .show() and .hide() consistently.

Categories