Wednesday, June 17, 2015

jQuery split long ul list to multiple UL

1. HTML code

<ul id="bigList">
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
</ul>
2. jQuery Code
 var $bigList = $('#bigList'), group;
  while((group = $bigList.find('li:lt(20)').remove()).length){
    $('
    ').append(group).appendTo('body'); }
Working Demo

Monday, June 1, 2015

Scroll to bottom of image when mouse over

1. Css Code
<style type="text/css">

            .image-bg {

                margin:0;
                padding:0;
                background-image: url("landingpage_07.jpg");
                background-repeat: no-repeat;
                display: inline-block;
                height: 344px;
                padding-top: 31px;
                position: relative;
                width: 457px;

            }

            .image-bg:hover .image-shop-scroll {

                background-position: center 100% !important;

            }

            .image-bg .image-shop-scroll {

                transition: all 5s ease-out 0s;

            }

            .image-bg .image-shop-scroll {

                background-position: center 0;
                background-repeat: no-repeat;
                height: 313px;
                left: 0;
                margin-bottom: 20px;
                overflow: hidden;
                position: absolute;
                width: 100%;

            }

        </style>


2.html Code

<div>

            <span class="image-bg">

                <span style="background-image: url('demo1.jpg');" class="image-shop-scroll"></span>

                <span class="glare"></span>

            </span>

        </div>
Working Demo