Creating a pulldown website (like this one)

Creating a pulldown website (like this one)

I had the idea of creating this style effect after seeing a similar one in other website, only it was pullup and not pulldown.

We’ll be using JQuery Framework to produce the desired effect. JQuery by itself only enables the dropdown of one element, to make the desired output we need to do some modifications, and that’s what we’re gonna go over on this post.

First of all we need to import the required JavaScript:




Place these lines after <title> tag on the HTML code.

A few styles need to be added for this to work properly:

.drag_top {
	width:100%;
	height:400px;
	background-color:#333;
	margin-top:-380px;
	z-index:1000;
}
.conteudo_drag {
	height:380px;
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	background-color:#333;
}
.hand_drag {
	width:100%;
	height:20px;
	background-color:#333;
	cursor:s-resize;
}

Now we need to initialize JQuery Framework and tell it which element will be affected by the dropdown effect.

After the code you just entered add:

$(document).ready(function(){
	$("#drag_top").draggable(
	{
		handle: '#hand_drag',
		axis: 'y',
		containment: [0,0,'100%',380],
		drag: function(even,ui){
			document.getElementById("page").style.marginTop = (ui.position.top)+'px';
			}
		});
	});

The element we’ve chosen to be affected is “#drag_top”.

  • “handle: ‘#hand_drag’” tells JQuery that only this element will activate the dropdown effect
  • we are going to lock it to the Y axis using “axis: ‘y’”
  • “containment: [0,0,'100%',380]” is where we specify the limits of movement of our dropdown, in this case we confine it to top 0, left 0, width 100% and height 380 from the top of the page
  • Finally we go over to the drag function, this is where we specify what will happen during the drag effect. The default drag function has 2 parameters; event and ui. Event has all event related information during the drag and ui has all changes that happen to the dragged element, so, in this case, we’re going to use that to update the rest of he page as the dragged element comes down.

For this to happen we first need to put all <body> content inside a <div> element with the id “page”


	

We still haven’t add the content of our dropdown element. Before <div id=”page”> and after <body> type

Drag Me!

And that’s it. Everything should be working. If not, go over the steps once again and check that everything has been added properly.
If you still can’t get it to work send me an email or comment this post in order, for me, to help.

See you on the next post :)

13
Feb 2009
AUTHOR joseairosa
CATEGORY

Uncategorized

COMMENTS No Comments

Leave a Reply