jQuery slider for horizontal images scrolling

This is totally haphazard post, was created during the absolute idleness.
I believe that everyone saw this “trick” many times – horisontal slider scrolls horizontal line of images.
Here is simple markup

<div class="scrollableContainer">
    <div class="content">
        <div class="scrollableContent">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
        </div>
    </div>
    <div class="slider"></div>
</div>
<div class='console'></div>

we gonna use numbers instead of images (imagine that these numbers are images for the poor)

some styles:

.scrollableContainer {
    width: 500px;
    height: 200px;
}
.scrollableContainer .content {
    border: 2px solid #999;
    border-radius: 5px;
    height: 100px;
    width: 500px;
    overflow: hidden;
}
.scrollableContainer .scrollableContent {
    font-size: 30px;
    margin-left: 0px;
    width: 1000px;
}
.scrollableContainer .scrollableContent .item {
    font-size: 50px;
    font-weight: bold;
    border: 5px solid grey;
    border-radius: 5px;
    width: 70px;
    height: 70px;
    margin: 10px;
    text-align: center;
    float: left;
}
.scrollableContainer .slider {
    width: 300px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}
 
/* overridings for jquery UI styles: */
.scrollableContainer .slider .ui-slider-handle.ui-state-default.ui-corner-all {
    border: 4px solid #999;
    border-radius: 50%;
    cursor: pointer;
}
 
.scrollableContainer .slider.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content {
    background: #ddd;
}

and here is the magic:

$(function() {
    $( ".slider" ).slider({
        slide: function( event, ui ) {
            $('.console').text(ui.value);
            $('.scrollableContent').css('margin-left', -ui.value * 4);
        }
    });
});

How it works – div with width 1000 px is inside of the div with smaller fixed width and “overflow: hidden”, and we just need to change “margin-left: -X” of the internal div depending on the slider’s position.

Here is my fiddle http://jsfiddle.net/TGEQf/

Social Share Toolbar

Vertical reordering of blocks with CSS or How to swap two elements using CSS

It’s old trick for search engine optimization (SEO). As far as we all know, search engine parses web page and prioritizes key words founded on the page. And words that are in the beginning of the page have more priority, it’s obviously because usually in the beginning of the page is header that should describe content below.

So the obvious search engine optimization is to arrange all key words in the beginning of the page.┬áBut it is completely not cool for Design. That’s why we need to replace two blocks: block with key words should be in the beginning of the markup, but on UI it should be under the next block with page’s content.

So we got something like this

<div class="block">It is content needed for SEO, but it's not very interesting for user</div>
<div class="block">Really good and interesting for user content, but it's waste for search engines</div>

and we need to swap these two blocks on UI.

First of all we need additional wrappers, so lets modify markup to something like this:

<div class="wrapper">
    <div class="bottom">
        <div class="block">It is content needed for SEO, but it's not very interesting for user</div>
    </div>
    <div class="top">
        <div class="block">Really good and interesting for user content, but it's waste for search engines</div>
    </div>
</div>

And here is the magic:

.wrapper {
    display: table; 
    width: 100%; 
}
.top {
    display: table-header-group; 
}
.bottom {
    display: table-footer-group;
}
/* next style is not really necessary, just to show borders of swapped blocks */
.block {
    border: 1px solid black;
}

Here is the proof link http://jsfiddle.net/UJWP4/1/

Some words about browsers support – this approach works fine in IE8+ (not supported in ie7)

Social Share Toolbar