Tag Archives: website

Conditional Opera Banners Using JavaScript

Posting an Opera button on your website or blog is a great way to encourage people to try out the browser — but what if the visitor already uses Opera? It shows solidarity, but what if you could show them something else, something that is new to them?

You might want to replace your regular Opera banner with an ad for Opera Mini. Or show them another graphic of your own design. Or maybe not even a graphic, maybe post some sort of message, like “Opera spoken here!” or “Welcome, Opera visitors!”

It’s relatively simple to do this in PHP, or ASP, or some other server-side script…but sometimes you have to stick with static HTML. Well, client-side JavaScript can replace chunks of your page, and here’s how to do it.

1. Put the following script in a file called operalinks.js:

function replaceOperaLink(linkID) {

if(linkNode=document.getElementById(linkID)) {

if ( 0 <= navigator.userAgent.indexOf('Opera') ) {

var newButton=document.createElement('span');

newButton.innerHTML = '<a href="http://www.opera.com/">Glad to see you're using Opera!</a>';

var parentNode=linkNode.parentNode;

parentNode.replaceChild(newButton,linkNode);

}

}

}

For the innerHTML section, you can plug in a new link and banner, or a special message, or anything you want. (Just make sure that you put a backslash () in front of any apostrophes you use.)

2. Put a unique ID in the tag for your regular Opera button. Use the outermost tag that you want to replace. For example, let’s start it off with this:

<a id="OpLink" href="http://www.opera.com">Download Opera!</a>

3. Load the script in your document’s <head> section:

<script type="text/javascript" src="operalinks.js">

4. Call the function in the body onload event using the ID you chose in step 2:

<body onload="replaceOperaLink('OpLink')">

When the page loads, the script will check the visitor’s browser. If it’s Opera, it’ll replace the banner with whatever message you chose in step 1. It’s compatible with both HTML and XHTML, and you don’t need to worry about using <noscript> tags to make sure the banner still shows up for people with JavaScript disabled.

*This post originally appeared on Confessions of a Web Developer, my blog at the My Opera community.

Flashy sites

I’ve been struggling to promote my new site, the Alternative Browser Alliance, since I launched it in August. It’s a tough sell. I get the most traffic when I post something visible on Slashdot and people follow the link in my signature. You can barely even find it in Google—search for “Alternative Browser Alliance” and blog posts about it show up ahead of the site itself! (On the other hand, it seems to be #1 for “alternative browser” on MSN. Not that it seems to be helping much.)

By contrast, Flash: Those Who Ride the Lightning pulls in tons of visitors. Last week I put up an article on the Three Dimwits, the Flash’s comedic sidekicks from the 1940s. Within 24 hours it had received more than 150 hits. Within 3 days it was the top result for “three dimwits” on Google.

Why the difference? Well, my Flash site is long-established and authoritative. More importantly, it fills a specific niche. You can find a zillion pages about web browsers. But there are only a handful of large sites dedicated to the Flash, and mine is the longest-lived of them, aside from DC Comics’ own site. And until I wrote one, I could not find a page anywhere that actually focused on the Three Dimwits, just a set of stubs and the occasional comment in articles about the Flash.

Last Thursday I posted a suggestion box on the front page of the site. The results have been interesting. The freakiest part was probably that the first suggestion came in just five minutes after I uploaded the form! There’ve been 22 suggestions in the first week, which I’ve divided into three categories. Continue reading