Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Better transition between pages

Posted on 2008-10-15
11
Medium Priority
?
243 Views
Last Modified: 2008-10-15
I'm redeveloping our company's website.  The background image is going to be an image that's a white background with a green bar going across in the middle.  The same background is used for every page.  when I change to different pages, that background image reloads and doesn't immediately appear with the rest of the content.  I've seen pages that it looks like only a certain area of the page changes and the rest (including a backgroudn image) doesn't have to reload.  Any suggestions on how to get this done?

I'm using Dreamweaver CS3 for site development.
0
Comment
Question by:sedberg1
  • 6
  • 5
11 Comments
 
LVL 21

Expert Comment

by:Julian Matz
ID: 22725379
Normally images should get cached. Check to see what response code is being sent for the URL of your image.

You can check this here:

http://www.pagerank.net/http-header-viewer/
http://www.ircache.net/cgi-bin/cacheability.py
0
 

Author Comment

by:sedberg1
ID: 22725464
From the first link:
HTTP/1.1 200 OK
Content-Length: 6134
Content-Type: text/html
Content-Location: http://www.floormuffler.com/index.html
Last-Modified: Wed, 15 Oct 2008 19:07:09 GMT
Accept-Ranges: bytes
ETag: "82493039f92ec91:3ea"
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
Date: Wed, 15 Oct 2008 20:26:03 GMT

From the second link:
http://www.floormuffler.com 
Expires     -  
Cache-Control     -  
Last-Modified   1 hr 19 min ago  (Wed, 15 Oct 2008 19:07:09 GMT) validated  
ETag   "82493039f92ec91:3ea"
Content-Length   6.0K (6134)  
Server   Microsoft-IIS/6.0  

This object doesn't have any explicit freshness information set, so a cache may use Last-Modified to determine how fresh it is with an adaptive TTL (at this time, it could be, depending on the adaptive percent used, considered fresh for: 15 min 56 sec (20%), 39 min 51 sec (50%), 1 hr 19 min (100%)). It can be validated with Last-Modified.
0
 

Author Comment

by:sedberg1
ID: 22725505
Could you please help me to understand what this stuff means?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 21

Expert Comment

by:Julian Matz
ID: 22725532
I meant the URL of the actual image.
Where is the background image you're using?
0
 

Author Comment

by:sedberg1
ID: 22725651
it was a test site only accessible internally.  And I got rid of the previous pages that wwere being a problem.  I need to add more pages but I know I'm going to come across the same things in the future.  I thought this was something that could've been done without lookking at the actual site.  I know I've seen something before where this has been done.
0
 

Author Comment

by:sedberg1
ID: 22725697
Here's the site, but it's nowhere near done since I redid the layout it has only one page:

http://67.103.165.7
0
 
LVL 21

Expert Comment

by:Julian Matz
ID: 22725704
Well, the NORMAL behaviour is that the image is cached and therefore doesn't need to be reloaded after each subsequent request. If this was not the case then there'd be something wrong, which is why I suggested checking the response headers.
0
 

Author Comment

by:sedberg1
ID: 22725748
I'm not talking about caching the images when someone's looking at them.  I'm talking about only having parts of a page change when someone clicks a link.  An example is www.vai.net.  Toward the middle of the home page, there are five tabs (what's new, learn about, etc) and the page doesn't reload, only the tabs change.
0
 
LVL 21

Accepted Solution

by:
Julian Matz earned 2000 total points
ID: 22725819
Oh right, I see what you mean now.

Basically, this can be done using 3 methods - Flash, Javascript or AJAX (which actually is Javascript).

Javascript can be used in combination with CSS to hide and display divs with onmouseover or onclick handlers. AJAX could be used to dynamically fetch content from the server and then display it in a certain defined area within your web page.

http://en.wikipedia.org/wiki/AJAX

To get started with AJAX and some nifty Javascript features, have a look at:

http://www.prototypejs.org/
http://script.aculo.us/
0
 

Author Comment

by:sedberg1
ID: 22725858
Well, for a non-programmer, looks like I'll be needing someone's help with this.
0
 
LVL 21

Expert Comment

by:Julian Matz
ID: 22726043
Well, if you're confident enough with HTML, it's really not as difficult as it might first seem. The two links I posted have some tutorials and examples that you could have a look at to see if it might be something you could do without investing too much time.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

885 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question