Arena - blog

I have finally updated my Carthago skin. The last time I did that was for the release of Opera 8.0 ( ) - that was more than 2 years ago! The most obvious omission was all the images related to Widgets, but also Content Blocking and Fraud Protection were lacking.

Those who actually use the skin are hopefully happy to see this new version. I promise that I'll try to update it more regularly. Carthago is now suitable for Opera 7 - 9.


I would have liked to go through the entire skin again and redesign some parts - there are things I think still need improvement. (Suggestions are welcome.) However, a quick look at skin.ini was pretty discouraging. There are so many images in a skin! Is there a guide showing how the skin.ini sections are linked to Opera's GUI? (tomu? ) If not, I think it would be highly beneficial to all skin authors to have one, e.g. on operawiki.info.

There are several websites where you can create buttons for Opera's toolbars. I used to have a page where you could get predefined buttons (much like on operawiki.info/CustomButtons, Tomu's page or Pesala's page) and where you could write your own button code. What I didn't have was the step in between: a form offering the user some guidance (see for example byberg's page or operawiki's official unofficial Custom Button & Command Creator). What I missed in existing tools was a connection between these three approaches: an experienced user may wish to write the button code directly from scratch, whereas someone who has never experimented with Opera's commands will probably need as much help as possible. But what do you do when you select a predefined button from one of the aforementioned pages, but want to change the image or the button text?

I have completely rewritten my button page to suit everyone's needs (well, that's what I hope it does ). It features the following:

1. Some 50 predefined buttons for those who don't want to or don't know how to make things more complicated.
   
2. A form with which one can build a button step by step or with which one can dissect one of the predefined buttons.
   
3. A text field in which an experienced user can enter the button code directly.

One of the things I spent most time on was to make the tool as flexible as possible. I wanted to make it possible to let the user switch between the sections mentioned above. For example, if someone selects a predefined button, he can then change what the button does or what it looks like in the second section. Or, if someone gets a button's code from another page, he can insert that into the code field (section 3) and then go to section 2 to make some adjustments.

I hope you find this new page useful - if you have any comments, just let me know.

I've described the problem with NOSHeadlines.nl in a forum thread: the site's using a script targeted at non-Gecko/non-IE browsers to add dummy divs that can accomplish the same as one simple line of Mozilla-only CSS:

-moz-border-radius: 0px 8px 0px 0px;

Opera runs the script and creates the additional divs, but doesn't get an additional stylesheet to display them as intended, as does IE:

<!--[if lt IE 7]><link rel="stylesheet" href="http://www.nosheadlines.nl/templates/nosheadlines/css/ie6fix.css" type="text/css" /><![endif]-->

One way to fix the display problems in Opera is to stop it from running the JS function causing all this, namely fixBrowserIssues() (how ironic). But I want the rounded corners in Opera too! Not because it looks better, but because I can't imagine that Opera isn't capable of doing this...

The closest I got to a satisfying result is this, though:



...using the following UserCSS:

