how to drag element automatically jquery ui - javascript

I'm using jquery UI draggable. I do some works in drag function. for example I scale the dragging element according to it's position. I want to drag elements automatically to certain (x, y) (something like jquery animate({left:x, top:y}, 1000)); but I want to trigger drag function and scale element when is animating. how can I do this?

I suggest another approach to do that.
Use an external function to do the scale effect, and call it from both events (drag and animate):
var $myDraggable = $('#draggable').draggable({
drag: function( event, ui ) {
scale(ui.offset.left, ui.offset.top);
}
});
$('button').on('click', function(){
$myDraggable.animate(
{ left:100, top:100 },
{
duration: 1000,
progress: function(draggable){
scale(draggable.elem.offsetLeft, draggable.elem.offsetTop);
}
});
});
function scale(left, top){
//your scaling logic here
console.log("scaling", left, top);
}
See this example: FIDDLE

https://jsfiddle.net/moongod101/8gdvz9jL/
PS:This code offer a button toggle function
$(function(){
$button = $('button')
$box = $('.box')
$click = 0
$button.click(function(){
if($click !=0){
$click ++
$box.removeClass('active')
}else{
$click --
$box.addClass('active')
}
});
});

Related

Remove transparency on menu drop down Javascript

I've been trying to implement a feature that removes the transparency of the dropdown menu on my website so that it is actually readable for visitors.
The code I am currently using, which removes transparency on scroll but not on drop down is:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
});
});
I tried changing it to this (and variations of this) but can't seem to get it to work:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
$('#transmenu').removeClass('transparency');
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
$('#transmenu').addClass('transparency');
});
});
Any help would be greatly appreciated!
Thanks!
Without the html that this is hooking into it's a bit difficult to answer your question.
But given the fact that scrolling gets the job done, the only element I can see that could be preventing the functionality you want is that your selector to add show event handler is either selecting nothing in particular or an element in the DOM that is not the bootstrap dropdown element that triggers 'show.bs.dropdown', which is my reasoning for the first statement.
You can try the following debug code to verify:
// Should log to console with 'selected' if selector works alternatively 'not selected'
console.log($('#transmenu .dropdown').length > 0 ? 'selected' : 'not selected');
// Log to console when show event triggered
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
console.log('triggered');
});
Hope that helps you find a solution. Happy coding!
see the documentation at http://api.jquery.com/on/ and it should become obvious why your fancy named events are never being triggered (without defining any event namespace in the first place).
$('#transmenu .dropdown')
.on('show', function() {})
.on('hide', function() {});
the DOM selector also might be #transmenu.dropdown instead of #transmenu .dropdown (depending if id and class attributes are present on the DOM node to select - or if one selects the parent node by id and there is/are nested node/s with a class attribute present).

Jquery animate move element left not working at all

I am working on some kind of game that I can drag elements and on drag they have to move
left (plus or minus) depending on the drag direction.
I've tried like million ways of doing that.
The normal 'revert:true' is not working properly with horizontal elements, as the element
is reverted in a wrong position.
Finally, I worked it around with the animate() function in Jquery, And it really works
fine but it only drags the elements up and down, But left and right directions are not
working.
Here's my js script for doing that :
function setAllMatchesDraggable(){
$('.matches').not('.answer').draggable({
// Can't use revert, as we animate the original object
//revert: true,
helper: function(){
// Create an invisible div as the helper. It will move and
// follow the cursor as usual.
return $('<div></div>').css('opacity',0);
},
create: function(){
// When the draggable is created, save its starting
// position into a data attribute, so we know where we
// need to revert to.
var $this = $(this);
if(($this).hasClass("flip_left") || ($this).hasClass("flip_right"))
{
$this.data('top',$this.position().top - 29);
$this.data('left',$this.position().left);
}else{
$this.data('top',$this.position().top);
$this.data('left',$this.position().left);
}
},
stop: function(){
// When dragging stops, revert the draggable to its
// original starting position.
var $this = $(this);
$this.stop().animate({
"top": $this.data('top')
},200,'easeOutElastic',function(){
$(this).stop().animate({"left":$this.data('left')},200,'easeOutElastic');
});
},
drag: function(event, ui){
// During dragging, animate the original object to
// follow the invisible helper with custom easing.
$(this).stop().animate({
"top": ui.helper.position().top
},200,'easeOutElastic',function(){
$(this).stop().animate({"left":ui.helper.position().left},200,'easeOutElastic',function(){
console.log(ui.helper.position().left);
});
});
}
});
}
I wish You could help. Thanks in advance :)
Use top and left in same function
$this.stop().animate({
"top": $this.data('top'),
"left" : $this.data('left')
},200,'easeOutElastic') ;
Give this a try:
...
create: function(){
var $this = $(this);
$this.data({
'top': $this.position().top,
'left': $this.position().left
});
},
stop: function(){
var $this = $(this);
$this.stop().animate({
top: $this.data('top'),
left: $this.data('left')
},200,'easeOutElastic');
},
drag: function(event, ui){
$(this).stop().animate({
top: ui.helper.position().top,
left: ui.helper.position().left
},0,'easeOutElastic');
}
...

