It’s Just Poison…

For the longest time I’ve been struggling with an issue of browsers caching dynamic images that have the same name. Here’s my use case:

A user has a profile photo on their profile photo that’s called MyProfilePhoto.jpg. The user uploads a new image for their profile photo. When they load their profile page, the browser sees the request for MyProfilePhoto.jpg and just pulls from cache. But in reality, the image has changed. This causes the user to re-upload the photo and get super frustrated. The solution seems to be stupidly simple: Append a random querystring value.

So my new image source value is something like: MyProfilePhoto.jpg?r=1234

This causes the image to be reloaded every time the page is loaded. Another way that I’ve thought about attacking this and making it a little more controlled is to store a random value to the database when a new image is uploaded and just append that value to the querysting. This will ensure that the new image is always loaded, and that it will pull from cache until the image changes.

I’m just lazy, and don’t want to add more fields into my user tables =)

You can see this in effect on my profile page on bodymod.org. Just view the source of my profile image.

.: Adam

Tags: ASP / .NET, Browsers, Web Design by .: Adam
No Comments »

I spent a few hours last night looking for a good color picker for the new version of BodyMod.org and I found 2 really nice ones.

The first was a really fancy looking one from ColourMod.com.

It’s $5 to use, and I figured it was worth it, but first I wanted to try it out on my site to make sure that it’ll work with all my styles and JS code I got goin on. I figured support at 6am on a sunday wasn’t too high, so I just borrowed the code from their site and tweaked it to get it to run on my server. End result: doesn’t work with my site. Crap. On to the next one.

The second one I found was free (i love that word), and open source (even better!). This was done by ColorJack.com.

This one worked right out of the box. Beautiful script, and really small too! A lot smaller and easier to implement than colourmod.

My only gripe (if you wanna call it that), is that it wasn’t made to handle color picking for more than one area on the same page. So, let the hacking begin!

Well into Sunday morning (now 9am), I couldn’t get it to work right…ARG! I sleep on it, and when I wake up I get an idea. BAM! Works like a charm =). So if you need multiple color pickers on the same page, this one will do it for ya! Here’s the code I modified to get it to work:

Plugin.js

function toggle(v,id) { $S(v).display=($S(v).display=='none'?'block':'none');$('divUpdateID').innerHTML=id; }

Add this to the HTML Code put at the top of the page:

Modify the calling javascript to this:

function mkColor(v){$S($('divUpdateID').innerHTML).background="#"+v;$($('divUpdateID').innerHTML).value=v;}loadSV(); updateH('F1FFCC');

Then update the onClick call from the launcher:

Launch

In the example above, the color picker will update the textbox with the id of colorArea. It will put the selected color as the background and the hex value in the text box as the value.

If you want to launch more, you just change the id of the text box you want to update in the toggle function. So you can change colorArea to colorArea2 for the second box.

I also really like his use of shortening the whole ‘document.getElementById(’blah’)’ down to just $(’blah’). I’ll be using that one from now on!

function $(v) { return(document.getElementById(v)); }
function $S(v) { return($(v).style); }

So smooth…

Tags: CSS, Javascript / AJAX, Web Design, Web Sites by .: Adam
No Comments »

Have Photoshop and want to make an .ico icon file? Well, you can’t! At least, not out of the box. Thankfully, there’s some nice people on the web =). You can get a free PS plugin to save files as .ico!

Get It Here!

If you’re making Favicons (which is why i stumbled across this thing), here’s a great tutorial:

How to make a Favicon in photoshop

Enjoy!

Tags: Web Design by .: Adam
No Comments »