I have a Home.html that has a login form that POSTS to login.aspx
the login.aspx takes a hell lot of time to load...
so i want to have a javascript based function where the instant i click Login Button,
a loader must be shown ...while in the background the POST happens and then aspx page must get loaded and then the modal must redirect to the aspx page.
similar to gmail.com login loader..... but only using javascript. (i am also using a minified jquery js ) (NO aspx pages in between)
Please note that i cannot use any asp based loader!
I have tried using :
http://blogs.msdn.com/naitik/archive/2008/07/31/show-loading-message-while-web-page-is-processing.aspx
(it does not work fast. it first redirects to the POSTed page )
Thanks in advance..
If you just want to show a "Please wait...", attach yourself to the forms "onsubmit" event. Then show the "please wait" message (make a DIV visible). When you are done, the form will be submitted and wait for login.aspx.
If you want to have a progress bar, you have two ways of doing it:
* Either post to a hidden iframe which will load login.aspx.
* Or use an XmlHttpRequest to load login.aspx.
In both cases, login.aspx has to spit out messages (pieces of JScript or DIVs you interpret on the client) which update your progress bar.
You will find plenty of examples in Google. Try "jscript progress bar aspx" for instance.
René
Check out the following link, as it is the needed code, styling and layout for a "Loader".
I have used the code and it works 100%
You need a Div on your page:
<div class="modal"></div>
a bit of CSS styling for the div:
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
speak for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://sampsonresume.com/labs/pIkfp.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}
And then lastly a bit of javascript to start and stop(hide and display) the loader:
START:
$(this).addClass("loading");
STOP:
$(this).removeClass("loading");
Source: http://jsfiddle.net/jonathansampson/VpDUG/170/
Related
I am trying to hide a modal, but the modal is going away and the backdrop is staying put and not allowing me to click anything. I have to refresh the entire page for it to work
Here is my code:
$("#AddNewOrganizationModal").modal('hide');
It seems to work in all my other modals, but I cannot pin point why this one is not being closed:
Here is the class that is showing up still:
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #1a1a1a;
}
Is there a way to remove this class just in general?
This ONLY happens when I'm on the development web site. Locally it works fine and closes without any issues.
Could something be caching on azure dev ops?
The way that Bootstrap modals are structured, the backdrop is part of the modal container.
Here's some pseudo-code to demonstrate what I mean:
<modal-wrapper>
<modal-backdrop>
<modal-container>
content of modal
</modal-container>
</modal-backdrop>
</modal-wrapper>
The element to which you want to apply the hide function is <modal-wrapper>. When you hide that, the <modal-backdrop> will also be hidden.
You are probably hiding <modal-container> instead, and so <modal-backdrop> is still displayed.
I've encountered the same issue and had to manually force the backdrop to hide during the modal hidden event. Code similar to this:
$('#myModal').on('hidden.bs.modal', function (e) {
$('.modal-backdrop').hide();
});
This ended up being the answer:
$('.modal-backdrop').fadeOut(150);
Today when I wrote css I found that there are some problems appearing. I used bootstrap and darkstrap to design. In darkstrap the body's style is
body {
color: #c6c6c6;
background-color: #2f2f2f;
}
And in my own css:
body {
background: url(../img/11.jpg) no-repeat fixed;
background-size: 100% 100%
}
It looks no problem but the only question is when I switch the page, the page seems to have an asynchronous load (but I didn't refresh the page), first completing the style in darkstrap, then loading my style after 1 second. But I put my css before the bootstrap and darkstrap. And I just not refresh the page.
At last, I quote the body style in darkstrap, when I switch the page again, the body's background-color also complete after 1 seconds, it looks awful, I know the image load may send a http request and its loading may last. But I just switch the page... so where is the problem?
Where are you loading the scripts and css? Is it and the end of the page body?
One way to fix this might be to move the script loading into the page <head> section. When you do this, all of it will be loaded before any body markup. This will ensure that your CSS and the bootstrap css is ready before you see anything on the page. The downside of this is that it might make the page appear to take longer to load.
There could be other reasons, but this is the first thing that sprang to mind for me.
I setup a static html landing page; displays perfectly in Chorme, Safari, and Firefox. However, I cannot get the embeded MailChimp contact form name and email fields to display when I use the zoom property; as soon as I remove it, the inputs show up too large and out of place which is why I used the zoom property in the first place.
Why would this cause an error? Is there anyway to rememdy this odd problem?
url: http://comingsoon.veteranbrewingcompany.com/
TIA
You really need to address why the form is so large. Various styles are causing it to be so, such as
#mc_embed_signup .mc-field-group input {
font-size: 40px;
}
#mc_embed_signup .button {
background: url("http://themicroscopeguy.com/wp-content/uploads/2013/05/submit2.png");
width: 207px;
height: 92px;
}
So, you have big font sizes set, and the submit button is quite a large image. You can address all that via CSS. You don't need an image for the subbmit button, as you can easily style a normal button with CSS.
I'm trying to figure out what CSS I must change to fix this problem: If you visit my site http://www.derekbeck.com/1775/ and click the topmost Facebook like or send, the popup that comes up is cut off and so one cannot see part of it. I want the popup to appear in the normal facebook default width, whatever that is, probably something like 300px or so.
Thanks,
Derek
Change this iframe.fb_ltr at line 557 of a css file, it's 180px.
iframe.fb_ltr {
width: 180px !important;
}
Just to add something since any solution i have found online wasnt working...
Once you click the like button a class is being added to the iframe...
that is great and mean you can style the popup only and leave your like button as is.
Here is the class being added:
.fb_iframe_widget_lift {
}
For example & since my button was in a static footer i added:
.fb_iframe_widget_lift {
overflow: visible !important;
width: 475px !important;
margin-top: -249px;
margin-right: -220px !important;
background: #000;
padding: 10px;
height: 237px !important;
}
Using this you can customize the popup as you wish.
Best regards, Sagive.
Make sure that when you load FB JavaScript it has APP ID!
For example
//connect.facebook.net/en_US/all.js#xfbml=1&appId=77777777777
If you will not have appId at the end it won't load scripts that expand comment box.
I have an issue where the screen goes white for a millisecond on a redirect when rendering the new page.
This causes the screen to flicker and annoys me so.
I have had a little scoot round the web and have found this IE solution which works on IE however it does not on chrome or FireFox.
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />
Plus I'm sure using this method will have some knock on effects on update panels and Ajax controls.
Is there a way of setting the server to render the full page before giving it the client so not to have this white millisecond that works for all browsers.
Any ideas will be welcomed.
Is there a way of setting the server to render the full page before giving it the client
short answer: no. that's how a web browser works.
even with the fastest possible servers (using statically cached pages as you describe them), you're only decreasing the average "white" time, not eliminating it all together. as you're seeing with IE, that default page transition is part of the browser code, not something the server-side gets control over. if you write your own browser, you can write it to wash black, wash white, or hold the transition until the entire page is loaded, like IE does.
as other people mention, getting your page size down will decrease the "white" time. this time is not only the time the server takes to generate the page, but also all the network travel time for the page, images, javascripts, css, etc. that's why you can never fully get rid of it - only hide it using browser tricks.
and i'm not talking about "client-side" anything. that won't work. the "client-side" code isn't even downloaded, much less running, when the browser decides to white-wash the canvas. it's kind of a standard part of "the internet" that everyone just gets used to; it wasn't designed to be a slide show viewer or a graphically perfect renderer. unfortunately, if you care about transitions that much, HTML is probably not the right medium for your work.
The MSDN examples recommends to set
Response.BufferOutput
before calling
Response.Redirect("http://www.mydomain.com/default.aspx");
You may also want to try to use
Server.Transfer("default.aspx", true);
What you're seeing is a normal occurrence. Here is what happens during a redirect:
The server sends a response to the browser (redirects are done on the client side).
The browser loads the response, sees that there is a redirect and stops the page load
The browser loads the new page
The meta tags you are using are IE only, and will not effect any other browser. The only things that will remove the flicker all together will be one of the following:
You said that the redirect occurs when the user clicks on a button or on a grid row or something. If this were to trigger a change to location.href instead of a post-back, then the user would not see the browser flicker.
Use Server.Transfer (this will result in the browser's address bar showing the old page instead of the new page (a redirect will change the address bar). This will only work if you are redirecting the user to a page on the same server.
Send an HTTP 301 response (Moved Permanently). Tis will remove the flicker, but use this method with caution. It has other effects (it may effect search engine rankings).
To do #3, use this code on the server.
Response.StatusCode = 301;
Response.StatusDescription = "Moved Permanently";
Response.AddHeader("Location", "NewLocation.aspx");
By default the server will buffer the complete response before sending it. The "white" will be a result of the content of the HTML possibly its size. Use a tool such as firebug or IE Developer Tools (my preference is Fiddler) to examine the generated content. At a guess you have some very large ViewState.
Sorry, am late at party! I have been grappling with this on my apps for long. The solution I have devised works for me. Very much like what #Pike65 suggested...
Create a holder for an overlay:
<div id="overlayContent" class="overlay">
<div id="loaderContent" class="loader">
Loading...
</div>
</div>
CSS for this holder:
.overlay {
position: fixed;
border: 0; margin: 0; padding: 0;
height: 100%; width: 100%;
top: 0; left: 0;
background-color: #272727;
text-align: center; vertical-align: middle;
z-index: 900; display: none;
-moz-opacity: 0.1; opacity: 0.1;
filter: alpha(opacity=10);
}
.overlay .loader {
position: relative;
width:40%;
margin: 20% auto;
padding: 10px;
background-color:black;
border: solid 1px gray;
color: #cccccc;
font-weight: bold;
}
Javascript (jQuery):
$('a, input[type=button]').live("click", function (e) {
$("#overlay").show().css({ opacity: 0.1 }).fadeTo(UxSpeed, 0.8);
});
That's it. You may modify the 'js' to your liking. It will cause a translucent overlay to appear whenever any link or button is cliked. By browser's nature, it will wait until it gets a response for the new page (headers). So it won't vanish the current page until at least something is returned for the new page. Once new page starts appearing, it will automatically remove the overlay!
Probably best to do it on the client side. For example, you could have a div that covers the entire page and fades out once the DOM has been fully put together. In jQuery, something like this:
$(document).ready(function() { $('#overlay').fadeOut(); });
From a UX perspective though it might be a little disconcerting. I actually prefer a little bit of flicker so I know things are happening.