Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/24/d152177141/htdocs/techblog.tonycollings.com/wp-content/plugins/code-highlighter/geshi.php on line 2147

This post really is for personal reference and if anyone, surfing the internet is looking for an answer to this particular problem, finds this remotely helpful then I'm glad I could have helped out!

THE PROBLEM: setInterval(); and setTimeout(); calls weren't being honored in Safari. Safari only. Everything else was perfect. I was building a basic slide show on one of our websites with some cross-fading action using the fabulous MooTools framework. However my first problem was that the website was running a legacy edition (1.11) of the MooTools framework so I had to dust of the 1.11 documentation. Code written; all worked beautifully in everything except Safari. I declared an array of images to use in my slide show, wrote a function to preload, inject and fade the image. This was then repeated on a timer using setInterval('myFunction()',6000);

Worked brilliantly in all but Safari.

Not being a Mac user (sorry Mac folks) I was initially frustrated at Safari's lag of debugging tools until I came across an article describing how in terminal you can enable a debugging menu. % defaults write com.apple.Safari IncludeDebugMenu 1

This is where all the detective work began. After enabling debugging I was presented with this error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7: An attempt was made to modify an object where modifications are not allowed

Some quick Googlin' later revealed that this is typically seen if you are trying to use the .innerHTML property when you've set your !DOCTYPE to XHTML. Hummh!? Never knew that. Turns out using .innerHTML in an XHTML !DOCTYPE is actually invalid markup. This blog article originally written in 2005 expounds on the semantics, however; it seems some browsers have actually built in tolerance to allow .innerHTML to be used in XHTML !DOCTYPE's, most, of course, except -webkit based browsers. Hello Safari!

So what does .innerHTML have to do with the slide show not working. Well... It turns out that all of the $(element).inject[where](); methods in MooTools 1.11 all rely on the following method. $(element).setHTML();

A quick look at that method in the source edition of the framework reveals:

  1. span style="color: #3366CC;">''

... and there is the culprit this.innerHTML

SOLUTION: Modify the .setHTML method to use another method included in MooTools 1.11

  1. span style="color: #3366CC;">'html'''

... VOILA! Now when I .injectInside() after preloading the image I'm using markup that Safari considers valid. Problem solved!

Further Reading