Rony's » Web

IE8 Issue with CSS margin:0 auto

Rony — Thu, 25 Mar 2010 19:40:02 +0000

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: “http://www.w3.org/TR/html4/strict.dtd”>

If we don’t say IE how to render the page, it may fail to render the page properly. Its foolish and all other browser can do it OK, but we can forgive IE for that.

Second one:

If the content where the style is added isn’t a block content (e.g. input element), this might happen. In that case adding display:block might work. Another way to work around in this case is put it inside a block content (e.g. div element) and set text-align:center. (I didn’t try this myself)

I can forgive IE for this too, as W3 also suggests that for non block element the rendering of margin:0 auto is undetermined.

Third one:

With the property margin: 0 auto also define a width explicitly (e.g. width:300px) and this should work. I didn’t try this either as the first solution worked for me and didn’t have any more patience left.

If anyone have tried the second and third solution and found any certain result, let me know

Bookmark:

Get image data from client side using javascript

Rony — Tue, 15 Dec 2009 19:02:17 +0000

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.

Bookmark:

Advanced object selection using Mootools

Mon, 03 Aug 2009 19:30:25 +0000

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? Select all the div in the document, parse everyone’s id? Well, here this is a one line code in Mootools using the getElements function. It actually uses the general RegEx symbols to match property values.

To select the div with id starting with ‘my’ it would use getElements(‘div[id^=my]‘);

Some other examples from Mootools documentation:

//Returns all anchors within myElement. $('myElement').getElements('a');

//Returns all input tags with name "dialog". $('myElement').getElements('input[name=dialog]');

//Returns all input tags with names ending with 'log'. $('myElement').getElements('input[name$=log]');
//Returns all email links (starting with "mailto:"). $('myElement').getElements('a[href^=mailto:]');

//Adds events to all Elements with the class name 'email'. $(document.body).getElements('a.email').addEvents({ 'mouseenter': function(){ this.href = 'real@email.com'; }, 'mouseleave': function(){ this.href = '#'; } });

Mootools documentation on Selectors utility is here: http://mootools.net/docs/core/Utilities/Selectors

Bookmark:

Mootools Basics

Wed, 29 Jul 2009 17:54:21 +0000

Mootools is a great JavaScript library and I feel really comfortable using it. There are lot other libraries, like JQuery, DoJo, ExtJS. They have their own features, but I feel strong with Mootools. ExtJs is really good, but very much heavyweight. On the other hand Mootools is really lightweight. Including all the core features, it is only around 64KB. Special effects may weight around 100KB more.

Most used function of Mootools is the $ function. Its a bit confusing with JQuery and that’s why conflicts with JQuery, if used on the same page. $ selects a dom element from the document by its id. The syntax is $(‘element_id’). There is another pretty good function that I like is $$ function. It selects elements by class name or tag etc. More on this functions are available at Mootools documentation.

Mootools Request feature is another great thing to have. This AJAX calling function is capable of sending AJAX request either in GET or POST method.

These are the basic functions one may need to develop a regular web application. There are also other common helper functions for Array, String, Number, Cookie etc. For detail idea about Mootools it is suggested to visit Mootools Documentation at: http://docs.mootools.net/

One thing to keep in mind. Whenever you are adding some JavaScript code on your documents HEAD, make sure it is inside a document onReady or onLoad function. Otherwise you’ll get stuck with JS errors. Most of the cases, the common mistake is like using the JS code to get an element at the HEAD, but the body is still loading… So the script couldn’t find the element and through error.

For Mootools, this onLoad wrapping syntax is like this:

