| home / scripts / sidebar |    [previous] [next] |
|
|
|
We use JavaScript in our tab to allow the user to quickly rotate through our available feeds or headlines in a small space, without forcing them to reload the page for each set of links. Additionally, for those that prefer a hands off browsing approach, the JavaScript cycles automatically through our links; instantly displaying a new set of links every 5 seconds. (Instantly, to minimize the amount of visual distraction to the user.) Our main JavaScript functions follow:
function init(){
t=new Array('Book Excerpt: Professional Java Web Services','Google SVG Search, Part II','Site Review: Alexa Web Search ','Update: Perl Links and Resources','Book Excerpt: Perl & XML','JScript .NET, Part III: Classes and Namespaces','Book Review: Constructing Accessible Web Sites','Update: CGI links and Resources','DOM-Based Conditional JavaScript Loading','Google SVG Search, Part I','Update: PHP Links and Resources','JScript .NET, Part II: Major Features','Book Excerpt: XML for ASP.NET Developers','No JavaScript? No Service','Spam I Am');
l=new Array('http://www.webreference.com/programming/java/webservices/','http://www.webreference.com/xml/column56/','http://www.webreference.com/new/020509.html','http://www.webreference.com/programming/perl/','http://www.webreference.com/programming/perl/perlxml/','http://www.webreference.com/js/column109/index.html','http://www.webreference.com/new/020502.html','http://www.webreference.com/programming/cgi.html','http://www.webreference.com/programming/javascript/domloader/','http://www.webreference.com/xml/column55/','http://www.webreference.com/programming/php/','http://www.webreference.com/js/column108/index.html','http://www.webreference.com/authoring/languages/xml/aspnet/','http://www.webreference.com/new/020418.html','http://www.webreference.com/outlook/license/gallery.html');
t.length=l.length=Math.min(t.length,l.length);
tot=2;
c=Math.min(tot,t.length);
toid=null;
d=5;
lt=String.fromCharCode(60);gt=String.fromCharCode(62);
sp=lt+"p"+gt+" "+lt+"/p"+gt;
a1=lt+'a target="_content" href="';
inel=document.getElementById('inner');outel=document.getElementById('outer');
nl=document.getElementById('nlink');pl=document.getElementById('plink');
outel.onmouseover=sto;outel.onmouseout=sta;nl.onclick=nextHL;pl.onclick=prevHL;
sta();
}
function sta(){
sto();
toid=setInterval('nextHL()',d*1000);
}
function sto(){clearInterval(toid);}
function nextHL(){
T="";
for(i=0;i!=tot;i++){
if(c==t.length)c=0;
T+=a1+l[c]+'"'+gt+t[c]+lt+"/a"+gt;
c++;
if(i!=(tot-1))T+=sp;
}
inel.innerHTML=T;
return false;
}
function prevHL(){
c=c-(tot*2);
if(0>c){c=t.length+c}
nextHL();
return false;
}Our init() function does all of our setup work, it predefines most of the data
and object references we will later be using. Get as many of your static assignments
as you can out of the way here, so that you do not have to waste processing time later in
functions that will be regularly repeated. We define parallel arrays with both the links and their
descriptions; and as an extra defensive measure ensure the two arrays are the same length
(namely, the length of the smaller of the two arrays) with:
t.length=l.length=Math.min(t.length,l.length);We then continue by assigning the total links to display at a time (tot), the first link
to display (c), a null variable to be used for the timeout interval id (toid)
and the number of seconds to delay between headline displays (d).
What then follows is a kludge among kludges; a true hack if there ever was one. Recall that we
intended to make our HTML code XHTML compliant. XHTML does not allow for the placement of certain
bare characters within tags, including within <script>...</script> tags. These
characters include < and &, among others (see the W3C compatibility guidelines
for further details). The recommended way to deal with this is to use external scripts; but in our
case we want to avoid additional file calls while at the same time providing a single template for
our Perl code to access (and write to). Hence the following kludge:
lt=String.fromCharCode(60);gt=String.fromCharCode(62);
sp=lt+"p"+gt+" "+lt+"/p"+gt;
a1=lt+'a target="_content" href="';that "creates" angle brackets using the fromCharCode() method of String
(60 and 62 are the numerical representations of the left and right angle brackets, respectively)
and then builds HTML strings using our angle bracket variables. Ok, ok. It isn't pretty; and
we definitely wouldn't recommend it for full scale projects. But for a quick hit where strict
compliance is needed or desired, it does the job without having to create and access another
file. While we don't technically have to do the weird stuff for the right angle bracket, we
do anyway, just so we can at least say we kludge consistently. Or something like that.
The remaining portion of our init() function assigns the mouseout and
mouseover handlers to the outermost div on the page that stop the rotation
momentarily (so the user is less likely to have to chase after links) and the onclick
handlers for the previous (<<) and next (>>) links, which will allow the user to
instantly flip to the next headlines. Note that both of these handlers return false; since the
JavaScript itself handles the link rotation, we don't need to actually process the clicked link
(which itself is provided for non-JavaScript compatible browsers). Returning false
cancels the default action of the link, which is to reload the page from the server
with different starting headlines.
The remaining JavaScript functions are pretty straight forward. sta() starts the
headline rotation, by assigning the nextHL() function to a set interval based on
the number in d. sto() stops the rotation, and is triggered whenever
the user moves the mouse over the page. (We also call sto() just before we start a
new interval; just to make sure we don't have multiple intervals running at the same time.) nextHL()
does the work of formatting the next tot number of headlines and displaying them in the
inner div via the innerHTML property, and prevHL backs the
array count up by tot entries and then calls nextHL() (effectively displaying
the previous headlines). A > by itself is allowed between XHTML tags, so XML
parsers shouldn't penalize us for if(0>c){c=t.length+c}.
At the bottom of our HTML, we include the conditional assignment:
<script type="text/javascript">
if (document.createTextNode) onload=init;
</script>which gets the JavaScript ball rolling for any browser that supports the document.createTextNode
method. We choose this method as a shortcut to simply identify compatible browsers for our JavaScript code
without requiring a ton of extra bytes, and also ensuring that Opera specifically doesn't get to our
code. (Interestingly, Opera will execute all of our code without complaining; but it won't actually
do anything as it does not, with a few exceptions, support the modification of HTML elements after the initial layout). Why we chose
the document.createTextNode method over the more familiar document.getElementById
is explained more fully in Kenneth Tibbett's article; additional
browser sniffing information you may need to know can be found in our browser sniffer
and Peter Belesis' thorough examination of conditional JavaScript loading for DHTML browsers.
That's it for what the user sees, but how does the data get in the page in the first place? Well, you could put it in yourself, and use the HTML and JavaScript we've provided so far as somewhat of a static link flipping informational type thingy. Or, you can use our provided Perl script and an RSS file (or two, or three, or twenty) and make your own multi-feed display. Let's have a quick look at that Perl now.
| home / scripts / sidebar | [previous] [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: May 17, 2002
Revised: May 17, 2002
URL: http://webreference.com/scripts/sidebar/3.html
