Skip to content

Instantly share code, notes, and snippets.

@jlstr
Created November 16, 2011 19:10
Show Gist options
  • Save jlstr/1371017 to your computer and use it in GitHub Desktop.
Save jlstr/1371017 to your computer and use it in GitHub Desktop.
Scrollbar files
#box-container {
width: 267px;
height: 58%;
position: fixed;
margin-top: 160px;
overflow: hidden;
}
#area-track {
width: 8px;
height: 97%;
float: right;
opacity: 0;
margin-right: 2px;
z-index: 1;
padding-top: 1px;
}
#grip {
background-color: #545454;
width: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
height: 90%;
z-index: 20;
opacity: 0.9;
top: 0px;
}
#box {
width: 250px;
height: auto;
position: relative;
margin-left: 4px;
margin-top: 5px;
top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Youtubedemo</title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div id="header-wrap">
<div id="header-container">
<div id="header">
<div id="post_form">
<%= form_tag videos_path do %>
<%= label_tag :url, "Video URL" %>
<%= text_field_tag :url, params[:url], :size => 45 %>
<%= submit_tag 'Post it' %>
<% end %>
</div>
<% if notice %>
<div id="notice"><%= notice %></div>
<% end %>
</div>
</div>
</div>
<div id="main">
<div id="left">
<%= yield %>
</div>
<div id="right">
<div id="box-container">
<div id="area-track">
<div id="grip">
</div>
</div>
<div id="box">
<div class="ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
</div>
<div class="ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
</div>
<div class="ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
</div>
<div class="ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
</div>
<div class="ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
</div>
<div class="ipsum-last">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
</div>
<div class="ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
</div>
<div class="ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
</div>
<div class="ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
$(function(){
displayGrip();
dragGrip();
calculateGripSize();
resized();
});
function dragGrip() {
box = $('#box');
$('#grip').draggable({
axis: "y",
containment: "#area-track",
appendTo: box,
drag: function(event, ui) {
var appendTo = $('#grip').draggable('option', 'appendTo');
increment = parseInt( ui.helper.css('top')) * -1;
//increment *= 0.45; This line controls the 'speed' of the scrolling
appendTo.css( { top: increment } );
}
});
} //end of function
function displayGrip() {
$("#box-container").hover(
function () {
$('#area-track').css({'opacity': '0.9'});
},
function () {
$('#area-track').fadeTo(100, '0.1');
});
}
function calculateGripSize() {
var minH = 1,
h = Math.max( $('#box-container').outerHeight() / parseInt($('#box').prop('scrollHeight'), 10) * 100, minH );
$('#grip').height(h);
}
function resized() {
$(window).resize(function() {
calculateGripSize();
$('#grip').css('top', 0);
$('#box').css('top', 0);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment