Chromic Design » CSS

Equal Height Division Using Javascript And CSS

admin — Fri, 27 Mar 2009 08:47:46 +0000

This technique is really simple. Having equal height division in your design is sometimes necessary to maintain consistent look and feel on your layout. You can use this technique to make your sidebars equal height, or to make your content area and the sidebars equal height.

Get The Source Code: Without Jquery With Jquery

Step 1:
Create an index.html file for your layout. I create an example html layout for this article.




    
    Equal Height Division Using Javascript and CSS
    
    



    
        
            
                The Main Content
                The Main Content
                The Main Content
                The Main Content
                The Main Content
            
            
                The Sidebar Content
                The Sidebar Content
                The Sidebar Content

STEP 2:
Now we will create a stylesheet for the layout we just created. Let’s name it as style.css.

/*The Styles*/
p {
    text-align:center;
    font-family:Georgia;
    font-size:18px;
    font-variant:small-caps;
    color:#555555;
    padding:0;
    margin:20px 10px 20px 10px;
}
a {
    color:#FFFFFF;
    font-size:11px;
}
.outer {
    background:#FFFFFF;
    margin:0 auto;
    width:800px;
}
.inner {
    width:100%;
    float:left;
}
.main {
    background:#00A2FF;
    width:500px;
    float:left;
    border-right:1px solid #000;
    margin-left:-1px;
}
.sidebar {
    background:#EEEEEE;
    width:300px;
    float:right;
}

STEP 3:
Finally, here comes the javascript code that controls the height of the divisions and makes them equal height.

var DivOneClassArr = new Array();
var DivTwoClassArr = new Array();

function getElementsByClassName( ClassName1, ClassName2, obj ) {
    if ( obj.className == ClassName1 ) {
        DivOneClassArr[DivOneClassArr.length] = obj;
    }
    if ( obj.className == ClassName2 ) {
        DivTwoClassArr[DivTwoClassArr.length] = obj;
    }
    for ( var i = 0; i < obj.childNodes.length; i++ )
        getElementsByClassName( ClassName1, ClassName2, obj.childNodes[i] );
}

function grabtheclass() {
    DivOneClassArr.length = 0;
    aryClassElements2.length = 0;
    getElementsByClassName( 'main', 'sidebar', document.body );
    for ( var i = 0; i < DivOneClassArr.length || i < DivTwoClassArr.length; i++ ) {
        if(DivOneClassArr[i].offsetHeight > DivTwoClassArr[i].offsetHeight) {
            DivTwoClassArr[i].style.height = DivOneClassArr[i].offsetHeight +'px';
        }
        else if (DivOneClassArr[i].offsetHeight < DivTwoClassArr[i].offsetHeight) {
            DivOneClassArr[i].style.height = DivTwoClassArr[i].offsetHeight +'px';
        }
    }
}

Analysis: This script calculate the height of the divisions taking their class name in the function grabtheclass(). The division with more height is selected by comparing the height of the two divisions. If division div1 for instance is having more height, then the other division say div2 with shorter height will be assigned a new height equal to the height of div1. This is what the code does to make them equal height.

Check the demo here

STEP 4 (Optional):
This step is optional only. Here instead of using the above javascript code, jquery library is used. Then the code below can be used to get similar result. To use this javascript code, you need to import jquery library. You can get jquery library here Jquery.com.

Add the jquery library file in the head section of your html.

and you can remove the onload attribute in the since this is not necessary anymore if we use jquery.

Now create a file named javascript.js or use the one you created before and use the code below.

$(document).ready(function(){
    if($('div.main').height() > $('div.sidebar').height())
    {
        $('div.sidebar').css({
            'height':$('div.main').height()
        });
    }
    else if($('div.sidebar').height() > $('div.main').height())
    {
        $('div.main').css({
            'height':$('div.sidebar').height()
        });
    }
});

Check the demo here

Floating DIV Above Embedded Flash Object

admin — Sun, 22 Mar 2009 13:36:55 +0000

This simple tips will help you make your division float above flash object or flash player embedded on your website. When you embed a flash object or flash player on your website, the flash object will take the highest number possible z-index by default and all the other division layer will appear below the flash object. Actually this property of embedded flash object is quite useful in most cases. However when you want some text or division to appear on top of your flash object, you need this tips to fix that issue. You have three options to fix this floating issue.

First option is to compile/recompile your flash object with the parameter ‘wmode‘ value set to ‘opaque‘. However, in most cases, we normally get a precompiled flash object rather than the source flash file. In such cases the second option will be more suitable. Second option is to add a parameter in your flash object as shown in example below

Third option is to add an attribute ‘wmode’ with value set to ‘opaque’ in the object file. After performing any one these, your flash player or flash object will float below

having higher z-index.

WordPress Blogroll Icon

admin — Thu, 19 Jun 2008 00:40:12 +0000

After a long pause I came back with this tweak for wordpress. Here it comes, since I work a lot with wordpress these days.

I came across this wordpress tweak when one of my client wants a Blogroll Icon to be displayed along with the blogroll link. So here’s the steps on ‘How to show a Blogroll Icon’ in wordpress blog. Originally, what you have with wordpress blogroll is a list of links to websites and blogs. So to show image beside the blogroll link (most probably on the right side of the link text), perform the following steps.

Step1:
First you need to get the plugin ZocPowerblogroll from his website. Download the plugin and this plugin will do most of the work for us.

Step2:
Before activation of the plugin, you have to put this funtion in your ‘sidebar.php’. Placed this function

in your sidebar where you want the blogroll to appear. If your template is widgetized, you need to keep this function outside of the widget ‘if’ condition, place before or above this ‘if’ condition

Step3:
Load the plugin in the plugin directory, activate the plugin and you are ready to go. This plugin is compatible upto wordpress version 2.5.x. So you will not have any problem here. You may want to change how the blogroll is displayed by adding simple CSS code in the ‘style.css’.

Step4:
Now, to show the icon in the blogroll, you need to have the icon files. You have two options, you can upload the icons directly to your server in your wp-content directory or you can get the links of an icon from freeicon websites. Now, you need to include the link of the icons in your blogroll links.

Step5:
Log in to the admin panel and go to Manage»Link (for wordpress 2.5 and later) or Blogroll in wordpress 2.3.x. Click on the edit blogroll link option, now you have the edit-link page, expand the advance tab and you will find an input form for ‘Image Address’. You have to paste the link here. Now save the blogroll link and check your blog or website again, the icon will appear on the right side of the link you have just edited.

The modification:
Now, you have the icon appeared on the blogroll, but there is one simple modification I made on the plugin. In the input form for Image address, the plugin originally accept or allow only the hyperlink like http://www.sitename.com/iconfilename for the icon location. If you upload your icon file in the wp-content directory (/wp-content/icons/), you cannot specify the path of the icon like this (/wp-content/icons/iconfilename.xxx) for the ‘Image Address’ using this plugin. So the following modifications have been made. It’s a simple modification, first find the following lines in the plugin file (zoc_powerblogroll.php).

if (substr($book->link_image,0,4) == 'http' && $showLinkFavicon)
echo "link_url . "\"> link_image . "\" alt=\"" . $book->link_name . " website\" /> \n";

After you find this lines, make the modification as below, or replaced the above lines with the code below or download the modified plugin here.

if (substr($book->link_image,0,4) == 'http' && $showLinkFavicon)
echo " link_image . "\" alt=\"" . $book->link_image." website\" /> ";
elseif ($showLinkFavicon)
echo " link_image . "\" alt=\"" . $book->link_name . " website\" /> ";