Solved

Make webpage panel show links + adverts if online, hard-coded text if offline

Posted on 2008-06-22
6
271 Views
Last Modified: 2008-06-24
Our user will download a single html page to their desktop.

The page includes a panel that has info against a background the same colour as the surrounding page.

If the user is online when s\he runs the page in IE6+, we want the panel to display links and\or adverts that it retrieves from our server.

If the user is offline we'd like the panel to simply display text that is hard-coded into the page, (likewise, against a background the same colour as the surrounding page).

The objective is tidiness.
0
Comment
Question by:NEILPH
  • 3
  • 2
6 Comments
 
LVL 4

Accepted Solution

by:
sajay_j earned 250 total points
ID: 21844078
Use adverts or image using absolute path from the server. If image is not available at the moment when user is offline, it will show "alt"  alternate text or title text for missing image.

<style>
<!--
body {
    background-color:#ccc;
    color:#666;
}
-->
</style>

<table width="100%" height="300px" cellpadding="0" cellspacing="0">
<tr>
<td><img src="absolutepathofadvertfrom server" width="" height="" alt="This text shows as offline message" title="This text shows as offline message" /></td>
</tr>
<tr>
<td>regular text goes here ...regular text goes here ...regular text goes here ...regular text goes here ...regular text goes here ...regular text goes here ...regular text goes here ...regular text goes here ...regular text goes here ...regular text goes here ...regular text goes here ...</td>
</tr>
<tr>
<td>Footer of the page. Here comes some link or the close button for the same page</td>
</tr>
</table>

I am not sure whether this is right.... Is this what you mean...?
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 21844718
Neilph: This may not always work as expected.  Give us a little more information.  Will your clients be connected via the internet or via an intranet?  What circumstances would you expect for your user to be offline?

My concern here goes to the way the browsers work.  If a client tells his browser to check for new copies of a web page ALWAYS, it will display an error if the server or browser is offline.  OTOH, if your server has changing contents and web adverts, you would want the browser to check and present the new contents, so caching would work against you.  You can, of course, tell the browser that the data is expired on every page load, and that will induce a new page fetch.  But the choice of whether to be online or offline, and how to handle page refresh requests rests with the client and resides in the client  machine.  Tthe server has essentially no control over that at all.

Your wisest approach is to design your applications so they work no matter what the client does.

HTH, ~Ray
0
 

Author Comment

by:NEILPH
ID: 21850766
Thanks guys.

I'll try sajay's code and see if it does what we want.

Let me describe the exact user situation. We will be offering a web service where all the user sees is a single ordinary HTML page. The user enters info and clicks Submit to connect to our server and start a process.

However, before they enter the info they obviously have to run the web page in their browser [IE6+]. It is at this point when the page first renders, that they will see a panel in the page. This panel has a 'Help' link in it to our main site, plus possibly an advert appearing automatically in the same way Google adverts run at many websites.

So far so good. The problem is that we will be offering a free demo. All this requires is for the new user to download the web page onto their desktop and then run\browse it by clicking the desktop icon.

Inevitably this means that some computer-illiterate people are going to run the page on their home computers, perhaps forgetting to turn their broadband on first.

In this situation we still want to look good. We don't want a clunky "404, page not found" message to appear in the middle of our page.

Maybe the answer is to figure how Google handle this situation.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 250 total points
ID: 21851639
Try shutting off your internet access and using your browsers - be sure to test at least IE6, IE7, FF, Safari and maybe Opera on a few different web sites.  You'll get the flavor of what you can expect your users will experience.  Honestly, trying to make a web site compensate for a client who has no internet access is like making the power company compensate for the fellow who forgets to plug in his toaster!  Anyway, good luck!
0
 

Author Comment

by:NEILPH
ID: 21851755
Ray

I love the toaster. You're right, this is really a PR exercise to try and keep us looking professional.

I've put up a test web page http://www.isc.co.nz/ee_test.html showing my attempt so far. The page code is in the snippet below.

The page simulates adverts with two images. The man appears, simulating being online. The other image doesn't exist and shows alternative text, simulating being offline.

All fine so far (although it would be nice not to see the vacant image placeholder).

But if you click the Help link it takes you to a non-existent page simulating being offline. If I could show a piece of hard-coded text instead of the "page not displayed" message I'll have what I need.

Possible?


<!-- saved from url=(0022)http://internet.e-mail -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>

	<title></title>

		

		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

		

		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/reset-fonts-grids/reset-fonts-grids.css" />

		<link rel="stylesheet" type="text/css" href="css/main.css" />
 

	
 

			<script language='javascript' src='http://127.0.0.1:1027/js.cgi?pca&r=2082'></script>
 

</head>

	<body>

		<div id="wrapper">

			<div id="container">

				

			

<table width="100%" height="300px" cellpadding="0" cellspacing="0">

<tr>

<td><img src="http://www.xyztimes.com/q.jpg" width="800" height="100" 

alt="This text shows as offline message This text shows as offline message This text shows as offline message This text shows as offline message This text shows as offline message This text shows as offline message This text shows as offline message This text shows as offline message" title="This text 
 

shows as offline message" />

				<div id="main-leftcol"><img src="images/weechap.jpg" width="63" alt="Another offline message Another offline message Another offline message Another offline message Another offline message Another offline message "></div>
 

<a href="http://www.xyztimes.com">Help</a></td>

</tr>

<tr>

<td>regular text goes here ...regular text goes here ...regular text goes here ...regular text goes here ...regular text goes 
 

here ...regular text goes here ...regular text goes here ...regular text goes here ...regular text goes here ...regular text 
 

goes here ...regular text goes here ...</td>
 

	
 

</tr>

<tr>

<td>Footer of the page. Here comes some link or the close button for the same page</td>

</tr>

</table>

				

			</div>

		</div>

	</body>

</html>

Open in new window

0
 

Author Comment

by:NEILPH
ID: 21862834
I think I've taken this as far as I can.

Sajay's code works for images, using alt if not found. But it doesn't work if the user clicks a link.

Ray has given useful advice.

So, I'm going to see if I can split the points between you, or whatever this site lets me do.

I could probably reduce the size of the ugly "page not found message" page if I put an HTML FRAME around the links, but it sounds like overkill.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

757 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

19 Experts available now in Live!

Get 1:1 Help Now