I want to apply slimScroll function on 2 different divs. only one div is active at one time.
So, i am using a variable to get current tab name. When user clicks Reviews, slimscroll shall apply on #reviews and if gallery is clicked, it should switch to gallery.
html code:
<ul class="nav nav-pills nav-justified">
<li class="active">Reviews</li>
<li>Gallery</li>
</ul><!-- tabs -->
<div class="tab-content">
<div class="tab-pane active" id="reviews">
reviews
</div>
<div class="tab-pane" id="gallery">
gallery
</div>
</div>
jquery code:
$(document).ready(function(){
$('.nav-pills li a').on('click',function(){
var current = ($(this).text());
alert(current);
});
$('article').slimScroll({
position: 'right',
height: '370px',
railVisible: true,
alwaysVisible: true
});
});
Do like this:
$(document).ready(function(){
$('.nav-pills li a').on('click',function(){
var current = $(this).attr("href").split('#')[1];
$(this).closest('ul').find('li').removeClass('active');
$(this).parent().addClass('active');
//$('div.tab-pane').removeClass('active');
//$('div#'+current).addClass('active');
alert(current);
$('#'+current).slimScroll({
position: 'right',
height: '370px',
railVisible: true,
alwaysVisible: true
});
or:
$(document).ready(function(){
$('.nav-pills li a').on('click',function(){
var current = $(this).attr("href").split('#')[1];
$(this).closest('ul').find('div.tab-content').find('div.tab-pane').removeClass('active');
$('div#'+current).addClass('active');
alert(current);
$('#'+current).slimScroll({
position: 'right',
height: '370px',
railVisible: true,
alwaysVisible: true
});
$('.nav-pills li a').on('click', function(e){
e.preventDefault();
$(this).parents('li').siblings().each(function() {
$(this).removeClass('active');
$($(this).find('a').attr('href')).unbind('slimscroll');
});
$($(this).attr('href')).slimScroll({
position: 'right',
height: '370px',
railVisible: true,
alwaysVisible: true
});
});
Related
I have a nav menu that links to certain parts of the page. I want to write some JS so that a class is added to each nav menu item when the scroll bar passes their respective part of the HTML. I believe I already know how to add classes to my navmenu items, so is there a specific way in JS to identify where in the DOM the user is?
To change the classes in the navbar dynamically, I use something like:
jQuery(document).ready(function ($) {
var menu_items_links = $(".menu li a");
menu_items_links.each(function () {
if ($(this).is('[href*="#CURRENT LOCATION IN DOM"]')) {
$(this).parent().addClass('current-location');
}
})
});
Where the class will add the highlight/underline to the navmenu item to show that the user is at the specific location.
You can use any scroll spy plugin for this or use the below implementation
$(window).bind('scroll', function() {
var currentTop = $(window).scrollTop();
var elems = $('.scrollspy');
elems.each(function(index){
var elemTop = $(this).offset().top;
var elemBottom = elemTop + $(this).height();
if(currentTop >= elemTop && currentTop <= elemBottom){ //Current location tracking
var id = $(this).attr('id');
var navElem = $('a[href="#' + id+ '"]');
navElem.parent().addClass('active').siblings().removeClass( 'active' );
}
})
});
.active{
color: red;
background-color: red;
}
#nav{
position:fixed;
top:0;
right:50%;
}
section{
min-height: 500px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<nav id="nav" class="navbar navbar-template">
<div class="row col-xs-12 text-center">
<ul>
<li class="active">
Home
</li>
<li>
AboutUs
</li>
<li>
Images
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<section class="scrollspy" id="Home">
Home
</section>
<section class="scrollspy" id="AboutUs">
AboutUs
</section>
<section class="scrollspy" id="Images">
Images
</section>
<section class="scrollspy" id="Contact">
Contact
</section>
</body>
Take a look at this scroll spy plugin https://github.com/r3plica/Scrollspy
So what finally worked for me was using WaypointJS. I basically just set waypoints at the specific parts of the DOM and then I could define what I want to happen at those places. Here's the code in the end:
jQuery(document).ready(function ($) {
var menu_items_links = $(".menu li a");
menu_items_links.each(function () {
if ($(this).is('[href*="#"]')) {
$(this).parent().removeClass('current-menu-item current-menu-ancestor');
}
})
new Waypoint({
element: document.getElementById('explore'),
direction: 'down',
handler: function() {
console.log("FIRST WAYPOINT IS ACTIVE.");
document.querySelector("a[href='/manitoba/#explore']").parentElement.classList.add('current-menu-item', 'current-menu-ancestor');
document.querySelector("a[href='/manitoba/#build']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
document.querySelector("a[href='/manitoba/#connect']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
},
offset: '25%',
continuous: false
});
new Waypoint({
element: document.getElementById('explore'),
direction: 'up',
handler: function() {
console.log("DEACTIVATING WAYPOINT.");
document.querySelector("a[href='/manitoba/#explore']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
},
offset: '35%',
});
new Waypoint({
element: document.getElementById('build'),
handler: function() {
console.log("SECOND WAYPOINT IS ACTIVE.");
document.querySelector("a[href='/manitoba/#build']").parentElement.classList.add('current-menu-item', 'current-menu-ancestor');
document.querySelector("a[href='/manitoba/#explore']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
document.querySelector("a[href='/manitoba/#connect']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
},
offset: '50%',
continuous: false
});
new Waypoint({
element: document.getElementById('connect'),
handler: function() {
console.log("THIRD WAYPOINT IS ACTIVE.");
document.querySelector("a[href='/manitoba/#connect']").parentElement.classList.add('current-menu-item', 'current-menu-ancestor');
document.querySelector("a[href='/manitoba/#build']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
document.querySelector("a[href='/manitoba/#explore']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
},
offset: '50%',
continuous: false
});
});
I'm using this example fiddle for nested bootstrap accordions.Fiddle here
I'm using it in MVC/Razor and I'm having trouble getting child accordions to expand fully. They only open a tiny bit and need to scroll, which is not desired.
Here's my pertinent Razor snippet: (FYI, the various style="height:150px;" attributes I added to try to get the accordions to expand but they only expanded the area around the accordions, not the accordions themselves.)
<style>
.accordion-expand-holder {
margin: 10px 0;
}
/*.accordion-expand-holder .open, .accordion-expand-holder .close {
margin: 0 10px 0 0;
}*/
.ui-accordion-content {
height: auto;
}
</style>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.js"></script>
<div class="accordion-expand-holder">
<button type="button" class="open">Expand all</button>
<button type="button" class="close">Collapse all</button>
</div>
#foreach (var item in Model)
{
<div class="accordion">
<h3>#(item.Name)</h3>
<div>
<div class="text-nowrap">
<button type="button" onclick="javascript:DeleteUserStory('#(item.Id)');">Delete</button>
<button type="button" onclick="javascript:EditUserStory('#(item.Id)');">Edit</button>
</div>
<div>Description: #(item.Description)</div>
<div>Notes: #(item.Notes)</div>
<div class="accordion" style="height:150px;">
<h3>Tasks</h3>
<ul style="height:150px;">
#if (item.Tasks != null)
{
if (item.Tasks.Count > 0)
{
foreach (var task in item.Tasks)
{
<li style="height:150px;">
<button type="button" onclick="javascript:DeleteTask('#(task.Id)');">Delete</button>
<button type="button" onclick="javascript:EditTask('#(task.Id)');">Edit</button>
<br />
#(task.Name)
<br />
Description: #(task.Description)
</li>
}
}
else
{
<li>No Tasks Assigned.</li>
}
}
</ul>
</div>
<br />
<button type="button" onclick="javascript:ShowTaskModalForAdd('#(item.Id)');">Add New Task</button>
</div>
</div>
}
<script>
// Accordion - Expand All #01
$(function () {
$(".accordion").accordion({
collapsible: true,
active: false,
autoHeight: true,
});
var icons = $(".accordion").accordion("option", "icons");
$('.open').click(function () {
$('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
'aria-selected': 'true',
'tabindex': '0'
});
$('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
$('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
'aria-expanded': 'true',
'aria-hidden': 'false'
}).show();
$(this).attr("disabled", "disabled");
$('.close').removeAttr("disabled");
});
$('.close').click(function () {
$('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
'aria-selected': 'false',
'tabindex': '-1'
});
$('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
'aria-expanded': 'false',
'aria-hidden': 'true'
}).hide();
$(this).attr("disabled", "disabled");
$('.open').removeAttr("disabled");
});
$('.ui-accordion-header').click(function () {
$('.open').removeAttr("disabled");
$('.close').removeAttr("disabled");
});
});
//$("#accordion").accordion();
Needed this:
$(".accordion").accordion({
collapsible: true,
active: false,
autoHeight: false,
heightStyle: "content" //<- this fixes the problem with the squished height
});
Looks like your issue is the autoHeight option.
You can either set it false as such: autoHeight: false,
-OR-
you can use autoHeight: true, and add heightStyle: "content", afterwards.
Source:
JQuery Accordion Auto Height issue
I'm trying to make the slides within jQuery UI tabs look as if they're next to each other and somewhat attached. I think I'll be able to achieve this by running the show and hide animations at the same time.
Currently jQuery slides the current panel out and then the next one. How can I slide out the current panel while at the same time slide in the next one?
$("#tabs").tabs({
hide:{effect:"slide", direction:"right"},
show:{effect:"slide", direction:"left"}
});
http://jsfiddle.net/CnEUh/2372/
I want to start both the hide: and show: effects at the same time rather than one after the other
Here's the version based on my original comment.
This keeps jQuery's tab system, but hides the existing tabs. New slidingTabs div contains the sliding tabs so they can be animated.
Update
As per request, the initial content remains as it was before.
function makeTabsIntoSlidingTabs($tabs) {
$tabs.find("div").wrapAll("<div style='display:none' />");
$tabs.append("<div class='slidingTabs' />");
$tabs.children("div").first().find("div").each(function(i) {
$tabs.find(".slidingTabs").append($("<div />").addClass("tab").html($(this).html()));
});
$tabs.tabs({
activate: function(event, ui) {
var tab = $tabs.tabs("option", "active");
$tabs.find(".slidingTabs div").first().animate({
marginLeft: (tab * -100) + '%'
}, 400, function() {});
}
});
}
makeTabsIntoSlidingTabs($("#tabs"));
.slidingTabs {
white-space: nowrap;
overflow-x: hidden;
}
.slidingTabs .tab {
width: 100%;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<div id="tabs">
<ul>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div id="tabs-1">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>
I think the proper way to change the behavior of a jQuery's widget is to extends it.
This way the solution is extensible, leave room for customization while allowing the tabs to remain a ui.widget, preserving jQuery's styling and state control.
$(document).ready(function() {
// Clean whitespaces before creating tabs
$('#tabs').cleanWhitespace();
/* retains most of $.ui.tabs options, but now since both
* hide & show animations are combined there's a
* shared direction & duration
*/
$("#tabs").customSlideTabs({
direction: "left",
duration: 500
});
});
$.widget("nameSpace.customSlideTabs", $.ui.tabs, {
_toggle: function(event, eventData) {
var that = this,
toShow = eventData.newPanel,
toHide = eventData.oldPanel;
this.running = true;
var container = $(toHide.parent());
var originalContainerOverflow = container.css("overflow");
function complete() {
container.css("overflow", originalContainerOverflow);
eventData.newTab.closest("li").addClass("ui-tabs-active ui-state-active");
eventData.oldTab.closest("li").removeClass("ui-tabs-active ui-state-active");
that.running = false;
that._trigger("activate", event, eventData);
}
// start out by hiding, then showing, then completing
if (toHide.length && toShow.length) {
if (!this.options.duration) this.options.duration = 300;
container.css({
"overflow": "hidden",
"white-space": "nowrap"
});
var fromX, toX;
if (this.options.direction == "right") {
toHide.appendTo(container);
fromX = "-100%";
toX = 0;
} else {
toShow.appendTo(container);
fromX = 0;
toX = "-100%";
}
toShow.css({
"width": "100%",
"box-sizing": "border-box",
"display": "inline-block",
"vertical-align": "top",
"position": "relative",
"left": fromX,
"white-space": "wrap"
});
toHide.css({
"width": "100%",
"box-sizing": "border-box",
"display": "inline-block",
"vertical-align": "top",
"position": "relative",
"left": fromX,
"white-space": "wrap"
});
toShow.animate({
"left": toX
}, {
duration: that.options.duration,
complete: function() {
toShow.attr("style", "display: block;");
}
});
toHide.animate({
"left": toX
}, {
duration: that.options.duration,
complete: function() {
toHide.attr("style", "display: none;");
complete();
}
});
} else {
toHide.hide();
toShow.show();
complete();
}
toHide.attr({
"aria-expanded": "false",
"aria-hidden": "true"
});
eventData.oldTab.attr("aria-selected", "false");
// If we're switching tabs, remove the old tab from the tab order.
// If we're opening from collapsed state, remove the previous tab from the tab order.
// If we're collapsing, then keep the collapsing tab in the tab order.
if (toShow.length && toHide.length) {
eventData.oldTab.attr("tabIndex", -1);
} else if (toShow.length) {
this.tabs.filter(function() {
return $(this).attr("tabIndex") === 0;
})
.attr("tabIndex", -1);
}
toShow.attr({
"aria-expanded": "true",
"aria-hidden": "false"
});
eventData.newTab.attr({
"aria-selected": "true",
tabIndex: 0
});
}
});
// Gratitues http://stackoverflow.com/a/2587356/1645830
$.fn.cleanWhitespace = function() {
textNodes = this.contents().filter(
function() {
return (this.nodeType == 3 && !/\S/.test(this.nodeValue));
})
.remove();
return this;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div id="tabs-1" class="tab">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2" class="tab">
<p>Content for Tab 2</p>
<p>Content for Tab 2</p>
</div>
<div id="tabs-3" class="tab">
<p>Content for Tab 3</p>
</div>
</div>
<div id="tabid"></div>
This is by no mean complete, since it only support sliding left & right and not the full set of animations from jQuery, but I think it's a good base to work on.
Try this out .Hope this is what you needed.i have used the css transition for the slide effect.
$(document).ready(function() {
$("#tabs").tabs({
beforeActivate: function(event, ui) {
var index = ui.newTab.find('a').attr('href');
var currentPage = $(index).index();
//530 is the width of the frame or you can say the overall width including padding and margin for the content tabs.
$('.inner').css('left', '-' + (currentPage) * 530 + 'px');
},
});
});
body {
background-color: #eef;
}
#tabs {
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
#maindiv {
position: relative;
overflow: hidden;
width: 530px;
}
.inner {
position: relative;
display: inline-flex;
height: 100%;
transition: -webkit-transition: left .6s ease-in-out;
transition: left .6s ease-in-out;
}
#tabs-1,
#tabs-2,
#tabs-3 {
outline: solid 5px red;
outline-offset: -5px;
float: left;
display: block !important;
width: 480px;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div id="maindiv">
<div class="inner" style="left:0px;">
<div id="tabs-1">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>
</div>
</div>
<div id="tabid"></div>
you can check the js fiddle Here.
This is NOT what you may be looking for, but you can always look for other solutions outside what jqueryui libraries gives you.
in this example I have removed the slide effect, I have wrapped your tabcontent divs into a container with nowrap and displayed them as inline-block so they are standing side by side even if you don't see them (overflow:hidden at the parent), then with little jquery adding and removing classes to this new container when you click on the tabs and a css transition you may have what you are looking for.
Ugly as hell imho but it's an example of a work around
$("#tabs").tabs({
hide:{
},
show:{
}
});
$('#ui-id-1').click(function() {
$('.container').removeClass("move1");
$('.container').removeClass("move2");
});
$('#ui-id-2').click(function() {
$('.container').addClass("move1");
$('.container').removeClass("move2");
});
$('#ui-id-3').click(function() {
$('.container').addClass("move2");
});
JSFIDDLE
It's not possible to achieve this effect, without changing tabs js script. You can use a workaround with beforeActivate method. Eg.:
$("#tabs").tabs({
hide:{effect:"slide", direction:"right"},
beforeActivate: function( event, ui ){ui.newPanel.show("slide", { direction: "left" });}
});
But then there's a problem with tabs positioning. I written quick workaround for this problem, but i think it's better solution to use some custom js. jsFiddle
$("#tabs").tabs({
hide: {
effect: "slide",
direction: "right"
},
beforeActivate: function(event, ui) {
setTimeout(function() {
ui.newPanel.css({
'position': 'absolute',
'width': '100%',
'top': ui.oldPanel.offset().top - 11
});
ui.newPanel.show("slide", {
direction: "left"
}, function() {
ui.newPanel.css({
'position': 'relative',
'width': 'auto',
'top': 0
});
});
}, 15)
}
});
body {
background-color: #eef;
}
#tabs {
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
position: relative;
overflow: hidden;
}
#tabs-1,
#tabs-2,
#tabs-3 {
outline: solid 5px red;
outline-offset: -5px;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div id="tabs-1">
<p>Content for Tab 1
<br/>
</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>
<div id="tabid"></div>
I want to make it so that when I hover over one of the items in a list, it moves that element.
Here is my HTML code for the list:
<ul class="nav">
<li class="test">Home</li>
<li>News</li>
<li>About us</li>
<li>Venue</li>
<li>Affiliations</li>
<li>Players & Officers</li>
<li>Fixtures & Results</li>
<li>Coaching</li>
<li>Contact us</li>
</ul>
And here is my Jquery code:
$(document).ready(function() {
$('').mouseenter(function() {
$(this).animate({ left: '+=100px' });
});
$('').mouseleave(function() {
$(this).animate({ left: '-=100px' });
});
});
Basically, my question is what goes in the quote marks in the JQuery functions?
Use the on event
$(document).ready(function () {
$('.nav').on({
mouseenter : function(){
$(this).animate({left: '+=100px'});
},
mouseleave : function(){
$(this).animate({left: '-=100px'});
}
}, 'li');
});
Try this:
$(document).ready(function()
{
$('.nav li').mouseenter(function()
{
$(this).animate({left: '+=100px'});
});
$('.nav li').mouseleave(function()
{
$(this).animate({left: '-=100px'});
});
});
You can use $('.nav li') to target list items of your nav:
$(document).ready(function () {
$('.nav li').mouseenter(function () {
$(this).animate({
left: '+=100px'
});
});
$('.nav li').mouseleave(function () {
$(this).animate({
left: '-=100px'
});
});
});
Also, you need to set position: relative for your list items, so the left value can work:
.nav li {
position: relative;
}
Fiddle Demo
You might want to consider the .on and event map approach.
$('.nav').on({
mouseenter : function(){
$(this).animate({left: '+=100px'});
},
mouseleave : function(){
$(this).animate({left: '-=100px'});
}
}, 'li');
HTML Code:
<ul class="nav">
<li>Home</li>
<li>News</li>
<li>About us</li>
<li>Venue</li>
<li>Affiliations</li>
<li>Players & Officers</li>
<li>Fixtures & Results</li>
<li>Coaching</li>
<li>Contact us</li>
</ul>
Javascript:
$(document).ready(function () {
$('.nav li').mouseenter(function () {
$(this).animate({
left: '+=100px'
});
});
$('.nav li').mouseleave(function () {
$(this).animate({
left: '-=100px'
});
});
});
A little CSS tweek to make the list hover animation work:
.nav {
padding: 20px 0 0 20px;
}
.nav li {
position: relative;
}
Check the demo at: DEMO
The Drag works properly in the first division but is not working properly in the next one. I need to get it working without changing the div Id/Class name.
Fiddle here: JS Fiddle
HTML:
<div class="track">
<div id="rocket">
</div>
</div>
<br><br><div style="clear:both">
<div class="track">
<div id="rocket">
</div>
</div>
CSS:
.track {
height: 400px;
width: 48px;
overflow: hidden;
margin: 10px 0 0 10px;
float:left;
background: #ccc;
}
#rocket{
height:48px;
width:48px;
background: url('http://cdn1.iconfinder.com/data/icons/Symbolicons_Transportation/48/Rocket.png');
position:relative;
top:352px;
}
Jquery :
$(document).ready(function() {
$('.track').each(function(){
//rocket drag
$(this).children("#rocket").draggable({
containment: ".track",
axis: "y",
scroll: false,
start: function(event, ui) {
draggingRocket = true;
},
drag: function(event, ui) {
// Show the current dragged position of image
},
stop: function(event, ui) {
draggingRocket = false;
}
});
});
});
here is the fiddle...
http://jsfiddle.net/zHyA9/30/
1) id should always be unique... so chnaged ur ids to class..
2) added containment: $(this), in ur draggable class
You need to change some thing in html code.
<div class="track">
<div id="rocket">
</div>
</div>
<div style="clear:both">
<div class="track">
<div id="rocket">
</div>
</div>
Here the fiddle: fiddle
You need several changes in your html as well as js code.
Refer this fiddle.
JS:
$(document).ready(function() {
$('.track').live("hover",function(){
//rocket drag
$(this).children(".rocket").draggable({
containment: this,
axis: "y",
scroll: false,
start: function(event, ui) {
draggingRocket = true;
},
drag: function(event, ui) {
// Show the current dragged position of image
},
stop: function(event, ui) {
draggingRocket = false;
}
});
});
});