Transform, Scale, Zoom, and more: across browsers

mag-inIn the process of creating an internal tool for my team I found that trying to zoom an image and move it around was not as simply as a single “zoom” CSS attribute. While Chrome supports “zoom” and it works quite well, the other browsers don’t work consistently, especially if you store the zoom and position values in a script. I stored the positions on the images to be replayed and I found all kinds of inconsistencies across browsers.  What did work consistently is the  transform CSS property, but that brought another challenge.

Continue reading

HTML5 Automation best in Internet Explorer – See for yourself

The video in the previous post did not do the test justice as many could not tell it truly is a smoother animation so here you go, you can view this web page yourself on the different browsers.

What I see on my machine is a much smoother animation of both the outer box and the growing text. Notice it is not choppy at all in IE, very smooth. And just an FYI, I am a solid Chrome user for a few years now, before that FireFox, and before that IE. With all of these IE commercials on television I had to see if this really was “faster”, at least in this space. I would be interested to hear what others see.

Link also here.

Testing your code…

As many readers have been reading on my site the attachment viewer has gotten a lot of attention both on the site, internally at IBM and also in my personal email.  This last update actually broke in a couple of places – first was the MAC issue where I unintentionally put requirements on a specific bundles (something that Eclipse does automatically when you select a dependency).  And second – the debug options are displaying by default.  I figured I would take this time to explain what the debug options are.

  1. This is the URL of the page, I use this URL to open the viewer in an external browser for testing (Firefox, etc).
  2. This is the information passed into the JavaScript side of the application
  3. This is the JSON representation of the array passed into the selection handler in JavaScript.  You can copy and paste this into the #4 area and click Submit to test the viewer in the external browser.
  4. The form used in the external browser to test the viewer with a specific content type.

I have since added a preference screen to enable the Debug options as an end user and this preference screen will be used for more future preferences.

Since this is really a weekend and night project I will be working on it as so but I am also pretty excited to work on this because of the many people already playing with it and providing feedback.

My next steps are to make the Syntax highlighter an OSGI service and introduce the OSGI service extension so more converters can be added easily in the future.

Hopefully I can get an update out before the end of the week.  The first thing I need to do is come up with a basic test script so I am not causing stupid regressions!

Browser sniffing – Detecting what browser is being used with Dojo

Even though Dojo does a great job in making cross browser and platform JavaScript development very easy there are times when you may want to do something that is specific for a browser.  Instead of re-inventing the wheel you can use the many functions in the Dojo library to help with this. There is an entire article on “browser sniffing” on the Dojo toolkit web site and it comes with a few good examples to learn from:

  • dojo.isIE
  • dojo.isMozilla
  • dojo.isFF
  • dojo.isOpera
  • dojo.isSafari
  • dojo.isKhtml
  • dojo.isAIR – true if running within the Adobe AIR enviroment
  • dojo.isQuirks – is the browser in Quirks-Mode
  • dojo.isBrowser (not typically needed when only targeting browsers)