Rony's » Tips & Tricks

Using table in HTML and font size issue with IE

Rony — Fri, 26 Mar 2010 21:28:19 +0000

I don’t really understand why people don’t like to use table these days. I’m not a wise HTML guru or something but as far I understand table is a pretty little thing with some handy features, which does my work without much trouble. At least as long as you don’t have a very complex layout where it needs the use of several colspan and rowspans, table is really handy. I don’t have to bother about floats, breaking in browsers etc.

But there is a issue with the font size I faced in IE and Safari. If I define a font size in the parent element it doesn’t effect the content of the table. That was really confusing for me.

So, whenever using a table, it needs to define the font size for the table explicitely.

table{ font-size: 12px; }

Bookmark:

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:

File upload/download on MySQL database

Fri, 28 Nov 2008 14:35:39 +0000

Well… It is already a well discussed topic. But when I was first trying to find out how to do this, I really got stuck. Actully it took me a lot of time to find out the key code segment for the purpose.

So, here is what I’ve learned:

The table:

Suppose the structure of the MySQL table (say ‘file_table‘) is like this:

It has three fileds:

id : the primary key, integer type with auto increment feature.
content: the content of file, blob type.
type: varchar type, the type of the file (e.g. doc, pdf etc.).

Upload:

I think you can create a HTML form with a input with file type. Its pretty simple. Just use this code to make a input field be able to upload file:

Now the backend coding. I’m using PHP for this.

You can get the temp file name (the name server assigned to your uploaded file) using this:

$tmpName = $_FILES['file_upload']['tmp_name'];

Now following code segment reads the content of the file to a variable:

$fp = fopen($tmpName, 'r'); $file_size = filesize($tmpName); $content = fread($fp, $file_size); $content = addslashes($content); fclose($fp);
if(!get_magic_quotes_gpc()) { $fileName = addslashes($fileName); }

To get the file type, we use this segment of code:

$type = get_file_extension($tmpName);

function get_file_extension($str) { $i = strrpos($str,"."); if (!$i) { return ""; } $l = strlen($str) - $i; $ext = substr($str,$i+1,$l); return $ext; }

Now use this query to insert the file to database:

$query = 'INSERT INTO file_table VALUES (" ' . $content . ' ", " ' . $type . ' ")'; $result = @mysql_query($query) or die(mysql_error());

That’s it. We’ve uploaded our file to the database.

Download:

We’ve uploaded the file. Now we need to download it sometime. Thats not that hard actually.

We’ll follow these stpes:

Get the id of desired file
Fetch the file from database on the basis of the id
Make the file ready for download

Say, we get the id from URL. Then following code will make the file available for download:

$id = $_GET['id']; $query = "SELECT content, type FROM file_table WHERE id = '$id' ";

$result = mysql_query($query) or die(mysql_error()); list($file, $ftype) = mysql_fetch_array($result);

header("Content-length: $filesize"); header("Content-type: $ftype"); header("Content-Disposition: attachment; filename = FILENAME.$ftype"); echo $file;

Here we set the header with the file information. Make sure, nothing else is printed on the page before the header() call. Otherwise it will show an error and terminate. You can place your desired file name at the place of ‘FILENAME‘. Another thing is, connection with the database server is to be made before any database operation. I think you know the function:

mysql_connect();

If not can check this post: Basic PHP

Bookmark:

Monitor’s ICC Profile

Fri, 01 Aug 2008 01:51:34 +0000

Well… I’m not an expert on this section, but just solved my problem regarding this. So thought, I’d share.

I used to see the white as yellow on my Photoshop!! My monitor is Samsung SyncMaster 920NW. This problem occurred both in Windows XP and Vista!! Explored different forum but didn’t get the perfect solution. Then I started to check out different settings in my Vista control panel.

Here is what I’ve changed:

Go to Control Panel > Hardware and Sound > Color Management.

I’ve first selected the display device from combo box and then checked ‘Use my setting for this device’. Then removed the active ICC profile and added Adobe RGB (1998) as default profile.

That’s it! Well it worked for me. You are on your own risk…

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:



SEO – Whats the big deal?
Tue, 06 May 2008 20:49:06 +0000
SEO, or Search Engine Optimization, became a buzz word since few years. It became headache of the webmasters. “Is my website properly optimized for search engines?” “How can I index my site to popular search engines?” Some tries to use the ‘Black Hat’ way (don’t know how successful those approaches are)!!
I thought, as there is nothing to do right now, I may give some advice for free about this.
SEO means optimizing your website properly, so that popular search engines index your important pages. Its important because you have to catch the market. If people can’t find you out through search engines, how would they reach you?
OK, how to optimize your site? Its not that hard. You code your pages properly and keep your contents organized. Manage search bots using robots.txt and reffer/block from indexing some directories.
Some important things you have to do to reach to the top of search results is:

Build the site for public, not for robots.
Follow web standards. Test your HTML, CSS etc. from W3.ORG
Provide unique contents to your web pages.
Avoid invalid and hidden links.
Avoid referral links which loop back to you.
Use proper title, meta keywords and descriptions (though the importance of these is going down now a days).
Don’t use irrelevant keywords/descriptions in meta tag.
Avoid broken links.
Avoid duplicate contents.
Don’t make a page too huge.
Use a sitemap and refer robots to that.
Use alt and title for links and images.

Well, those are just some suggestions. You may build a much better website with your own creativity. You are not bound to follow those rules. You have the freedom to create your own rule. If that hits, we all will follow you!!
Number of hits to your web always is a important factor. This also motivates search engines. To increase your hits, add some Digg, Delicious, Stumbleupon links on your page. Submit your sites to the web galleries. Some web galleries:

bestwebgallery.com
brdcast.net
coolsitecollection.com
css-warfare.com
There are a lot many. Visit here for a larger list.

Care to see the alexa rating of your site some times.
You may visit your site using Lynx sometime to see how it looks to search robots.
As the final note, you have the options to use ‘Black Hat’(!) ways to cheat search bots. I’m not going to explain those here. You may find references on the web. But my suggestion is not to use those. May be you got lucky for once, but if you are caught or blacklisted, your site may be dropped under thousands or even millions.
Some references to popular search engines’ guidelines:

MSN
Yahoo!
Google

Bookmark:

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