Div based Fixed or Fluid CSS/HTML layout Template

August 5, 2012 at 6:36 am (CSS, FOSS, HTML, Javascript, Life, Web)


About two year back I worte an article introducing a simple HTML structure to organize the content on the web page as shown below.

Layout structure

header
sidebar left
content
sidebar right
footer

The above illustration just a simple introduction to how the template looks like. This HTML/CSS layout structure consists of examples illustrating the usage of Fixed and Fluid layouts covering following aspects

  • Without any Sidebars
  • With one Sidebar on Left
  • With one Sidebar on Right
  • With two Sidebars on either sides (Left and Right)

Folder sturcture

  • css – consists of all the CSS files
  • js – consists of all the JavaScript files
  • images – consists of all the image files
  • plugins – consists of all the third party components
  • template – consists of examples
  • readme.txt – simple introduction
  • lgpl.txt – lgpl license file

CSS

Inside the css folder you’ll find several files as illustated below, I adapted this structure after studing the Drupal Zen theme. Currely the theme is not Sass aware.

  • Core
    • html-elements.css – style rules to neutralize browser defaults and define baseline formatting to HTML elements
    • form-elements.css – style rules to format form blocks
    • layout.css – style rules to control the overall layout of the template (fixed or fluid)
    • sidebar.css – style rules to ncontrol the formating of sidebar(s)
    • print.css – style rules to format the web page when printing to a paper or PDF/Postscript.
    • website.css – style rules that requires to meets the look and feel of the custome design (main CSS file)
  • Optional
    • website-popup.css – style rules used for popul dialogs
    • handheld.css – style rules required to override website.css to make the site mobile friendly
    • ie_8.css – to keep IE 8 specific style rules
    • ie_7.css – to keep IE 7 specific style rules
    • ie_6.css – to keep IE 6 specific style rules

The above CSS files linked to the HTML markup was done within HTML head element as illustrated in Figure 1. CSS files with IE version specifc style rules were loaded inside a conditional comment block.

Figure 1: Linking of CSS files

JavaScript (breed of ECMAScript)

Inside the js folder you’ll find the javascript files used by the theme. I have used jQuery library as the base for all the client-side scripting requirements.

  • actions.js – to handle client side logic
  • window.orientation.js – to control the orientation of the page when viewing from a handheld device.

The above JavaScript files and the ones mentioned under plugins section was linked to the HTML markup was done just before the HTML closing body element as illustrated in Figure 2. This method was adapted to minimized the loading delay introduce by JavaScript files to the clent browser.

Figure 2: Linking of JavaScript files

Images

Inside the images folder you’ll find all the images used in the theme. Inside this you’ll find a folder called icons, which holds third party icons find from the Web (unfortunately I’m unable to locate the repository, my apologies to the creator/owner of the icon.)

Plugins

Inside the plugin folder you’ll find all the third pary libraries used in the theme.

Templates

Inside the template folder you’ll find examples illustrating following layouts

  • Fixed layout
    • no-sidebars-tableless-fixed
    • sidebar-left-tableless-fixed
    • sidebar-right-tableless-fixed
    • two-sidebars-tableless-fixed
  • Fluid layout
    • no-sidebars-tableless-fluid
    • sidebar-left-tableless-fluid
    • sidebar-right-tableless-fluid
    • two-sidebars-tableless-fluid

Fixed/Fluid switching

The switching between the Fixed and Fluid layout structures and be very easily achieved by toggleing the class attribute found on the HTML body element as follows:

  • Fixed – fixed-layout
  • Fluid – fluid-layout

<body class="fixed-layout">
            or
<body class="fluid-layout">

With and without Side-bars switching

The switching between the With and without Side-bars layout structures and be very easily achieved by toggleing the class attribute found on the first HTML div element next to body element as follows:

<body class="fixed-layout">
<div id="wrapper" class="no-sidebars">
            or
<body class="fixed-layout">
<div id="wrapper" class="sidebar-left">
            or
<body class="fixed-layout">
<div id="wrapper" class="sidebar-right">
            or
<body class="fixed-layout">
<div id="wrapper" class="two-sidebars">

To create an easily customizable div based HTML/CSS template by myself was their in my mind for sometimes and I’ll be sharing it for the benefit of others. The template can be download form Github repository.

Leave a Comment

Google Analytic user action tracking inside Flash

December 18, 2010 at 4:43 pm (Flash, Javascript, Web, Work)


Recently I got the chance get involve with the development of the site called I Call Mine. It is a Flash based interactive site that was dedicated for males, focusing on helping the medical practitioners in UK to getting an understanding of the terms used by males to call their big fella in general.

