Here is my code:
$(document).ready(function () {
var $div = $('<div>my test</div>').draggable().appendTo('body');
$div.attr('id', 'Test');
});
//$('div#Test'.draggable({
$('div').draggable({
stop: function (event, ui) {
var draggableId = $(this).attr("id");
alert(draggableId);
}
});
While dragging the dynamically div, I expected the stop function will show alert. But it not work. What am I doing wrong?
Thank you in advance for the help!
When you create your div element you call draggable on it, but without any settings. Try this:
var draggableSettings = {
stop: function (event, ui) {
var draggableId = $(this).attr("id");
alert(draggableId);
}
}
$(document).ready(function () {
$('div').draggable(draggableSettings); // any pre-existing divs
// the dynamically created div
var $div = $('<div>my test</div>', { 'id': 'Test').draggable(draggableSettings).appendTo('body');
});
Note also that the call to draggable on load needs to be placed within the document ready handler.
Related
Given the following jQuery .on() event map:
$('header').on({
mouseenter: function(e) {},
mouseleave: function(e) {},
}, 'li');
How can I share a var $this = $(this) variable between both the mouseenter and mouseleave events to keep it DRY?
EDIT:
To be clearer, if I want to apply the logic to each event in the event map, let's say:
mouseenter: function(e) {
// Grabs the list element.
var $this = $(this);
// Gets the sub-menu of the active menu item, if there is one.
var $subMenu = $this.find('.main-menu__sub-menu').first();
if ($subMenu.length) {
// Do something...
}
},
mouseleave: function(e) {
// Perform the same checks, and get the same variables as above...
},
click: function(e) {
// Again, perform the same checks and grab the same variables as above...
}
I obviously don't want to repeat my logic, but I require getting the li element that's firing the event, which will be the same for all events within the event map... Hopefully that makes more sense?
With your expanded description, you could go for something like this:
function getSubmenu(li) {
// Grabs the list element.
var $li = $(li);
// Gets the sub-menu of the active menu item, if there is one.
var $subMenu = $li.find('.main-menu__sub-menu').first();
return $subMenu;
}
$('header').on({
mouseleave: function(e) {
var $subMenu = getSubmenu(this)
// do some stuff...
},
click: function(e) {
var $subMenu = getSubmenu(this)
// do some other stuff...
}
}, 'li');
Not sure why you would need it since the this variable will reference to the header element on both functions..
but a way you can do it is declaring the variable outside of the scope
var $this;
$('header').on({
mouseenter: function (e) {
$this = $(this);
},
mouseleave: function (e) {
$this; // is available
},
}, 'li');
Here is the fiddle for changing the label's value by clicking on it.
But i don't want to do it while i click on the edit (href)
I just want to click on the name and change it to textbox and while i take the mouse outside it should change back to label
How can i do this ?
Here's the jquery code i have
$(document).ready(function() {
$('a.edit').click(function () {
var dad = $(this).parent().parent();
dad.find('label').hide();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
});
How about something like this. Demo
$(document).ready(function() {
$('.control-label').click(function () {
$(this).hide();
$(this).siblings('.edit-input').show();
});
$('.edit-input').focusout(function() {
$(this).hide();
$(this).siblings('.control-label').text($(this).val()).show();
});
});
You could try it with this modified version of the fiddle:
$(document).ready(function() {
$('.control-label').click(function () {
$(this).hide();
var dad = $(this).parent();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').text(this.value).show();
});
});
It doesn´t set the default value that was in the label before though.
Just change the target of your click function from:
$('a.edit').click(function () {
to
$('.text-info').click(function () {
You could also add a hover function if you want the input to be hidden on mouseout rather than when clicking outside. For example:
$('input[type=text]').hover(function () {
}, function () {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
Here your adjusted fiddle.
The cloned elements should be transformable, drag-able and restraint to the container box. But now they are jumping all over the place I'm not sure what the problem is, and the controls should only be visble for the active element.
$('.trans').freetrans();
$(function(){
//Make every clone image unique.
var counts = [0];
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() { counts[0]++; }
});
$("#dropHere").droppable({
drop: function(e, ui){
if(ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-"+counts[0]);
$("#dropHere .img").addClass("imgSize-"+counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");
$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-"+counts[0]));
$(".imgSize-"+counts[0]).mousedown(function() {
$(event.target).freetrans();
});
//this doesn't work...
//$(".imgSize-"+counts[0]).mousedown(function() {
//$(event.target).freetrans('controls', false);
//});
}
}
});
var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
}
});
}
});
js fiddle:
http://jsfiddle.net/vjeAV/58/
Its throwing an exception behind the scenes..jQuery UI 1.8.18. isn't selected, and it should also be onLoad
Object [object Object] has no method 'draggable'
I also updated your code. I removed your bind, and added it to dragstop:
$('.draggable').on('dragstop', function (event, ui) {
var $temp = $(ui.helper).clone().draggable()
$(this).after($temp );
$temp.freetrans('controls', true);
});
Fiddle
I had some code in jquery with draggable and dropable elements.
Here is my link of jsfiddle - http://jsfiddle.net/hirenwebdp/Mf6zJ/333/
and I want to optimize this code by making one function for
drop: function(event, ui) {
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"data-id": productid
}).appendTo(this);
$("#equal").hide();
// To remove item from other shopping chart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
var isAllFilled = true;
$(".shoppingCart").each(function(){
if($(this).find('ol .placeholder').length > 0)
{
isAllFilled = false;
return
}
});
if(isAllFilled)
{
$("#equal").show();
$("#equal").html("Congratulation! You have entered each block in correct place.");
}
So I had make the code but not working properly. Elements are dragged but not dropable.
After optimization the jsfiddle link is http://jsfiddle.net/Mf6zJ/486/
So how to tackle this.
Please first check both jsfiddle link so you guys can understand what problem I am facing.
Please Help.
In you second version pass event and ui parameters
function test(event, ui){ ...
hence you need the reference of elemnt as this inside the function call the test function like this
drop: function(event, ui) {
test.call(this, event, ui);
}
DEMO
I'm just trying to write some code like this:
var clickAction = function(){
$('#OL_Icon_55').append("<em class='well'>Hello World</em>");
}
$("body").one("mouseenter",clickAction);
And I want to hide Hello World string when mouse hover around #OL_Icon_55, than the code will be look like this :
var clickAction = function(){
$('#OL_Icon_55').append("<em class='well'>Hello World</em>", function() {
$(this).hover(function () {
$(".well").hide();
});
});
}
$("body").one("mouseenter",clickAction);
But that is not working for me. Does anyone have a little more idea or correct that code so that hover function can work?
Have a look at this fiddle.
'Hello World' will be shown if the mouse is inside #OL_Icon_55.
Here's the JS:
var $OL = $('#OL_Icon_55'),
$span = $("<span class='well'>Hello World</span>");
$("body").one("mouseenter", function() {
$OL.append($span);
});
$OL.mouseenter(function () {
$span.show();
}).mouseout(function () {
$span.hide();
});
Stole most the code from #depot. But much shorter
$(function(){ // <-- on dom ready
var $OL = $('#OL_Icon_55'),
$span = $("<span class='well'>Hello World</span>");
$("body").one("mouseenter", function() { // <-- on one mouse enter
$OL.append($span); // <-- append span
});
$OL.hover(function () { // <-- on hover
$span.toggle(); // <-- toggle (show/hide) span
});
});
http://jsfiddle.net/EeGYs/3/