First, what is positioning?

When your browser opens a webpage, it starts rendering elements (divs, paragraphs, headings etc.) in the order they appear in the HTML markup of the page. Positioning is a natural way of organizing how the elements are displayed and an easy resolution to situations like overlaps. There are four types of positioning: static, relative, absolute and fixed.

Elements are statically positioned by default

The default positioning, which is implicitly applied to every element on the page, is static. Static positioning means that every element is positioned in the natural order it is added to the page. Block elements are displayed under other block elements, and inline elements are displayed next to other inline elements.

Relative positioning

Setting the positioning to relative does not by itself produce any noticeable difference in the way the element is displayed on the page. But you can now move it from its normal position with the top, left, bottom and right CSS properties. This comes really handy when dealing with situations in which you need to offset an element, but not anchor it to a specified position on the page.

.relativeDiv{

	/*
		Moving the div to the top-left
		from where it would normally show:
	 */

	position:relative;
	top:-50px;
	left:-100px;
}

Fixed positioning

Adding position:fixed to the CSS declarations of an element, positions it in relation to the browser window. This allows you to display toolbars, buttons or navigation menus, which are anchored at a fixed position and scroll with the page.

.fixedDiv{

	/*
		Fixing the div 20 px from the bottom
		of the browser window:
	 */

	position:fixed;
	right:20px;
	bottom:20px;
}

Probably the only drawback is that this positioning is not supported in older browsers like IE6, if you can’t afford the luxury of dropping support for these.

Absolute positioning

An absolutely positioned element is displayed on the page in relation to the document, or a parent element with a positioning different from static. This way, using the top, left, bottom and right CSS properties, you can specify an exact position. This also gives you the ability to center divs horizontally and vertically, which we discussed in the “Centering a Div Both Horizontally And Vertically” MicroTut.

.parentDiv{

	/* Absolute and Fixed positioning would work as well: */

	position:relative;
}
.absoluteDiv{

	/*
		Displaying the div 50px from the right and 90px from
		the top of its parent because of the explicit positioning
	 */

	position:absolute;
	right:50px;
	top:90px;
}

The benefits

Using these positioning properties you can achieve all kinds of advanced page layouts, which will bring your designs to the next level. In conjunction with the z-index property, you can change the default overlay rules that apply to elements (elements which appear later in the code are shown above the previous ones).

What is the coolest design you’ve done with the positioning properties? Brag in the comment section below.

There is, however, a way to keep information between requests in the form of cookies. This way you can have effective session managemet and persistent data.

There are two ways to work with cookies – server side (PHP, ASP etc) and client side (JavaScript). In this MicroTut we are going to take a look at how cookies are created and read in both PHP and JavaScript.

Cookies and PHP

Setting cookies

To create a cookie in PHP, you need to use the setcookie function. It takes a number of parameters (all except for the first are optional and can be omitted):

setcookie(
	'pageVisits',				// Name of the cookie, required
	$visited,					// The value of the cookie
	time()+7*24*60*60,			// Expiration time, set for a week in the future
	'/',						// Folder path the cookie will be available for
	'demo.tutorialzine.com'		// Domain to which the cookie will be bound
);

If you pass 0 as an expiration time (which is the default behavior) the cookie will be lost on browse restart. The “/” parameter indicates that it will be available for all directories of the domain (you can optionally bind a cookie to a single directory with something like /admin/ as a parameter).

There are two additional parameters that you could pass to the function, which are not given here. They are specified with a boolean value. The first one indicates that the cookie would be transferred only on a secure HTTPS connection, and the second that the cookie will not be accessible though JavaScript (introduced in PHP 5.2)

For most practical purposes, you would only need the first four parameters, omitting the rest.

Reading cookies

Reading a cookie with PHP is a lot simpler. All the cookies that were passed to the script are available in the $_COOKIE superglobal array. In our example, to read the cookie we would write the following code:

$visits = (int)$_COOKIE['pageVisits']+1;
echo "You visited this site: ".$visits." times";

It is a good place to note, that cookies set with setcookie are available in the $_COOKIE array on the next page load, which is something you should be aware of.

Deleting cookies

To delete cookies, just use setcookie and give it a time in the past as an expiration date.

setcookie(
	'pageVisits',
	$visited,
	time()-7*24*60*60,		// One week in the past. The cookie will be deleted
	'/',
	'demo.tutorialzine.com'
);

Cookies and jQuery

