We Keep Coding

Jquery drag and drop multiple items without removing source items

I have two lists (div or table elements) in which I can drag & drop items from one to the other, and its working fine. But I want a to drop a copy of selected items form source div NOT removing it from the source list.
Any solution?
HTML Code:
<div class="demo">
<p>Available Boxes (click to select multiple boxes)</p>
<ul id="draggable">
<li>Box #1</li>
<li>Box #2</li>
<li>Box #3</li>
<li>Box #4</li>
</ul>
<p>My Boxes</p>
<ul id="droppable">
</ul>
</div>
Jquery Code:
$(document).ready(function() {
var selectedClass = 'ui-state-highlight',
clickDelay = 600,
// click time (milliseconds)
lastClick, diffClick; // timestamps
$("#draggable li")
// Script to deferentiate a click from a mousedown for drag event
.bind('mousedown mouseup', function(e) {
if (e.type == "mousedown") {
lastClick = e.timeStamp; // get mousedown time
} else {
diffClick = e.timeStamp - lastClick;
if (diffClick < clickDelay) {
// add selected class to group draggable objects
$(this).toggleClass(selectedClass);
}
}
})
.draggable({
revertDuration: 10,
// grouped items animate separately, so leave this number low
containment: '.demo',
start: function(e, ui) {
ui.helper.addClass(selectedClass);
},
stop: function(e, ui) {
// reset group positions
$('.' + selectedClass).css({
top: 0,
left: 0
});
},
drag: function(e, ui) {
// set selected group position to main dragged object
// this works because the position is relative to the starting position
$('.' + selectedClass).css({
top: ui.position.top,
left: ui.position.left
});
}
});
$("#droppable, #draggable").sortable().droppable({
drop: function(e, ui) {
$('.' + selectedClass).appendTo($(this)).add(ui.draggable) // ui.draggable is appended by the script, so add it after
.removeClass(selectedClass).css({
top: 0,
left: 0
});
}
});
});
Live Link: http://jsfiddle.net/T68Fn/

Menu Open & Close on menu button - Jquery

I'm trying to create a slide out menu, that open an closes on the same a tag. I've put something together but, it runs through the whole animation instead of pausing after opening.
HTML
<header>
<nav>
<ul class="slide-menu">
<li class="menu-element">How tall?</li>
<li class="menu-element">Books</li>
<li class="menu-element">Journal</li>
<li class="menu-element">Contact</li>
</ul>
<a id="puller" href="#">Menu</a>
</nav>
</header>
Jquery
$(document).ready(function()
{
$("#puller").click(function(){
$(".slide-menu").animate({
marginLeft: '+=360px'
}, 500);
});
$("#puller").click(function(){
$(".slide-menu").animate({
marginLeft: '-=360px'
}, 500);
});
});
Can anyone help with this?

Using jQuery toggle is a good idea. You can also simply maintain the state of the menu as to slided out already or not and take action like this
$(document).ready(function(){
var slide = false;
$("#puller").click(function(){
if(slide){
$(".slide-menu").animate({marginLeft: '-=360x'}, 500);
slide = false;
}else{
$(".slide-menu").animate({marginLeft: '+=360px'}, 500);
slide = true
}
});
});

Use jQuery Toggle, like so. Simple.
$(document).ready(function() {
var menu = $('.slide-menu');
var speed = 500; // set animation speed
$('#puller').toggle(
function(){
menu.animate({
marginLeft: '+=360px'
}, speed);
},
function(){
menu.animate({
marginLeft: '-=360px'
}, speed);
}
);
)};

jQuery slow response to scrollTop()

I've been trying to make a resizing height navigation, as seen here: http://www.kriesi.at/themes/enfold/
I've gotten very close as seen here on jsfiddle: http://jsfiddle.net/magnusbrad/4DK3F/12/
<div id="nav" class="header">
nav here
<ul class="right">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
$(window).scroll(function () {
if ($(document).scrollTop() === 0) {
$('#nav.header').animate({height:'140px'}, 500);
$('ul.right').animate({'line-height':'140px'}, 500);
} else {
$('#nav.header').animate({height:'40px'}, 500);
$('ul.right').animate({'line-height':'40px'}, 500);
}
});
When you scroll down the animation works perfectly, however, when you scroll back to the top of the page it takes like 10 seconds to update and run the else statement. What am I missing to make that action happen faster, in real time?