Simple jQuery Tooltip (position distorted on iPad)

I've used simple jQuery UI tooltip on form-fields of my webpage(viz responsive), its working perfectly on desktop on every browser, but on iPad its get distorted when I tap on form-fields as keypad swipe-up. Also header section of my webpage gets fixed on scroll.
I've used below code for the custom jQuery Tooltip.
$(function () {
$('.form-control').tooltip({
disabled: true,
position: {
my: "left top",
at: "left top-50",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
}).on("focusin", function () {
$(this)
.tooltip("enable")
.tooltip("open");
}).on("focusout", function () {
$(this)
.tooltip("close")
.tooltip("disable");
});
});
I've written this code to re-initialize the tooltip for the focused field by calling its focusin trigger manually when document size changed. It is working as expected on Desktop browsers but on iPad tooltip is being re-initialized at same place again viz incorrect.
var toolTipEl;
$('#inputSuccess, #inputWarning').tooltip({
open: function (event, ui) {
toolTipEl = event.target;
}
});
function checkDocumentHeight(callback){
var lastHeight = document.body.clientHeight, newHeight, timer;
(function run(){
newHeight = document.body.clientHeight;
if( lastHeight != newHeight )
callback();
lastHeight = newHeight;
timer = setTimeout(run, 100);
})();
}
function doSomthing(){
console.log('document resized');
setTimeout(function() {
if ($(toolTipEl).is(':focus')) {
$(toolTipEl).trigger('focusout').trigger('focusin');
}
}, 500);
}
checkDocumentHeight(doSomthing);
Please help me to find out the solution for this.
You will need to reinitialize active Tooltip after completion of any event which cause change in the content (actually height) of your document affecting your Tooltip position.
First keep reference of the element for which the tooltip is active by listening to its events by adding following codes in your tooltip initialization (Keep your existing code as it is. Just add these additional statements).
var toolTipEl = undefined;
$(function () {
$('.form-control').tooltip({
open: function (event, ui) {
toolTipEl = event.target;
}
}).on("focusin", function () {
toolTipEl = undefined;
}).on("focusout", function () {
toolTipEl = undefined;
}).on("mouseleave", function () {
toolTipEl = undefined;
});
});
Please note, as you are displaying tooltip on focusin event as well. So, you will also need to release the variable if you do not want tooltip pop-upped if focus has changed/left.
And then create a function for resetting tooltip like below.
function resetTooltip() {
if (toolTipEl) {
$(toolTipEl).trigger('focusout').trigger('focusin');
};
}
Call this function in any events which is causing change in the document height. For example if content is coming from an ajax request. You can call restTooltip function by listing to the gloab ajax events. See example below.
$( document ).ajaxComplete(function() {
resetTooltip();
});
I hope it will help you. Ask me if you need any further clarification.

When a dragged element touches other element / leave other element

I have a element (#dot) which can be dragged. The dragged element (#dot) is just allowed to be in multiple (.way)s but when (#dot) leaves this element then a function should start (for now a alert is enough). I have search on stackoverflow and on other pages but I dont find out somethings like this.
Fiddle
Here is my JS:
$(document).ready(function (){
$('#dot').draggable({
containment: "#world",
});
});
Html:
<div id="world">
<div id="dot"></div>
<div class="way">
</div>
</div>
For now an alert is enough...
My question is, how can i check if the element touches on other element?
Updated answer:
Demo: http://jsbin.com/yorohimi/4
Seems like you can use jQuery draggable and droppable for this:
JS:
$(document).ready(function () {
$('#dot').draggable();
$('.way').droppable({
accept:'#dot',
tolerance:'fit',
over:function(event,ui){
$('p').text('moved inside way');
$('#world').removeClass('green');
},
out:function(event,ui){
$('p').text('moved outside way');
$('#world').addClass('green');
}
});
});
The key is to use tolerance:fit here in droppable. Whenever #dot touches #world the color of #world is changed for visual feedback.
Following method will work only for single .way.
You can compare the position using getBoundingClientRect method and execute your code.
Fiddle: http://jsfiddle.net/9SJam/4/
JS:
$(document).ready(function () {
$('#dot').draggable({
axis: "y",
containment: "#world",
drag: function (event, ui) {
drag_handler($(ui.helper));
}
});
});
function drag_handler(elem) {
var p = elem[0].getBoundingClientRect();
var P = $('.way')[0].getBoundingClientRect();
if ((P.top > p.top) || (P.bottom < p.bottom)) {
console.log('touched');
$('#world').addClass('color');//For visual feedback
} else {
$('#world').removeClass('color'); //For visual feedback
}
}
You need to declare #world as droppable, then you can use it's over event to trigger your function, which is triggered when an accepted draggable is dragged over the droppable.
something like
$( "#world" ).droppable({
over: function() {
// Your logic
}
});

.show() doesnt work on IE

I am working on this project: http://www.arbamedia.com/test/
if you go to Dyer dhe dritare on the left menu and drag one of the elements (the door or the window) into the right side (the desk) in Chrome and FF the 3 options that I have added for that elements show, so this: $("p", this).show(); works, but in IE9 when I drag an element it doesn't show the the options for dragging, rotating or deleting! I dont know what is wrong.
This is where it happens:
$(".drag").draggable({
revert : 'invalid',
helper : 'clone',
containment : 'desk',
cursorAt : { left:-11,top:-1 },
//When first dragged
stop : function(ev, ui) {
/*========================================================================*/
var pos = $(ui.helper).offset();
var left_ = ev.originalEvent.pageX - $("#desk").position().left;
var top_ = ev.originalEvent.pageY - $("#desk").position().top;
// get widht and height of the container div#desk element
var w_ = $("#desk").width();
var h_ = $("#desk").height();
objName = "#clonediv"+counter++;
objNamex = "clonediv"+counter;
$(objName).css({"left":left_,"top":top_});
var gag = 0;
$(objName).click(function () {
$("p", this).show();
$(this).addClass("selektume");
$('.rotate_handle').unbind('click');
$('.rotate_handle').click(function(){
gag += 45;
$('.selektume').rotate(gag+'deg');
});
$('.delete_handle').click(function() {
$('.selektume').remove();
});
return false;
});
$(document).click(function () {
$("p").hide();
$(".lgutipT").removeClass("selektume");
});
//check if dropped inside the conteiner div#des
if((left_ >= 0) && (left_ <= w_) && (top_ >= 0) && (top_ <= h_))
{
$(objName).css({"left":left_,"top":top_});
// assign a z-index value
zindex = left_ + top_;
$(objName).css({"z-index":zindex});
$(objName).addClass("lgutipT");
//$(objName).addClass("ui-widget-content");
$(objName).removeClass("drag");
$(objName).append('<p><img class="handler" src="images/move_button.png"><img class="rotate_handle" src="images/rotate_button.png"><img class="delete_handle" src="images/delete_button.png"></p>');
$("p", this).show();
}
/*========================================================================*/
//When an existiung object is dragged
$(objName).draggable({
containment : "#desk",
handle : ".handler",
cursor : "move"
});
}
});
Very tricky problem since there's no good documentation on how jQuery UI treats events at a core level. The solution was to unbind and rebind the click event. In IE, the click event is treated differently than other browsers. The solution was simply to rebind the click event after everything is done (1/1000 of a second delay).
My solution was to move the click event, add an unbinding on drag start, and to add a setTimeout() on rebinding the $(document).click() event listener when drag was complete.
View the source below to view the working solution.
http://jsfiddle.net/MattLo/AbF6t/
Copy and Paste the HTML to your dev environment.

Categories