The site collects the user’s choice and displays it with respective to the region as a word cloud. In the meantime the client wanted to track the user’s interaction on the site through Google Analytics as well. In this effort we refer the method introduced by Evan Mullins to integrate the event tracking functionality of Google Analytics to the Flash application.

Additionally have to make sure to set the parameter of allowScriptAccess to always when embedding the Flash object to the Web page. You can find more information over here. I have to specially thank Anjana for his time and effort on this.

Once the event tracking code is in place you’ll be able to monitor the site’s user activity through Google Analytics page. As soon as you Sign-in to the account it shows the general statistics of the site on the Dashboard – refer the first image below. To monitor the activity of the event tracking navigates along the left side navigation to Content section. Once inside that you’ll get a section called Event Tracking which displays an in details view of the event tracking used inside the Flash application – please refer the second image below.

Leave a Comment

Create & copy shoter URL to clipboard

March 27, 2010 at 3:24 pm (FOSS, Javascript, PHP, Web)


Today I’m going to share some work I did during the last couple of weeks. These days most of us make use of Tweeter, Buzz, etc … to update our status, pass some information, etc… . So in most cases when we want to share some interesting things found on web sites it’s convenient if we can get a shorter version of the actual URL generated within the site itself, because this can be very easily place among the content we want to share. In the mean time get it copied to the clipboard with a single mouse click. You might wonder why getting into this much of a trouble when there are enough freely available services (bit.ly, tiny.cc,shortURL.com, etc…) to make the required URL shorter. The most important point is that we should always make sure that we make our user’s life easy with one go.

I found this interesting article on JustNI Blog that explained how to generate a shorter version of the true URL locally with the use of PHP and MySQL. His approach has provided a way to make use of the .htaccess file to handle the necessary url redirection.

His approach

instead

Let me introduce my 2 cents to his approach by further extending the functionality to have the generated URL copied to the clipboard:

  • During each page load grab the page URL
  • Generate the corresponding shorter URL version if it doesn’t exists ( short database table).
  • Store that URL on the page(preferably inside a HTML hidden field).
  • Provide a button or image to get the URL copied to the clipboard ( Here it provides a comprehensive cross browser compatible, Flash supported jQuery based implementation of Copy to Clipboard ).
  • Place the URL redirection process related logic inside the index.php file.
  • Once the shorter version of the URL is requested, the logic on the index.php extracts the query string passed for url( ?url=AX37JEGJR335AK4RB ) part and check its corresponding longer/original URL stored inside the system( short database table). If exists then it takes the user to the corresponding page else shows the user a message like “Page not found – 404″.

4 Comments

Sahana XForm

December 12, 2009 at 12:56 pm (FOSS, Javascript, SAHANA, Web)


Let me give you a quick introduction on what this “Sahana XForm” is all about and what is trying to achieve through this. The main idea behind this effort is to come up with a working prototype to transform the forms on Web-based applications in to a print friendly form that heavily involves data capturing. Sahana is one such application that heavily involves in such activities and it’s main targeted for the overall management of diverse activities in a post disaster situation.

A disaster means it involves recording and dissemination of information among various parties for the immediate fulfillment of victims requirements. Although there are very sophisticated methods and equipments in most cases still the preferred and the used method is the use of paper based forms. In here I should especially mentioned about Chamindra because it was he who came up with this idea and encouraged me on this.

In this approach it provides a way to extracts the XHTML from elements in an active Web form and transform them to a print friendly format (printed and to be used as off-line paper forms) leaving behind the images and unwanted elements on the page. In order for the functionality to work the XHTML mark for the form should be organized in the following manner.

<h2>Personal Details</h2>
<div class="xform-container">
<form name="form" >
  <fieldset><legend> Identity </legend>
     <label for="nic"> Identity Card Number </label>
              <input type="text" name="nic" id="nic"/>
     
     <label for="passport"> Passport Number </label>
              <input type="text" name="passport" id="passport"/>
     
  </fieldset>

  <fieldset><legend> Basic Details </legend>
     <label for="family_name"> Family Name </label>
              <input type="text" name="family_name" id="family_name" value=""/>
     
     <label for="local_name"> Local Name </label>
              <input type="text" name="local_name" id="local_name" value=""/>
     
     <label for="dob"> Date of Birth </label>
              <input type="text" name="dob" value="" id="dob"/>
     
     <label for="opt_gender"> Gender </label>
              <select name="opt_gender">
                <option value="male"> Male </option>
                <option value="female"> Female </option>
              </select>
     
  </fieldset>

  <fieldset><legend> Contact Information </legend>
     <label for="address"> Address </label>
              <textarea name="address" id="address"></textarea>
     
     <label for="zip"> Postal Code </label>
              <input type="text" name="zip" id="zip"/>
     
     <label for="home_phone"> Home Phone </label>
              <input type="text" name="home_phone" id="home_phone"/>
     
     <label for="mobile_phone"> Mobile Phone </label>
              <input type="text" name="mobile_phone" id="mobile_phone"/>
     
  </fieldset>
