Reddit
Facebook
Twitter
del.icio.us
Digg
Slashdot
DZone
StumbleUpon
FriendFeed
Furl
Newsvine
Google
LinkedIn
MySpace
Technorati
Windows Live
YahooBuzzGoodies To Go! Newsletter #373
************************************************************
Goodies to Go (tm)
January 24, 2006 -- Newsletter # 373
Goodies to Go (tm)
January 24, 2006 -- Newsletter # 373
This newsletter is part of the internet.com
network.
http://www.internet.com
http://www.internet.com
************************************************************
Featured this week:
* Goodies Thoughts - Includes For Navigation
* Q & A Goodies
* News Goodies
* Feedback Goodies
* Windows Tech Goodie of the Week
* And Remember This...
* Q & A Goodies
* News Goodies
* Feedback Goodies
* Windows Tech Goodie of the Week
* And Remember This...
************************************************************
Includes For Navigation
Last week I discussed the notion of using frames
for easily creating a website navigation mechanism for your site visitors.
There can be a problem with this method, however, especially as it relates
to optimizing the site for search engine placement. There is, of course, a
way around the problem. In fact, there are several, but this week I present
a method that uses "Server Side Includes" to hold the page headings, menu
navigation bar and page footings in individual files that are "included" in
each page in the site.
For the purposes of illustration, I have set up
an example. I have also put a copy of the source for the individual pages
in a viewable text page on the site so that you can easily refer to them.
Viewing the source of the resulting page on the site doesn't show you where
the breaks occur, nor does it show you the "include" instructions. These
copies show all. The address of the example is:
http://www.upperlowerbury.com/menusample.asp
and the source code is at:
http://www.upperlowerbury.com/menusample.html
http://www.upperlowerbury.com/menusample.asp
and the source code is at:
http://www.upperlowerbury.com/menusample.html
To use Server Side Includes (SSI), they must be
enabled on the server that is hosting the site. Most servers these days are
configured to allow SSI, but if you have any doubt, check with your service
provider. If the server is running Unix (or Linux or similar) with SSI
enabled, any page can have an include instruction. On a Windows system (NT,
XP, 2000, 2003) includes are handled by the ASP preprocessor (asp.dll). By
default, the ASP preprocessor is invoked every time the server delivers a
page with a ".asp" extension. It will therefore be necessary to name pages
that have an include instruction with this extension. In my illustration,
which I have placed on a Windows 2000 server, I have named all the pages
this way including the "included" pages. This is for the sake of my ease.
It is only essential that pages which actually have the "include"
instruction follow this naming convention.
The format for an include instruction is as
follows:
<!--#include virtual="/ssi/head.asp" -->
Enclosed in the quotes is the pathname and filename of the file to be included. For good housekeeping purposes, I like to keep my "include"d pages in their own directory, named here "ssi".
<!--#include virtual="/ssi/head.asp" -->
Enclosed in the quotes is the pathname and filename of the file to be included. For good housekeeping purposes, I like to keep my "include"d pages in their own directory, named here "ssi".
To accomplish our desired end, we first need
three files, on each for the Headings, Navigation and Footers. These three
parts will then be "included" into each page of the site. These are the
files "head.asp", "nav.asp" and "foot.asp".
The header file contains all the page style
information, the JavaScripts and <body> tag parameters we discussed last
week, and the page header that is to appear on each page. All this
information is in this file alone, so changing it once, right here, will
affect every page in the site that uses this "include"d file. I have added
comments in the code to make it easy to tell where each section of the
resulting page (as seen, for example, with "View Source") came from. This
is a good idea for making life easier in the future!
The navigation file holds the menu, as we built
it last week. It then starts a table definition which includes a cell to
create space for the menu (see last week's discussion) and then begins a
cell which will contain the main body of the page. Remember, this file will
be "include"d in each page in the site, and so the cell start will precede
the content in that page.
The footer file holds the close of the main body
table cell and row. In my example, it then provides another table row that
holds copyright information. This information will now also appear in every
page in the site that "include"s this footer file.
The sample page I have provided illustrates the
use of the "include" statements. Notice that the content in this file
doesn't care that it is contained within a table cell (the one started in
the navigation file and ended in the footer file.) In this page file we can
lay out page elements however we want them. The table that contains them
will be wrapped around them when the page in rendered to the site visitor.
In my example, I have placed a bunch of paragraphs containing the letter "a"
so that the page will be long enough to show off the place holding
capability of the navigation menu.
At first, this example may seem to be a bit
complicated, but if you look at the various components, and at the resulting
pages on the site, you should be able to follow it easily enough. Once you
get the hang of it, you will have mastered a quite sophisticated technique
for easy web site maintenance.
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/
***********************************
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. Is there a way of naming spans partly with a
variable? I.e. insted of doing this:
document.all.sp1.innerHTML=('<img src=pt1.gif>');
document.all.sp2.innerHTML=('<img src=pt1.gif>');
document.all.sp3.innerHTML=('<img src=pt1.gif>');
document.all.sp4.innerHTML=('<img src=pt1.gif>');
document.all.sp5.innerHTML=('<img src=pt1.gif>');
document.all.sp6.innerHTML=('<img src=pt1.gif>');
document.all.sp7.innerHTML=('<img src=pt1.gif>');
document.all.sp8.innerHTML=('<img src=pt1.gif>');
is there any way like:
for( var n = 1; n < 9; n++)
{
document.all.sp + n + .innerHTML=('<img src=pt1.gif>');
}
document.all.sp1.innerHTML=('<img src=pt1.gif>');
document.all.sp2.innerHTML=('<img src=pt1.gif>');
document.all.sp3.innerHTML=('<img src=pt1.gif>');
document.all.sp4.innerHTML=('<img src=pt1.gif>');
document.all.sp5.innerHTML=('<img src=pt1.gif>');
document.all.sp6.innerHTML=('<img src=pt1.gif>');
document.all.sp7.innerHTML=('<img src=pt1.gif>');
document.all.sp8.innerHTML=('<img src=pt1.gif>');
is there any way like:
for( var n = 1; n < 9; n++)
{
document.all.sp + n + .innerHTML=('<img src=pt1.gif>');
}
A. You could try to use the eval() method like this:
eval("document.all.sp" + n + ".innerHTML=('<img src=pt1.gif>')");
Q. I want to have a small window open when
someone clicks a link on my page. I don't want a full size window, just a
small one. Can JavaScript do this?
A. Since you will probably have more than one
link on a page you should set up a function in your head section of your
document that will be used by multiple links. You can pass the html page
you want to load in the window to the function when the link is clicked on.
With window.open() you can set the
width, height, postion and other attributes. Here is an example:
<script language="javascript"> function OpenWin(linkid)
{ NewWin=window.open (linkid,"newwin",config="width=200,height=250,location=no,status=no,directories=
no,toolbar=no,scrollbars=no,menubar=no,resizable=no,top=30,left=30");
NewWin.focus()
}
</script>
The variable "linkid" contains the page you want to load. This was passed to the function when the link was clicked on. Then in the body section of your document your link could look like this:
<A HREF="javascript:OpenWin('somepage.html')">Apples</A>
You would wrap the link around the word that you want to click on for more info. The HTML Goodies site does have a tutorial on window.open()
(see http://www.htmlgoodies.com/primers/jsp/hgjsp_11.html and http://www.htmlgoodies.com/primers/jsp/hgjsp_12.html -- Ed.)
width, height, postion and other attributes. Here is an example:
<script language="javascript"> function OpenWin(linkid)
{ NewWin=window.open (linkid,"newwin",config="width=200,height=250,location=no,status=no,directories=
no,toolbar=no,scrollbars=no,menubar=no,resizable=no,top=30,left=30");
NewWin.focus()
}
</script>
The variable "linkid" contains the page you want to load. This was passed to the function when the link was clicked on. Then in the body section of your document your link could look like this:
<A HREF="javascript:OpenWin('somepage.html')">Apples</A>
You would wrap the link around the word that you want to click on for more info. The HTML Goodies site does have a tutorial on window.open()
(see http://www.htmlgoodies.com/primers/jsp/hgjsp_11.html and http://www.htmlgoodies.com/primers/jsp/hgjsp_12.html -- Ed.)
Q. I have been working on trying to come up with a better menu for my index page. I used Sothink DHTMLMenu to generate one. I have it working, but it takes quite a while for the menu to load. What is my problem?
A. I can't see your menu, but I can make a
couple guesses. You have a bunch of images that need to load to make the
menu work. The browser looks for them when you do your mouseover, which
means calling the server and asking for the image, and repeating the process
for each image. My first guess is you could fix your problem with a
preloader, so the images are already in the browser cache. Here's an example
of a preloader:
// preload images
var an_image1 = new Image(151,37);
an_image1.src = "images/navigation/options_home_over.jpg";
var an_image2 = new Image(151,37);
an_image2.src="images/navigation/easement_over.jpg";
var an_image3 = new Image(151,37);
an_image3.src="images/navigation/mutual_over.jpg";
This is a JavaScript that declares a variable as an image and specifies the size so the browser doesn't have to figure it out, and then give the variable a value consisting of a URL.
My second guess is that your images are large and taking a long time to download. Keep them small, like 3k each, or even eliminate them if you can.
Get rid of the "best viewed at" message. No visitor will change their screen setting just for your site, nor take the blame for he site not working at their screen setting. You just have to make it work at different sizes.
// preload images
var an_image1 = new Image(151,37);
an_image1.src = "images/navigation/options_home_over.jpg";
var an_image2 = new Image(151,37);
an_image2.src="images/navigation/easement_over.jpg";
var an_image3 = new Image(151,37);
an_image3.src="images/navigation/mutual_over.jpg";
This is a JavaScript that declares a variable as an image and specifies the size so the browser doesn't have to figure it out, and then give the variable a value consisting of a URL.
My second guess is that your images are large and taking a long time to download. Keep them small, like 3k each, or even eliminate them if you can.
Get rid of the "best viewed at" message. No visitor will change their screen setting just for your site, nor take the blame for he site not working at their screen setting. You just have to make it work at different sizes.
Q. I am working with a button on my page:
<STYLE>
.start {font-size: 8pt; color:#ffff00; background:#cc3333}
.end {font-size: 8pt; color:#cc3333; background:#ffff00}
</STYLE>
<SCRIPT LANGUAGE="javascript">
function highlightButton(s) {
if ("INPUT"==event.srcElement.tagName)
event.srcElement.className=s
}
</SCRIPT>
The above is placed above </head>
Then the <FORM></FORM> lines are placed where I need them to be below <BODY>
<FORM NAME=highlight onMouseover="highlightButton('start')" onMouseout="highlightButton('end')">
<INPUT TYPE="button" VALUE="Hot Computer Deals Of The Week!" onClick="location.href='http://www.tigerdirect.com/email/kb/promo.asp?ID=1671'">
</form>
I would like the button to start out as it appears for onMouseout="highlightButon('end')"
When the page loads, it is the standard grey default size button. Using <STYLE></STYLE> I now have some control over the button size by specifying font-size: 8pt; Of course, nothing happens until the cursor is passed over the button.
I tried some [ onload= ] ideas that didn't work. Is there a way to control the initial appearance of the button?
<STYLE>
.start {font-size: 8pt; color:#ffff00; background:#cc3333}
.end {font-size: 8pt; color:#cc3333; background:#ffff00}
</STYLE>
<SCRIPT LANGUAGE="javascript">
function highlightButton(s) {
if ("INPUT"==event.srcElement.tagName)
event.srcElement.className=s
}
</SCRIPT>
The above is placed above </head>
Then the <FORM></FORM> lines are placed where I need them to be below <BODY>
<FORM NAME=highlight onMouseover="highlightButton('start')" onMouseout="highlightButton('end')">
<INPUT TYPE="button" VALUE="Hot Computer Deals Of The Week!" onClick="location.href='http://www.tigerdirect.com/email/kb/promo.asp?ID=1671'">
</form>
I would like the button to start out as it appears for onMouseout="highlightButon('end')"
When the page loads, it is the standard grey default size button. Using <STYLE></STYLE> I now have some control over the button size by specifying font-size: 8pt; Of course, nothing happens until the cursor is passed over the button.
I tried some [ onload= ] ideas that didn't work. Is there a way to control the initial appearance of the button?
A. I added a class attribute to the INPUT tag. I
just used one of the classes you had already set in your styles, but you can
create another one. The javascript helps with the changes.
<form name="highlight" onmouseover="highlightButton('start')" onmouseout="highlightButton('end')">
<input class="end" type="button" value="Hot Computer Deals Of The Week!" onclick="location.href='http://www.tigerdirect.com/email/kb/promo.asp?ID=1671'" />
</form>
I'm not sure which version of HTML you are using... I'm used to writing in XHTML 1.0, so I've made the tags lowercase and added a / to the end of the INPUT.
<form name="highlight" onmouseover="highlightButton('start')" onmouseout="highlightButton('end')">
<input class="end" type="button" value="Hot Computer Deals Of The Week!" onclick="location.href='http://www.tigerdirect.com/email/kb/promo.asp?ID=1671'" />
</form>
I'm not sure which version of HTML you are using... I'm used to writing in XHTML 1.0, so I've made the tags lowercase and added a / to the end of the INPUT.
Q. I currently have a couple of javascripts that are used throughout my website. One for a date and another for rollovers. Can these two be placed onto one external js page with a single link to it, or should each be on separate pages with its own individual link?
A. Yes you can place both scripts in one ".js"
file and point to it this way:
<script src="myscript.js" language="JavaScript"></script>
One thing you will have to be careful of though is that if both scripts use variable names that are the same one of them will have to be changed or you will have a conflict. If you are already using them both on the same page then this should not be a problem.
<script src="myscript.js" language="JavaScript"></script>
One thing you will have to be careful of though is that if both scripts use variable names that are the same one of them will have to be changed or you will have a conflict. If you are already using them both on the same page then this should not be a problem.
Discussion Goodies
***********************************
Have you seen the discussion forums on the HTML
Goodies website? It's a great place to get help from others who, just like
you, are developing web pages. Many different topics appear in the forum,
and a new one will appear if you create it! Here's a sample of recent
topics:
Auto Refresh Frame Help?:
http://www.webdeveloper.com/forum/showthread.php?threadid=92743
http://www.webdeveloper.com/forum/showthread.php?threadid=92743
What does this do to the web address:
http://www.webdeveloper.com/forum/showthread.php?threadid=92789
http://www.webdeveloper.com/forum/showthread.php?threadid=92789
Form Field Calculations using PHP:
http://www.webdeveloper.com/forum/showthread.php?threadid=92791
http://www.webdeveloper.com/forum/showthread.php?threadid=92791
Flipping Images!:
http://www.webdeveloper.com/forum/showthread.php?threadid=92794
http://www.webdeveloper.com/forum/showthread.php?threadid=92794
News Goodies
***********************************
***********************************
Open Source Flash Player Revealed
[January 24, 2006] New effort to produce GPL Flash player a top free software priority.
Read the article:
http://www.internetnews.com/dev-news/article.php/3579371
[January 24, 2006] New effort to produce GPL Flash player a top free software priority.
Read the article:
http://www.internetnews.com/dev-news/article.php/3579371
'Botmaster' Pleads Guilty to Zombie Profits
[January 24, 2006] L.A. man faces 25 years for using botnet to spread spam, adware.
Read the article:
http://www.internetnews.com/security/article.php/3579591
A More Personal Side to Google News
[January 24, 2006] The company adds new customization options to its online news aggregator.
Read the article:
http://www.internetnews.com/xSP/article.php/3579501
IBM: Users Are The Weak Link in Security
[January 24, 2006] Widespead outbreaks are declining, but don't get too comfortable.
Read the article:
http://www.internetnews.com/security/article.php/3579356
180solutions Spyware Practice Far From Perfect
[January 24, 2006] CDT fingers the online advertising firm for causing 'immeasurable' harm to consumers.
Read the article:
http://www.internetnews.com/xSP/article.php/3579576
EMC Shows No Signs of Slowdown
[January 24, 2006] Technology stocks have been battered in recent weeks on earnings that have failed to live up to Wall Street's expectations, but EMC showed no signs of a slowdown in its quarterly report Tuesday.
Read the article:
http://www.internetnews.com/storage/article.php/3579471
Time Swings For Golf.com
[January 24, 2006] The acquisition expands the media giant's portfolio of online sports content.
Read the article:
http://www.internetnews.com/ec-news/article.php/3579536
Yahoo's Spanish Connection
[January 24, 2006] Yahoo Research Expands to Spain and Chile.
Read the article:
http://www.internetnews.com/dev-news/article.php/3579406
Feds Slam Microsoft on Compliance
[January 23, 2006] UPDATED: Response to Microsoft's monthly status report says Redmond's response time is slipping.
Read the article:
http://www.internetnews.com/ent-news/article.php/3579321
Report: Online Retail on Easy Street
[January 23, 2006] Online retail spending will enjoy a healthy few years.
Read the article:
http://www.internetnews.com/ec-news/article.php/3579351
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:
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
http://www.htmlgoodies.com/mentors/
Thanks for all your feedback!
Windows Tech Goodie of the Week
***********************************
Improved Debugging with Visual Studio 2005's
Debugger Visualizers
In this article we'll look at the basics of
debugger visualizers, examine some of the built-in visualizers, look at a
few free visualizers developed by various folks in the community, and see
how to create our own visualizer! Read on to learn more!
*** AND ***
Multi-User Login With Database-Based Authentication
This article gives a brief overview of a
multi-user login system that uses a database for authentication. The code
includes new user registration, login, password retrieval, account
information, admin accounts, etc. The code is written in ASP and VBscript.
*** AND ***
Using Apache-Style HTTP Authentication on IIS
Have you ever wished you could easily set up
password protected areas of your web site without creating system user
accounts? What about moving a password protected website from Apache to IIS?
This article examines a free product that makes both of these tasks
amazingly simple.
And Remember This ...
***********************************
***********************************
1908 The Boy Scout Movement was Started
Robert Baden-Powell's "Scouting For Boys" was published on this day in 1908, prompting the start of the Boy Scout Movement. A war hero who defended Mafeking for 217 days during the South Africa war, Baden-Powell was already well known for a soldiers' handbook entitled Aids for Scouting. The book, which included lessons in tracking and observation, had become popular with boys, who invented many games based on the lessons in the book. Baden-Powell was inspired to write "Scouting For Boys" by this popularity. By the end of 1908 there were 60,000 Boy Scouts in troops all over England, and more troops were starting up around the world. A publisher from Chicago, William Boyce, became lost in a London fog and was guided to safety by a Boy Scout who refused Boyce's offer of a tip because it would "be improper for a Boy Scout to take a tip for a good deed." Inspired by this act, Boyce organized some regional American organizations, including the Woodcraft Indians and the Sons of Daniel Boone into the Boy Scouts of America, which was incorporated on February 8, 1910.
Born today were: in 1883 actress Estelle Winwood (Goodwin); 1913 TV producer Mark Goodson; 1915 actor Ernest Borgnine; 1918 Televangelist Oral Roberts; 1919 author Nora Beloff; 1924 English landowner, father of Diane, the 8th Earl Spencer; 1928 English zoologist Desmond Morris; 1941 singer Neil Diamond; 1941 singer Aaron Neville; 1943 actress Sharon Tate; 1947 musician Warren Zevon; 1949 actor/comedian John Belushi; 1960 German actress Nastassja Kinski; 1969 actress Stephanie Romanov; 1970 actor Matthew Lillard; 1993 daughter of Howard, Ashley Jade Stern;
Loading Comments...