Today I had a problem with storing cookies in Safari 4, in every other browser (including Safari 3) the cookies would be saved, however in Safari 4 the cookie would not save. The cookie I was trying to save was a CSV list of values like:
,item1,item2
The list of values started with a comma and this turns out to be the problem. If you have this comma Safari 4 will create the cookie but will not save the data, so you end up with an empty cookie.
Thought I would blog this after I found this rather strange JavaScript behaviour. The scenario is that I have a list of items which display a short description. Clicking the button then expands the short description to the full description. I decided on a simple solution, I would have a hidden element that contained the full description. When the user clicked the expand button the short description would hide and the full description would display. This was easy but I wanted an animation to play when this happened, this is when it got interesting. This was my first try. See what happens when you click the arrows:
;%20ImageSwap('image1','/image.axd?picture=2008%2f9%2fArrowLeftToRight.gif','/image.axd?picture=2008%2f9%2fArrowRightToLeft.gif');)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum blandit molestie nunc. Ut aliquet egestas lorem. In hac habitasse platea dictumst. Nulla orci. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum blandit molestie nunc. Ut aliquet egestas lorem. In hac habitasse platea dictumst. Nulla orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar tortor non nisl. Nam eget libero ut nibh iaculis fringilla. In elit. Morbi ut nisi. Nam vitae magna. Suspendisse potenti. Proin venenatis, tortor iaculis consequat pellentesque, nulla lorem sollicitudin sem, in pulvinar nisl sem sit amet nisl. Donec eros metus, viverra in, pretium aliquam, porttitor vitae, magna. Maecenas vel sapien quis lectus pretium ultrices.
;ImageSwap('image2','/image.axd?picture=2008%2f9%2fArrowLeftToRight.gif','/image.axd?picture=2008%2f9%2fArrowRightToLeft.gif');)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum blandit molestie nunc. Ut aliquet egestas lorem. In hac habitasse platea dictumst. Nulla orci. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum blandit molestie nunc. Ut aliquet egestas lorem. In hac habitasse platea dictumst. Nulla orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar tortor non nisl. Nam eget libero ut nibh iaculis fringilla. In elit. Morbi ut nisi. Nam vitae magna. Suspendisse potenti. Proin venenatis, tortor iaculis consequat pellentesque, nulla lorem sollicitudin sem, in pulvinar nisl sem sit amet nisl. Donec eros metus, viverra in, pretium aliquam, porttitor vitae, magna. Maecenas vel sapien quis lectus pretium ultrices.
If you click both images several times you will start to see that both arrows move, not what I wanted. This was something I didn’t expect, however after a little thinking this suddenly made sense. The code I was using to swap the images was:
30 function ImageSwap(elementId, imageUrl1, imageUrl2){
31 var obj = document.getElementById(elementId);
32
33 if(obj.getAttributeNode("src").value.indexOf(imageUrl1) >-1){
34 obj.getAttributeNode("src").value = imageUrl2;
35 }
36 else{
37 obj.getAttributeNode("src").value = imageUrl1;
38 }
39 }
This tells the browser to change the source of the image on the target element. However at certain times both arrow images point to the same image " /image.axd?picture=2008%2f9%2fArrowLeftToRight.gif"; so when I tell the browser to change the image the browser plays the animation again, any other element that points at this image automatically plays the image again because they all look at the same in memory object. So what was the solution? Well I needed a way to ensure that each image was held uniquely in memory. One sure way to do this is to change the URL. If the URL to image is different the browser has to load it into a separate object in memory because it might slightly differently. The easiest way to do this is to append a query string value that means nothing to the end of the URL. The server will ignore the additional value but the browser will think that it is a different image. Hence the following JavaScript
40 function ImageSwap2(elementId, imageUrl1, imageUrl2){
41 var obj = document.getElementById(elementId);
42
43 if(obj.getAttributeNode("src").value.indexOf(imageUrl1) >-1){
44 obj.getAttributeNode("src").value = imageUrl2+"&"+elementId;
45 }
46 else{
47 obj.getAttributeNode("src").value = imageUrl1+"&"+elementId;
48 }
49 }
You can see the result below:
;%20ImageSwap2('image3','/image.axd?picture=2008%2f9%2fArrowLeftToRight.gif','/image.axd?picture=2008%2f9%2fArrowRightToLeft.gif');)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum blandit molestie nunc. Ut aliquet egestas lorem. In hac habitasse platea dictumst. Nulla orci. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum blandit molestie nunc. Ut aliquet egestas lorem. In hac habitasse platea dictumst. Nulla orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar tortor non nisl. Nam eget libero ut nibh iaculis fringilla. In elit. Morbi ut nisi. Nam vitae magna. Suspendisse potenti. Proin venenatis, tortor iaculis consequat pellentesque, nulla lorem sollicitudin sem, in pulvinar nisl sem sit amet nisl. Donec eros metus, viverra in, pretium aliquam, porttitor vitae, magna. Maecenas vel sapien quis lectus pretium ultrices.
;ImageSwap2('image4','/image.axd?picture=2008%2f9%2fArrowLeftToRight.gif','/image.axd?picture=2008%2f9%2fArrowRightToLeft.gif');)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum blandit molestie nunc. Ut aliquet egestas lorem. In hac habitasse platea dictumst. Nulla orci. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum blandit molestie nunc. Ut aliquet egestas lorem. In hac habitasse platea dictumst. Nulla orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar tortor non nisl. Nam eget libero ut nibh iaculis fringilla. In elit. Morbi ut nisi. Nam vitae magna. Suspendisse potenti. Proin venenatis, tortor iaculis consequat pellentesque, nulla lorem sollicitudin sem, in pulvinar nisl sem sit amet nisl. Donec eros metus, viverra in, pretium aliquam, porttitor vitae, magna. Maecenas vel sapien quis lectus pretium ultrices.
However one thing to consider is that like all solutions there are down sides, the main one being that each image has to be retrieved individually even though it really is the same image. This means a lot more HTTP traffic to your site and possibly slower page load times. If you have short lists then this is not to much of a problem but on longer list it could be a lot more data. For example if I use the images above they are about 1Kb in size each; for each list item I have to load at least one arrow, so if I have a list of 50 items that 50Kb plus then and additional 1Kb each time and image is clicked.
It is a busy blog day but I have just add a little tool from http://www.pushuptheweb.com. This brilliant piece of JavaScript and images displays a small reminder to users if their browser is out of date and needs updating. It works for a variety of browsers; Firefox, IE, Safari and Opera. The web has needed something like this for a while; developing web sites is a bizarre job. I can not think of many industries where they have to ensure that their product will work perfectly on technology that is years out of date and been replaced by several newer versions especially when those new versions are free, but this is the problem we web developers face. Maybe this small tool will start to bring users up to date.
All blogs tagged with 'browser'
Thank you for contacting me. I will try to reply as soon as possible.