Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Content sliding effect

Content slider class provides sliding effect for switching between different pages or contents. It can bind content elements to provided menu or allow visitors to change content using throwing (dragging and dropping) method.

Content sliding speed and sliding directions and center of content elements are customizable

Package contains content_slider.js and content_slider.packed.js (packed javascript)and one example file: example.html, to demonstrate switching between multiple contents using menu and throwing (drag and drop) method.

Contents

Download

Example codes

<html>
<head>
<style>
body
{
    overflow: hidden;
}
.content
{
    border: 1px solid red;
}

</style>
</head>
<body>
<div id="menu">
    <ul>
        <li><a href="#" rel="item_1" >elem 1</a></li>
        <li><a href="#" rel="item_2" >elem 2</a></li>
        <li><a href="#" rel="item_3" >elem 3</a></li>
        <li><a href="#" rel="item_4" >elem 4</a></li>
    </ul>
</div><!-- menu -->
<div id="content">
    <div id="item_1" style="width: 300px;" class="content">
        Lorem Ipsum is simply dummy text of the printing and 
        typesetting industry. Lorem Ipsum has been the industry's 
        standard dummy text ever since the 1500s, when an 
        unknown printer took a galley of type and scrambled 
        it to make a type specimen book. It has survived not 
        only five centuries, but also the leap into electronic 
        typesetting, remaining essentially unchanged. It was 
        popularised in the 1960s with the release of Letraset 
        sheets containing Lorem Ipsum passages, and more recently 
        with desktop publishing software like Aldus PageMaker 
        including versions of Lorem Ipsum.
    </div>
    <div id="item_2" style="width: 600px;" class="content">
        Lorem Ipsum is simply dummy text of the printing and 
        typesetting industry. Lorem Ipsum has been the industry's 
        standard dummy text ever since the 1500s, when an 
        unknown printer took a galley of type and scrambled 
        it to make a type specimen book. It has survived not 
        only five centuries, but also the leap into electronic 
        typesetting, remaining essentially unchanged. It was 
        popularised in the 1960s with the release of Letraset 
        sheets containing Lorem Ipsum passages, and more recently 
        with desktop publishing software like Aldus PageMaker 
        including versions of Lorem Ipsum.
    </div>
    <div id="item_3" style="width: 400px;" class="content">
        Lorem Ipsum is simply dummy text of the printing and 
        typesetting industry. Lorem Ipsum has been the industry's 
        standard dummy text ever since the 1500s, when an 
        unknown printer took a galley of type and scrambled 
        it to make a type specimen book. It has survived not 
        only five centuries, but also the leap into electronic 
        typesetting, remaining essentially unchanged. It was 
        popularised in the 1960s with the release of Letraset 
        sheets containing Lorem Ipsum passages, and more recently 
        with desktop publishing software like Aldus PageMaker 
        including versions of Lorem Ipsum.
    </div>
    <div id="item_4" style="width: 700px;" class="content">
        Lorem Ipsum is simply dummy text of the printing and 
        typesetting industry. Lorem Ipsum has been the industry's 
        standard dummy text ever since the 1500s, when an 
        unknown printer took a galley of type and scrambled 
        it to make a type specimen book. It has survived not 
        only five centuries, but also the leap into electronic 
        typesetting, remaining essentially unchanged. It was 
        popularised in the 1960s with the release of Letraset 
        sheets containing Lorem Ipsum passages, and more recently 
        with desktop publishing software like Aldus PageMaker 
        including versions of Lorem Ipsum.
    </div>
</div><!-- content -->
<script src="./content_slider.js" type="text/javascript"></script>
<script>
    var slide = new content_slider("content", 
    {
        speed: 20, 
        direction: "x", 
        menu: "menu", 
        callback: function(id, d){
            document.getElementById(id).style.borderColor = "blue";
            //block content change for 10
            return 10;
        }
    });
</script>
</body>
</html>

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew content_slider(id, config);
DescriptionGet content div with sub elements to divided into multiple content divs
Input parameters

string id - id of div element, which contains div elements with site contents

json config - Json structure with configuration properties

  • int speed - speed to move content, value between 1 and 100 (default: 10)
  • int or string center_x - x coordinate of center of div element(default: 50%)
  • int or string center_y - y coordinate of center of div element(default: 50%)
  • function callback - callback function when element stop moving for different effects. Callback function should accept 2 arguments, first id of current element and second - direction, where value -1 represents element came from back, 0 - current element (didn't move anywhere), and 1 - element moved from the front. And callback function should return value in miliseconds, for how long to block content moving, for example: after effect will end (default: function(){})
  • string direction - one which axis elements move, x represents x axis and y - y axis (default: 'x')
  • bool dragable - should elements be changed using drag and drop method (default: true)
  • string menu - id of element should could be used to change content elements. This element must contain anchors with rel value, which represents id of content which should appear by clicking on this anchor(default: '')
Example input
var slide = new content_slider("content", 
{
	speed: 20, 
	direction: "x", 
	menu: "menu", 
	callback: function(id, d){
		if(d > 0)
		{
			//comes from right side
		}
		else
		{
			//is current element or come from left side
		}
		//block content change for 600
		return 600;
	}
});

Latest changes

None for now

Rate us

Like our script? Rate it at JavaScript > Hot Scripts

Scripts.com
RATE ME!

Try it out and Rate on JSclasses.org

Support

JS classes support forum or comments below


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus