ImageButtons that are DefaultButtons cause an error on Firefox 3

Ok, so suddenly with Firefox 3 I've been getting errors on some pages. They have an ajax panel (from Telerik, but I've found out this happens with other ajax libraries) that wraps a asp:Panel (with default button set to) an asp:ImageButton.

This works fine on all browsers. Except Firefox 3. It'll return an "Input String was not in a correct format." It seems on loaded of some posted data it is expecting an Int and it is a String.

I was stumped on this. Taking out the ImageButton (and just having it be a regular button) fixed the problem. Not making the ImageButton the default button for the panel fixed the problem. Taking out the ajax wrapper panel fixed the problem.

After banging my head on this for quite a while my coworker Del found the solution. It turns out that there is a weird double post-back happening, leading to much confusion. By adding:

OnClientClick="this.disabled=true;__doPostBack(this.name,'');"

To the imagebutton and everything works. The page that he found that talks about this is http://forums.asp.net/p/1121832/1757434.aspx which also gives some other solutions to the problem. Here is another link http://www.andornot.com/about/developerblog/2007/09/fix-firefox-defaultbutton-issue-with.aspx

Unfortunately, we'll probably have to go back to all of our old websites to find and fix this behavior (I've been able to reproduce it in many sites we've done that have been up (and bug free) for a while. I don't think it is necessarily a firefox 3 issue, but has more to do with timing.

Dynamic recrop of images

So this e-commerce site I'm doing has thousands of images. Some unfortunately were non-square and then placed centered on a white background, even if the predominant colors were darker. Going through all of these would be a nightmare production task.

I wondered if I could programmatically detect these rectangular white regions, and replace them with a better chosen color. The problem is that some of the images are really on a white background, centered and shouldn't be touched.

I've written some code that comes in diagonally until it detects a pixel that isn't white is the next pixel. I then check a vertical and horizontal line from that point. If one direction is all white, I assume that it is a rectangular region. Same from the bottom right corner coming up.

If one of these checks fail in both directions I bail. If I detect different orientations on the top and the bottom I bail. But if I detect horizontal or vertical stripes of white I then step in one pixel from all four "corners" and then average the color values. I then use this color to fill the white regions.

I know that certain shapes (peanut like) can screw up this calculation. Still the color chosen for the fill in that circumstance will be decent (and only fill white regions). Also some of the images have dithered edges, possibly throwing off the calculation. Still this seems to work pretty well.

Click here to see what I'm talking about. The first three images are a diagram of how the code looks at various images. The next items are the full size image, image resized (with border) without this dynamic cropping applied, and image resized with dynamic cropping applied.

Adjusting images for image size/file size

I'm working on an ecommerce site and want to work from a single source image for the items.

Using some of the ideas I've talked about before I can resize the images on the fly, but I wanted to also set a maximum file size for the images (after all, if I'm making a 25x25 thumbnail, it shouldn't be over 5k)

I'm saving a memory stream as a jpg, and torquing down the Encoder.Quality setting until the stream is less than the number of bytes I'm trying to fit in.

This is working really well, check out this to see (I'm also adding rounded corners to the images)

Tracking on click/mousover

I was asked to add tracking of downloads to the CMS I've written. The problem is that people can insert links to documents anywhere in the content. Also a landing page wasn't going to be acceptable, so the tracking would have to not interfere with the link still downloading the file. This tracking would also have to put in the user if signed in.

By doing a text replace on the content for an "A" link that referenced the document directory I could programmatically insert an onclick event for the A that I had replace the background image of the link with the output of a page that I created that could do the tracking. I later realized that I could just have javascript load the page and so didn't have to mess with the background image or have the page output anything. Since this could also be done on mouseover/mouseout I could track even how long they hovered over a link even if they didn't click it.

This actually works amazingly well. By passing "this.href" through I could also easily know which document they had clicked on. I was a little worried about the href and onclick interfering with each other, but it seems to work fine on all browsers.

The on the fly replace trick is one I use for a very simple (and not very secure) files that require registration option. I have the CMS allow for uploading files to a registration required directory and then search and replace on a links referencing files in those. Again not secure at all, but most of the time the only reason these files are set up this way is to harvest leads. This allows for files to be uploaded anywhere, and is easy to implement.

I used XMLHttpRequest to make the request for the page in javascript.

PNGs have driven me crazy

In the past. Sometimes it seems like matching colors never quite works out right. I'll always have to tweak colors to get things to look right, or jpgs and gifs placed right next to pngs don't match. The same png would look different in two different browsers.

I found the answer to this problem. Photoshop saves extra meta information with 24-bit pngs (like gamma correction) which is applied differently by browsers. Here is an article all about it

http://www.polarbearlamps.net/2007/04/png_color_mismatch_on_the_web.html

and some useful info about the problem http://morris-photographics.com/photoshop/articles/png-gamma.html#remove

Why viewstate nearly killed me

I've been working for the last two months on a huge e-commerce site with a configurator of high-end gaming PCs. (http://www.hp.com/blackbird)

Because of complex rules of component interactions I was loading the entire component set (even though it is displayed on seperate pages) and relying on viewstate to keep track of what was selected. Because each selection could enable/disable any other as well as change messaging and force selection the logic to drive this was very complex. The initial decision of a base model also determined the base feature set to work with. All of the controls on the page would be dynamically created in the init function.

We started having sporadic invalid viewstate exceptions, with no consitent reproduction steps. I tried compressing the viewstate (which was large, at 16k), making sure I wasn't loosing the session (and therefore the model selection) and then moving the entire viewstate into session. Nothing seemed to work.

The problem seemingly came and went, several times we thought we had eliminated it but it would reappear.

The problem came down to how I was trying to optimize the data queries, and storing information in appdomain. I had inadvertently stored some information that was model dependant in the application domain and if multiple people were choosing different models at the same time the viewstate would be different than the created list of controls. Sometimes.

Anyway after a week and a half of monkeying with the viewstate it turned out that the exception message was right and the list of controls was mismatched.

I'll put up another post with some of the other solutions I tried as well.

IE7 .NET and disabled radio buttons

Trying to have disabled radio buttons on a black background was hairy in .NET

Because .NET puts them in spans and sets disabled="disabled" they were getting a white drop shadow. Of course when you have radio buttons on a white background you don't notice this, but on a black background it was ugly.

Here is the javascript we used to strip the spans of the flag (and since the radio input itself was disabled, it still worked fine). Thanks to Josh for coming up with the javascript.

var els = document.getElementsByTagName("span");
for(var i = 0; i<els.length;i++)
{
els[i].removeAttribute('disabled');
}

Ajax, Telerik and mootools ouch

I was having massive problems with getting javascript (to control mootools) to correctly work with calls set up through a Telerik Ajax Panel. I was doing the trick of populating (serverside) a literal on the page with the javascript I wanted to execute, but I wasn't getting the javascript to be evaluated. I was sure I have gotten this to work in situations in the past and realized that the reason the javascript I was injecting wasn't being evaluated was because the literal was on the page itself and not in a user control. Pulling everything into a user control allowed the injection trick to work (and the javascript to be evaluated.) Makes sense when I thought about it, but I thought I'd write it down in case anyone else has the same problem.