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:

Simple javascript tooltip or help text

Hi,

In this post I will discuss of a custom made tooltip which you can implement in your HTML, without breaking a sweat. As usual, in this also, I am using jQuery as my Javascript framework. I have used the basic concept of generating lightbox to generate the tooltips. So lets see how it looks in the front end:

Before we go into the explanation you can download the source code from here.

Code and Explanation:

First let us see the basic HTML structure as:

<div style="float:left;margin-right:5px">This is text 1 </div><div class="tooltip">This is tooltip 1...</div><br/>

<div style="float:left;margin-right:5px">This is text 2 </div><div class="tooltip">This is tooltip 2...</div><br/>

<div style="float:left;margin-right:5px">This is text 3 </div><div class="tooltip">This is tooltip 3...</div><br/>

<div style="float:left;margin-right:5px">This is text 4 </div><div class="tooltip">This is tooltip 4...</div><br/>

Javascript accordion (collapsible menu)

Hi,

In this post, I have created a custom accordion in simple javascript, with a little help from jQuery. But this is not a plugin, so it wont take up too much time to load in the browser. You can download the full source code here. Before going to the explanation, lets first see how it looks like:

The HTML structure that is there, I have done it completely using <ul> and <li>, this would make it easier to customize. Here is a sample HTML of the above:

<ul class="acc_options_ul">

<li class="acc_options"><h1 class="acc_options_title">Option 1</h1>  
<ul class="acc_op_content_ul">  
<li class="acc_op_content">  
content of the section.....  
</li>  
</ul>  
</li>

</ul>

The convention that needs to be followed is, the title of the each section of the accordion must be kept inside an <h1> inside the  <li class="acc_options"> tags. Each <li class="acc_options"> represents each section. You just need to include the style.css and accordion.js in your page and let the JS take care of the rest.

Explanation:


The functionality of the JS file is very simple. First when the page loads I am opening the first section of the accordion by default by the following:

Custom radio button/checkbox - jQuery

Hi,

This can be considered as a continuiton of my previous post for creating custom dropdown using jQuery. In web 2.0 it becomes important to get rid of the conventional flat looking radio buttons and check box with stylish images but keeping their functionality. In this post I have made a custom solution for achieving that. Click here to download the entire source code.

I am using 2 pair of images. 1 pair for selected/unselected radio buttons and other checked/unchecked check boxes. First lets take a look how it looks:

Explanation:
First download the source code. All the trick is in the script.js file. You just need to follow few conventions given below for defining a radio button or a checkbox:

Radio button:
Conventionally this is what we write:

Proportionate Text Zoomer - Javascript

Hi,

In this I have made a custom script which can be used in any website to increase or decrease the text size of the entire page. You can find the entire source code at the end of this post. The zoom in and zoom out functionality is performed irrespective of their current font size. e.g. if a span has font size 10 and h1 as 14, then this will make span to 11 and h1 to 15, based on a certain percentage.

This is what the sample page looks like:

In this script you can choose tags whose text needs to be increased/decreased. This is what you have to do in script.js to add a new tag to have the functionality:


  $(".increaseFont").click(function(){  // for increasing font

$('a').each(function(idx, item) {    //adding the funtionality to anchor tag
       size=parseInt(jQuery(this).css("font-size"));
  size++;
  jQuery(this).css("font-size",size + "px")
    });

})

Drag and drop shopping cart

Hi,

I am compiled this script where the users can simply drag and drop products to shopping cart. For this jQuery has been used. The important thing to keep in mind are the syntax which makes an item draggable and an item droppable. You will find the entire source code at the end of this post, featuring the shopping cart functionality. So the things to keep in mind are:


$( ".draggable" ).draggable({ opacity: 0.7, helper: "clone",
start: function(){
...................
        .....................
       },
});


The above draggable function makes the element whose class name is "draggable", a draggable element. Same goes for the element where I am dropping:


$( ".drop_zone" ).droppable({
drop: function( event, ui ) {
.....................
}
})

Apart from this everything else is just basic PHP concepts of shopping cart. Here is what happens:

When the products are dragged and dropped in the shopping cart box it gets added in the cart as:

The vital part in this is the drag and drop. Whenever an item is dropped in the shopping cart a function is called where I have put the ajax call. The event to call the function is as follows:

Custom Dropdown with jQuery

Hi,

If you want to customize the conventional dropdown box in HTML, then here is what you need. In this you can put images, hyperlinks anything as the dropdown options. Here is how it looks like:

and the options as:

and finally after selecting:

Trigger javascript events manually

Hi,

This is a very interesting code segment I got from one of my friends. In this you can actually trigger any event manually. This gets very useful in daily programming, when you want to perform same set of task/s with multiple events. I am not referring to creating a common function, but creating a single function or set of functions and the event which is calling the function, you can actually cause the event to occur via code.

First of all you need to download a stable version of jquery.js and use it in your following code:


<html>
<head>
<title> execute button click event automatically using jQuery trigger() method</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {          
$('#btn1').bind('click', function() {
alert('You selected the First Button');
});
$('#btn2').bind('click', function() {
alert('You selected the Second Button');
});