Rony's » HTML

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:

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:

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:

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