To use cookies with jQuery, you will need the special Cookie plugin.

Setting cookies

Setting cookies with the Cookie plug-in is quite intuitive:

$(document).ready(function(){

	// Setting a kittens cookie, it will be lost on browser restart:
	$.cookie("kittens","Seven Kittens");

	// Setting demoCookie (as seen in the demonstration):
	$.cookie("demoCookie",text,{expires: 7, path: '/', domain: 'demo.tutorialzine.com'});

	// "text" is a variable holding the string to be saved
});

Reading cookies

Reading a cookie is even simpler. Just call the $.cookie() function with a single cookie-name parameter, and the value of the cookie will be returned:

$(document).ready(function(){

	// Getting the kittens cookie:
	var str = $.cookie("kittens");

	// str now contains "Seven Kittens"
});

Deleting cookies

To delete a cookie, again use the $.cookie() function, but pass null as its second parameter.

$(document).ready(function(){

	// Deleting the kittens cookie:
	var str = $.cookie("kittens",null);

	// No more kittens
});

To wrap it up

In this MicroTut we took a look at setting and reading cookie data. It is a good place to note that you should not store any sensitive information such as usernames or passwords in cookies, as they are transmitted as regular headers on every page load and can be easily sniffed by wrongdoers. However, with proper precautions, you can achieve a great deal of interactivity thanks to this simple technology.

But first, the basics:

Horizontal centering with CSS

It is as easy as applying a margin to a div:

.className{
	margin:0 auto;
	width:200px;
	height:200px;
}

To center a div only horizontally, you need to specify a width, and an auto value for the left and right margins (you do remember the shorthand declarations in CSS don’t you?). This method works on block level elements (divs, paragraphs, h1, etc). To apply it to inline elements (like hyperlinks and images), you need to apply one additional rule – display:block.

Horizontal and vertical centering with CSS

Center a div both horizontally and vertically with CSS is a bit more tricky. You need to know the dimensions of the div beforehand.

.className{
	width:300px;
	height:200px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-100px 0 0 -150px;
}

By positioning the element absolutely, we can detach it from its surroundings and specify its position in relation to the browser window. Offsetting the div by 50% from the left and the top part of the window, you have its upper-left corner precisely at the center of the page. The only thing we are left to do is to move the div to the left and to the top with half its width and height with a negative margin, to have it perfectly centered.

Horizontal and vertical centering with jQuery

As mentioned earlier – the CSS method only works with divs with fixed dimensions. This is where jQuery comes into play:

$(window).resize(function(){

	$('.className').css({
		position:'absolute',
		left: ($(window).width() - $('.className').outerWidth())/2,
		top: ($(window).height() - $('.className').outerHeight())/2
	});

});

// To initially run the function:
$(window).resize();

The functionality is inserted into a $(window).resize() statement, which is executed every time the window is resized by the user. We use outerWidth() and outerHeight(), because unlike from the regular width() and height(), they add the padding and the border width to the returned size. Lastly, we simulate a resize event to kick center the div on page load.

The benefit of using this method, is that you do not need to know how big the div is. The main disadvantage is that it will only work with JavaScript turned on. This however makes it perfect for rich user interfaces (such as facebook’s).

Be sure to share your favorite methods in the comment section.

$('.selectorClass').hover(
function(){
	$(this).stop().fadeTo('slow',0.4);
},
function(){
	$(this).stop().fadeTo('slow',1);
});

This assigns the first function to be executed when the mouse moves above the elements on the page, which share the selectorClass class name, and the second one is executed when the mouse moves away.

You can use “this” inside of the functions, to access the element that triggered the event.

Hover actually binds the first function to the mouseenter event, and the second one to mouseleave, so you could alternatively write this:

$('.selectorClass').mouseenter(function(){
	$(this).stop().fadeTo('slow',0.4);
}).mouseleave(function(){
	$(this).stop().fadeTo('slow',1);
});

As of version 1.4 of jQuery, it is now possible to pass a single function to hover, which will be called on both mouseenter and mouseleave. This way you can shorten your code even more by writing only one function:

$('.selectorClass').hover(function(){
	this.check = this.check || 1;
	$(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4);
});

The example above increments this.check every time the function is run. Depending on whether the number is even or not, it chooses the opacity level to pass to fadeTo() (1 being completely visible).

This is also a great place to use the jQuery toggle functions like .slideToggle() and .toggleClass().