Archive for the ‘Web’ Category
IE8 Issue with CSS margin:0 auto
March 26th, 2010
It is a common practice to use the CSS style – margin:0 auto to make a content centered. This very simple effect gave me a really hard time for last couple of days. This works pretty fine on FF-3.x, Opera-9.x, Safari-3.x, IE-6(!) and IE-7. But when I load it with IE-8, the element is left aligned, not centered!!! I was just thundered and had not idea what to do.
So what was happening?! Is it another bug of IE-8 to make us hate it more?! Not exactly. After finding out what was happening, I think that was pretty much my fault and I can forgive IE for this one time. 
Enough bullshit, let’s come to the point. There are three possible solutions for this problem.
First one:
Make sure that the page header has this: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” “http://www.w3.org/TR/html4/strict.dtd”> Read the rest of this entry »
Get image data from client side using javascript
December 16th, 2009
Well, I had a requirement to show a preview of image, whenever client selects an image inside a form. First I thought it was just a easy task… But it really took about one hour of me to figure the way out…
As it was an input element with type=file, I simply tried to get the value and push it to an image element’s source attribute attaching ‘file://’ at the beginning. But life’s not that easy! The value only returns the file name not the full path. How can I get the full path??!! I can see the path on the input box, but I can’t get it!!!
Next approach, go to our best friend, Google! Well, I guess she wasn’t very pleased with me and didn’t help me very much…
Now what?! Well, let’s try the DOM inspector of Firefox. There I found three functions for the file input element.
- getAsBinary()
- getAsDataURL()
- getAsText()
They are all self explanatory… My head was already stuck at that moment. So I didn’t see the ‘Data URL’ function first. Tried to parse binary for a while. But couldn’t find a way to push the binary data of an image inside the image tag. Then I noticed the next function. Well, it worked like a charm. I just pushed the function’s return value to the image tag’s source attribute. Done.
So, to get the file path, the call should be like:
file_input_element_id.files[0].getAsDataURL()
That’s all…
N.B. For IE, it works OK with adding the ‘file://’ before the value of input element. You just need to have proper permission level.
Advanced object selection using Mootools
August 4th, 2009
Mootools’ “Selectors” utility has some really strong feature. It really saves a lot of time and sweat. Using this property, one can select a tag (any one can!), tag with specific name, id or any other attribute (huh!) and most amazingly part of a property value matching to some string…
Say you want to select all the div tags which has ID starting with ‘my’. How can you do that? Read the rest of this entry »
Posted in HTML, JavaScript, Tips & Tricks, Web | 
Tags: JavaScript, Mootools, Selection | 
1 Comment »