window.addEvent('domready', function(){ //Your Code Here });

Bookmark:

Blueprint CSS

Sat, 18 Oct 2008 12:01:14 +0000

This is a great CSS framework I’ve found online. Its optionality, and ease of use amazed me. This is mainly a grid based framework. You just create your element (e.g. div, span) and attach a class that corresponds to the disired width of your element. Thats it.

This really worth a visit…

Bookmark:

Playing with Flex

Wed, 24 Sep 2008 20:41:57 +0000

Heard the buzz about Flex. Got Flex 3 just few days ago and started the beginners tutorial from Adobe website. Well… its fun. A really nice and useful tool. My first Flex application is here: http://demos.creash.com.bd/playground/flex/Demo.html

The tutorial for this can be found here.

Bookmark:

Basic PHP – Part 1

Sun, 06 Jul 2008 22:21:54 +0000

This article is about very basic of PHP coding, creating functions and database connection using PHP. Later posts may contain detail about other features.

Target viewers are assumed as familiar with C/JAVA or other similar programming language. So I didn’t bother to clarify basic syntax.

Writing PHP code:

All your PHP content should be inside tags. That is the file format should be:

Your content here. ?>

Most of the functions in PHP are similar to C. So if you can code in C, you can code in PHP. There are simple exceptions as:

Variables:
PHP variables has no data type. All are same. A PHP variable starts with $ sign. An example is:

$var1 = "Something";

Above variable contains a string. So you can do any string operation over it, such as, strcat, strlen etc. Have you noticed? The string functions are similar to C.

Now if another 3 variables are like this:

$var2 = 3; $var3 = 2;
And
$var 4 = $var2 + $var3;

Now $var4 contains 5 by adding above two variables’ contents.
You can even do:

$var4 = $var1 + $var2;

This would provide no error, but no result either as there is a string and a number you are adding.

Print and Handling String:
If you want to print something on your browser you have to write:

echo "String content what you wish to print"; echo 'And something more';

Notice that you can use either double quote (“) or single quote (‘) to define a string.
Now to attach a variable with a string, we use the dot (.).
Example:

echo 'A number is ' . $var2 . ' and is an odd number';
This will print:
A number is 3 and is an odd number
You can also do:
echo $var1 . ' is a string and ' . $var2 .' is a number';
Which will print:
Something is a string and 3 is a number

If you do:

$var5 = $var1 . $var2;

Then both the $var1 and $var2 will be treated as strings and $var5 will contain:

Something3

Writing Functions:

Its very easy. The syntax is:

function function_name(params) { Do something useful. return result (optional). }
Now some DB connection:

The My SQL database connection and manipulation is done using mysql_ functions.
Such as:
mysql_connect(); mysql_select_db(); mysql_query(); mysql_fetch_row();

A database connection we’ve done earlier in another project is like this:

$host= 'localhost'; $user = 'root'; $auth = 'password'; $db = 'mydb'; $msg = 'Database error occurred. Please inform the administrator.'; mysql_connect($host, $user, $auth); @mysql_select_db($db) or die($msg);
Running a Query:

An example from previous project:

function db_select_by_id($table_name, $id) { $sql = 'SELECT * FROM '.$table_name.' WHERE '.$table_name.'_id = '.$id; $result = @mysql_query($sql); if($result) { return @mysql_fetch_object($result); } else { if($debug) { echo mysql_error(); } return NULL; } }

So if we call the above function like this:
$result = db_select_by_id('user', 4);
The function will run the the query:
SELECT * FROM user WHERE user_id = 4;
And will return the result as object. So the $result will contain an object with the fetched row elements as object elements. We can access elements of $result as:
echo $result -> id; echo $result -> name;
etc.
Notice that, here we are fetching only one row. This is because, there should be only one row as we are searching using the primary key (id). If you need multiple rows you can use:

function db_select_all($table_name) { $sql = 'SELECT * FROM '.$table_name; $result = @mysql_query($sql); if($result) { return $result; } else { if($debug) { echo mysql_error(); } return NULL; } }

Where we select all the rows from the table. Now if $result has the return value from above function, we can retrieve using following process:

while($row = @mysql_fetch_object($result)) { echo $row -> id; echo $row -> name; }

This will fetch every row and will print them until end.
Have you noticed the @ sing before mysql functions? This is used so that any error message is not printed on the browser. You can remove them now to see error messages during development period.
Now you can make your own functions with adding some restrictions to the query…

A very good resource which helps me every time is: http://php.net

Bookmark:

Basic HTML – Part 2

Mon, 16 Jun 2008 20:38:20 +0000

This is the continuation of my previous post Basic HTML – Part 1. On this phase of the post, I’m going to explain the table and form tags.

Table:

Table is a very important tag and widely used for alignment management of web pages. It is defined by the

tag. Some hierarchy are needed to be maintained for tables. First the table, then row, then column and finally content of the column.

Example:

Something Useful

This will produce something like:

Something Useful

There are some other optional tags inside a table. Such as, , and . is used to define the header of a table and for the footer. defines the body of the table. If you want to use these tags, follow this hierarchy:

Which will produce something like this:

Header One	Another Header
Foot One	Foot Two
Row One and Column One	Row One and Column Two
Row Two with Two Column Attached!

Header One	Another Header
Foot One	Foot Two
Row One and Column One	Row One and Column Two
Row Two with Two Column Attached!

Some properties that can be attached with a table are: width, height, colspan (Span of a column. In the above code colspan=”2″ defines the column will be as wide as two column), margin, padding, border etc.

Form:

Form is one of the most important thing in HTML. You collect any kind of data from end user through form.

While creating a form, you have to provide a name and an unique id for it. Also have to mention the action and method. Optionally you can attach JavaScript function on submit. Keeping the action of a form blank will submit it to the same page. The enctype of a form defines how the submitted value is passed.

Submitted values of a form are handled by some other scripting language like PHP, ASP etc.

Elements of a form are:

Text Box
- A single line text input area.
Text Area
- Multi line text input area.
Combo Box
- Select from a drop down list.
Check Box
- Check/un-check value.
Radio Button
- Select a value from a group.
File
- A file upload area.
Button
- Submit/reset or do some action.
Label
- Label of a input field.

Some points need to be notified are:

You can mention width for text box.
You can mention width and height for text area.
You can distinguish between label and value of combo box. These are needed to be provided under option tag which is a child tag of select tag (used for combo box).
You can provide value to a check box.
To create a group of radio buttons provide same name/id.
You can provide on click JavaScript action to buttons.
Any form field can have functions for on change, on focus etc. JavaScript events.

An example with above form elements:



Text Box

Text BoxA Text Area

Combo Box

Check Box

Radio ButtonRadio 1Radio 2

File

Above code will produce this:

You can provide on submit, on focus, on blur, on change etc. event handler using JavaScript or VB Script if you wish.

Going to finish this part here.

Take care.

Bookmark:

Basic HTML – Part 1

Sat, 31 May 2008 08:31:00 +0000

Well.. I was supposed to take a short class for my developer group in a recent project. I thought I’d rather post the topics and some detail of that class here, which can help beginners.

First of all, we are going to learn some keywords and their use:

HTML – Hyper Text Markup Language.
- Used to write web pages. Browsers understand this language. You have to talk with web browsers in this language.
Tags
- Tags are used to distinguish different elements in a web page. As an example, we’d use the anchor tag () to define anchor or links.

CSS – Cascading Style Sheet

CSS is used to define style for a web page. We’d learn about CSS in a later session.

Scripts

Scripts are some programming language which helps to interact a web page with user and server. PHP, JavaScript etc. are commonly used scripts in web development.

Now I’m going to explain some rapidly used tags here.

Anchor:

Anchor tag is very important. We use this to link some other page or website using this tag. Attributes of anchor tags are: ‘href’, ‘title’, ‘onClick’ etc. href defines the target of the anchor; title has the definition of the link and onClick is used to define some JavaScript click action for that link.

Example:

Creash

Above code provides following output:

Creash

Paragraph:

Its an important tag. Texts in an web page are placed inside paragraphs. This makes it easy to manipulate and stylize.

Example:

Loream ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque quis dui. Aenean nec odio sit amet nisi faucibus euismod.


Div:
This is another most important tag. This tag is used to divide your web page in different parts. You can specify styles to a div tag; provide id and manipulate it using JavaScript. General attributes of a div tag are: ‘id’, ‘position’, ‘float’ etc. You can place a div any where of your website.
Example:
This is an example div tag with some popular styling

Above code will produce following output:


This is an example div tag with some popular styling
Now you can access the above div with its id ‘example1′ and add any action.
Span:
The last topic of this session. This tag is used to differentiate a small part inside another part. Suppose a block of text inside a large div.
Example:
Hello there! This text is inside span! You are watching an use of span tag.

Will produce:
Hello there! This text is inside span! You are watching an use of span tag.
Hope thats enough babbling  for today. I’ll produce some more on next session  
Learn more HTML and other web programming from this amazing website: W3Schools
Take care….  
Bookmark:



An Website Colorscheme Editor
Fri, 30 May 2008 00:29:52 +0000
I’ve worked on a website color scheme editor recently. The main idea was to change the colors and banner of a website. The target website was my recent work with my department’s website.
Well…. There are a lot of color scheme editor available on the web, but I tried something different. I wanted to give the complete control to the administrator. But, uff…. It was really tough.
Main things I had to do was

To select a suitable color picker.
Then identify the areas the colors should be changed.
Store the color information.
Generate the CSS file according to the changes.

First problem I faced was to generate the CSS according to the changes. I tried to integrate PHP inside CSS file (!!!). A foolish idea. Then the idea I found is like creating a new CSS each time administrator changes the style, and store the changes to the database.
As I’m storing the information to the database as well, its also possible to rollback to a previous style.
Then the next problem comes – color picker. I was not in a mood to create a color picker by myself. After spending a good amount time in Google, I found the MooRainbow color picker, which is based on Mootools. It was nice and I’m happy too. Cz, I like Mootools library!!
There was another problem, I have to convert the Hex value to RGB for this purpose. Mootools helped me here once again. There is a very useful function hexToRgb() which helped me out.
You can find the way to implement moo rainbow at its own website.
As I had to provide edit ability to almost 70 sections of the website, the form was huge. So there were a need to use something like Accordion. But size was also a factor. Then I found a simple script which solved the problem and provided almost accordion like feature. I divided the form in 11 sections and implemented the function.
Here is the JavaScript code segment. I found the idea of this function from a web site but forgot form where. Whoever the main  coder is, many thanks to you…  


function shoh(id) {

if (document.getElementById) { // DOM3 = IE5, NS6

if (document.getElementById(id).style.display == "none"){

document.getElementById(id).style.display = 'block';

} else {

document.getElementById(id).style.display = 'none';

}

} else {

if (document.layers) {

if (document.id.display == "none"){

document.id.display = 'block';

} else {

document.id.display = 'none';

}

} else {

if (document.all.id.style.visibility == "none"){

document.all.id.style.display = 'block';

} else {

document.all.id.style.display = 'none';

}

}

}

}

window.addEvent('domready', function(){

shoh('fs1');

shoh('fs2');

shoh('fs3');

shoh('fs4');

shoh('fs5');

shoh('fs6');

shoh('fs7');

shoh('fs8');

shoh('fs9');

shoh('fs10');

shoh('fs11');

shoh('fs1');

});



For security reasons I can’t give the link here but providing a screen shot of the editor is here. This also have some IE issues (!) and needs debugging.

Bookmark:

Text Box
Text Box	A Text Area
Combo Box
Check Box
Radio Group	Radio 1 Radio 2
File