Thought Patterns

Safari seems to have a bug when it comes to swapping image sources using JavaScript. It seems that when swapping images, Safari will stretch the new image to the dimensions of the previous image.

View Test Page

This is a serious issue if you are building a cross-browser JavaScript image gallery. But there is hope, there are a couple of workarounds.

Workaround 1:

Load a blank or invisible image with the height and width of 1 pixel just before you load your replacement image.

Workaround 2:

Before you change the image source set the images style.display to ‘none’, swap the image src and then set the image back to style.display = ‘block’

Here’s an example of a basic image swap function with the Safari bug fix:

function swapImage() {
var imgElm = document.getElementById('preview');
imgElm.style.display = 'none';
imgElm.src = newImgSrc;
imgElm.style.display = 'block';
}

<img rc="firstImage.jpg" alt="image preview" id="preview" />

Cameron Web Development Safari

I’m currently developing a CMS (Content Management System) at work and needed a way to disable text selection on certain elements. I was aware of the Mozilla proprietary css property ‘-moz-user-select’ which takes the value ‘none’ to disable text but this is hardly a cross-browser solution. I did a quick Google, and found the following JavaScript function at Ajax Cookbook which attempts to disable text selection for all modern browsers:

function disableSelection(element) {
element.onselectstart = function() {
return false;
};
element.unselectable = "on";
element.style.MozUserSelect = "none";
element.style.cursor = "default";
}

View Full Article at Ajax Cookbook

Cameron Web Development Firefox, JavaScript

Cameron Operating Systems Apple, Mac

I’m currently developing a JavaScript picture gallery widget / web service and needed a way to access GET parameters that I’ve passed via one page to another. This is simple in PHP as you can just access the $_GET super global array. Well I did a bit of searching on the internet and found a snippet of code to achieve the same thing in JavaScript.

var $_GET = [];
var vars_area = location.search.substring(1);
if(vars_area.length > 2)
{
var get_sets = vars_area.split('&');
for(i = 0, k = get_sets.length; i < k; i++)
{
var parts = get_sets[i].split('=');
$_GET[unescape(parts[0])] = unescape(parts[1]);
}
}

Stick the above code in the head section of your page (within script tags) or at the top of an external JavaScript file. You’ll then have a very useful $_GET array which contains all your GET params and their associated values.

Cameron Web Development JavaScript, PHP

I know that my blog posts so far have been very Mac orientated, so not to break with tradition here’s another Mac related post. A colleague at work who’s a web/graphic designer gave me a link today to very neat program. This program shows a floating preview of incoming mail so that you can determine whether the message requires your immediate attention.

Mail.appetizer is a plug-in for Apple’s Mail and the current version is a beta, but so far a very stable one. There is also a panther version available.

Cameron Operating Systems, Software Mail.app, OS X

I decided that I needed to change the default search provider in Safari from Google-US to Google-UK. I thought that this would be a five second trip to Safari preferences, how wrong was I.

For some strange unknown reason Apple has decided to hard code the search provider (Google US) into the Safari application itself. I found various guides on the internet on how to change the default search provider, but they all required use of the Terminal and the not very easy to use editor Vi. Not forgetting that if you make any mistake when editing, it will render Safari completely useless.

After almost giving up I did one last search on Google and came across an excellent Safari plug-in AcidSearch. This plug-in not only lets you change the default search provider in Safari, it also lets setup multiple search providers which you can search on via a handy drop-down menu.

It seems development on AcidSearch has ceased and no longer works with latest version of Safari. All is not lost though as I have found a worthy replacement. Introducing Inquisitor! Inquisitor does a lot more than just allow you to change the default search engine, it completely enhances the entire search experience.

Website: http://www.inquisitorx.com/safari/

Cameron Software Browsers, OS X, Safari

One of the things that you’ve been able to do in IE on the PC for years is run multiple versions along side each other on the same machine. But Mac users wanting to do this with Safari have been out of luck, that is until now.

Today I stumbled upon Multi-Safari which claims to work round this problem. You have to install special packaged versions of Safari which can be download from the site. Each version contains the relevant version of WebKit and the Safari web browser. Installing these special versions of Safari do not overwrite the main WebKit, so you can safely install these without fear of damaging the main Safari installation.

Cameron Software, Web Development Browsers, OS X, Safari