Goodies to Go ™
January 26, 2004–Newsletter #269
This newsletter is part of the internet.com network.
http://www.internet.com
Featured this week:
* Goodies Thoughts – Push You, Pull Me
* Q & A Goodies
* News Goodies
* Goodies Peer Reviews
* Feedback Goodies
* Windows Tech Goodies
* And Remember This…
Goodies Announcement
The new Beyond HTML Goodies book
is now available!
Go beyond the basics
and learn how the pros add and use dynamic HTML features and advanced
JavaScript techniques. Beyond HTML Goodies demonstrates dozens of new and
different features readers can add to their existing Web pages using HTML and
JavaScript. The book starts with simple text and image tips, such as adding a
clock to a Web page or causing text to appear when the mouse moves over an
image. It gradually builds to more complex tricks, including manipulating forms
or working with cookies behind the scenes. Throughout the book, readers enjoy
Joe’s snappy style and “to the point” discussion of each “goody” in the book.
http://books.internet.com/books/0789727803
Goodies Thoughts – Push You, Pull Me
You’re familiar, no doubt, with those long saws with a handle at
each end, designed to enable two people to cooperate in cutting a log in half.
The idea is that while one person is pulling, the other is pushing so that the
effort required to achieve the cut is shared between the two. That’s great for
the people involved since they only have to do half the work each — except, of
course, that the boss will make them do twice as many cuts!
A website can also push and pull. On the website, however, you (the designer)
will be doing all the work associated with either the pushing or pulling — at
least as far as writing it is concerned! (You will be able to leave the
computers to do the actual pushing and pulling!) Usually you will choose either
push or pull, although I suppose there could be reasons to do both at once.
On a website, the two techniques we’re talking about here are "Client Pull" and
"Server Push". These are both techniques for creating dynamic content. You might
want, for example, to provide a price for something that changes every few
minutes like a stock, or a message that changes periodically or even commercial
ads in a rotation that changes every minute. There are many ways to provide this
sort of capability, but Client Pull and Server Push provide a simple mechanism
using no more than HTML — no CGI or PERL needed!
Typically, when a web surfer uses their browser (their client side web program)
to navigate to a particular page, the browser identifies the server holding the
required page, opens a connection to the server and sends a request for that
page to the server. The server then finds the requested page file sends it back
to the browser and closes the connection. The browser then displays the page.
Server Push is where the server sends something down to the client browser, but
doesn’t "complete" it and close the connection. The browser displays it, and
waits for the server to close the connection. Before completing the send and
closing the connection, the server sends more data to the browser, telling it to
display the new data in place of some of that already being displayed. The
server can continue to send replacement data until either it chooses to close
the connection or the web surfer instructs their browser to close the connection
(by clicking "Stop" or by navigating to a new page.)
Client Pull is where to browser has received a page and displayed it, the
connection to the server has been closed, but the page contains an instruction
that tells the browser to request a fresh copy of data after a specific period
of time. When the request is sent out and new data is received it is displayed
in place of the old data. This could be a whole new page, or it could be just a
part of it — that depends on the website programmer.
Now that you are clear on what these techniques are, and no doubt can see an
immediate need for them, you’ll want to know how to use them. Come back next
week as I continue with this topic, and you’ll find out – instructions will be
complete with examples!
Thanks for Reading!
– Vince Barnes
Q & A Goodies
Questions are taken from submissions to our Community Mentors. You can ask a Mentor a question by going to
http://www.htmlgoodies.com/mentors.
Q. After reading the JavaScript Primers by
Dr. Joe Burns in the HTML Goodies home page I started to create my first own
JavaScript homepage. Everything went fine and I managed to make the page the way
I wanted. However, I had only checked the results in Microsoft Internet
Explorer, and when I in the end checked it with Netscape (6.2) the JavaScript
did not work. I think this is very strange since in the beginning of Dr Burns
Primers it’s written that JavaScript was created by Netscape people. So, have I
somehow used a MSIE version of JavaScript? Where is it possible to find
information about Netscape compatible JavaScript?
As a JavaScript-example that works in MSIE but not in Netscape my page tries to
use SPAN to have another color on the links when the mouse goes over them. So in
the beginning of my code it looks like this:
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Map</title>
<STYLE>
SPAN{cursor:hand;}
.onme1{color:purple;}
.offme{color:blue;}
</STYLE>
</head>
<script language="JavaScript">
<!– Hide from browsers that do not understand Javascript
function getonme() {
el = event.srcElement;
if (el.getAttribute("litUp1")!=null) {
el.className="onme1";
}
}
function getoffme() {
el = event.srcElement;
if (el.getAttribute("litUp1")!=null) {
el.className="offme";
}
}
document.onmouseover = getonme;
document.onmouseout = getoffme;
.
.
.
and so on …
And then a link looks like this
<a href="argentina.htm"><SPAN litUp1>Argentina</SPAN></a>
So in MIE the link ‘Argentina’ goes purple when the mouse goes over it but not
in Netscape. There are many other functions in my page that works in MSIE but
not in Netscape. I would be very grateful for both general information about
where to find information about Netscape vs. MSIE JavaScript and/or how to solve
my specific problems.
A. First a little history. When Joe wrote his books, Netscape was at
version 4 and yes, they did do a lot of work to develop JavaScript. At about the
same time, Microsoft wanted Internet Explorer to dominate the web and
implemented JavaScript in different ways. The result was that web developers had
to cobble together JavaScript that would first detect which browser the visitor
was using and then follow a script designed for that particular browser. In
other words, developers had to write two scripts where one should have sufficed.
At about this time, the World Wide Web Consortium, referred to as the W3C, set a
standard for all browsers to follow. One of the casualties was Netscape’s
support for layers, among others. Mozilla, which was affiliated with Netscape,
was developing a W3C compliant browser. Netscape adopted Mozilla features into
it’s version 6 browsers (We’re not sure what happened to 5) and they were
significantly more compliant than the current Internet Explorer version 5 as
well as Netscape 4. Although cross browser scripting became a little simpler, it
was still often required. The latest versions of both browsers, Netscape 7 and
Internet Explorer 6 are imminently better at W3C compliance and it is now
possible to build a web site with very little cross browser scripting, if any.
This history is very simplistic and the order of events may not be accurate.
Current technology as set by the W3C (http://www.w3.org)
uses a combination of HTML, JavaScript, and Cascading Style Sheets (CSS) all
following a Document Object Model. The standards as described by the W3C on
their web site tend to be very technical and rightfully so. You will find sites
such as Mozilla (http://www.mozilla.org)
describe these standards in a manner more easily understood as well as providing
examples.
I noticed from your meta tags that you are using FrontPage to build your page.
Keep in mind that this is a Microsoft product and it will build a page that
works in Internet Explorer, but the pages will often not conform to W3C
standards and they will sometimes break in other browsers as you have found out.
Now on to your question:
<a href="argentina.htm"><SPAN litUp1>Argentina</SPAN></a>
does not conform to W3C. Argentina is part of a link. To change its color,
change the attribute of the link. Try it this way:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Map</title>
<style type="text/css">
a {color:blue;}
</style>
<script type="text/javascript">
<!– Hide from browsers that do not understand Javascript
function getonme() {
document.getElementById("litUp1").style.color="purple";
}
function getoffme() {
document.getElementById("litUp1").style.color="blue";
}
//–>
</script>
</head>
<body>
<div>
<a href="argentina.htm" id="litUp1" onmouseover="getonme()"; onmouseout="getoffme()";>Argentina</a>
</div>
</body>
</html>
I looked at the source code for your web page and noticed that the JavaScript is
not between the head tags. Try moving it to between the head tags as in my
example above. I also noticed that you are relying on tables to position your
content. Although it works, a search on the net will return some interesting
articles on the use of CSS and div tags for positioning of elements on a page.
Use the following key words for your search:
CSS div positioning elements tutorial
Google gave me 2030 results.
Q. Not to be nit-picky, but I noticed in many of the JavaScript examples
that are provided in the HTML Goodies newsletter, the following declaration is
used:
<script language="javascript">
whereas my understanding is that the proper declaration should be:
<script type="text/javascript">
A. You are not being "nit-picky". I myself am guilty of using the first
example where I should be using the second example. I guess old habits die hard.
Q. I’m trying to get some JavaScript running. I’m able to parse two vars
to a function, the third one will not work.
This is the function:
<SCRIPT LANGUAGE="javascript">
function nieuw(a,b) {window.open (a, b, config=’height=600,width=200,toolbar=no,
menubar=no, scrollbars=no, resizable=no,location=no, directories=no,
status=no’)}
</SCRIPT>
It’s called by:
<a href=# onclick="nieuw (‘bijeenkomsten.html’, ‘newwindow’)">Bijeenkomsten</a>
My goal is to have the screensize set by the calling function, so far i’m unable
to do that. I tried by replacing the height and width values by var’s, tried to
put the height and width into the caller, nothing works. Is it possible to do
that or not, if yes how?
A. Actually, you can do it without calling a function. Try this for your
code:
<a href="javascript:location=’bijeenkomsten.html’;
window.open(‘bijeenkomsten.html’,’Bijeenkomsten’,
‘height=600,width=200,top=10,left=10,toolbar=no, menubar=no, scrollbars=no,
resizable=no,location=no, directories=no, status=no’)">Bijeenkomsten</a>
Notice that I added two more attributes, top and left. You can determine where
to position the window as well. If you need to use the function, your call is
good, except for one possible item. Is newwindow the title of the window? If
not, replace newwindow with the title (could it be Bijeenkomsten?)
As for the function itself, remove config=.
Here it is:
<SCRIPT LANGUAGE="javascript">
function nieuw(a,b) {window.open (a, b, ‘height=600,width=200,toolbar=no,
menubar=no, scrollbars=no, resizable=no,location=no, directories=no,
status=no’)}
</SCRIPT>
Q. Is there a way to use a background image without it repeating? I’d
like the bgimg to simply enlarge itself to encompass each visitor’s window,
instead of doing the tile effect
A. You are not going to be able to get the image to enlarge itself for
every resolution. In fact the site you sent has the image repeating. I even
looked at it on various resolutions and it repeated in all of them. That being
said, you can use some CSS – Cascading Style Sheet – to get an image to only
show once as a background. Here is the code you should use:
<style type="text/css">
<!– body {background-image: url(images/your_image_name.gif); background-repeat:
no-repeat;} –>
</style>
Make sure you change the path and image name to suit your situation.
Q. I designed my site to work off of tables, but recently have found that
when I make a change to the textstyle, left menu, or any of the background
images, I have to go through a very frustrating process of updating all 75 pages
on my site. Is there any way to make this process easier, like to have a master
page set up that all the rest of the pages can use to follow?
A. To make updating easier in the future you should use dynamic includes
and an external style sheet. An "include page" is an actual page but you use
some code to tell the browser where to include it on the page. This cannot be
done with a static HTML page. The page needs to be dynamic. To do this you would
have to change the file extention to ".asp", ".shtml", ".cfm" or another file
extension that your server would support. When the browser starts to load the
page it "sees" the extension and knows that somewhere in the page there could be
some dynamic code that it needs to process.
This tutorial will show you how:
http://www.htmlgoodies.com/beyond/asp.html
For an external style sheet you need to creat a page with your current style
sheet and name it with a ".css" file extension. THen in the HEAD section of your
HTML your would replace the style sheet you have now with the following line:
<LINK REL=stylesheet HREF="http://www.your.page/style.css" TYPE="text/css">
Use that on all of your pages and all you have to do is update that one style
sheet and all of the pages will be affected. For the tutorial on CSS:
http://www.htmlgoodies.com/tutors/ie_style.html
Q. I have used the following script on one of my pages so that which ever
screen resolution the user has, they can see the image fully.
<SCRIPT LANGUAGE="JavaScript">
if (screen.width == 640)
{document.write("U can’t see this image. Change to a higher resolution!")}
if (screen.width == 800)
{document.write("<IMG SRC=images/800xmusic.jpg>")}
if (screen.width == 1024)
{document.write("<IMG SRC=images/1024xmusic.jpg>")}
if (screen.width == 1152)
{document.write("<IMG SRC=images/1152xmusic.jpg>")}
That all works fine. What I can’t get to work or figure out is how to add info
(text, links, etc) to the page on top of the image? It just all appears at the
bottom of the page under the image.
A. I believe what you want to do is change the "background" image of the
body. Try this instead:
if (screen.width == 640) {document.write("<body>")}
if (screen.width == 800)
{document.write("<body background=’images/800xmusic.jpg’>")}
if (screen.width == 1024)
{document.write("<body background=’images/1024xmusic.jpg’>")}
if (screen.width == 1152)
{document.write("<body background=’images/1152xmusic.jpg’>")}
You will need to place this script where your body tag would normally be and
remove your body tag. The will replace it. This script will create the body tag
with the correct background image that You want based on the screen resolution.
Also here are some scripts for changing the background image:
http://www.dynamicdrive.com/dynamicindex3/document1.htm
http://www.javascriptkit.com/script/cut176.shtml
News Goodies
eBay Revs Up Online Car Sales With Acquisition
[January 26, 2004] The online giant plans to spend
approximately $152 million to acquire mobile.de, a leading
German classifieds website for vehicles.
Click
here to read the article
Windows Mobile Surging in Euro PDA Market
[January 26, 2004] IDC says Windows Mobile systems software surpassed Palm
OS-based devices for the first time in 2003.
Click here to read the article
IBM’s Search Ends With Endeca
[January 26, 2004] Big Blue will use the Cambridge, Mass., company’s
technology to help online shoppers find computers and servers.
Click here to read the article
Latest "Apprentice" Reject an Online Media Vet
[January 26, 2004] Interactive media exec Sam Solovey reflects on his stint
as a reality TV star, and the mega-brand that is Donald Trump.
Click here to read the article
Real’s Helix Heads to Nordic Region
[January 26, 2004] TeliaSonera will use the Helix mobile platform to power
streaming delivery of audio and video content to GPRS and 3G cell phone
subscribers in Finland and Sweden.
Click
here to read the article
AOL, CBS Team For Vintage Super Bowl Ads
[January 26, 2004] Cross-media promo amplifies message on both channels.
Click here to read the article
CA Tailors Backup Software for Windows
[January 26, 2004] The storage player cozies up to Microsoft
ever more with the latest iteration of its backup software.
Click here to read the article
Yahoo! Debuts RSS Beta
[January 26, 2004] A ten-year-old technology may help publishers make an
end run around e-mailing updates.
Click here to read the article
IE Pop-up Blocker Defaults to "Off"
[January 26, 2004] Silence the pop-up death knells. With the beta
release of the service pack 2 update for IE, the news is there’s no news.
Click here to read the article
Linux Poised for Desktop, High-End Surge
[January 23, 2004] LinuxWorld touted the progress of open-source in the
enterprise app market, but consensus also emerged that low-end desktops and
high-end multi-processing systems aren’t far behind.
Click here to read the article
Every week a site is selected for review. Each week,
reviews of the previous week’s selected site are chosen for
publication on the HTML Goodies website.
The current week’s selected site is published in Goodies To
Go and in the Peer Reviews section of the website.
Current contact email addresses for submitting your site and
for submitting reviews are published in Goodies To Go.
If you would like to have your site reviewed, sign up for
the Goodies To Go newsletter in the Navigation Bar on the
left side of this page.
For full details about this program, see
http://www.htmlgoodies.com/peerreviews
Did you ever wish your newsletter was an easy two way communications medium?
Ploof! It now is!
If you would like to comment on the newsletter or expand/improve on something
you have seen in here, you can now send your input to:
mailto:nlfeedback@htmlgoodies.com
We already receive a lot of email every day. This address will help us sort out
those relating specifically to this newsletter from all the rest. When you send
email to this address it may wind up being included in this section of the
newsletter, to be shared with your fellow readers.
Please don’t send your questions to this address.
They should be sent to our mentors: see
http://www.htmlgoodies.com/mentors/
For those who are missing Peer reviews: we are once again
revising the Peer review program in the hopes of creating a
workable solution. The current plan is to move the new Peer
Review pages into place in the new year. All those who have
been selected for reviews in the past will be featured in
the new pages. The new method will make it much easier for
your peers to provide feedback and much easier for us to
handle the publication side of things. "Watch this space!"
It’s coming soon!!
Thanks again for all your feedback!
Top
Windows Tech Goodie of the Week:
Database Performance Philosophy
http://www.15seconds.com/issue/040115.htm
Here are some valuable tips on designing databases and
applications for
efficient querying.
*** And ***
Colors ASP.NET Sample Code
http://www.asp101.com/samples/colors_aspx.asp
Basically this script just plays around with some colors. That
said, it’s a
great example of a couple different things. Not only do I use
ASP.NET’s
HTML controls instead of the Web controls that I normally use,
but I also
show you how to apply a style to an HTML control. And if that’s
not
enough… it’s also the first time I’ve published something that
uses the
elusive OnServerClick.
Top
And Remember This . . .
On this day in…
1995 Russian Nuclear Missiles Almost Launched
On this day in 1995 the Russian early warning system detected a
missile launch near Norway. Russian military estimated only minutes
remained until impact on Moscow. President Boris Yeltsin, his
Defense Minister and his Chief of Staff were notified and the
Russian nuclear weapons system was switched into combat mode.
Yeltsin’s nuclear briefcase and that of his top military commander
were activated for the first time ever. Five minutes after launch,
Yeltsin was informed that impact would be outside Russian borders.
Three minutes later, he was told that the launch was most likely not
part of a surprise nuclear attack. By standard launch protocol,
Yeltsin would have been only moments from ordering a launch. The
missile was a Norwegian scientific mission launch from Spitzbergen.
Norway had informed thirty-five countries, including Russia, of the
launch two weeks previously, but the Russian Defense Ministry
neglected to inform the on-duty personnel at the early warning
center. The event raised a lot of international concern over the
condition of the Russian nuclear systems.
Today was also the day that: in 66 the passage of Halley’s
Comet (as later named) was recorded for the fifth time; 1788
Captain Arthur Philip formed penal colony at Sidney, Botany Bay,
Australia; 1837 Michigan became the 26th US State; 1838
Tennessee became the first State to prohibit alcohol; 1841
Hong Kong was proclaimed a sovereign British Territory; 1871
US Income Tax was repealed; 1875 George Green patented the
dental drill; 1905 the 3,106 carat Cullinan diamond was found
in South Africa; 1926 inventor John Baird demonstrated his
new "television" in London; 1939 first day of filming of
"Gone With The Wind"; 1945 Soviet troops reached Auschwitz
concentration camp; 1954 groundbreaking at Disneyland;
1972 flight attendant Vesna Vulovic fell 30,000+ feet without a
parachute and survived; 1992 the Americans With Disabilities
Act went into effect; 1998 President Clinton said "I want to
say one thing to the American people, I did not have sexual
relations with that woman, Miss Lewinsky"
Born today were: in 1871 journalist Warner Fabian (Samuel H.
Adams); US General Douglas MacArthur; 1904 Amnestry
International co-founder Sean MacBride; 1905 Austrian singer
(inspiration for The Sound of Music) Maria Augusta von Trapp;
1907 orchestra leadr Eddie Ballantine; 1918 Romanian
President (1967-90)Nicolae Ceausescu; 1922 English comedian
Michael Bentine; 1925 actor Paul Newman; 1928 singer
Eartha Kitt; 1946 movie critic Gene Siskel; 1958
comedienne Ellen DeGeneres; 1971 actress Tracy Middendorf;
Thanks for reading Goodies to Go!
