public
Last active

Drag controls for oversized content

  • Download Gist
drag-controls.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
<title>Drag Controls for Oversized Content</title>
 
<style type="text/css">
#full-sized-area {
position: relative;
overflow: hidden;
width: 800px;
height: 400px;
}
 
#full-sized-content, #full-sized-background {
position: absolute;
top: 0;
left: 0;
}
 
#drag-controls-area {
position: relative;
width: 300px;
height: 50px;
}
 
#drag-controls {
position: absolute;
top: 0;
left: 0;
height: 48px;
border: 1px solid white;
}
 
#drag-controls.ui-draggable {
cursor: -moz-grab !important;
cursor: -webkit-grab !important;
cursor: e-resize;
}
 
#drag-controls.ui-draggable-dragging {
cursor: -moz-grabbing !important;
cursor: -webkit-grabbing !important;
border-color: yellow;
}
 
/* the below styles are specific to this example */
 
#full-sized-content {
font-size: 44px;
font-family: Helvetica, sans;
width: 1600px;
padding: 50px;
}
 
#drag-controls-area {
background-color: #00386d;
}
</style>
 
</head>
 
<body>
<div id="full-sized-area">
<div id="full-sized-background">
<img src="http://farm3.static.flickr.com/2334/2279537269_a5394fb86a_z.jpg" style="width: 1100px; height: 350px;" alt="" />
<br />
<a href="http://www.flickr.com/photos/chris_gin/2279537269/">Photo credit</a>
</div>
 
<div id="full-sized-content">
This is some text in the foreground so you can see the parallax
</div>
</div>
 
<div id="drag-controls-area">
<div id="drag-controls"></div>
</div>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script type="text/javascript" src="jquery-ui-draggable.js"></script>
<script type="text/javascript">
$(function() {
var $fullArea = $('#full-sized-area');
var $fullContent = $('#full-sized-content', $fullArea);
 
// find what portion of the content is displayed
var contentRatio = $fullArea.width() / $fullContent.width();
 
// scale the controls box
var $controlsArea = $('#drag-controls-area');
var $controls = $('#drag-controls', $controlsArea);
 
$controls.css('width', $controlsArea.width() * contentRatio);
 
// determine the scale difference between the controls and content
var scaleRatio = $controlsArea.width() / $fullContent.width();
 
$fullBackground = $('#full-sized-background');
 
// attach the draggable behavior
 
$controls.draggable({
axis : 'x', // confine dragging to the x-axis
containment : 'parent',
drag : function(ev, ui) {
// move the full sized content
var newContentPosition = -1 * ui.position.left / scaleRatio;
$fullContent.css('left', newContentPosition);
 
// move the background
$fullBackground.css('left', newContentPosition * .4);
}
});
});
</script>
 
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.