Web Developer Diary

Giving button like effect to links

2010-11-03T01:49:00.000-07:00

By default in HTML, <a> tag refers to an anchor tag which is used to create a link to another document using the href attribute or to create a bookmark inside a document by using the name attribute. Here is a nice way you can give button like pressing effect to any link. It can be done by the following way.

<a href="http://www.w3c.org">Go to W3C</a>

<style>
a:active{
position:relative;
top:1px;
left:1px;
outline:0;
}
</style>

So as you can see the a link is given a slightly moved its top and left when clicked. This gives it a pressing effect.

Float right without changing order

2010-10-25T03:44:00.000-07:00

While working with float you might have noticed a specific case. When two or more elements are floated to the right side of a container, the order of display changes to the order in which it was written in HTML. To understand what am talking about just see this example.

The HTML,

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

Normally left floated,

ul, li{
   border:1px solid #000;
}
ul{
   overflow:hidden;
   width:300px;
   padding:0;
   margin:0;
}
li{
   text-align:center;
   float:left;
   margin:20px 5px;
   padding:5px;
   width:25px;
   list-style:none;
}

Left floated elements

Normally right floated,

ul, li{
   border:1px solid #000;
}
ul{
   overflow:hidden;
   width:300px;
   padding:0;
}
li{
   text-align:center;
   float:right;
   margin:20px 5px;
   padding:5px;
   width:25px;
   list-style:none;
}

Right floated elements, with order changed

So as you can see, while we float elements to left the order is { 1, 2, 3 }. But when you float the same thing to the right instead of going to the right with the same order it changes to { 3, 2, 1 }. Interesting right, so is it a bug? Not at all, to understand what is happening here we need to dig into what exactly is meant by floating.

Float

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float is that content may flow along its side. Content flows down the right side of a left-floated box and down the left side of a right-floated box. A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present. Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, line boxes created next to the float are shortened to make room for the margin box of the float. If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present. Any content in the current line before a floated box is re-flowed in the first available line on the other side of the float. In other words, if inline boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice verse for rtl and right floats.
- From w3c css float spec

So now we can say that it's applying what it was asked to. CSS works in a hierarchical fashion. Now what happens is that all the <li> elements needs to be floated right, so it takes the first <li> and place it to the right. Now it takes the second <li> element which also needs to be floated right. So it pushes the second <li> element to right but since the first <li> element is already floated to right it can only go as far as its left. So the second <li> is placed directly to the left of the first <li> element. Similarly with the third <li> element and so on. So you can see elements placed left of each element.

Every thing well told, but this doesn't meet our requirement. We need to maintain the same order when we float elements right. There are few ways in which we can achieve this.

Solution 1:

The HTML,

<div>
   <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   </ul>
</div>

The CSS,

div{
   width:300px;
   border:1px solid #000;
   overflow:hidden;
}
ul{
   padding:0;
   margin:0;
   float:right;
}
li{
   border:1px solid #000;
   text-align:center;
   float:left;
   margin:20px 5px;
   padding:5px;
   width:25px;
   list-style:none;
}

In this solution we need to add any container like <div> to the <ul> element, then float <ul> to right and the float the <li> to left. This will give you the desired result.

Right floated elements in the same order

Solution 2:

The HTML,

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

The CSS,

ul, li{
   border:1px solid #000;
}
ul{
   padding:20;
   margin:0;
   text-align:right;
   width:300px;
}
li{
   text-align:center;
   display:inline;
   margin-left:10px;
   padding:10px;
   width:25px;
   list-style:none;
}

The second solution I feel is pretty much efficient as you need not have any extra elements added. Just " text-align:right " the <ul> element and <li> elements are made inline.

Bookmarking in vim editor

2010-10-22T03:54:00.000-07:00

While editing lengthy files in any editor its very helpful to have bookmarking feature. Almost all modern browsers have this feature. While I was using vim editor I found it extremely difficult to move across different lines in a file and going back and vise-verse. Glad that there is something called "mark" in vim which is the bookmarking feature for vim editor. Using this you can bookmark a particular line and later return to the same place quickly. If you are a frequent vim user, this simple technique will be the most useful feature and you will love it.

There are mainly two types of bookmarking techniques in vim, local and global bookmarking.

Local Bookmarking:

Local bookmarking or single-file bookmarking, as the word implies is within a single file. When we want to go to a specific position we can use this. Local bookmarking is always in lowercase. So to create a local bookmark type "m" followed by the bookmark-name in vim's command mode.

m{bookmark-name}

The thing to note here is {bookmark-name} should be always be an alphabet to refer to the name of the bookmark. So if you type "ms" it will create a bookmark on the current line at the current location with name "s". Now to access the bookmark you need to type "'" or "`" followed by the created bookmark-name in vim's command mode.

'{bookmark-name}

`{bookmark-name}

Using both of these commands you can access the bookmarked position. So what is the difference? '{bookmark-name}, which is "single-quote"{bookmark-name} takes you to the beginning of the bookmarked line. Now `{bookmark-name}, which is "backtick"{bookmark-name} takes you to the exact bookmarked position on the line.

Global Bookmarking:

Global bookmarking or multiple-file bookmarking, is when you have multiple files open. If you want to go to a particular position in any one of the open files, then you can use Global bookmarking feature. This is very powerful as you can move across different files without losing context. Global bookmarking is always in upper case.

m{BOOKMARKS-NAME}

Lets see this example

Open multiple files
$ vim /var/www/css/style.css /var/www/css/global.css

style.css file go to a specific line and type mA to create a global bookmark called A

Now :n from style.css file to go to global.css file

Inside global.css file go to a specific line and type mB to create a global bookmark called B

Now type `A, to go back to the bookmarked place in style.css

Now from style.css, type `B, it take you back to global.css

Display All Bookmarks:

To display all the bookmarks you have made use the "marks" in the last line mode of vim.

All bookmarks
:marks

A specific bookmark
:marks {bookmark-name}

Apart from the above bookmarks, you can also notice that there are other marks as well like ‘ (single-quote), ” (double quote), [ , ], ^ and . (period) are created by vim by default and you don’t have any control over it. For example, the mark . (period) indicates the last position where a change was made. So, you can always do `. (back-tick followed by period), which will take you to the position where the last change was done.

Utilities of Bookmarking:

There are much more you can do using marks other than bookmarking. We can use them as boundary when doing stuff over multiple lines. Just see these examples, assume you have marked the beginning of the area with a and the end with b. Now we can do stuff like:

delete from a specific area to another area
:'a,'b d

write from a specific area to another area to a new file
:'a,'b w {filename}

substitute only a specific area
:'a,'b s/this/that/g

Summary:

:marks – Display all the bookmarks

m{bookmark-name} – Creates a bookmark called {bookmark-name}

`{bookmark-name} – Go to the exact location of the bookmark {bookmark-name}

‘{bookmark-name} – Go to the beginning of the line of the bookmark {bookmark-name}

:marks {bookmark-name} – Display the details of the bookmark with name {bookmark-name}

IE fix for fixed width select cuts off options

2010-10-21T02:27:00.000-07:00

While working the other day I came across one more problem with IE :), If we set a static width on the <select> element, any <option> elements that are wider get cut of in all Internet Explorers.

Select rendered in IEs

Select rendered in other bowsers(this is in firefox)

In almost all other browsers if you fix the width of the element, the pulldown still displays the options at the width required to allow you to read them all. In IE however the pulldown is limited to the width of the select, which means wide options get cut off. After doing some searching and scratching I found that there is no good CSS solution for this. But it can be tackled with JavaScript in a number of ways.

Solution:

The normal way:

<select class="normal"

       onMouseDown="if(document.all) this.className='expand';"

        onBlur="if(document.all) this.className='normal';"

   onChange="if(document.all) this.className='normal';">

<option>Select from this list</option>

<option>Hey this is a long text here which needs to shown in IE</option>

<option>This is another long text here which needs to shown in IE</option>

</select>

Now if you want to use a library like jQuery this can be again written as:

<select class="normal">

<option>Select from this list</option>

<option>Hey this is a long text here which needs to shown in IE</option>

<option>This is another long text here which needs to shown in IE</option>

</select>

So as you find here, the solution is fairly simple. Have two classes one for the normal way of showing and the next when we click on the select box. The only thing thing that changes here is width. The select box is given the width:auto so that it can expand to what ever length the content is out there in the options. Also we should make sure that this behavior is done only for IEs.

Every thing is well and fine for this normal case. But consider a case where we have select box in a container which cannot expand beyond specific width, since it could break the layout.

In this case we can have a small fix to the CSS class. Add position absolute so that it just layers over the other contents.

As you can see the select opens without breaking the layout.

How to break a long text on a submit button

2010-06-30T04:35:00.000-07:00

This an interesting thing I have found out while I was working on one of my project. If you have an input submit button with a long text it won't wrap according to the size of the column it is in. It crosses the column and overlaps in firefox and in IE it expands the column for the button to accomodate. While development I tried lot of things to make the text wrap in the button but in wain. My HTML looked some thing like this:

In the end I came up with a solution.

My first solution for this problem was to remove the input submit button itself and use <button> instead, which worked well. So I changed my code in this way.

This worked well in both firefox and IE as the text got wrapped because of <br>. But lately I found a problem with this solution in IE. If you have more than one <button type="submit"> in the page IE will submit the last button even though you have clicked the first <button> which was not the desired behaviour.

Solution

The solution was a fairly small which worked well for me. Still I am not sure its the correct way to do this. There is two things that need to be done for firefox and IE. For firefox we need to add a css declaration white-space: normal and for IE you need to add HTML Coded Character  - Carriage Return where ever you require the text to break. So the code looks like this:

and it works!

How to disable HTML Select Option in IE

2009-09-14T05:18:00.000-07:00

One of the project I was working had a requirement to disable one or more of the option element in a select field. A fairly straight forward use case, normally you can just write ‘disabled’, but to be valid XHTML, you need the disabled=’disabled’ variant. The point is, this works fine and looks great in Firefox. The options are not selectable and are nicely grayed out.

<select name="range">

    <option value="1" disabled="disabled">option1</option>

    <option value="2">option2</option>

    <option value="3">option3</option>

    <option value="4" disabled="disabled">option4</option>

</select>

But the problem I found was with IE. It totally refuses to understand this and whats interesting is that its the problem with IE6 & IE7, IE8 has come up with updates.

Solution

One of the main solution that is suggested is using JavaScript. Traverse through the DOM and pick the option having attribute disabled and apply the gray color and change the focus when mouse over. Sounds good but what happens when JavaScript is turned off. So this solution wont work in all cases. So we need some kind of work around on this and interestingly HTML comes again for the rescue. There is an element in HTML called the optgroup which allows you to group similar items in a select box. Using this we can emulate the so called disabled property. The code is as follows

optgroup{ color:#ccc; font-weight:normal; font-style:normal; }

<select name="range">

<optgroup label="option1"></optgroup>

    <option value="2">option2</option>

    <option value="3">option3</option>

    <optgroup label="option4"></optgroup>

</select>

You can see that the optgroup is used to emulate the disabled property and the gray out is done using CSS. Any one facing the IE disabled problem can use this as a work around. Comments and faq are most welcome.