Horizontal scrolling in the block

slider2

Horizontal scrolling is very original, and originality is exactly one of the main components of success of any project.


How it works?


Creates a block(Container), Container is placed in a block larger(Slider) in which the(Section).

In the block Container, we will see only part of the block Slider, as shown in the figure below.

slider1
When you do certain actions unit Slidera is shifted and thereby the visible part changes, as shown in the figure below.

slider3

I think now everything is clear to everyone :)

the

Implementation


All operations with the movement of the Slider block will occur with the aid of all known javascript library mootools.

HTML code is very simple. First connect and configure the mootools library by inserting this code below between the tags head.

the 
<script type="text/javascript"src="mootools.svn.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
var scroll = new Scroller('container', {area: 100, velocity:1});
$('container').addEvent('mouseover', scroll.start.bind(scroll));
$('container').addEvent('mouseout', scroll.stop.bind(scroll));
});
</script>


Next, create all the necessary blocks.

the 
<div id="container">

<div class="slider">

<div class="section" > section 1 content</div>
<div class="section" > section 2 content</div>
<div class="section" > section 3 content</div>
<div class="section" > section 4 content</div>
<div class="section" > section 5 content</div>

</div>

</div>


Now you only have to draw the whole thing using css

the 
#container{

width: 780px;
height: 440px;
border: 8px solid #FFF;
overflow: auto;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;

}
.slider{

width: 2000px;
height: 400px;
padding: 20px;
background: #CCCCCC;

}
.section{

margin:0;
width:220px;
float:left;
margin-right:50px;

}


All! Ready ^_^

View example

Download example


Source Chernev.Ru is a Positive blog
Article based on information from habrahabr.ru

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Integration of PostgreSQL with MS SQL Server for those who want faster and deeper

Изображение
Recently habré was already published integration PostgreSQL and MSSQL. But, items there is categorically not enough. Therefore, the objectives of this publication are the following: the the to broaden and deepen publicly available information about FDW for MSSQL-called tds_fdw to tell the difference in major versions and describe basic compatibility issues; the to talk about the possibilities of optimization of queries that use the foreign table; the to address the subject of caching external data in a materialized view; the to say a few words about the exotic ways to integrate PostgreSQL and MSSQL. the Installing and configuring TDS FDW The guys from PostgresPro already sufficiently said about this process, I will not repeat. Will leave a few links to the official PostgreSQL documentation and examples from tds_fdw: the the creating an extension (extension) in PG: off.dokumentacija ; the server: off.documentation , example of tds_fdw ; the creating
Далее...

Custom database queries in MODx Revolution

This topic will certainly be useful for those who have quite a lot of projects on MODx Revolution, as with the usual sites of business cards is enough and the standard working methods of a La $modx- > getObject() , $modx->getCollection() , etc., and these methods are inherently not just a job database, but also with the objects of MODx. When working with large projects methods a La $modx- > getCollection() for us is not the best solution for two reasons: 1. The overexpenditures. These methods are not just getting data from DB, but also create instance of the retrieved objects. In this case, getting information about 10000 documents, we get 10000 objects of modResource that it is not very cool. 2. The task is complicated by the count of records. In addition to the direct difficulties of counting even at the query level, even if you get 10 records of the same document (for example), MODx will return as a result only one object modResource. Although often that will su
Далее...

Parse URL in Zend Framework 2

Objective: the Have a method to disassemble the components of the string containing the URL. The string can contain both absolute and relative URLS and both these options should be correctly parsed. the And in the drain, let's say the "wrong" format absolute links without "http://". Further in the text links to the "wrong" format will be called partial absolute references . the Implement support for the "RF" domain. the Example: site.ru/page.php /page.php site.ru/page.php the scheme http the host site.ru site.ru the path page.php page.php page.php Implementation of paragraphs 1 and 2 of our problem In this we should help the class Zend\Uri\Http . He has we need methods parse($uri) , getHost() , getPath() , etc. But! When we parse the URL and type " site.ru/page.php " (without the " http:// ") getHost() will return an empty string and getPath()
Далее...