Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <meta charset="utf-8">
    <title>Proliphiq</title>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.22.custom.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
            <script src="js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>        
</head>
<body>
    <div class="menu_links_container">
        <ul>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>      
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>      
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>      
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>  
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>      
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
            <li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li><li>Menu Link</li>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="dummy"></div>
    <div id="slider"></div>
</body>
</html>
 
var start_value="";
​
​
var createSlider = function ($slider, values){
    var max_val=$('.menu_links_container').find('li').length;
    //alert(max_val);
    $slider.slider({
        min: 0,
        max: max_val,
        step: 1,
        values: values,
        animate: true,
        start:function(event,ui){           
            start_value=ui.value;
             
            $('.menu_links_container').css({'visibility':'visible'}).hide().fadeIn(500);
        },
        slide:function(event,ui){
            $('.menu_links_container').find('li').eq(ui.value).animate({'height':'200px','margin-top':'0'},200);
            $('.menu_links_container').find('li').eq(ui.value).css({'background':'#000','color':'#fff'});
            $('.menu_links_container').find('li').eq(ui.value-1).animate({'height':'63px','margin-top':'70px'},50);
            $('.menu_links_container').find('li').eq(ui.value-1).css({'background':'#e5e5e5','color':'#000'});          
            $('.menu_links_container').find('li').eq(ui.value+1).css({'background':'#e5e5e5','color':'#000'});
            $('.menu_links_container').find('li').eq(ui.value+1).animate({'height':'63px','margin-top':'70px'},200);
            var pos=(($('.menu_links_container').find('li').eq(ui.value).position().left)-($('.ui-state-active.ui-state-focus').position().left))-40;
            $('.menu_links_container ul').animate({'right':pos+'px'},10);           
        },
        stop:function(event,ui){
                
                var stop_val = $($slider).slider( "option", "values" );
                if(start_value===0){
                    var st_val=ui.value;
                    values.push(st_val);            
                    create_live(values);
                }
                else{
                    create_live(stop_val);
                }   
                $('.menu_links_container').css({'visibility':'hidden'});
                var slider = $('.ui-slider-handle:first');
                var position = slider.offset();
                var value = $('#slider').slider('value');
                
        }
    });        
};
function create_live(va){   
    $slider = $("#slider");
    $slider.slider('destroy');  
    createSlider($slider,va);
}
$(document).ready(function() {  
    $slider = $("#slider");
    var values = [0];
    createSlider($slider, values);  
    $('.menu_links_container').css({'visibility':'hidden'});
        //alert();
        $('.menu_links_container').find('li').addClass('style2');
    
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers