Do It Yourself CMS » Blog » General tutorials


My first plug-in for firefox: Twitter Right-To-Left

  By: admin   tags Date Added: Thursday 24-02-2011 12:59 am


In the last couple of weeks I was busy reading about how to create a plug-in for Firefox. My intention was to create a plug-in that manipulates pages in a certain way to improve their look or add extra functionality. Then I came across Greasemonkey plug-in.

Greasemonkey plug-in allows you to write a JavaScript file and load it into the plug-in. The script file is specific to a certain website and adds modifications or improves the feel and look of that website.

So I started writing my plug-in for Firefox. Twitter is on the most popular social websites. Its users are from all over the world; however it provides limited user interface languages. The list provided does not include Arabic neither any Right-To-Left languages such Persian and Hebrew. My idea was to design the plug-in so I can modify the interface of twitter to shift the page direction from Left-To-Right to Right-To-Left and translates twitter page into Arabic.

Look at this example:



I finished the script but I did not like the idea of adding a file to the Greasemonkey plug-in since it is a hassle enough for the End-user to add a plug-in to the browser and set its configurations. Luckily I came across Greasemonkey compiler. The complier takes the "user script" (Greasemonkey term for the JS file) and converts it into a Firefox plug-in and Voila the plug-in is ready for Firefox.

You can download it through this link:
https://addons.mozilla.org/en-US/firefox/addon/twitterrtl/

The plug-in is compatible with Firefox versions: 3.0 to 4 beta.

Note: I am interested in translations into Persian and Hebrew so if you are capable of that please contact me on: info@diy-cms.com

You can follow me on twitter on this account:
http://twitter.com/khr2003

And you can get the latest DiY-CMS news on:
http://twitter.com/diycms


Tags: firefox-plugin, twitter, right-to-left, More details

A new technique to solve div height issue

  By: admin   tags Date Added: Sunday 13-06-2010 05:56 pm

If you have not made the switch from the table-design to the tables design, you should now. Even tough that table-less design seems hard to learn, particularly to those who are used to the tabular design it comes with many benefits. The first and the foremost benefit is the great control over the different parts of the website layout. Add to the that most search engines now (i.e Google :) ) favours websites with table-less layout since table layout is considered to be tabular data.

There are two layouts that are used commonly across website “the two columns” (figure 1) and “the three columns” (figure 2) layout. That is the content in the middle and menus on the sides.


Figure 1




Figure 2



The problem:
This layout, when using a table-less layout, comes with a downfall. If the contents container in the middle extends to be more than the side menus bars, the container of the side menus will not extend to the height of the contents. This will affect the appearance of the website. (figure 3)


Figure 3



The first solution that comes to one’s mind is to set the side menus bar’s height to be div {height: 100%}. Nonetheless, this solution is not sufficient since the div container does not have any thing to factor the height. To come over this issue you have to set all the parent containers to 100%.
Another solution is to use Faux Columns. In short this technique sets a background that extends over the contents container and the side menus bars (the author used an example of one side layout, but the concept can be applied to two sides) and then the background is repeated vertically. So the side menu bars will “appear” to be extending down the entire page while in fact it is the background of the contents container.
Even thought this method provides a nice cheat to the issue of div height it limits the designer with the options that he would have in terms of side menus container’s width and background repetition.

The solution:
An extra efficient solution exists, no matter how desperate is the problem. Using div position and stack order one can easily design a website layout that contains extendable side menus bars.

First we set up the layout with the style sheet:


<head>
#main-container {
width: 1000px;
}
#left-side-bar {
float: left;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
}
#contents {
float: left;
font: normal 12px arial, sans-serif;
width: 600px;
background-color: #ddeec8;
}
#right-side-bar {
float: right;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
}
</head>

<body>
<div id="main-container">

<div id="left-side-bar">Side bar text </div>

<div id="contents">Lorem ipsum dolor sit amet </div>

<div id="right-side-bar">Side bar text </div>
<div style="clear:both">
</div>
</body>


Click here to see the layout in example 1.
To make the background stretches vertically to be as high as the longest div container we will create a duplicate of the div containers that we want to extend (with few changes) and their relevant CSS selectors (I will create one for each menu bar in this tutorial, but you can create a duplicate for any container you like).

I will add these selectors to the page head with simple change:

#left-side-bar-bg {
float: left;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
/* add absolute position to this selector*/
position: absolute;
/* add top and bottom margins of the absolute position*/
top: 0;
bottom: 0;
/* since this is the selector for left menus bar we add the left margin */
left: 0;
}
#right-side-bar-bg {
float: right;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
/* add absolute position to this selector*/
position: absolute;
/* add top and bottom margins of the absolute position*/
top: 0;
bottom: 0;
/* since this is the selector for right menus bar we add the right margin */
right: 0;
}


And I will also add these two divs to the page body and within the main-container div:

<div id="left-side-bar-bg"></div>
<div id="right-side-bar-bg"></div>


Click Here to see the end results in example 2.

You probably noticed that in example 2, the div containers that I have created are not extended within the parent div container. To solve this we add:
position: relative;
to the main-container selector. This will tell the browser to extend the new div containers within the main-container div.

Click here to see the new created containers in example 3.

In example 3 we notice that the new div we create are places over the original side menu bars. This were stack order comes in handy. Using z-index propriety we can "order" the div containers stack that we have. The larger the number is the higher the div is. Please note that z-index propriety will not work with "position: static" which is the default positioning of any div container, so we will change the position of the original side menu containers to "relative" in order for them to be ordered correctly.

Now the final CSS will look like this:

#main-container {
width: 1000px;
position: relative;
}
#left-side-bar {
float: left;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
position: relative;
/* set z-index to a high number to keep the container on top of its duplicate */
z-index: 99;
}
#contents {
float: left;
font: normal 12px arial, sans-serif;
width: 600px;
background-color: #ddeec8;

}
#right-side-bar {
float: right;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
position: relative;
/* set z-index to a high number to keep the container on top of its duplicate */
z-index: 99;
}
#left-side-bar-bg {
float: left;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
/* add absolute position to this selector*/
position: absolute;
/* add top and bottom margins of the absolute position*/
top: 0;
bottom: 0;
/* since this is the selector for left menus bar we add the left margin */
left: 0;
/* set z-index to 0 to keep it the container lower than the original one */
z-index: 0;
}
#right-side-bar-bg {
float: right;
font: normal 12px arial, sans-serif;
width: 200px;
background-color: #ddeef6;
/* add absolute position to this selector*/
position: absolute;
/* add top and bottom margins of the absolute position*/
top: 0;
bottom: 0;
/* since this is the selector for right menus bar we add the right margin */
right: 0;
/* set z-index to 0 to keep the container lower than the original one */
z-index: 0;
}


Click here to see full page in example 4.

Using this technique you can even add an image as a background.
Click here to see image background in example 5

I hope this tutorial is useful and help designers overcome the issue of div height.


Tags: div-height, css More details