More JavaScript Tips.
Have you ever tried to call a remote JavaScript from within the <body> of your page? I have and I can tell you without reservation that it took me more than a few minutes to finally figure out exactly what was needed to satisfy "ALL" of the respective validators. Calling remote JavaScript's from the <head> section is a piece of cake.Calling one from the <body> you will need to satisfy a lot of conditions for it to work properly. I built the call by pieces, once I satisfied one validator I found my code was coming up short on another validator. Between the "508" and the "AAA" validator I was beginning to get "slightly" aggravated. It took a while to make it "bulletproof" for all conditions. The first thing you will need to do is to go into your graphics program and create a transparent gif that is 1px by 1px and save it to your image file. You will be using some unfamiliar attributes like <noscript> and <address>. The call seems slightly complex for what it actually does. A working example of what I am referring to will look like this:
<script type="text/JavaScript" src="emailme.js"></script>
<noscript> <div class="fite"><address><img height="1" width="1" alt="" src="/images/noscript.gif" />
</address></div></noscript>
This is a script that I use on all my pages and it is for privacy purposes. It is an e-mail scrambler script that hides my e-mail address from the spiders that crawl the world wide web harvesting e-mail
addresses for spam purposes. This has to be used within the <body> so that it will be accessible. The first line is the opening and closing of the
remote call of the script. Again I will point to the ease of calling remote scripts as opposed to including them in either the <head> or <body>.
of your page. Once you have created a <script> zone in the <body> of your document you now need to create a <noscript> zone to even things out.
Inside the <noscript> zone you will inject a couple of attributes. The first thing you will need to add will be a <div>, class or id is optional, use whatever name suits you. This option will be dictated by whether or not you
will need to call a script on more than one occasion. You do not need to define this <div> in the <head> section or on your
style sheet. The next thing you will to do is to open the address attribute. Inside the address attribute you will call your 1px
gif you created earlier. You will then close in the reverse order that you opened all the attributes. What you opened first will now be closed last.
This particular code snippet will satisfy all requirements for coding and access including AAA and Section 508. Well now that was pretty easy wasn't it?
<noscript> <div class="fite"><address><img height="1" width="1" alt="" src="/images/noscript.gif" />
</address></div></noscript>
Opening a new window in XHTML
So you have upgraded to writing XHTML !! Congratulations.Now you have given up a few of the easy attributes and are now looking to replace some things that are no longer available to you like opening an external target in a new window. Sounds like it's going to be hard but really it's still a piece of cake.
Now you will be looking to implement a lightweight JavaScript.
A working example of the JavaScript I am referring to will look like this:
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
The preceding code will be aptly named external.js and will be located in a java folder the same directory as your html files so the call will be very clear.
The layout on your webpage will go just like this:
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
<head>
<script src="external.js" type="text/javascript"></script>
</head> <body> <a href="http://validator.w3.org/check?uri=referrer" rel="external">Valid XHTML 1.1</a> </body>
Well, that was easy enough. Here you thought you were going to have to become a Java programmer to solve that little issue, huh?
Stop back once in a while as I will be adding more tips as my time and
temperament allow.
<script src="external.js" type="text/javascript"></script>
</head> <body> <a href="http://validator.w3.org/check?uri=referrer" rel="external">Valid XHTML 1.1</a> </body>