I have an internal web application, that is IE specific, and uses a lot of IE specific modal boxes: (window.showModalDialog).
I recently received a request to remove the "flash" when navigating between pages of the site. To accomplish this, I just added a meta transition tag to my master page:
<meta http-equiv="Page-Enter" content="blendTrans(duration=0.0)" />
This works perfectly except for the modal boxes. When you launch a modal box, and then move it around, the web page behind it keeps a trail of the modal box instead of re-drawing the web page content. This prevents the user from moving the modal box to read anything that was behind it.
Is there a way to prevent the "flash" between pages in an IE specific site and have the site still work with modal boxes?
Please note, this is a large and complex site, so re-architecting it to not use modal boxes isn't an option.
This is an asp.net, c# web application, and all of my users are using IE 7 and IE 8 if it makes any difference.
-Edit-
To duplicate this, put the following into an html page, and open it in Internet Explorer:
<html>
<head>
<title>Test</title>
<meta content="blendTrans(duration=0.0)" http-equiv="Page-Exit">
</head>
<body>
<script language="javascript">
window.showModalDialog('modal.htm', window);
</script>
</body>
</html>
Have you tried the solutions from this page? It says you need to add a <link /> element to the head section (if you have the unstyled content problem [not the white-page problem]).
Also from Yahoo's Best Practices:
The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.
Make sure you have a <link /> element in the head of all your pages and make sure that you put these stylesheets at the top of the head section and <script /> elements after them (preferably AFTER all page content and immediately before the closing tag).
I know you said you can't use modals but I thought I'd share this example of a JS modal using jQuery and facebox. You don't even have to modify your calls to "showModalDialog" (if you do end up using this modal method you can still use your meta page-exit page transition trick).
window.showModalDialog = function(a){
$.get(a,function(html){
$.facebox(html);
});
};
window.showModalDialog('linkOnSameDomain.htm', window);
Your problem is that showModalDialog isn't handling DirectX surfaces (which is what you end up with when you mess with filters and transitions). IE isn't performing screen updates on the underlying surfaces while the dialog exists. You have no choice but to stop creating those surfaces (stop using transitions) or to use a popup window as shown below. The only real difference is that the new window doesn't lockup the underlying page (which is generally a good thing but you may have to prevent further scripts running if your app relies on it) and you may need to handle any buttons in the dialog differently if you were returning results to the parent (like ok/cancel).
Be aware that IE8 security settings can restrict how much chrome you can hide. If you absolutely have to hide the address bar then you'll need to set "Allow websites to open windows without address or status bars" in the relevant security zone for each user PC.
<html>
<head>
<title>Test</title>
<meta content="blendTrans(duration=0.0)" http-equiv="Page-Exit">
</head>
<body style="background: transparent url(/images/backgrounds/brushed_aluminium.jpg) scroll repeat top left">
<script language="javascript">
var modal = window.open('modal.htm', '_blank', 'height=500,width=600,status=no,toolbar=no,menubar=no,location=no,resizable=no,titlebar=no');
</script>
</body>
</html>
I would avoid built-in page transitions if at all possible.
If the "flash" you are referring to is the page reloading between requests. I would look at two different areas:
Caching
Consider placing images into CSS Sprites and/or making sure you have long expiration dates on your content files. If your page is flashing, it is because the browser is having to grab loads of stuff from the server on each request.
CSS Sprites - CSS Sprites are images that contain several smaller images in one file, which are then referenced using the background-position CSS property. The benefits of this technique are:
Reduced requests to the server.
Once one page has loaded, images on other pages are already cached in the browser (within the sprite).
Content Expiation - If your page is flashing, but page layouts are similar between pages. This could be a symptom that your server is forcing your browser to expire content between requests and re-download everything each time. Look at the headers being set on your content by IIS, or consider setting up a CDN.
A CDN is a web site purpose built for delivering content for another site. The key feature of a CDN though is that headers and cookies are disabled which makes requests quicker and leaves the caching entirely to the browser.
Ajax
If you want to avoid the page flash completely, you need to start putting your page requests through using Ajax style requests. Because you are using ASP.NET, you have a number of options at your disposal, below are two of them:
Update Panels - Update Panels scale quite well, in that you can put an Update Panel around a single button or an entire page. Everything within the Update Panel is posted backed to the server using an Ajax request an the panel is then updated with the results. No page flash at all! I don't use Update Panels in favour off the next option, which provides more control, but is more advanced.
jQuery & Web Services - What I've described above, but controlling the process using Web Services (or Page Methods) and jQuery's Ajax methods.
I hope this helps,
Rich
Related
i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS
I found a website that has the same header for all the pages which never reloads when navigating through pages. After header loads once, it stays in place and the rest of the layout (content and footer) loads from page to page. Its pretty much like when you have a frameset but its not.
Mouse hover the upper menu and click on any item and you will see what I mean.
What is this technique called? I would like to know the name so I can research about it and learn it.
Thank you.
After reviewing the website you submitted I was able to find a javascript file, which as many people suggested uses ajax to load the contents into the page without reloading it, after the webpage is loaded the script triggers a hashchange which changes the url to match the one you clicked on using window.history.pushState as suggested by #escapedcat , the javascript also handles the animation and changes the classes of certain elements in the webpage to reflect it's state (updating, etc..)
The code is uglified but you can still see how this is done
link
edit
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 1</title>
</head>
<body>
<header>
<nav>Link</nav>
</header>
<div id="content">
this is the default content
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$('nav a').on('click', function(e){
e.preventDefault();
console.log('test');
$.get(this.href, function(data){
$('#content').html(data);
console.log(this);
history.pushState({foo:'bar'}, 'second page', 'page.html');
});
});
</script>
</body>
</html>
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 2</title>
</head>
<body>
This is page 2
</body>
</html>
The above changes the url, you still have to do further development of the code to get full functionality i.e.(back button)
you can refer to Page not reloading via 'back' when using pushState() / onpopstate to add this kind of functionality
edit:
The pushState() method
as the documentation states the pushState method recieves 3 arguments, a state object containing serialized information associated with the new history entry, the page title, and the page url, each time a user navigates to a new history entry the popstate method is fired and the state changes to represent the current state
The technique is called a "Single page application" (a.k.a. SPA).
You can create a SPA using any framework or library you wish (e.g. AngularJS, ReactJS, jQuery, etc) as long as you follow some guidelines.
A single-page application (SPA) is a web application or web site that
fits on a single web page with the goal of providing a more fluent
user experience similar to a desktop application. In a SPA, either all
necessary code – HTML, JavaScript, and CSS – is retrieved with a
single page load, or the appropriate resources are dynamically
loaded and added to the page as necessary, usually in response to user
actions.
Assuming that we're not loading all of the content in advance, the basic guidelines are:
When the server loads the page for the first time, you decipher the URL and return the appropriate page. The page should contain an identical template for all pages, while only a dedicated part of the html file is reserved for the dynamic content.
For example, all pages in my website should return the same header and load the same javascript files, the part that changes is only my #content element which contains the html of that specific page, according to the URL.
When the user clicks an internal link you perform the following operations:
Prevent the link from navigating, using event.preventDefault()
Change the URL yourself, using the history API (history.pushState(stateObj, title, path))
Load the content using Ajax and replace the the existing content with the new one.
Listen to popState events to detect change in the URL due to the use of the back and forward buttons. (window.addEventListener('popstate', handler))
Load content according to the new URL.
Note: The server needs to provide the content (without the rest of the template) using Ajax.
Concerning the "How", that is completely up to you as long as you understand the workflow of a SPA.
The technology used is Angular JS. If you want to learn this technology you can
use http://www.w3schools.com/angular/ or http://www.tutorialspoint.com/angularjs/
.If you want to see the page souce code you can right click and then go to inspect and right click and then go to inspect view page source. By Inspecting you will see the real time changes that are happening in the backend.
Im not sure how this person does it but how you could make this is:
When an user clicks on a menu item load the content with ajax (no refresh)
$(document).ready(function(){
$("menu-item").click(function(){
$("#content").load("something");
});
});
You can update the url with :
window.history.replaceState(“object or string”, “Title”, “/another-new-url”);
this updates the url without a refresh
If a user lands on a specific url you can pass the required data based on the url to load the right content.
You can use Meteor.js too.
Their own website is built using meteor.js and you can clearly see the functionality you want on that website.
You can achieve same by the a layers in css (click here to know more)
For the site you suggested there will be three layers
Image
Header(which will scroll down on mouse hover)
The Background image (That is Hidden by the Header)
i made a android app using it's web view. there contain a lot of functions. payment integration etc. i integrate this payment method using a third party tool. This tool provide an external html page. when i load this page directly in to my web view it's work nicely.
but after i got a requirement that there need a back button in the payment page. after then i add this page using an IFRAME. after there is number of issues came related to the design. the content is not fitting in the IFRAME also there is not displaying the scroll bars.
i tried differant kind of javascript method but no output.
If any solution present for this
Answer to the iframe scrolling problem
1.Zoom in until the iframe portion of the page completely fills the screen.
Tes might activiate the scrollbar and allow you to scroll the iframe.
2.Try double-touching the screen. This means you use two fingers to scroll on the iframe area.
3.If neither #1 or #2 work, try a different browser such as Dolphin, xScope, or Opera.
If none of those three work, try out Firefox. I listed Firefox separately and last because it is slow and resource-intensive on Android, but if it's your only recourse, then use it only when you must.
Can you provide more information on the content not fitting inside the iframe?
I wish to disable loading the plone site if JS is disabled in the browser. Where exactly do I change the code? Which template/skin do I choose? I want to ensure that JS is always enabled while browsing any part of the plone site.
While browsing, if JS is disabled, I can redirect to another page with tag to enable the JS in the browser and give a hlink to the site back if it is enabled. I am using Plone 4.1
There is no way to enable JS without the user doing it himself from the browser settings. You can add instructions on how to enable JavaScript or redirect to a page which has the instructions by using the noscript tags like this:
<noscript>
<meta http-equiv="Refresh" content="5;url=http://example.com/foo/bar.php?js=false" />
</noscript>
The meta tag redirects to your no JS page in 5 seconds to allow browsers to come to the current page by clicking the back button. If the time of the redirect is too little, the page may not be saved in the history according to this article
Are you willing to also require cookies? If so, one way to solve this is:
Modify Plone's main template to include a test for a particular cookie.
If that cookie is not found (test with template logic), show the "oops, you need js" content.
In that no-cookie content section, include inline javascript to set a cookie and reload the page. If you don't want to allow js to set cookies, you can still set a query parameter on the redirect.
If the cookie or query parameter is found, return the real content. If the query parameter, set the http-only cookie.
If you want to avoid cookies or other sessioning mechanisms, an alternative approach would be:
Modify Plone's main template to
Set a display:none style on the visual portal or similar wrapper;
Add a JavaScript-needed to view this page message with display style on;
Put in inline JavaScript to set display:none on the JS-needed message and display:block on visual portal wrapper.
The gotcha on this is that the pages will actually be loaded w/o js — just not displayed. It's also certainly possible that the js-needed message might flash up while other resources load. Make sure the JS display fiddling is inline (not keyed to page ready or any other event) to minimize the effect.
Your pages must be loaded by JavaScript, which replaces static page Please enable JavaScript in your browser. This is only way to solve the problem.
I have no experience in Plone and don't know what template do that.
I have a web application that uses quite a bit of JavaScript.
When the page loads, it's very clear visually that something is blocking the rendering of a particular portion of the web site. This portion is generated by a Tabber Tabify JavaScript library.
How can I determine what's blocking the HTML rendering specifically so that I can modify my code to prevent this blocking?
Can I use Firebug, or some other tool, to walk through my HTML/JavaScript to determine where the HTML rendering is being blocked and if so, how?
UPDATE:
YSlow gives my web-application a score of "A" and Page Speed give a score of 94/100.
UPDATE 2:
The live site is linked below.
http://www.elite.com
What I'm specifically referring too is the actual Tabs themselves being rendering (and NOT the panel content inside the tab panes). It seems strange to me that the Tab headings themselves are taking so long to generate on the first (empty cache) page load.
A few possibilities:
Loading scripts in your page will block rendering (the only fix for this is to put them in the head (blocks initial rendering) or at the end just before the </body> or load them after the page is loaded (e.g. onload)
Whatever the Tabber/Tabify tool is, needs time to process content... see if there is a way to optimize it.
Either way, if you post some code we can likely be of more help
Update:
If I load the page with my cache cleared, I see content rendering on the screen, then hiding (as it becomes hidden tab content)
Changing the non-visible content to display:none; when loading, and then only setting it back to display:block; once the Tabify stuff is done might help (a) speed up the rendering and (b) remove any flash of content that later gets hidden.
The RadComboBox'es you have load inline (which means the scripts block rendering)... if you can delay this until the onload event fires it will speed up rendering.
I would move the Unica Page Tag (tracking) to the end of your page too.
You have 8 external script files - if there is any way you can combine them it would be good.
You don't have gzip turned on for most of those script files
All of your static content (images, css, scripts) don't have an expires header which means they won't get cached, which means pages won't load fast after the first page.