The problem is that .animate() adds to a queue each time it's called. So as you scroll away from the top, another animation is getting added to the animation queue for every scroll event. Then when you do get back to the top, the .animate({height:'140px'}, 500) animation is getting added to the end of the queue meaning it'll only occur once all the other animations have happened (each taking 500 milliseconds). Of course, you don't see these other animations taking place because you're telling jQuery to animate to the values that they already have, and therefore there's nothing visually happening.
http://api.jquery.com/animate/
Try:
var atTop = !$(document).scrollTop();
$(window).scroll(function () {
if ($(document).scrollTop() === 0 && !atTop) {
$('#nav.header').animate({height:'140px'}, 500);
$('ul.right').animate({'line-height':'140px'}, 500);
atTop = true;
} else if (atTop) {
$('#nav.header').animate({height:'40px'}, 500);
$('ul.right').animate({'line-height':'40px'}, 500);
atTop = false;
}
});
http://jsfiddle.net/4DK3F/32/

I'm styling a drop down menu that onclick will appear and on blur will disappear

Unfortunately I am having issues with the disappearing of the drop down. I'm currently using toggleClass to add/remove the class on click but I also need this process undone when the menu is blurred ie: clicking anywhere else on the page etc. Here is my jquery code:
$(function() {$('#srt-btn').click(function() {$('ul.toggle-off').toggleClass('toggle-on')});});
<ul id="sort">
<li><a id="srt-btn" class="srt-title">Sort ▾</a>
<ul class="sort-menu toggle-off">
<div class="droid"></div>
<li class="top">Notes</li>
<li>Photos</li>
<li>Videos</li>
<li class="divider"></li>
<li class="btm">Make List</li>
</ul>
</li>

function toggleMenu()
{
$('ul.toggle-off').toggleClass('toggle-on');
}
$(function() {
$('#srt-btn').click(toggleMenu);
$('#srt-btn').blur(toggleMenu);
});
Working example.

you could also use stopPropagation to cancel click events
$(function() {
$('#srt-btn').click(
function(e) {
$('ul.sort-menu').slideToggle();
e.stopPropagation();
}
);
$('.sort-menu li').click(
function(e) {
$('ul.sort-menu').slideUp();
e.stopPropagation();
}
);
$(document).click(
function(){
$('ul.sort-menu').slideUp();
}
);
});
And don't forget about setting your menu options ul to position:absolute else your elements will shift
Here is a jsFiddle

You could try something like this:
var IsInside = false,
$sortMenu = $('#sort'),
$toggleOn = $('.toggle-off');
$sortMenu.on('mouseenter', '#srt-btn', function(){
IsInside = true;
}).on('mouseleave', '#srt-btn', function(){
IsInside = false;
});
$sortMenu.on('click', '#srt-btn', function(){
$toggleOn.toggleClass('toggle-on');
});
$(document).on('click', 'body', function(){
if(!IsInside) {
$toggleOn.removeClass('toggle-on');
}
});
Here a jsFiddle.

How to make a scrollable div scroll on click and mouseover using jQuery

Using the markup below how would I get the "#content" div to scroll up or down when I click or hover over the "#scrollUp" or "#scrollDown" anchor tag. Scrolling should be smooth preferably. If clicked it should scroll a specific amount (for touch devices) if mouseover it can scroll until mouseout.
<style>
#content {
overflow:auto;
height: 50px; /*could be whatever*/
}
</style>
<a id="scrollUp" href="#">up</a>
<a id="scrollDown" href="#">down</a>
<div id="wrapper">
<div id="content">
<ul>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
</ul>
</div>
</div>

You can use jQuery's animate function to accomplish a smooth-scrolling effect on click or mouseover:
var step = 25;
var scrolling = false;
// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function(event) {
event.preventDefault();
// Animates the scrollTop property by the specified
// step.
$("#content").animate({
scrollTop: "-=" + step + "px"
});
}).bind("mouseover", function(event) {
scrolling = true;
scrollContent("up");
}).bind("mouseout", function(event) {
// Cancel scrolling continuously:
scrolling = false;
});
$("#scrollDown").bind("click", function(event) {
event.preventDefault();
$("#content").animate({
scrollTop: "+=" + step + "px"
});
}).bind("mouseover", function(event) {
scrolling = true;
scrollContent("down");
}).bind("mouseout", function(event) {
scrolling = false;
});
function scrollContent(direction) {
var amount = (direction === "up" ? "-=1px" : "+=1px");
$("#content").animate({
scrollTop: amount
}, 1, function() {
if (scrolling) {
// If we want to keep scrolling, call the scrollContent function again:
scrollContent(direction);
}
});
}
Working example: http://jsfiddle.net/andrewwhitaker/s5mgX/
(You'll have to disable the mouseover and mouseout events to see the effects of the click event handler properly)
How it works:
Uses the animate function mentioned above to scroll smoothly by a specified amount on click.
Uses a flag to enable continuous scrolling on when the link's mouseover event handler is called, and disable scrolling when the link's mouseout event handler.
When scrollContent is called, if the scrolling flag is still true after the animation is completed, animate again in the same direction. The callback function parameter of animate allows us to take an action after animation has completed.

Try using JavaScript instead of jQuery for this task. Google the function scrollBy() as in window.scrollBy()