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.
Related
I've come to believe that there's two things happening. Firstly, if you want to preload a url, you can do this:
body:after{
content: url(http://www.example.com/img/img_1.png) display:none;
}
But as far as I know, this doesn't help in this case:
body:after{
content: url(../img/img_1.png) display:none;
}
In this latter case, the image is already local, so it doesn't have to "download" it? Is that true? Or will the first bit of code cache the image even more?
I ask, because even though I do this, and I then transition to another page, using jquery mobile, the next page still takes a few seconds to load the background image. Even though it's a local asset.
How do I get around this?
From the tests I've done, it seems that two things can cause a delay when loading an image:
When the image needs to be loaded from a URL, or
When the image is locally located, but needs to be placed on the display screen
What i didn't realise is that with PhoneGap, even with the images local, it might take a little while to load. This is what was causing issues for me. Well, this and the fact that I was loading from URLs. So in my case I used the "CSS3 Caching Plugin" like so:
jQuery(function($) {
$.preload.images(document)
});
This solved my problem of loading images that was in the CSS file. But then for my own convenience, I added a section to the css file for locally cached files. Like so:
#cacheMe1 { background: #ffffff url('../img/img1.png') 50% 50% repeat-x; }
#cacheMe2 { background: #ffffff url('../img/img2.png') 50% 50% repeat-x; }
#cacheMe3 { background: #ffffff url('../img/img3.png') 50% 50% repeat-x; }
#cacheMe4 { background: #ffffff url('../img/img4.png') 50% 50% repeat-x; }
etc
This solved caching for most images, plus it allowed me to still keep URLs as loading in the app (i have a gallery section where its currently acceptable to see the images load, rather than on display).
What I also did that seems to be working, is that I use the "InAppBrowser" plugin to preload entire pages by opening them in a hidden window:
var ref = window.open('http://www.example.com', '_blank', 'hidden=yes');
If you open a bunch of files on load of the app, it seems when you either open these URLs again, or switch to the window with:
ref.show();
So there's two decent ways I've found to cache files that works perfectly for my scenario. Hope it helps someone else!
I do not know if I understood well, but maybe it can useful for you:
<img src="my.png" onerror="this.src = 'image-not-found.png';" />
When I was facing problems with preloading images I had to abandon an idea of using display:none; cause it didn't work properly (as long as I remember the browser refuses to load content of invisible elements in order to speed page load up and reducing the traffic). Instead I created a div that in browser's opinion was visible, but it had zero width and height. Required images I load as background-image for this block. The whole trick is that background-image property can take multiple values. The CSS will look like this:
#preload {
height: 0;
width: 0;
background-image: url(image-1.png), url(image-2.png);
}
So you don't get mess in the markup. Hope this trick will work in your case.
You don't need to attach the image to the DOM directly, therefor there is no need to use css to hide it. Use JavaScript to preload images.
var image = new Image();
image.src = "yourfile.jpg"
you can then provide a longer term solution using appcache.
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 can not explain this at all, but I've put a theme selector on my site. A javascript dropdown box that changes the CSS the site is using.
Theme 7 is a theme that had an image of lights in the background. I didn't think it worked with the rest of it so I changed it to a different image using cPanel on my hoster, hit save, and it saved and changed like any other file.
I refreshed multiple times to get the changes, and scrolled down to Theme 7 to see how the new image looked.
Same image as before.
I tried a new image. Same thing.
....I deleted the line background-image altogether, and then quit out of the browser and restarted it.
The lights are still there.
What is going on??? I'm using Chrome btw. In Safari the image was just straight black. I think I've stumbled on a cursed picture.
Here's the css
body {
font-family: Calibri, Arial;
text-align:center;
*/background-repeat:repeat-y;
background-size: 100%;*/
}
input {
padding: 3px;
font-size: 22px;
}
select {
padding: 4px;
}
/*-----CLASSES-------*/
More stuff here
Try pressing ctrl+r to clear Chrome's cache.
It probably cached the css you were using before in your browser (and possibly the image too?) That's the only answer that makes much sense. You can force-clear the browser's cache of the css by changing the call to the file my-styles.css?abcdefghijkl in your html (or wherever it is you are loading up the styles from).... but manually clearing your cache will work too.
You may want to incorporate a dynamic Cache Control... every time you change the theme with javascript, have it change or reload the cache so your users won't have to continuously clear their own cached files when they change the theme... Depending on what server you are using, you can do this with php and .htaccess or .NET and web.config, im not sure if there is a way to do it with javascript directly..?
I have written some stylesheets - including a print.css - and it's working fine.
I'd like to remove the URL from printing out on each of the pages. I am beginning to wonder if it is impossible. Is there an element/option that I can set to display:none to do this?
The reason is that the specific pages that have a 'normal' and 'print' stylesheet have been specially formatted so when printed, it forms a meaningful booklet. Therefore the URL is irrelevant.
In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (view page source :: tag HTML).
In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.
In others browsers, I don't know, but you can view http://www.mintprintables.com/print-tips/header-footer-windows/
Sadly, no. The header and footer are generated by the browser. Only the end-user can change the footer - it might be an idea to give the user a step-by-step for each browser what to do. See for example here for a set of illustrated walk-throughs for windows based browsers.
The only alternative I know of is generating PDFs, with which you have full control over the printed output.
Use that code.that will help to solve your problem
#media print
{
#page { margin: 0; }
body { margin: 1.6cm; }
}
#media print
{
a[href]:after { content: none !important; }
img[src]:after { content: none !important; }
}
you can try this in the stylesheet:
#page{size:auto; margin-bottom:5mm;}
But this also removes the page number
This solution will do the trick in Chrome and Opera by setting margin to 0 in a css #page directive. It will not (currently) work for other browsers though...
It depends on your web browser. If you're using Firefox you can adjust or turn off those header and footer lines (URL, page number, etc) by going into File > Page Setup then clicking the Margins & Header/Footer tab.
If I understand you correctly, you talk about the page headers and footers. They are printed by the browser. They are not part of your HTML content, so you can't influence them directly.
Show your users how to disable headers and footers in the «Page setup...» dialog.
The headers and footers for printing from browsers is, sadly, a browser preference, not a document-level element that you can style. Refer to my very similar question for further workarounds and disappointment.
Historically, it's been impossible to make these things disappear as they are user settings and not considered part of the page you have control over.
http://css-discuss.incutio.com/wiki/Print_Stylesheets#Print_headers.2Ffooters_and_print_margins
However, as of 2017, the #page at-rule has been standardized, which can be used to hide the page title and date in modern browsers:
#page { size: auto; margin: 0mm; }
Credit to Vigneswaran S for this tip.
Remove the url from header and footer using below method
#page { size: letter; margin-top: 4mm;margin-bottom: 4mm }
I've also tried everything but finally I'm writing below code to make URL shorter:
var curURL = window.location.href;
history.replaceState(history.state, '', '/');
window.print();
history.replaceState(history.state, '', curURL);
But you need to make a custom PRINT button for user to click.
Now we can do this with:
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
Source: https://stackoverflow.com/a/14975912/1760939
I assume that you are talking about the URL that shows in the footer of the page.
If so, this is set by the browser and it is not something that you can do from your code.
I am not sure but the URL is added by a browser when you want to print. It is not part of the page so can not be affected by CSS. Maybe there is a way but it will be browser dependent.
i found something in the browser side itself.
Try this steps. here i have been mentioned the Steps to disable the Header and footer in all the three major browsers.
Chrome Click the Menu icon in the top right corner of the browser. Click Print. Uncheck Headers and Footers under the Options section.
Firefox Click Firefox in the top left corner of the browser. Place your mouse over Print, the click Page Setup. Click the Margins & Header/Footer tab. Change each value under Headers & Footers to --blank--.
Internet Explorer Click the Gear icon in the top right corner of the browser. Place your mouse over Print, then click Page Setup. Change each value under Headers and Footers to -Empty-.
This is a browser issue. But you can handle this problem by these line of codes:
<style type="text/css" media="print">
#media print
{
#page {
margin-top: 0;
margin-bottom: 0;
}
body {
padding-top: 72px;
padding-bottom: 72px ;
}
}
</style>
For Internet Explorer, go to Tools. Click on the print option and then page set up. Under headers and Footer, make all the choices "empty". Then it will not print out on your printed pages.
I hope this helps.
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/