ScriptBreaker

Jquery slideTo function. With this function you can slide an element to a given position on your webpage. There are four option to define the position. Special to this function is that you have the ability to slide to the center of the screen and also to the bottom and/or right of the screen.

note: if you want to position inside a div you need to set the position of this div to relative


function

slideTo ({options})
Main function call that requires few options:

Options

top Integer
pixel or 'center' position of the element

left Integer
pixel or 'center' position of the element

bottom Integer
pixel or 'center' position of the element

right Integer
pixel or 'center' position of the element

inside String
element, center into window (id of an elements or window, document)

HTML, CCS and JQuery code

<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="scriptbreaker-slideto-1.0.js"></script>
<script language="JavaScript">

$(document).ready(function() {
	$('#sliderBox').slideTo({
				transition:300,
				top:'center',
				left:'center',
				inside:'#container'
			}
	);

	$(window).bind('resize', function() {
	    $('#sliderBox').stop().slideTo(
	    	    {	transition:300,
					top: 'center',
					left: 'center',
					inside:'#container'
				}
	   	);
	});

	$("#centerPage").click(function(){
		$('#sliderBox').stop().slideTo({ 
			transition:500,
			top:'center',
			left:'center'
	    });
	});

	$("#centerContainer").click(function(){
		$('#sliderBox').stop().slideTo({ 
			transition:500,
			top:'center',
			left:'center',
			inside:'#container'
	    });
	});

	$("#rightBottomContainer").click(function(){
		$('#sliderBox').stop().slideTo({ 
			transition:500,
			right: 20,
			bottom: 20,
			inside:'#container'
	    });
	});

	$("#centerBottomPage").click(function(){
		$('#sliderBox').stop().slideTo({ 
			transition:500,
			left: 'center',
			bottom: 20,
			inside:document
	    });
	});

});

</script>


<div id="container" style="position:relative;top:100px;height:500px;width:900px;border:1px solid red;">
	<div id="sliderBox">
		
		
		
		
	</div>
</div>

 Download full sourcecode