I've to drag the cloned element, but i don't understand how to call the trigger events synchronously
my example: http://jsfiddle.net/CfSMG/4/
correct example: http://jqueryui.com/demos/droppable/#photo-manager
Up:
Thx to all i've resolved the problem allready
My solution:
$('#move').mousedown(function(event) {
var offset = $(this).offset(),
map = {
position: 'absolute',
top : offset.top + 'px',
left : offset.left + 'px',
zIndex : 100
};
if($('.foo')[0]) return this;
$(this).clone().bind('mousedown mousemove', function(event) {
var _this = $(this),
offset = _this.position(),
_event = event;
$(document).bind({
mousemove : function(event) {
var axis = function(i) {
var page = {
top : 'pageY',
left : 'pageX'
}[i];
return event[page] - (_event[page] - offset[i]) + 'px';
};
_this.css({
left : axis('left'),
top : axis('top')
}).unbind('mousemove');
},
mouseup : function() {
_this.animate(map, function() {
$(this).remove();
});
$(this).unbind('mousemove');
}
});
}).addClass('foo').css(map).appendTo('body');
event.preventDefault();
event.stopPropagation();
});
Live demo: jsFiddle
Related
I have the following div
<div class="npwfu-inspiration">
<div class="npwfu-inspiration-inner">
<h1>Looking for inspiration?</h1>
<p>Pick a category to see examples of what you can create with Spark.</p>
<ul class="inspiration-category-list"></ul>
</div>
</div>
<div class="div2"></div>
I need to take out the inspiration-category-list list ul and drop it into another div with a CSS transition. So it slides down and locks to position 80px from the top in div2.
How can I do this using JQUERY?
why you do not use drag effect instead of css transition?
if you would like you can add draggable effect to every element that you want to move it
you can use dragable.js from link below
then in javascript code you should set $(".inspiration-category-list").draggable ()
then instead of using css transition just drag it and drop it in any div element
/*--------------------------------------------------------------
Draggable
alternative to jQuery UI’s draggable
based on comments from: http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
usage example: $('.post-thumbnail, article header').draggable();
--------------------------------------------------------------*/
(function ($) {
if (!jQuery().draggable) {
$.fn.draggable = function () {
var _fixMobileEvent = function (e) {
if (e.originalEvent && e.originalEvent.targetTouches && e.originalEvent.targetTouches[0]) {
var t = e.originalEvent.targetTouches[0];
e.pageX = t.clientX;
e.pageY = t.clientY;
return true;
} else {
return false;
}
};
this
.css('cursor', 'move')
.on('mousedown touchstart', function (e) {
_fixMobileEvent(e);
var $dragged = $(this);
var startOffset = $dragged.offset();
var x = startOffset.left - e.pageX,
y = startOffset.top - e.pageY,
z = $dragged.css('z-index');
if (!$.fn.draggable.stack) {
$.fn.draggable.stack = 999;
}
stack = $.fn.draggable.stack;
var firstMove = true;
var $preventClick = null;
$(window)
.on('mousemove.draggable touchmove.draggable', function (e) {
_fixMobileEvent(e);
//$("#log").text("x: " + e.pageX + "; y: " + e.pageY);
if (firstMove) {
firstMove = false;
$dragged
.css({
'z-index': stack, 'transform': 'scale(1.1)', 'transition': 'transform .3s',
'bottom': 'auto', 'right': 'auto'
});
/*.find('a').one('click.draggable', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$("#log").text("link: click prevented " + stack);
});*/
var $target = $(e.target);
if ($target.is('a')) {
$preventClick = $target;
$target.one('click.draggable', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
//$("#log").text("link: click prevented " + stack);
});
} else if ($dragged.is('a')) {
$preventClick = $dragged;
$dragged.one('click.draggable', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
//$("#log").text("dragged: click prevented " + stack);
});
}
}
$dragged.offset({
left: x + e.pageX,
top: y + e.pageY
});
e.preventDefault();
})
.one('mouseup touchend touchcancel', function () {
$(this).off('mousemove.draggable touchmove.draggable');
$dragged.css({ 'z-index': z, 'transform': 'scale(1)' })
$.fn.draggable.stack++;
if (_fixMobileEvent(e)) {
if ($preventClick) $preventClick.off('click.draggable');
var endOffset = $dragged.offset();
//$("#log").text("left :" + startOffset.left + "; top: " + startOffset.top
// + "; newLeft: " + endOffset.left + "; newTop: " + endOffset.top);
if (Math.abs(endOffset.left - startOffset.left) <= 3
&& Math.abs(endOffset.top - startOffset.top) <= 3) {
if ($preventClick) {
$preventClick[0].click();
} else {
var $target = $(e.target);
if ($target.is('a')) {
e.target.click();
} else if ($dragged.is('a')) {
$dragged[0].click();
}
}
}
}
});
e.preventDefault();
});
return this;
};
}
})(jQuery);
I have a little script running so i can scroll trough a div with the mousedown option. Unfortunately it resets on each click and i can't quite figure out why it is doing this.
<script>
$(function () {
var clicked = false, clickX;
$("#gallery").on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickX = e.pageX;
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('#gallery').scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
}
});
</script>
I am assuming it has something to do with
clickX = e.pageX;
$('#gallery').scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
Why am I? because : "Returns the horizontal coordinate of the event relative to whole document."
So I am assuming it takes the original position when you click but it doesnt update when you actually scroll this. Anyone has a fix for this?
http://jsfiddle.net/fLr4d7kt/6/
We have fixed it like this :
$(function () {
var scroll = 0;
$(function () {
var clicked = false, clickX;
$("#gallery").on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickX = e.pageX;
scroll = $('#gallery').scrollLeft();
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('#gallery').scrollLeft(scroll + (clickX - e.pageX));
}
});
});
js: http://jsfiddle.net/fLr4d7kt/10/
hi guys so i have this code ive done which when scrolling the sidebar moves up from bottom to top but im stuck with how to stop the scrolling once the sidebar hits the top of the main conatiner - can someone maybe help me with this?
code is:
$(window).bind('scroll', function () {
var scrolledY = $(window).scrollTop();
$('.parallax-sidebar').css('bottom', '+' + ((scrolledY * 1.3)) + 'px');
});
I have a fiddle example here: http://jsfiddle.net/06qwtgt6/1/
Many thanks!
$(document).ready(function () {
/********************************************************************************/
/* Parallax Scrolling */
// Cache the Window object
var $window = $(window);
$('[data-type]').each(function () {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// For each element that has a data-type attribute
$('div[data-type="background"]').each(function () {
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
$(window).bind('scroll', function () {
if (($window.scrollTop() + $window.height()) > (topOffset) &&
((topOffset + $self.height()) > $window.scrollTop())) {
var yPos = -($window.scrollTop() / $self.data('speed'));
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
var coords = '50% ' + yPos + 'px';
$self.css({ backgroundPosition: coords });
};
});
});
// For each element that has a data-type attribute
$('div[data-type="content"]').each(function () {
$(window).bind('scroll', function () {
var scrolledY = $(window).scrollTop();
$('.parallax-content').css('bottom', '+' + ((scrolledY * 1.3)) + 'px');
});
});
$(window).scroll(function(){
if ($(this).scrollTop() > 150) {
$('.sidebar').addClass('fixed');
} else {
$('.sidebar').removeClass('fixed');
}
});
});
CSS
.fixed {position:fixed; top:0;}
DEMO
I'm making a quick animated drop down. I have it working great when you mouseover and mouseout on the initial button. I just cant get the HTML div that drops down to "hold" when you're hovered on the dropdown itself. here is a fiddle of what I'm doing: http://jsfiddle.net/kAhNd/
here's what I'm doing in the JS:
$('.navBarClickOrHover').mouseover(function () {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '200px'
});
}).mouseout(function () {
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
} else {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '0px'
});
}
});
It works, but the element doesn't stay dropped down when you have your mouse over it. I added in
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
}
to try to make it do nothing when you're hovered over '.dropdownCont'.
Having a hard time explaining it. I'm sorry, I hope I make sense. Any help would be awesome! here's my Fiddle: http://jsfiddle.net/kAhNd/
Here is your code transformed http://jsfiddle.net/krasimir/kAhNd/3/
var button = $('.navBarClickOrHover');
var isItOverTheDropdown = false;
var showDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '200px'
});
targetDropDown.off("mouseenter").on("mouseenter", function() {
isItOverTheDropdown = true;
});
targetDropDown.off("mouseleave").on("mouseleave", function() {
isItOverTheDropdown = false;
hideDropDown();
});
}
var hideDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '0px'
});
}
$('.navBarClickOrHover').mouseover(function () {
showDropDown();
}).mouseout(function () {
setTimeout(function() {
!isItOverTheDropdown ? hideDropDown : '';
}, 500);
});
I guess that this is what you want to achieve.
I'm a begginer in jquery and javascript. I have a big trouble with my function, which gets two parameters - image source and array of img sources.
function loadPicture(pic_src, _getarray)
{
var picture_index = _getarray.indexOf(pic_src);
var array_last = _getarray.length - 1;
var big_source = pic_src;
var big_source = 'pictures/' + big_source.substring(big_source.search("thumbs/th_")+10);
var wwidth = $(window).width();
var wheight = $(window).height();
$("body").css({ 'overflow' : 'hidden' });
$("#pic_loader img.single_picture").remove();
$("#pic_loader").css({
'width' : wwidth,
'height' : wheight
});
$("#pic_loader").fadeIn();
$("#pic_loader").append('<img data-original="'+big_source+'" alt="" class="single_picture" />');
$("img.single_picture").css({
'max-height' : wheight - 120 + 'px',
'max-width' : wwidth - 120 + 'px',
'margin-top' : parseInt(wheight/16) + 'px'
});
$("img.single_picture").lazyload({
effect : "fadeIn",
skip_invisible : false,
load : function()
{
$("#pic_loader").css({ 'background' : '#000' });
}
});
$("#next_pic").click( function()
{
if(picture_index == array_last)
{
loadPicture(_getarray[0],_getarray);
return false;
}
else
{
loadPicture(_getarray[picture_index+1],_getarray);
return false;
}
} );
$("#prev_pic").click( function()
{
if(picture_index == 0)
{
loadPicture(_getarray[array_last],_getarray);
return false;
}
else
{
loadPicture(_getarray[picture_index-1],_getarray);
return false;
}
} );
}
Problem occurs when user clicks prev_pic or next_pic link, it correctly loads picture into viewer (#pic_loader) but it doubles scroll and resize events every time when recursion happens, then browser dramatically slowing down. I don't know how to handle this.
"events screenshot"
Not sure where 'scroll' and 'resize' are coming from, but you could try adding a clear at the beginning of loadPicture:
function loadPicture(pic_src, _getarray)
{
resize = [];
scroll = [];