************************************************************
Goodies to Go ™
June 20, 2005 — Newsletter # 342
************************************************************
Featured this week:
* Q & A Goodies
* News Goodies
* Feedback Goodies
* Windows Tech Goodie of the Week
* And Remember This…
Tables For Layout
elements you are adding to a page? Think you know the answer? If so, great!
But you might want to read on anyway — the answer might not be so clear as
you think!
First, let’s discuss what we mean by "lay out the elements". Suppose we have
a page design that involves a heading across the top, a navigation bar down
the left side and the main body to the right of the navigation bar. Also
suppose, just for the sake of this example, that the navigation bar is a
tall, skinny image with an image map defining its various links (not
familiar with such an animal? — Check out https://www.htmlgoodies.com/tutorials/image_maps/
)
There are many ways to create such a page. For the sake of our example,
frames have been ruled out. Of the remaining options, one fairly obvious one
is to use tables. Such a page could have a table covering the entire
viewable area, and comprising two rows. The first of these rows would have a
cell, spanning two columns, and containing the heading, whatever that might
be. The next row would comprise two cells (columns), the leftmost of which
would hold our image map, with the rightmost holding the body of the page.
In the body, we might use another table (tables within a table cell are
perfectly acceptable) to lay out a few pictures with corresponding text in a
sort of checkerboard style. (By the way, if you’ve not used tables in this
way, or aren’t that familiar with them at all, check out https://www.htmlgoodies.com/tutorials/tables/
)
Job done! But is is right? With judicious use of table and cell size
parameters using both percentage and pixel measures, we can get the page
looking just the way we want it. There are those, however, who argue that
tables are meant for laying out columnar data, much as a spreadsheet does,
and that using them in the manner I just described is abusing the feature.
Instead, the argument goes, we should use, for example, CSS.
Cascading Style Sheets (see https://www.htmlgoodies.com/beyond/css/ and
https://www.htmlgoodies.com/beyond/css/css-ref ) can indeed do a wonderful
job of laying out a page such as this one. So, is CSS the right way to go,
or are tables right?
CSS is not particularly difficult, once you know it, and neither are tables.
My take is this: if you know CSS, use it; if you know tables, use them; if
you know both, use either and if you know neither, learn either, or better
yet, learn both.
There is no "right" answer. To propose that either is right is to get stuck
in, as Winston Churchill might have put it, a form of idle pedantry up with
which we shall not put! CSS and tables are tools. The product is the page.
If the page works and looks great, the job is done and it doesn’t matter
what tools the workers used.
Content rules!
Thanks for Reading!
– Vince Barnes
***********************************
Questions are taken from submissions to our Community
Mentors. You can ask a Mentor a question by going to
https://www.htmlgoodies.com/mentors/
Q. I am looking for JavaScript help in order to
pre-select a option in a select field inside a form. I am using server-side
scripting (PHP) in order to provide the selected value.
A. You could use PHP to create your option tag and select the option you want
that way. I have a small Help Desk application written in PHP that I have set up
dropdowns to select the date. I have them default to the current date. Here is
an example of the dropdown for the
month:
<select name="beg_req_month">
<?php
for($i=1;$i<=12;$i++)
{
if($i==$prob_month)
{print "<option value=’" . $i . "’ selected>" . $i .
"</option>n";}
else
{print "<option value=’" . $i . "’>" . $i . "</option>n";}
}
?>
</select>
The variable $prob_month is set to the current month in some previous code. For
JavaScript to set the selected option you would use a statement like this (which
sets the first option tag to selected):
document.form_name.select_name.options[0].selected=true
Q. How can I force a user to submit a form by clicking the "Submit" button only
and not by using the "Enter" key?
A. This script had the desired effect, but not in all browsers. It worked in
Netscape 7 and IE 6, not in Opera 6 and Netscape 4.
<script language="JavaScript">
<!– ;
function showAlert() {
alert("don’t do that");
return false
}
// end hide –>
</script>
<form action="http://yourcgiscript" method="post" onKeyPress="showAlert()">
<input type="submit" value="default value">
</form>
Q. I’m making a website with a "fixed" background. I can’t figure out how to
make the picture fit the browser perfectly on everybody’s system. Is there a
code I can place inside my document to alter the fixed background to fit the
browser? My site content will go into a smaller screen/box within the background
so there is no need for scrollers on my outside browser and my background image
doesn’t need to be tiled because it basically is my site.
A. You can use Cascading Style Sheets to fix a background image. The code would
have to be edited for your particular situation and image but here is the code:
<style type="text/css">
body {
background-image: url("/images/your_image_name.gif");
background-repeat: no-repeat;
background-attachment: fixed
}
</style>
Q. Is it possible to change the link color with the onMouseOver command?
A. Yes it is. I have done it using JavaScript (there is also a way using CSS).
Here is my JavaScript version:
<html>
<head>
<title>Change Link Color</title>
<style type="text/css">
/* Set colors for IE5.0+ and Netscape 6.0 */
.textRed {color:red}
.textBlue {color:blue}
.textLgreen {color:lightgreen}
/* Set colors for Netscape 4.0+ */
A.normal{color:blue}
A.over{color:red}
A.overb{color:lightgreen}
/* No underline on link for all browsers */
A{text-decoration:none}
</style>
<SCRIPT LANGUAGE="JavaScript">
/* This script was written by Jim Young of www.requestcode.com and has been
tested in Internet Explorer 5.0+, Netscape 4.0+ and Netscape 6.0. I use the
statement (this.className) to change the class for the links in NS6 and IE5.0+ .
The scripts below are strictly for NS4.0+ . Add links below that are in the same
order as your links in the body section. the format for the array is:
page to link to, the link name(what is displayed on your page), div id,
class(color) for the mouseover, and class(color) for the mouseout.
Make sure you separate them by a comma (,).
*/
var links = new Array()
links[0]="http://www.wsabstract.com,Website Abstraction,divLink0,over,normal"
links[1] ="http://www.requestcode.com,Requestcode,divLink1,overb,normal"
// Unless you absolutely have to DO NOT change the functions below.
function change(linknum)
{
if(document.layers) // Check for NS4.0+
{
linkval=links[linknum].split(",") // split out the values
linkpage=linkval[0]
linkname=linkval[1]
linkdiv=linkval[2]
linkclass=linkval[3]
var linkd="<A HREF="+linkpage+" CLASS="+linkclass+" onMouseOut=changeb(""+linknum+"")>"+linkname+"</A>"
var docwrta="document."+linkdiv+".document.write(‘"+linkd+"’)"
eval(docwrta)
eval(‘document.’+linkdiv+’.document.close()’)
}
}
function changeb(linknum)
{
if(document.layers)
{
linkval=links[linknum].split(",")
linkpage=linkval[0]
linkname=linkval[1]
linkdiv=linkval[2]
linkclass=linkval[4]
var linkd="<A HREF="+linkpage+" CLASS="+linkclass+"
onMouseOver=change(""+linknum+"") onMouseOut=changeb(""+linknum+"")
>"+linkname+"</A>"
var docwrta="document."+linkdiv+".document.write(‘"+linkd+"’)"
eval(docwrta)
eval(‘document.’+linkdiv+’.document.close()’)
}
}
</SCRIPT>
</head>
<body>
<SCRIPT>
/* If you add more links here make sure you update the links array with the same
url and other required information. Make sure they are entered in the array in
the same order as they appear on your page. Also remember to change the value
being passed on the mouseover and mouseout to the functions to match the entry
in the array. Make sure you use different names for each div. In the mouseover
for IE and NS6 you can change the class name specified by the statement
this.className to a color you have setup in the styles area in your head section
above. You should leave the class(color) for the mouseout the same as when your
link is displayed when the page is first loaded. I currently have them set to
blue which is the class normal.
*/
</SCRIPT>
<CENTER>
<H1>Link Effect Example</H1>
Run your mouse over the links to see them change color </CENTER> <div
id="divLink0" style="left:15; position:absolute; top:90; visibility:visible">
<a href="http://www.wsabstract.com" onMouseOver="change (‘0’);this.className=’textRed’"
class="normal" onMouseOut="changeb (‘0’);this.className=’textBlue’">Website
Abstraction</a> </div> <div id="divLink1" style="left:15; position:absolute;
top:120;
visibility:visible">
<a href="http://www.requestcode.com" onMouseOver="change (‘1’);this.className=’textLgreen’"
class="normal" onMouseOut="changeb (‘1’);this.className=’textBlue’">Requestcode</a>
</div>
</body>
</html>
News Goodies
***********************************
JBoss Rolls Rebuilt Portal 2.0
[June 20, 2005] The professional open source vendor launches a full-fledged
portal offering.
Read the article:
http://www.internetnews.com/dev-news/article.php/3514061
MasterCard: 40M Credit Card Accounts Exposed
[June 20, 2005] Credit card companies say sensitive information of millions of
accounts was laid bare through third-party processor.
Read the article:
http://www.internetnews.com/security/article.php/3513866
Pressure to Change Judge in Microsoft Antitrust Case
[June 20, 2005] Proposed changes in EU’s antitrust ruling could leave Microsoft
in limbo.
Read the article:
http://www.internetnews.com/bus-news/article.php/3513971
Single Sign-On, The Java Way
[June 20, 2005] Sun’s latest ID management products are geared for all of the
sign-on protocols for Web services.
Read the article:
http://www.internetnews.com/dev-news/article.php/3513936
EMC Dips Into Virtual Data Pools
[June 20, 2005] The information systems vendor adds the ability to create
virtual storage pools and boosts its replication software.
Read the article:
http://www.internetnews.com/storage/article.php/3513816
CA Aims to Help SMBs Protect, Secure and Migrate
[June 20, 2005] Computer Associates comes out swinging with its first-ever
suites designed for SMBs. The desktop, server and business protection suites
focus on security, backup and data migration.
Read the article:
http://www.internetnews.com/bus-news/article.php/3513846
Google Library: Peril For Publishers?
[June 17, 2005] Publishers haven’t decided whether Google Library means exposure
to new readers or copyright infringement on a massive scale.
Read the article:
http://www.internetnews.com/bus-news/article.php/3513586
Yahoo Mines The "Deep Web"
[June 17, 2005] New subscription service goes beyond generally accessible
content.
Read the article:
http://www.internetnews.com/xSP/article.php/3513736
PayPal Expands Services, Releases API
[June 17, 2005] On Monday, the online payment processor will announce its first
non-hosted product as well as an express checkout service and support for
purchases by phone, fax or mail.
Read the article:
http://www.internetnews.com/ec-news/article.php/3513686
Previewing Intel’s Cognitive Radio Chip
[June 17, 2005] The chip giant announced a design that will handle 802.11a/b/g,
and the unfinished high-speed 802.11n spec a preview of reconfigurable radios
of the future.
Read the article:
http://www.internetnews.com/wireless/article.php/3513721
Feedback Goodies
***********************************
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 helps 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
https://www.htmlgoodies.com/mentors
Thanks for all your feedback!
Windows Tech Goodie of the Week
***********************************
An Extensive Examination of the DataGrid Web Control: Part 18
n this 18th part of the An Extensive Examination of the DataGrid Web Control
article series we’ll look at an alternative approach to implementing
bi-directional sorting. We’ll also look at a simple method that will enhance the
appearance of our bi-directional sortable DataGrid.
Read on to learn more!
http://aspnet.4guysfromrolla.com/articles/061505-1.aspx
*** AND ***
Time-based Greeting ASP.NET Sample Code
Greet your visitors based on the time of day. A good example of working with
times and dates.
http://www.asp101.com/samples/welcome_aspx.asp
*** AND ***
Indigo Programming Model
In the first part of his series on Microsoft Indigo, Chris Peiris examines the
basics of SOA, explains how Indigo fits into the picture and the problems it
solves. He then introduces Indigo’s programming model and finishes by building a
sample Indigo web service using the Microsoft .Net Framework 2.0.
http://www.15seconds.com/issue/050608.htm
And Remember This …
***********************************
On this day in…
1632 Britain granted right to the Chesapeake Bay area to the 2nd Lord
Baltimore; 1782 the US congress approved the Great Seal of the United
States and the baled eagle as its emblem; 1793 Eli Whitney applied for
the patent for the cotton gin; 1837 at 18 years of age, Queen Victoria
ascended the British throne; 1863 The National Bank of Davenport, Iowa,
became the first bank to be chartered in the US; 1867 US President Andrew
Johnson announced the purchase of Alaska; 1893 Lizzie Borden was found
innocent of charges of axing her parents to death in Massachusetts; 1911
the National Association for the Advancement of Colored People (NAACP) was
incorporated in New York; 1944 the US Congress chartered the Central
Intelligence Agency; 1963 the US and the USSR agreed to set up the "Hot
Line"; 1977 the first oil entered the Trans-Alaska Pipeline, to arrive 38
days later at Valdez; 1990 Nelson Mandela arrived in New York to begin
his tour of the US;
Born today were: in 1909 actor Errol Flynn; 1911 actress Gail
Patrick; 1919 English actor Bruce Gordon; 1920 actor & trekker
DeForest Kelley; 1924 actor Audie Murphy; 1924 musician Chet
Atkins; 1928 actor Martin Landau; 1931 actress Olympia Dukakis;
1933 actor Danny Aiello; 1942 musician Brian Wilson; 1947
actress Candy Clark; 1950 musician Lionel Ritchie; 1952 actor John
Goodman; 1953 musician Cyndi Lauper; 1955 musician Michael
Anthony; 1967 musician Joseph Cathcart;
