Goodies to Go! Newsletter #307
Goodies to Go (tm)
October 25, 2004 -- Newsletter # 308
This newsletter is part of the internet.com network.
http://www.internet.com
Featured this week:
* Goodies Thoughts - HTML, XML,
XHTML, 4. 4.01 -- Huh?
* Q & A Goodies
* News Goodies
* 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 - HTML, XML, XHTML, 4. 4.01 -- Huh?
There's Hyper Text Markup Language, aka HTML, there's eXtensible
Markup Language, aka XML, there's XHTML, Version 4, version 4.01 and so on and
on. Huh?!! What are you supposed to do if you are fairly new to web development
and unsure of where to start, what to learn and what you should be using for
your web pages? What you are supposed to do is turn to your trusty Goodies To Go
newsletter and read on!
First, let me assure you that a part of the problem stems not from you, but from
the history of the computer industry. You see, the industry has always adhered
to the MAMBA principle. Much like its beautiful but deadly, slippery African
namesakes, the MAMBA principle can cause choking and similar problems. MAMBA, of
course, is More Acronyms Means Better Acronyms. And when more is better, nobody
has more than the computer industry! Let's plough through the plethora pervading
the web page programming game.
To break it down: the ML is Markup Language. The idea of any markup language is
to add decoration to text, such as bold, italic, big, etc. HT is Hypertext and
adds in the idea of jumping, or linking, from something on one page to another
place on the page or to another page altogether. This gives us HTML - the basic
language of web pages. The current version of HTML is 4.01, and this may be the
last version as we move into XHTML.
The X means eXtensible. This basically refers to the ability to add new things
into it as we move along, without detracting from anything that's already there.
XML is the eXtensible Markup Language and is far more complicated that the
average web page programmer needs to get into. Then there's the XHTML I just
mentioned. This is essentially HTML defined in terms of XML. What that means to
a page designer is that by following a few simple rules, they will be able to
take advantage of some of XML's extensibility, but without having to spend the
next thousand hours learning the ins and outs of XML.
OK! So what should a web page designer know and learn? HTML, that's what! It is
important for anybody learning web page design to know HTML because it is the
basis of millions of existing web pages from which you can steal --- I mean,
obtain inspiration. The current version is 4.01, but that doesn't mean you
should ignore the earlier stuff, for exactly the same reason.
XHTML is a great thing to learn too -- once you have your foundation in HTML
down. If you don't actually have anything else going on in your life, feel free
to learn XML also. It'll help you rise in the world of academia.
Web page building begins with HTML. Start with our tutorials, here:
http://www.htmlgoodies.com/primers/basics.html
or, if you're brand new to it, with the non-technical intro here:
http://www.htmlgoodies.com/nontechintro
You can take a look at the newer stuff once you grasp the basics. It is a
complete falacy to think that because there is newer stuff out there, the older
stuff has no real merit. There are (at least) a gazillion pages on the web based
entirely on the older stuff.
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. My script should add the variables inputed into the text fields and display
the sum in the box labeled "TOTAL". The problem is that the box isn't adding the
numbers together, it is "grouping" them. For example, there are 7 input boxes
(one for each day of the week). If you were to enter the number 1 into each text
box and press submit, the "TOTAL" box will return "1111111" instead of "7".
A. Because Javascript treats all values in form fields as text even when they
are numbers it will concatenate them together rather than add them. To get the
values to add you will have to use the parseInt() or
parseFloat() methods to basically turn them into numbers. Of course you should
do some validating to insure they are numbers and not letters. Here are some
links on the parseInt() and parseFloat()
methods:
http://www.w3schools.com/wmlscript/lang_parseint.asp?output=print
http://www.w3schools.com/wmlscript/lang_parsefloat.asp
Also here is an example using parseFloat() <html>
<head>
<title>Doing some Math</title>
<script language="JavaScript">
function focusIt() {
window.document.forms[0].elements[0].focus();
}
function calc() {
var b = parseFloat(document.calculator.b.value);
var c = parseFloat(document.calculator.c.value);
var d = b + c;
var ansr = Math.round(d * 100) / 100;
var valu = ansr.toString();
var number = valu.split(".");
if(!number[1])
{
document.calculator.ans.value=valu+".00"
}
else
{
if(number[1].length<2)
{
number[1]="."+number[1]+"0"
document.calculator.ans.value=valu+"0"
}
else
{
document.calculator.ans.value=valu
}
}
}
</script>
</head>
<body onload="focusIt();">
<form name="calculator" onreset="return focusIt();">
<input tabindex="1" type="text" name="b")"><br>
<input tabindex="2" type="text" name="c"><br>
<input tabindex="4" type="text" name="ans"><br>
<input tabindex="3" type="button" value="calculate" onClick="calc()">
<input tabindex="5" type="reset" name="reset">
</form>
</body>
</html>
[Or you could use the eval() function to obtain the numeric value of each input
field, as in:
total = eval(field1) + eval(field2)
and son on -- ed]
*** This question was submitted to our Mentor Community. The answer was provided
by Bob Conley.
Q. I thought everything on my site was fine, until I viewed it on a flat-screen
monitor at a higher resolutions (1280 x 1024). The border that runs along the
left side of the page appears again about > of the way to the right, obscuring
the text and looking really stupid.
A. The problem is that the background image is too small for the 1280X1024
resolution. The first option is to create the background image larger than it is
now so that it will be large enough not to repeat itself in the larer
resolution. The other is to use CSS to set the background image instead of
setting it in the <BODY> tag.
In the <HEAD> section of the page use the following CSS:
<style type="text/css">
body {
background-color: #FFFFFF;
background-image: url('images/bgimagename.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
This will tell the browser to set the image fixed as it is now so it will not
scroll with the rest of the page and to not to repeat it if the resolution is
too large.
*** This question was submitted to our Mentor Community. The answer was provided
by Jim Young
Q. I am using the script under the So You Want to Resize Your Window, Huh?
tutorial and was wondering if I could have it so that when a website visitor
clicks on my main image, the re-sized window would pop up rather than them
having to only click a text link.
A. This is an example of how you can click on an image and have a window popup
that is sized to the width and height of the larger image:
<html>
<head>
<title>Image Pop Up Viewer</title>
<SCRIPT LANGUAGE="JavaScript">
image0=new Image() // preload images large images
image0.src="large0.gif"
image1=new Image()
image1.src="large1.gif"
image2=new Image()
image2.src="large2.gif"
image3=new Image() // preload thumb nail images of large images
image3.src="thumb0.gif"
image4=new Image()
image4.src="thumb1.gif"
image5=new Image()
image5.src="thumb2.gif"
var ImgWin=" "
function imgwin(Imgn) // get width of large image that was pre loaded above
{
w=eval(Imgn+".width")
if(w<100)
{w=100}
h=eval(Imgn+".height") // get height of large image that was pre loaded above
if(h<100) // cannot open window less than 100 by 100 pixels
{h=100}
h=h+25
picgif=eval(Imgn+".src") // build image source
if(ImgWin.open) // if the window is open close it
{ImgWin.close()}
/*Create window and display large image of thumbnail.
If you want to change the position of the window when it pops up change the
values for the top and left
properties below in the variable WinProps. The values in top and left are number
of pixels from the top
and left of the edge of the screen.
*/
WinProps="width="+w+",height="+h+",location=no,status=no,directories=no,toolbar=no,scrollbars=no,menubar=no,resize=no,top=0,left=0"
ImgWin=window.open("","winimg",config=WinProps);
ImgWin.document.write("<HTML>")
ImgWin.document.write("<HEAD><TITLE>Display
Image</TITLE></HEAD>")
ImgWin.document.write("<BODY marginheight='0' marginwidth='0'
leftmargin='0' topmargin='0' bgcolor='lightyellow'>")
ImgWin.document.write("<CENTER><IMG SRC="+picgif+" BORDER='0'
HSPACE=0 VSPACE=0><BR>")
ImgWin.document.write("<FONT SIZE=-1><A HREF='#'
onClick='self.close()'>Close Me</A></FONT></CENTER>")
ImgWin.document.write("</BODY>")
ImgWin.document.write("</HTML>")
ImgWin.document.close()
ImgWin.focus()
}
</SCRIPT>
</head>
<body>
<CENTER>
<SCRIPT>
/*
If you add more thumbnail images make sure that you include the thumbnail and
larger image in the
preload sections above. In the onClick event for the added images make sure you
change the value
being passed to match the image name of the large image that matches the
thumbnail image. Both
of these must be setup in the image preload sections above.
*/
</SCRIPT>
<BR><BR><BR>
<A HREF="#" onClick="imgwin('image0');return false;"><IMG SRC="thumb0.gif"
NAME="img0" BORDER="0"></A>
<BR>
<A HREF="#" onClick="imgwin('image1');return false"><IMG SRC="thumb1.gif"
NAME="img1" BORDER="0"></A>
<BR>
<A HREF="#" onClick="imgwin('image2');return false"><IMG SRC="thumb2.gif"
NAME="img2" BORDER="0"></A> </CENTER> </body> </html>
*** This question was submitted to our Mentor Community. The answer
was provided by Bob Conley.
Q. (The question was difficult to read, but related to a "fireworks" java applet
the writer was trying to use.)
A. I am not sure if your Java applet will do what you want. But I did find a
JavaScript that will work similar to what you are looking for:
<html>
<title>Fireworks on click</title>
<head>
<script language="JavaScript1.2">
<!-- hiding
var ver = navigator.appVersion;
var dom = document.getElementById ? 1 : 0; var ie5 = (ver.indexOf("MSIE 5") > -1
&& dom) ? 1 : 0; var n = (document.layers); var ie = (document.all);
var sparksAflyin = 0;
var totalSparks = 0;
var sparksOn = 1;
function initMouseEvents() {
document.onmousedown = mouseDown;
if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE); } function
mouseDown(e) { if (sparksOn) { var mousex = (n) ? e.pageX :
event.x+document.body.scrollLeft; var mousey = (n) ? e.pageY :
event.y+document.body.scrollTop; if (!sparksAflyin) { for (var k = 0; k <= 9;
k++)
eval('SHOW("sDiv'+k+'")');
sparksAflyin = 1;
totalSparks = 0;
for(i = 0;i <= 9; i++)
eval('moveTo('+i+',0,'+mousex+','+mousey+')');
}
}
}
function moveTo(i,j, mousex, mousey){
if (j < eval('anim_'+i+'_x.length') ){
var tempx = eval('anim_'+i+'_x[j]+mousex'); var tempy =
eval('anim_'+i+'_y[j]+mousey'); if (ie) { if(tempy+30 >
(document.body.offsetHeight+document.body.scrollTop))
tempy = document.body.offsetHeight+document.body.scrollTop-30;
if(tempx+30 > (document.body.offsetWidth+document.body.scrollLeft))
tempx = document.body.offsetWidth+document.body.scrollLeft-30;
eval('document.all.sDiv'+i+'.style.left = tempx;');
eval('document.all.sDiv'+i+'.style.top = tempy;'); } if (n) {
eval('document.layers.sDiv'+i+'.left = tempx;');
eval('document.layers.sDiv'+i+'.top = tempy;'); }
j++;
// timeout: 50 = fireworks speed, larger number = slower speed
setTimeout("moveTo("+i+","+j+","+mousex+","+mousey+")",50)
}
else {
eval('HIDE("sDiv'+i+'")');
totalSparks++;
}
if (totalSparks == 10) {
sparksAflyin = 0;
totalSparks = 0;
}
}
function SHOW(divName){
if (document.all)
eval('document.all.'+divName+'.style.visibility = "visible";'); else if
(document.layers) eval('document.layers["'+divName+'"].visibility =
"visible";'); } function HIDE(divName){ if (document.all)
eval('document.all.'+divName+'.style.visibility = "hidden";'); else if
(document.layers) eval('document.layers["'+divName+'"].visibility = "hide";'); }
anim_0_x=new Array(20,20,10,0,0,0,0,0,0,0,0,0);
anim_0_y=new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80);
anim_1_x=new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,152,181);
anim_1_y=new
Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_2_x=new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18);
anim_2_y=new
Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_3_x=new
Array(-20,-20,-2,-1,7,10,18,35,60,102,94,94,93,97,108,111,117,127);
anim_3_y=new
Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,-151,-101,-66,-17,27,87,140,189);
anim_4_x=new
Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,-209,-191,-207,-203,-213,-202,-221,-211);
anim_4_y=new
Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,-149,-134,-89,-60,8,51,107,157,201);
anim_5_x=new
Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,-247,-270,-279,-282,-283,-283,-285,-286,-288);
anim_5_y=new
Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,-169,-120,-44,-8,40,87,144,190,248);
anim_6_x=new
Array(-20,-20,-7,14,44,79,143,186,217,226,234,244,250,259,265,274);
anim_6_y=new
Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,-3,54,134,187,215,257);
anim_7_x=new
Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,-136,-150,-160,-164,-168,-171,-172,-172,-176,-175);
anim_7_y=new
Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,-240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68);
anim_8_x=new
Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,-11,16,49,64,81,93,100,103,109);
anim_8_y=new
Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,-180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188);
anim_9_x=new
Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,-277,-281,-287);
anim_9_y=new Array(-20,-20,-35,-37,-34,-16,10,47,105,150,189,227,273);
// End -->
</script>
</head>
<body OnLoad="initMouseEvents()" bgcolor="#000000">
<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><font face="arial
black" color="red">.</font></div> <div id="sDiv1" style="position:absolute;
visibility: hidden;"><font face="arial black" color="yellow">.</font></div> <div
id="sDiv2" style="position:absolute; visibility: hidden;"><font face="arial
black" color="blue">.</font></div> <div id="sDiv3" style="position:absolute;
visibility: hidden;"><font face="arial black" color="red">.</font></div> <div
id="sDiv4" style="position:absolute; visibility: hidden;"><font face="arial
black" color="orange">.</font></div> <div id="sDiv5" style="position:absolute;
visibility: hidden;"><font face="arial black" color="white">.</font></div> <div
id="sDiv6" style="position:absolute; visibility: hidden;"><font face="arial
black" color="green">.</font></div> <div id="sDiv7" style="position:absolute;
visibility: hidden;"><font face="arial black" color="skyblue">.</font></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><font face="arial
black" color="yellow">.</font></div> <div id="sDiv9" style="position:absolute;
visibility: hidden;"><font face="arial black" color="white">.</font></div>
</div> <font color="#FFFFFF">Click anywhere on the screen.
</font>
</body>
</html>
News Goodies
Fake Red Hat Alert Making Rounds
[October 25, 2004] Unknown attacker sends spam messages with
a malicious file masquerading as a Red Hat security update.
Click here to read the article
Bush Signs Tech Tax Break
[October 25, 2004] Law gives U.S. multinationals a one-year
reduction on foreign profits from 35 percent to 5.25 percent.
Click here to read the article
PalmOne Launches 'Smarter' Treo 650
[October 25, 2004] PalmOne says its latest smartphone builds on user
suggestions.
Click here to read the article
IBM 'Virtually' Upping Storage Ante
[October 25, 2004] Big Blue aims at rivals with improvements to
its core storage virtualization products..
Click here to read the article
Avaya Intros IP Telephony On Demand
[October 25, 2004] The communications software firm also
pursues enterprise business in the Philippines.
Click here to read the article
Intalio Reaches APEX for Better BPM
[October 25, 2004] The company offers a way to tie business processes and
technology with a new business process management suite.
Click here to read the article
HP: UDC Alive and Well
[October 22, 2004] FEATURE: With rumors of its demise exaggerated somewhat,
HP's Utility Data Center presses on, albeit redefined.
Click here to read the article
EU to Decide Oracle/PeopleSoft Next Week
[October 22, 2004] Regulators put the probe on the fast track, while
Oracle extends its offer yet again.
Click here to read the article
Sender ID For E-Mail Goes Wild
[October 22, 2004] A Canadian ISP plans to go live with Microsoft's e-mail
authentication technology next week.
Click here to read the article
Google Soars, Stocks Stumble
[October 22, 2004] Google soared Friday on its first earnings report as a
publicly traded company, but the rest of the stock market was battered on
weak results from Amazon.com, Microsoft and others.
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/
Thanks again for all your feedback!
Top
Windows Tech Goodie of the Week:
Important Information About an ASP.NET Vulnerability
Microsoft has released a patch that is meant to help protect
against a reported vulnerability in ASP.NET. It's
recommended that ASP.NET users either install the patch or
implement the previously-published workaround to prevent
unauthorized Web site visitors from viewing secured content.
http://www.asp101.com/articles/john/kb887289/default.asp
*** AND ***
Business Intelligence with Microsoft SQL Server Reporting
Services - Part 1
Adnan Masood discusses Microsoft's comprehensive integrated
business intelligence, data mining, analysis and reporting
solution: Microsoft SQL Server Analysis services and
Microsoft SQL Server Reporting services.
http://www.15seconds.com/issue/041013.htm
Top
And Remember This . . .
On this day in...
1881 Pablo Picasso Was Born
On this day in 1881 in Malaga, Spain, one of the greatest, and
probably the most famous artists of the twentieth century was born.
He was the son of a drawing professor who steered him towards a
career in academic art. In 1900 he went to Paris the exhibit his
work on the prestigious Rue Lafitte, where his great success induced
him to return to live permanently in Paris. His body of work
comprises more than 50,000 paintings, drawings, engravings,
sculptures, and ceramics, which he produced over 80 years. Pablo
died in 1973 at the age of 91. Prints of some of his work hang in my
house -- if you would like to send me originals, email me & I'll
make shipping arrangements.
Today was also the day that in: 1415 in the Battle of
Agincourt the Welsh Longbow proved superior to an armored knight;
1760 George III ascended the throne of England; 1854 the
Light Brigade charged "into the valley of death" at the Battle of
Balaklava during the Crimean War; 1945 Japanese surrendered
Taiwan to Gen Chiang Kai-shek; 1960 the first electronic
wrist watch went on sale (in NYC); 1962 Author John Steinbeck
was awarded the Nobel Prize in literature; 1965 the Rolling
Stones released "Get Off of My Cloud"; 1968 Yoko Ono
announced she was having John Lennon's baby; 1971 Roy Disney
dedicated Walt Disney World in Orlando Florida; 1983 US
invaded Granada; 1988 ABC News reported on potbellied pygmy
porkers' popularity as pets;
Born today were: in 1825 composer Johann Strauss (the
younger); 1838 composer Georges Bizet; 1881 artist
Pablo Picasso; 1912 singer/entertainer Minnie Pearl [Sarah
Ophelia Colley]; 1928 actress Marion Ross; 1928 actor
Anthony Franciosa; 1941 Australian singer Helen Reddy;
1949 actor Brian Kerwin; 1963 actress Tracy Nelson;
1967 actress Julia Roberts;
Thanks for reading Goodies to Go!
Archive Home Page.
Loading Comments...