div.dummy-1 {
position: absolute !important;
top: -1px !important;
left: -1px !important;
height: 9px !important;
width: 10px !important;
background: url(http://www.nosheadlines.nl/templates/nosheadlines/img/layout/corners/upper-left.gif) no-repeat top left !important;
border: none !important;
padding: 0 !important;
}

div.dummy-2 {
position: absolute !important;
top: -1px !important;
right: -2px !important;
height: 9px !important;
width: 10px !important;
background: url(http://www.nosheadlines.nl/templates/nosheadlines/img/layout/corners/upper-right.gif) no-repeat top left !important;
border: none !important;
padding: 0 !important;
z-index: 2;
}


h3 div.dummy-2 {
top: 2px !important;
}

I'm hoping someone can help me with the last part.

I'm back from my trip to Finnmark and Troms in the north of Norway. I've created an album with some photos. No, I did not get the chance to see Oslo - I even had to run at the airport to catch my next flight so the total time I spent in Oslo must have been less than half an hour.

I do have a car, but I don't have a navigation system. I therefore use one of the many online services to get driving directions, but I don't always use the same service. That's because the one I usually prefer (Map24) sometimes crashes Opera and doesn't know new roads. For example, not so long ago it would still let you follow the Belgian coast to go from Amsterdam to Brest even though taking the A29 through Amiens would save you lots of kilometres. Moreover, their new beta doesn't work in Opera 8.54 and doesn't show maps in Opera 9. So I'm forced to switch to anwb.nl, mappy.com, viamichelin.com or one of many similar sites.

When getting driving directions from such a website, I mostly use my home address as the departure address, so I figured it would be nice to have the site remember that info. A cookie set by the website wouldn't work too well because I delete cookies when I close Opera. UserJS was my next option.

After examining a few dozens of route planners, I found out they all use code similar to this:

<label for="startStreet">Street:</label> <input type="text" name="startStreet">
<label for="startCity">City:</label> <input type="text" name="startCity">
<label for="startZip">Zip:</label> <input type="text" name="startZip">
<label for="startCountry">Country:</label> <select type="text" name="startCountry">...</select>

Of course, they all use different names for their elements; some sites use the id attribute instead. Some let you enter a State or Province (using either an <input type="text"> or a <select>); others ask for the house number and street name separately.
In short, there's little the route planners agree on.

And then there was another problem I had to solve if I wanted to write a script that would work with them all: in The Netherlands, the house number comes after the street name; in the US, they're reversed. In France, they put a comma between them. Furthermore, a French route planner may know what "Norvège" is, but a British one can only work with "Norway".

Finally, this is what I've done:

I have written a JS function that will figure out which element types have been used to contain the address info. Its input parameters are the names or id's of these elements. The function will get the correct information from an array that stores the street name, house number, zip code, city, state and country separately. The country is again an array consisting of several equivalents (in different languages, for instance). The user also sets what the right street address notation is (which can be overridden for specific sites)

Once I completed the function, it was relatively easy to make it work on the following sites (note that some pages simply use some other site's route planning service):
1bis
411.info
9292ov.nl
The AA Route Planner
Abacho.de
Allianz Routenplanung
Anwb.nl
AOL Travel
Aral Routenplaner
Auskunft.ch
Autobahn Tank & Rast
Autoroutes.fr
Autostadtplan.de
Bayerninfo.de
bottin.fr
BP The Netherlands
BP Route Finder
CNN Driving Directions
CompuServe Routeplanner
Deutscher Stadtplandienst
Drive Alive! Route Planner
Expedia
Fahrinfo Berlin
Falk.de Routenplaner
Free.fr Itinéraires
Freetrip.com
Google Maps
Green Flag Route Planning
Guia Campsa
InfoSpace
Iti.fr
KataWeb.it Mappe
klickTel.de
LeasePlan Nederland
Letsmove.be (also in French)
Lycos.de Routenplaner
Lycos.nl Routeplanner
Map24
Maporama.com
Mappy.com
MapQuest.com
Maps.com
Maps On Us
MSN Mappoint / Mapblast
Multimap.com
Onde Estou.br
Opel Route Planner
Planet.nl
QDQ.com
RAC Route Planner
Rand McNally Maps & Directions
RATP.fr
Reiseplanung.de / Routenplanung.de
Routemaster.nl
Routenet.nl / Routenet.be
Routenplaner-online.com
Routenplaner24.de
Routeplannerplaza.nl
Strassenroutenplaner.de / Strassenkarten-Europa.de
SuperPages.com / BigBook.com
T-Mobile Routenplaner
Terra.es Callejero
Touring.be (also in French)
Travelmate.com.au
VanAnaarB.nl
Veturo.com
Vialys.fr
ViaMichelin.com
Volkswagen.de Routenplaner
VTB/VAB.be (also in French)
Wanadoo.fr
Wanadoo.nl
Wannahaves.nl
Web.de
Yahoo! Deutschland Routenplaner
Yahoo! Driving Directions
Yahoo! France

T-Mobile.nl redirects Opera users to a page saying that other browsers than IE5.01, IE5.5 and Netscape 6 are not supported. This warning will only be given once, so you can return to the main page (by modifying the address in the address field or by clicking on the logo - there's no obvious link on the page) and continue browsing without any problems.
A cookie remembers whether you've seen the error page before. So if you are not interested in keeping t-mobile's cookies, you'll be redirected more often than necessary. Here's a little UserJS that wil always skip that page:

if (window.location.href.indexOf('http://www.t-mobile.nl/global/htdocs/page/browser_not_supported.asp')>-1){
    window.location.replace('http://www.t-mobile.nl/')
}

This script will "convert" OperaShow into Fullscreen mode, i.e. ignore stylesheets for media='projection' when you enter Fullscreen mode.

document.addEventListener(
  'load',
  function(){
    var l=document.getElementsByTagName('link'); 
    var s=document.getElementsByTagName('style');

    for (var i=0; i<s.length; i++){
      if (s[i[b][/b]].hasAttribute('media')){
        if (s[i[b][/b]].getAttribute('media').indexOf('screen')>-1 && s[i[b][/b]].getAttribute('media').indexOf('projection')==-1)
          s[i[b][/b]].setAttribute('media',s[i[b][/b]].getAttribute('media')+',projection'); 
        if (s[i[b][/b]].getAttribute('media').indexOf('projection')>-1 && s[i[b][/b]].getAttribute('media').indexOf('screen')==-1) 
          s[i[b][/b]].setAttribute('media',s[i[b][/b]].getAttribute('media').replace('projection','OperaShow'));
      } 
    }

    for (i=0; i<l.length; i++){
      if (l[i[b][/b]].hasAttribute('rel') && l[i[b][/b]].hasAttribute('media')){
        if (l[i[b][/b]].getAttribute('rel')=='stylesheet' && l[i[b][/b]].getAttribute('media').indexOf('screen')>-1 && l[i[b][/b]].getAttribute('media').indexOf('projection')==-1)
          l[i[b][/b]].setAttribute('media',l[i[b][/b]].getAttribute('media')+',projection');
        if (l[i[b][/b]].getAttribute('rel')=='stylesheet' && l[i[b][/b]].getAttribute('media').indexOf('projection')>-1 && l[i[b][/b]].getAttribute('media').indexOf('screen')==-1) 
          l[i[b][/b]].setAttribute('media',l[i[b][/b]].getAttribute('media').replace('projection','OperaShow'));
      }
    }
  },
  false
); 

EDIT: Sony have updated their Ultimate Dropdown Menu to version 4.42 and now support Opera 8.x.

Sony.com uses the Ultimate Dropdown Menu, but unfortunately they haven't upgraded it to the latest version supporting Opera 8. Therefore, I wrote the following UserJS fix:

if (window.location.href.indexOf('http://www.sony.com')>-1){
    window.opera.addEventListener(
        'BeforeScript',
        function(ev){if(ev.element.text.indexOf('um.o7=')>-1){ev.element.text=ev.element.text.replace(/um\.o7\)\{.*?\}/,'um.o7){um.o75=true;um.o73=true;um.o71=false;}')}},
        false);
}

When one publisher owns a couple of regional newspapers, it is to be expected that all related sites will use the same methods to annoy Opera users. The script to fix the issue is shorter than the list of sites to which it applies

• Leidsch Dagblad
  
• Limburgs Dagblad
  
• Telegraaf Holding
  
• HDC Media
  
• Limburgadverteren.nl
  
• NHD.nl
  
• Gooi en Eemlander
  
• Haarlems Dagblad
  
• IJmuider Courant
  
• Dagblad van het Noorden
  
• Vakantierecreatie.nl
  
• Almere Vandaag
  
• Autocircuit.nl
  
• MGL.nl

I haven't been able to get it working using the easiest method to list the relevant websites, namely

// ==UserScript==
// @include...
// ==/UserScript==

But the script below does the trick anyway:

if (window.location.href.indexOf('http://www.leidschdagblad.nl')>-1 || window.location.href.indexOf('http://www.limburgsdagblad.nl/')>-1 || window.location.href.indexOf('http://www.telegraafholding.nl')>-1 || window.location.href.indexOf('http://www.hdcmedia.nl')>-1 || window.location.href.indexOf('http://www.limburgadverteren.nl')>-1 || window.location.href.indexOf('http://www.nhd.nl/')>-1 || window.location.href.indexOf('http://www.gooieneemlander.nl/')>-1 || window.location.href.indexOf('http://www.haarlemsdagblad.nl/')>-1 || window.location.href.indexOf('http://www.ijmuidercourant.nl/')>-1 || window.location.href.indexOf('http://www.dvhn.nl')>-1 || window.location.href.indexOf('http://www.vakantierecreatie.nl/')>-1 || window.location.href.indexOf('http://www.almerevandaag.nl/')>-1){
    window.opera.defineMagicVariable(
        'bSupportedBrowser',
        function(){return true;},
        null);
}

Edit (2005-09-13): the site has been fixed.

The (2nd) largest Dutch university has an error in its portal for students that prevents Opera from showing the page correctly. Just visit www.student.uva.nl to see how the dropdowns fail to function. This can easily be fixed, but so far I haven't received a reply to my request for a change in their code. That's why I've written a small piece of userjs that does the webmaster's job.

Refer to the following MyOpera Forums threads for more details about the site:
http://my.opera.com/forums/showthread.php?s=&threadid=83669 (Dutch)
http://my.opera.com/forums/showthread.php?s=&threadid=83736 (English)
http://my.opera.com/forums/showthread.php?s=&threadid=84232 (English)

Here's the code you have to add to your UserJS file:

if(window.location.href.indexOf('www.student.uva.nl')>-1){
window.opera.addEventListener('BeforeScript',function(ev){if (ev.element.text.indexOf('id="opleidingenbachelorsselect"')>-1 || ev.element.text.indexOf('id="opleidingenmastersselect"')>-1 || ev.element.text.indexOf('id="opleidingendoctoraalselect"')>-1 || ev.element.text.indexOf('id="opleidingenoverigselect"')>-1) {ev.element.text=ev.element.text+'document.wri[b][/b]teln("</sel[b][/b]ect>")[b][/b];';}},false);
}