</form>
</div>

Next using JavaScript scripting language and CSS implement the functionality as follows.

  • First identify Web forms from rest of the page(s) (It is very important that you enclose all form related elements inside a XHTML div element having a class attribute which holds a name. eg: <div class=”xform-container” > rest comes here… </div> ).
  • On success extract the XHTML form elements.
  • Then regenerate the XHTML markup on the same page. This should maintain the correct sequence of the original form(Label name and its corresponding input ).
  • Use the CSS to maintain the layouts and dimensions to match the layout for each section, which was there on the original form (Label name and the place to fill the data)
  • Next since we need to print this generated from to a paper we should arrange the components to fit into the page size(A4, Letter. Legal, etc…).
  • To invoke the functionality link the JavaScript file that hold the logic to the head section of the Web page and call the initialization function on any convenient location on the page (eg: <a href=”#” onclick=”init_xform();” title=”Generate XForm” > XForm</a>).

In the current implementation it is capable of transforming the page as shown in figure 1 into a form as shown in figure 2. Since the functionality itself can be extended for various directions I would like to invite all those who are interested in this work to come join us to extend this approach and the functionality to be readily used(eliminate the application level dependencies and to extend it to generate customized label layouts, etc… ) with any web based system just by linking the JavaScript library and generate the print friendly form. The code library is released under LGPL license along with Sahana.

Disaster Victim Registry - Web from

Figure 1: Disaster Victim Registry - Web from

Disaster Victim Registry - XForn

Figure2: Disaster Victim Registry - XForm

Your comments and suggestions are highly appreciated in developing this into a readily usable library for any web application.

Leave a Comment

Elegant tools to easy your life in web development

November 28, 2009 at 6:32 am (CSS, FOSS, Javascript, Web)


As I have mentioned in my previous post these days I’m involve in developing a web based CRM for a client in UK in the company I’m employed. I’m currently in the phase two of its development. In this effort I had to incorporate various functionalities into it, such as calendar for event management, bulk file uploading, star rating for order and product profitability, various UI enhancements, etc…

In fulfilling these requirements within the strict project deadline I consult the help of Google Search to find answers to them. With few hours of searching I came across some fabulous tools that helped me to achieve my requirements with few or no effort. So I though of sharing the benefit with you. I must especially thank all the authors for releasing them to be used in any project for zero cost and fair licenses (LGPL, Apache, MIT, Mozilla etc… )

File Uploading

  • FancyUpload
    FancyUpload 3.0

    FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses mootools to work in all modern browsers.

  • JqUploaders

    jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly – so you don’t have to do things twice.

Event Calendar

  • PHP-Calendar
    PHP-Calendar

    PHP-Calendar is a simple web calendar. It is targeted towards groups that need to collaboratively create and track events. In that same collaborative spirit, the source for PHP-Calendar is available under an open source license for anyone to use and modify.

  • Maian Events
    Maian Events

    Maian Events is a nice XHTML/CSS theme based calendar with options to auto archive events after they have finished. Visitors can also post comments for events if enabled and pictures can also be added by admin if applicable.

Instant Messaging

  • ajax im
    ajax im

    ajax im (“asynchronous javascript and xml instant messenger”) is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. No refreshing of the page is ever needed for this “web application” to work, as everything is updated in real-time via JavaScript.

UI Enhancement

  • RokBox
    RokBox

    RokBox, the successor of our popular RokZoom plugin, is a mootools powered JavaScript slideshow that allows you to quickly and easily display multiple media formats including images, videos (video sharing services also) and music. RokBox provides a theme system that allows you to create your own custom ones to fit your websites design.

  • ReMooz
    ReMooz

    ReMooz is an open-source widget for great looking and unobtrusive inline-pop-ups, powered by mootools. It enables how your visitors browse through content, such as thumbnail images and HTML. ReMooz features centered or relative-positioned draggable zoomed images, content preloading, fading captions, with plenty of options and is highly configurable: Add a simple image zoom or create a fancy design element for any graphic that needs to be enlarged on your site..

  • LightBox
  • ThickBox

1 Comment

« Older entries

Follow

Get every new post delivered to your Inbox.

Join 933 other followers