Dynamic web page layout

Hi folks,
Today I will be sharing a very widely used plug-in, called masonry. The basic idea is to create a web page, containing various HTML blocks spread throughout. But the catch is, the boxes are supposed to adjust themselves based on their content size. The layout of the web page, or rather the blocks will be dynamic as far as their positioning is concerned.

Following is an example of the same:

Download: dynamic_web_layout.zip

Toggle Hierarchical Menu

Hi,

This is another script  request. I am not really sure how to explain or name this piece of code, just adding a screen shot to sum up everything.

Source Code:

Auto increase content on scrolling

Hi,

I recently got script request for developing something which has become very common in most websites. Mostly seen in sites like Facebook. For any given container in a web page, which has a scroll bar, when the user reaches the end of the scroll height, the content of that container auto populates itself. This article covers this functionality.

Lets see few screen shots to better understand the concept:


1. Normal div with sample content and a scroll bar

2. User reaches the end of scroll

3. Immediately the content of the div increases

Download: autoScrollContent.zip

Explanation:

Quick Links - MD5 Converter, base64 encoder/decoder

Hi All,

This is a nifty little code, which is usefull when you quickly want to convert something into MD5, or base64 encode/decode any string. Generally, I have seen programmers and testers do that using online tools. But this will save your the time for searching for a website then converting it. With this code, just one simple step and you don't even have to go to a separate browser tab to find a MD5, base64 encode/decode of a string.

Download: shortcuts.html

Steps to follow:

1. Enable the bookmark toolbar of your browser.

Responsive Design

Hi,

Recently I came across a client request for a responsive website. Here is a small tutorial how you can achieve it.


Firstly, what is responsive design? It is basically a technique of web designing where the layout, design or content of the website adjusts itself based on the device from which it is being viewed. The device can be mobile phone, iPad or laptop.

The basic idea is very simple. When a webpage is opened in a device, the change that a web page goes through, as far as design is concerned, is the width of the browser. Responsive design allows designers to define different styles for different widths. That way the css changes dynamically based on the browser width, hence making it device independent.

Download Demo: responsive_design.zip
(Open the demo1.html in any browser and reduce the width of the browser to see the effect)


Following are 3 snapshots of the same page in different devices:

For Laptop/Desktop (Assumed width: 1500px):

For smaller devices such as iPad (Assumed width: 1000px):