Hey,
Just stumbled on a very interesting cross browser issue for Javascript. The problem was basically to find the actual dimensions of any image that is dynamically loaded in Javascript. Though the problem was seemingly simple, I got the code to work in Firefox() , but not on IE. The first approach was simple.
A hidden image tag was placed on the page, and Javascript loaded the image on the tag. It then waits hooks to the onload handler of that tag, a function that returns the width and height properties. Interestingly however, this works for the first time, but if the function is called again, IE does not call the onload method.
After a lot of googling, all I could find was that most used the approach of either used Image tag of new Image(), to create the image, place the URL in the source, and return the height/width right away. On disabling cache on Firefox, the approach failed- the images were not loaded, and hence, the dimensions were still zero. It seemed to work fine on IE however.
To wait till the image loads, i used the onload handler. On FF, the handler was called, but on IE, it failed. This is how the code looked like
var imgPreview = new Image();
imgPreview.src = document.getElementById("imageInputBox").value;
if (imgPreview.width > 0)
imgPreview.onload = function(){alert(imgPreview.width);};
I thought that the onload handler was not invoked due to closure, but I tried setting imgPreview = null, but even that did not work. There is some other reason that I am investigating, and would love to hear from you if you know it.
The only option to get it working was to handle the 2 cases differently, so here is what I got.
var imgPreview = new Image();
imgPreview.src = document.getElementById("giftImage").value;
if (imgPreview.width > 0)
{
alert(imgPreview.width);
}
else
{
imgPreview.onload = function(){alert(imgPreview.width);};
}
This approach works for me, and I am able to get the dimensions. You can check out the site, http://scraps.geekstimeout.com, to see how it works.
And for all the people who are following the development features of scraps.geekstimeout.com, you can now send gifts to friends without problems, both from FF and from IE.
Orkut Applications !!
Hey,
OpenSocial has not arrived yet, the charm of FaceBook applications is fading, most Indians are on Okrut, and the holiday season rushing past. This is one time of the year where people send scraps to friends greeting them for christmas and new year. I have seen many sites trying to capatilize on it by offering flash content that can be posted as scraps. However, the flash is invariable all glitters and no logic. That is when I though of getting something similar done, that would appeal to people.
An old friend of mine had once challenged me to write an application that people will use, that does not use any backend code or database. He dared me to hack only with Javascript, HTML, CSS and may be flash.
Well, this was the time, and I started writing this page. You can check the page out at http://scraps.geekstimeout.com. The basic idea of the site is to allow people to send gifts as orkut scraps. The addition is that the gifts can be hidden inside a gift wrapper that can be opened only at a specified time. It is the last part of the story that adds that "suspense" and "surprise" element to the story.
Without a timer
Send this to your friends
With a timer
Send this to your friends
Here is how the gift looks like, when embedded on a page.
The technical details now, the site was written entirely in HTML, CSS and Javascript. I know that this is not the best Javascript that I have written, but it is all I complete in one night. The scraps that are sent are in Flash, the code written in Laszlo and Swish. As there is no real backend code, hacking this stuff is simple, and people can cheat to see the gifts sent to them even before the timer expires. There are atleast two ways of doing that, and I don't want to put them down here as it may spoil the fun.
After a little of viral marketing, the traffic to the site was good, but it was more because people were fetching the swf files. I hope to see a surge in traffic if people like the idea. In the meanwhile, if you like the idea of gifting stuff on orkut, and adding the surprise element, please use the application. As always, I would be glad to hear suggestions and feedback on the idea. To follow updates on this, you can check out the "scrapstimeout" tag
P.S. The environment that triggered the implementation of this idea is at my non-technical blog. Would make an interesting read.
OpenSocial has not arrived yet, the charm of FaceBook applications is fading, most Indians are on Okrut, and the holiday season rushing past. This is one time of the year where people send scraps to friends greeting them for christmas and new year. I have seen many sites trying to capatilize on it by offering flash content that can be posted as scraps. However, the flash is invariable all glitters and no logic. That is when I though of getting something similar done, that would appeal to people.
An old friend of mine had once challenged me to write an application that people will use, that does not use any backend code or database. He dared me to hack only with Javascript, HTML, CSS and may be flash.
Well, this was the time, and I started writing this page. You can check the page out at http://scraps.geekstimeout.com. The basic idea of the site is to allow people to send gifts as orkut scraps. The addition is that the gifts can be hidden inside a gift wrapper that can be opened only at a specified time. It is the last part of the story that adds that "suspense" and "surprise" element to the story.
Without a timer
Send this to your friends
With a timer
Send this to your friends
Here is how the gift looks like, when embedded on a page.
The technical details now, the site was written entirely in HTML, CSS and Javascript. I know that this is not the best Javascript that I have written, but it is all I complete in one night. The scraps that are sent are in Flash, the code written in Laszlo and Swish. As there is no real backend code, hacking this stuff is simple, and people can cheat to see the gifts sent to them even before the timer expires. There are atleast two ways of doing that, and I don't want to put them down here as it may spoil the fun.
After a little of viral marketing, the traffic to the site was good, but it was more because people were fetching the swf files. I hope to see a surge in traffic if people like the idea. In the meanwhile, if you like the idea of gifting stuff on orkut, and adding the surprise element, please use the application. As always, I would be glad to hear suggestions and feedback on the idea. To follow updates on this, you can check out the "scrapstimeout" tag
P.S. The environment that triggered the implementation of this idea is at my non-technical blog. Would make an interesting read.
Gift Wrapping Javascript !! :: Updated
Hey,
Holiday Season is back here, and I made a couple of changes in the GiftWrapping JS code that I had earlier written on the request of a friend. The image now is bigger and the gift sits better in the gift wrap.
Here is how it looks now. If you are still having problems aligning the gift to the wrapper, just tweak a little with the GiftWrapper.js. In the file, you have a structure called GiftWrapper.wrapperImage. The image defines the closed animation images along with the top, left, width and height CSS styles of the gift image. Tweak this to get the perfect alignment.
If you don't see the animation on clicking the "open gift" first time but works the second time, it means that the animation completes before the image is completly loaded and rendered. If you see this problem, just load the images using the new Image() tag, so that it will be cached in the browser.
As always, you can use this for both commercial and non-commercial uses, with no liabilities on the author.
Holiday Season is back here, and I made a couple of changes in the GiftWrapping JS code that I had earlier written on the request of a friend. The image now is bigger and the gift sits better in the gift wrap.
Here is how it looks now. If you are still having problems aligning the gift to the wrapper, just tweak a little with the GiftWrapper.js. In the file, you have a structure called GiftWrapper.wrapperImage. The image defines the closed animation images along with the top, left, width and height CSS styles of the gift image. Tweak this to get the perfect alignment.
If you don't see the animation on clicking the "open gift" first time but works the second time, it means that the animation completes before the image is completly loaded and rendered. If you see this problem, just load the images using the new Image() tag, so that it will be cached in the browser.
As always, you can use this for both commercial and non-commercial uses, with no liabilities on the author.
The redirections on Google Search Results
Hey,
The Google search results page is known to have changed fortunes of many websites. With a whole industry dedicated just to get websites as the top results, it sure is one of the most valued assets on the internet.
However, as a regular user, I have often found it irritating that I cannot "copy link location" from the page and send it across to a friend. Instead of the link getting copied, the Google local redirection URL gets copied. Google primarily uses that Url to keep count of user click, but it breaks the right click functionality.
I found this greasemonkey script to fix it. Before we get to the solution, here is a quick gist of what the Google script does. On the search page, every search link is associated with an onmousedown event that calls an rwt() event. This event replaces the href URL with a www.google.*/url?
The greasemonkey script tries to nullify this function by attaching another event handler, and restoring the original link location.
This solution however, breaks the "Web History" functionality of Google as Google will now have no clue about the links that have been clicked. Hence, a small enhancement could be to use the XmlHttpRequest object to make a call to the url that the Google script creates while leaving the screen. There is no need to wait for the return of that function as it will only return a HTTP redirect code. Not only does this approach reduce the extra redirect time, it also gives us the correct URL when we copy.
A quick note of the greasemonkey script, it only runs on google.com/*. You may want to include your localized google page (google.co.* for example) , to make it run on your pages also.
The Google search results page is known to have changed fortunes of many websites. With a whole industry dedicated just to get websites as the top results, it sure is one of the most valued assets on the internet.
However, as a regular user, I have often found it irritating that I cannot "copy link location" from the page and send it across to a friend. Instead of the link getting copied, the Google local redirection URL gets copied. Google primarily uses that Url to keep count of user click, but it breaks the right click functionality.
I found this greasemonkey script to fix it. Before we get to the solution, here is a quick gist of what the Google script does. On the search page, every search link is associated with an onmousedown event that calls an rwt() event. This event replaces the href URL with a www.google.*/url?
...url, hence causing the irritation.The greasemonkey script tries to nullify this function by attaching another event handler, and restoring the original link location.
This solution however, breaks the "Web History" functionality of Google as Google will now have no clue about the links that have been clicked. Hence, a small enhancement could be to use the XmlHttpRequest object to make a call to the url that the Google script creates while leaving the screen. There is no need to wait for the return of that function as it will only return a HTTP redirect code. Not only does this approach reduce the extra redirect time, it also gives us the correct URL when we copy.
A quick note of the greasemonkey script, it only runs on google.com/*. You may want to include your localized google page (google.co.* for example) , to make it run on your pages also.
Reversing Websites with the "WTF character" :: ҉
Hey,
Firstly, the character is not called the "WTF character"; that was the title to the story that had the character as the topic. For a small background, that character is the bidirectional character that allows text to be written right to left. All Unicode editors display text following the character from right to left. The character is
Though the character is seemingly harmless, it can have interesting side effects if inserted at appropriate places on the web. Sridhar's reddit tag cloud application was showing all tags in reverse as one of the articles had the article. That was when I started looking for places where the character could wreak havoc. Apparently, for HTML pages, the character seems to reverse all text following it in the inline tags. On encountering a block element, the reversing effect ceases.
I first tried this as the display name on Orkut. As orkut appends profile visitors as a SPAN, the names that followed mine were reversed !! On meebo, the moment you enter it in a chat room all converstations reversed ! On Yahoo Mail beta, I could hit the "To" field in revieved mails if one of my contacts had the character as a mail alias. Google search definately fails.
Though this is no real threat, it sure is a fun way to reverse contest of websites, leaving the other users wondering about the reason !!
Firstly, the character is not called the "WTF character"; that was the title to the story that had the character as the topic. For a small background, that character is the bidirectional character that allows text to be written right to left. All Unicode editors display text following the character from right to left. The character is
The characters used are as follows:
0489;COMBINING CYRILLIC MILLIONS SIGN
202A;LEFT-TO-RIGHT EMBEDDING
202B;RIGHT-TO-LEFT EMBEDDING
202C;POP DIRECTIONAL FORMATTING
202D;LEFT-TO-RIGHT OVERRIDE
202E;RIGHT-TO-LEFT OVERRIDE
Though the character is seemingly harmless, it can have interesting side effects if inserted at appropriate places on the web. Sridhar's reddit tag cloud application was showing all tags in reverse as one of the articles had the article. That was when I started looking for places where the character could wreak havoc. Apparently, for HTML pages, the character seems to reverse all text following it in the inline tags. On encountering a block element, the reversing effect ceases.
I first tried this as the display name on Orkut. As orkut appends profile visitors as a SPAN, the names that followed mine were reversed !! On meebo, the moment you enter it in a chat room all converstations reversed ! On Yahoo Mail beta, I could hit the "To" field in revieved mails if one of my contacts had the character as a mail alias. Google search definately fails.
Though this is no real threat, it sure is a fun way to reverse contest of websites, leaving the other users wondering about the reason !!