Archive for the ‘JavaScript’ Category

Italian tabification

Monday, March 6th, 2006

My JavaScript tabifier has reached the shores of Italy. Here is a blog post translated to English:

Small appendix to the post of Alexander Fulciniti on the return of the tab in order to signal this Javascript tabifier. Draft of a script that indeed renders the creation of an interface based on these elements simplest. Enough to follow the three steps suggested from the author, to structure the markup following one series of rules base in order then to dedicate itself more profitablely to the personalizzazione of the styles.

I couldn’t have said it better myself.

JavaScript tabifier

Thursday, March 2nd, 2006

Damn, was I beaten to the punch?

A while back I was working on an automated tabifier using JavaScript, then this popped up today in the popular page in deli.icio.us: Link

I shouldn’t post unfinished code, but damn it, I think mine is better! :-)

My tabs are completely CSS controlled, they look great without JavaScript and the page always prints (I think a lot of DHTML developers do not take into effect that a page will be printed).

Anyway, check it out here: JavaScript tabifier

If you like it please contact me – with enough encouragement I might continue this project.

WebMD Health Video Library

Wednesday, February 22nd, 2006

WebMD Daily Health Videos Archive

Phew… it was an intense couple of days pounding this out but it went live today. I’ll write an article about the JavaScript techniques employed to take a static HTML page and make it interactive (while keeping the page search-engine friendly), but for now I just want to link to it and give it some Google-juice.

Truncate HTML Text with JavaScript Automatically

Friday, February 17th, 2006

Here’s a new article about a neat JavaScript technique:

Truncate HTML Text with JavaScript Automatically

There are a couple neat tricks in the code.

Using JavaScript objects for function arguments with default values

Friday, January 20th, 2006

Here’s an example of passing arguments to a JavaScript function using an object, which provides several advantages: each argument is optional and has a default value if it’s not supplied, arguments are named (making your code more readable), and arguments are position-independent (so you don’t have to remember an obscure ordering).

So if you had a function that took three integers (a,b,c) you might normally call like this:

myfunction(22, 3, 5);

You can instead call it like this (letting ‘b’ take the default value):

myfunction({ c:5, a:22  });

Then in the function you could set the defaults and decode the arguments in a few lines of code:

function myfunction(passedArgsObj) {
  /* defaults */
  args = { a:1, b:2, c:3 };
  /* override the defaults if necessary */
  for (var argName in passedArgsObj) {
    args[argName] = passedArgsObj[argName];
  }
  alert("a = "+args.a);
  alert("b = "+args.b);
  alert("c = "+args.c);
}

Update

Here’s a slightly cleaner version:

function myfunction() {
  var args = { a:1, b:2, c:3 };
  for (var n in arguments[0]) { args[n]=arguments[0][n]; }
}

Automatic external link interstitials using JavaScript and Behavior.js

Thursday, January 19th, 2006

Working for a health information website has some disadvantages – you must take greater than normal care to ensure user privacy. One of the requirements is to pop up an interstitial message before going to another website, because the new website might have different terms and conditions.

With the new blogs at WebMD, we’re tying into social networking sites like Technorati and del.icio.us, plus linking to other blogs, so we have a lot of external links.

Previously this meant manually modifying each link so it passes through a special page on WebMD then redirects to the target URL. But I thought that was a lot of work, plus very error prone and hard to maintain.

Instead I used Ben Nolan’s behavior.js, a wonderful library for attaching behaviors to page elements, to add an onclick behavior to every external link. I used regular expressions to determine which links should be considered “internal” links that shouldn’t be modified.

You can go to a the WebMD heart disease blog and click a Technorati link to check it out.

Here’s the code: behavior-external-linkify.js

Update:

Julien writes:

I tried the scenario you listed in your blog (go to WebMD and then
click a Technorati link) in Firefox 1.5 and it didn’t work: the popup
got blocked…

Yes, I noticed that as well; unfortunately the actual part of the
process that displays the interstitial is not under my control – all I
can do is redirect the user to the WebMD page that does the rest.

I need to notify them about this difficulty – they could probably
change that page to display an alert box if the popup did not open.
Alternatively, if you didn’t care about redirecting through another
page you could modify my JavaScript such that it displays an alert
instead of redirecting the page.

Update 2006-03-09: Here is another implementation using Yahoo!’s libraries instead of Behavior.js

A custom slideshow for WebMD

Thursday, February 24th, 2005

WebMD Health debuts a new feature on the homepage: a rotating slideshow of three “features”. I like the way it turned out – it retains the visual impact of a major story with a large graphic, but also gives them the ability to promote more features on the homepage without adding clutter.

I created custom slideshow code in JavaScript, so it doesn’t even require flash to view, and it works in all browsers that WebMD supports.

Link: WebMD Health

JavaScript Syndication: How to Easily Syndicate Your Web Content

Thursday, May 27th, 2004

JavaScript is a useful tool for syndicating content to other websites. This article examines the pros and cons of JavaScript syndication, explains how to implement it, and demonstrates a technique using PHP to make it even easier.

Read my article: JavaScript Syndication: How to Easily Syndicate Your Web Content