I am making a ajax submit using dojo.xhrpost.
It takes quite a while to get the response.
So i want to display a page loading gif till i get the response.
At the same time I kinda want to hide or reduce the visibility of the page so that the user cant click anything on the page till the response has been received.
I want to overlay the page loading gif over the entire web page till the response is received.
use a div with below css. All you need to do is show/hid this div
.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100000;
opacity: 0.6;
background: black url(http://1.bp.blogspot.com/_xn2gmPb9TfM/SBZwjqwS6MI/AAAAAAAABZw/uMVQlcxlosA/s400/loading-icon.gif) no-repeat center center;
}
demo: http://jsfiddle.net/4k9cH/
When you show the loading gif, wrap it in a div that covers the page with some low opacity.
In your dom, you can stick something like
<div id="overlay"><img src="loading.gif"></div>
with style like
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: white;
opacity: 0.3;
display:none;
z-index: 100; /* should be large enough to be on top of everything */
Then before the ajax call, you show that div
dojo.query("#overlay").style("display", "block");
And then when the load is successful, you hide it
var deferred = dojo.xhrPost({ ...,
load: function() {
dojo.query("#overlay").style("display","none");
}
});
I haven't done much work with Dojo but it seems like this ought to work. If not, I bet it's really close.
As long as you have no event bindings on the #overlay div, users should not be able to interact with the page until the div is hidden.
You may also want to hide the overlay on error too (checkout the error callback) so that if your request fails, at least the user can still get to the stuff on the page.
Add a DIV with a specific name (lets say 'loading') that is 100% in width and height and has a (semi) transparent background (image). Add an inner DIV (lets say 'loadingInner') that holds the loading gif. Set the loading DIVs to display: none by default.
Then, when you access external information, show the loading DIVs with jQuery:
function showLoading() {
var loadControl = $("#loading");
if (loadControl) {
$("#loadingInner").show();
$("#loading").show();
}
}
Hope this helps
Hope this may also help for the loading image to appear on whole window during ajax call pending status:
http://www.edwardawebb.com/web-development/cakephp/disable-page-show-translucent-progress-bar
Related
I have a sequence of images that I want to display one at a time. All the other images are hidden with display: none. The problem is, although I'm waiting all images finish the request, when I change the image to be displayed, the image is blinking. Here is an example:
The issue happens only in Firefox. I also created a JSFiddle with the example above: https://jsfiddle.net/ofte9g5v/7/
I was able to achieve the expected behavior using opacity property but I still would like to know why the first approach doesn't work as it is the most straightforward solution and also works in all other browsers.
Edit: I forgot to mention the images blink only the first time they are loaded.
You're using JavaScript to switch the visibility in two separate calls; first you alter the CSS styles for the visible image, setting its display property to none. It looks like Firefox picks this up and paints faster than other browsers, resulting in no images showing. Next you set the display to block on one of the other images, prompting it to be painted as expected.
Generally when you want to switch between images like this you need to stack the images using CSS in order to prevent these sorts of unwanted effects. Transition Groups are a useful tool to handle transitioning state between hidden, transitioning in, visible, and transitioning out. In this case you can get by with a little CSS:
.imageContainer {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
object-fit: cover;
z-index: 1;
}
Then when you want to show an image, simply set the z-index property on it to 2 or higher and set the z-index property on all other images to 1 afterward.
As an alternative, if you need the visible image to be position: relative; what I did was I set visibility:hidden; position: absolute; on the inactive images and visibility: visible; position: relative; on the active one.
The problem seems to be that Firefox doesn't decode images until they're within the viewport. So after you set the selected image to display: block; and the other images to display: none, there's a moment where no image is displayed while Firefox decodes the selected image.
The solution I found was to decode() the image prior to changing its display:
selectedImage.decode().then(() => {
for (var i = 0; i < unselectedImages.length; i++) {
unselectedImages[i].style.display = 'none';
}
selectedImage.style.display = 'block';
})
On my webpage, I have a footer which has a textarea box. When the user clicks in the textarea, I want the rest of the page to darken by 60%, kindof like they are in a modal. I am a noob when it comes to advanced css so I am unsure of the properties to apply.
I am using bootstrap 3, javascript and knockout. I know how to detect when the user is in the text area I just want to change the background so everything else is opaque.
A jsFiddle would be wonderful as well :)
We use a combination of CSS and JQuery JavaScript for that. You'd basically use some Overlay method first to overlay the whole page (e.g. See Technique #1 from the Link).
With the help of JavaScript, We attach to events of the forms to:
Show the Overlay
Make the required form elements, e.g. the first Div inside the form, appear above the Overlay ("z-index" CSS attribute)
CSS:
Overlay has Z-Index 10, so give the relevant element the Z-Index 11 to appear on top:
form > div { z-index: 11; }
this JQuery JavaScript can look like this:
$(document).on("focus", "textarea", function() {
$(".overlay").show();
});
Beware, this is not only a "background" topic, if you want to prevent users to do any interaction with the page, you need an overlay which actually blocks clicks. Also, in our case, we also had to prevent any links to be triggered which are below the overlay. Users were still able to go through the links using the TAB key on they keyboard to navigate to a button and click it using the Space key, so we also added JavaScript code to prevent that when in editing mode.
EDIT: a very basic Fiddle
Here is how I would do this - When the user clicks in the text area, set a class on body, and style the class.
with jQuery (you can use vanilla js too)
$('.my-textarea').on('focus', function() {
$('body').addClass('dark');
});
$('.my-textarea').on('blur', function() {
$('body').removeClass('dark');
});
body.dark {
background-color: #333;
opacity: 0.6;
}
A good solution is to make a modal appear behind the input and not just making the background darker, this can be accomplished with css alone
...
<style>
textarea:focus{
z-index: 901;
position: relative;
}
textarea ~ .textarea-modal{
position: fixed;
background-color: transparent;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 900;
pointer-events: none;
transition: background-color .5s ease;
}
textarea:focus ~ .textarea-modal{
pointer-events: auto;
background-color: rgba(0,0,0,0.3);
}
</style>
...
<div>
<textarea></textarea>
<div class="textarea-modal"></div>
</div>
...
feel free to change the selectors to target specific elements, however at the moment when you focus on the textarea a modal would appear below it with other elements behind.
I have the script from previous stack overflow question on how to pick an image from an array at random.
Script to display an image selected at random from an array on page load
I want to take his idea a bit further, and display this image fullscreen on page load. I am working on a website, and had the idea to use an image as a greeting page. Where, when the page loads, you are greeted with a fullscreen HD image. When clicked, this image would disappear and show the full site. I wasn't exactly sure how to accomplish this though. Any ideas?
Edit: I'm not looking for direct implementation. Just general thoughts or jsFiddles on how to accomplish this task.
For showing the image on the page load you can use $( document ).ready() function. on click() of the image you could show the website.
Try using CSS like,
First option,
img {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
Second option,
img {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
To understand the above options read Perfect Full Page Background Image
I recommend you to use a complete full page background image slider for your problem. If it is available then use it without wasting your time.
I found a full page slider on http://www.freshdesignweb.com/fullscreen-jquery-slider.html in which the first one background slider is best suitable to you.
Also you can go to https://www.google.co.in/?q=full+background+image+slider to get more image sliders
I looked through all the documentation but still cannot find an example. What I would like to do is to have a waiting icon appear in my page when it's doing an Ajax call. Can someone tell me how I can do this with twitter bootstrap.
Also if there are any other non-jquery implementations which are better I would also like to know about those.
Thank you.
Just pick an loading icon (gif) from font-awesome for bootstrap,
show before the ajax call
hide once the ajax response is delivered
To position the icon in the middle of the screen, use the following css
.ajaxLoader {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
Also take a look for button loading images
JSFiddle
If you want something dead center, you can use the absolute position technique.
To do it, create a div and give it these attributes:
margin:auto;
position:absolute;
top:0;left:0;bottom:0;right:0;
width:<however wide the image is>;
height:<however big the image is>;
This will put it smack bam in the center no matter when someone resizes the screen, making it work on mobiles as well as desktops (as long as the image isn't huge).
If you want this to work inside another div, make sure that the parent is position:relative;
You can add a bootstrapmodal with your waiting logo,
unbind theclose event,
and close the modal when your ajax call is ended...
I am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.
Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?
If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.