Cohesive Web

I have started using jQuery – JavaScript framework almost end of the last year. I have also used it for my last couple of projects. I find it very useful to design/develop complex type of functionality in the client-end. One of the interesting feature of jQuery is that it provides a large number of plugins designed by different developers. They are very useful too.

In my current project I need to display multiple content pages within a web page. I require to slide the page numbers so that user can view the number of pages by sliding/scrolling. I was looking for some good plugin which could satisfy my need. I have tested some of them but couldn’t find out the ideal one. So wrote the basic code for the functionality and the effect. However I wasn’t satisfied with my work as I was looking for some plugin for it. I thought it is the best time to try authoring plugin in jQuery.

It took almost 9 days to convert the code into a plugin. I gave the plugin namespace as paginationslider.

Code example:
Script section –

[code lang=”javascript”]



[/code]

Style section –
[code lang=”css”]
.pgSlider {
width: 80px; overflow: auto; background:#fff; margin:0 auto; position:relative; border:1px solid orange; float:left; display:inline;
}
.pgSlider ul {
display: block; padding: 0; margin: 0; list-style: none; position:relative;
}
.pgSlider ul li {
display: block; float: left; background:#E3ECF4;
}
.pgSlider a {
display: block; text-decoration: none; text-align:center; padding: 5px 8px; color:#1079B1; font-weight:bold; border-right:1px solid #fff;
}
[/code]

HTML Section –

[code lang=”html4strict”]

   
<<
   

      

         
1
         
2
         
3
         
4
         
5
         
6
         
7
         
8
         
9
      
   
   
>>

[/code]

I will eagerly wait for your reviews on this plugin. Here you can view the demo.

In my earlier post I had discussed about the designing the liquid 3 column display layout. While developing the structure I had some problem with the column heights. Depending upon the contents length of those columns varies. I have declared the height property as auto in the css. I could have declared them with some specific pixel value to make the columns of equal length. But if you consider your pages to contain dynamic content generated by server side scripting then this technique may fail. Particularly in Internet Explorer the data part may be extended beyond the columns, which could make the structure awful. So I was in need to find some other solutions for that purpose.

I thought of using some JavaScript to make all the columns height equal. The algorithm to do this is very simple. Calculate the max height among three columns and assign it for all the columns. So first I introduced three different IDs for these three columns to access the properties of those columns using Javascript document.getElementById() method. So I changed the HTML code as follows:

[code lang=”html4strict”]

Header Text

Header text 2

The text….

• DIRECTOR SPEAKS
• STUDENTS
• ALUMNI

Copyright text

[/code]

contentDiv_left for the left column, contentDiv_mid for the middle column and contentDiv_right for the right one. contentDiv ID for the container div for these 3 columns.

Continue reading ‘Liquid Column Display Layout – Part II’ »