Web Design Forum: Ashley Byrom - Viewing Profile - Web Design Forum

I'm not trying to promote anything or sell anything, I just think I could do with a few more people to talk about web design and dev to.

I'm primarily a web developer, though I attempt design now and then. I've done a bit in iOS/OSX development (when I say a bit, I mean a bit!)

I'm literally just looking for developers/designers to follow on twitter, have on Skype, answer questions, ask questions or just to chat to. It's a Sunday and I fancy procrastinating.

So, yeah.

Twitter: @ashleybyrom
Skype: ash.byrom

I just thought I'd post here to see if there's a more efficient method.

I want the user to be able to select a part of an image, then add an effect to it (Sepia, Black & White etc.) and then when they're done I can generate this new, cropped image with the effect.

I'm using jQuery UI to have a div that the user can drag and resize on top of the image.

I'm also using Pixastic to add the image effects in realtime on modern browsers (older browsers will have a note saying your browser sucks, the effects will be added in the next page)

Then using the divs position and size and the selected effect I can crop and apply the effects in PHP on the next page to create the actual image.

Is this a sensible way of going about it? I don't want to have to use HTML5 because then I'm waving goodbye to most IE users which isn't really a possibility...

Also if anybody could comment on the method I'm using with CSS clip to black out the rest of the image, that'd be helpful.

Edit: Link - http://dev.ashleybyr....uk/dragresize/ I'm still playing with it so expect bugs. (If anybody knows how I could fix it so the rest of the image stays blacked out in Chrome when you add an effect that would be nice!) - Doesn't work fully in IE yet either so don't bother going on it in IE yet..

I can't find it anywhere so does anybody know which browsers support the prefix-less linear-gradient CSS? Cheers

This is hard to explain so there's a demo at the bottom.

Basically I have a div set to 74% width of its container.

I'm using jQuery's width

var parentWidth = $('#headerNavColumn').width();
console.log(parentWidth);

It doesn't work if the browser is loaded and the window is too small causing the div to shrink in width.
Instead of returning the shrunken value it returns the width the div should be (if it wasn't shrunk)

If you resize it returns the right width immediately. It's just the initial width that's not being returned properly.

Link - Resize your window to be about 800px wide. Refresh and notice the header nav overflows (the width is logged in console). Then resize and watch it fix itself. Check your console to see the widths logged on resize.

I need to give a div a radial background colour that's customisable (so, using CSS)

The only problem is when I do this the background image I have assigned to it (simple translucent texture) goes away. It seems like it's one or the other. Anybody got any tips?