Solved

Better transition between pages

Posted on 2008-10-15
11
223 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now