Jump to content

Smooth Page Transitions


jtwalter
 Share

Recommended Posts

I've been learning a bit of PHP recently and have made it through most of the 'Learn PHP' pages on this site so I have a basic understanding.Recently, I've noticed there are sites where you can click a link in a side menu ('About Us' for example), and it takes you to the page without any disruption in the menu or header. There are many pages that use the same main menu throughout many pages, and they seamlessly transition from one page to another. On the contrary, classic html pages have that very small fraction of a second of blank screen between pages. My guess is this has to do with passing variables, so that you're actually on the same page.. but then I see the url has changed.A few examples of the seamless transitions are www.namibia-adventure-tours.com and all Joomla pages. I unsuccessfully tried googling my question, but I really don't know what to search for. Can anybody help me? I'm not looking for a long explanation, but if you could point me out to somewhere where I can learn about it.Thank you so much!(ps this site is amazing, I've learned so much! Thanks w3 people)

Link to comment
Share on other sites

There's actually nothing special about the pages you posted - they just load really fast. If you do want truly seamless transitions, however, you should look into AJAX.

Link to comment
Share on other sites

Even on my oldest computer, I am often able to view transitions between different HTML pages (no AJAX) with zero flicker.Part of this is server speed and transmission speed. If you have a slow connection (e.g., 56K) then you will get flicker. If your server begins to transmit but performs many calculations or database queries after that, then the window may be empty for a while. If a host is free and overloaded, then processing a simple HTTP request may take a while.If you are leasing host space and your pages require little or no processing, then things should move along pretty fast. This is a very common situation.The thing that works for you is image caching. If the banner area of your page features big images and toolbars and such, the first page to load may be slow, but pages using the same images should load very quickly. If the banner area on each page is structured the same, caching may result in zero flicker. This is the case with my blog, for example. A new page loads when you click a link, but only the content area seems to change.Notice that all this changes if you layout your page with a table framework. Most browsers do not render any part of a table until it has calculated the entire structure. This small delay can result in flicker, and if the table is very complicated, with nested tables etc., the window may go white for a second or so.

Link to comment
Share on other sites

Thanks for the replies! I really appreciate it. synook you must have replied while I was typing sorry I didn't see it.I see what you guys are saying about image caching and all, but for example on the site I'm currently working on www.slotstik.net, I have a 'php include' line that references the top banner and menu on every page. I expected this to be the solution that I was looking for but you can tell there is still flicker (I'm on very fast connection btw).Are you really saying there is no difference between page transitions on www.slotstik.net and the ones on this site (made with joomla) www.eb.org ?Thanks very much(I am reading all about ajax and DOM it looks killer)

Edited by jtwalter
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...