why the delay doesn't work in this code?
$(function() {
$( "#button" ).click(function() {
$("#dialog").dialog({
show: { effect: 'fade', direction: "up" },
hide: { effect: 'fade', direction: "down" },
}).delay(1000).dialog( "close" );
return false;
});
});
Thank you!
From .delay documentation:
It can be used with the standard effects queue or with a custom queue. Only
subsequent events in a queue are delayed; for example this will not
delay the no-arguments forms of .show() or .hide() which do not use
the effects queue.
Related
My current situation:
kendo tooltip works fine alone.
my new custom angularjs directive with kendoConfirm works fine alone.
but once i try to use them both together on an element, then only the kendo tooltip stops working.
<button type="button" title="Disable Item" k-confirm-disable k-confirm-disable-title="'Confirm Disable'" k-confirm-disable-msg="'Are you sure you want to disable this item?'" ng-click="disable(dataItem.id)" class="btn btn-danger" kendo-tooltip k-content="'Disable Item'" k-options="kendoTooltipOptions">
$scope.kendoTooltipOptions = {
showAfter: 600, //time for tooltip appear
position : 'top',
width : 100
}
kendo tooltip only works when I remove the custom angular directive from the element.
function kConfirmDisable($compile){
return {
restrict: 'A',
scope: {
kConfirmDisableTitle: '#',
kConfirmDisableMsg: '#'
},
link: function(scope, element, attrs){
var clickHandlers = $._data(element[0]).events.click;
clickHandlers.reverse(); //reverse the click event handlers list
var onClick = function(evt) {
evt.preventDefault();
evt.stopImmediatePropagation();
if(!scope.kConfirmDisableTitle) {
scope.kConfirmDisableTitle = "Confirm";
}
if(!scope.kConfirmDisableMsg) {
scope.kConfirmDisableMsg = "Are you sure?";
}
angular.element("<div></div>").kendoConfirm({
title: scope.kConfirmDisableTitle.replace(/['"]+/g, ''),
content: scope.kConfirmDisableMsg.replace(/['"]+/g, ''),
buttonLayout: "normal",
visible: false,
actions: [
{
text: "No",
Primary: false,
action: function(){
evt.preventDefault();
evt.stopImmediatePropagation();
}
},
{
text: "Yes",
Primary: true,
action: function(){
element.unbind(this);
setTimeout(function() {
element.unbind("click", onClick);
element.click();
evt.preventDefault();
evt.stopImmediatePropagation();
element.on("click", onClick);
},0);
}
},
],
animation: {
open:{
effects: "zoom:in",
duration: 250
},
close:{
effects: "fade:out",
duration: 250
}
},
open: function(e) {
$("html, body").css("overflow", "hidden");
},
close: function() {
$("html, body").css("overflow", "visible");
}
}).data("kendoConfirm").open().result;
};
element.on("click", onClick);
clickHandlers.reverse();
}
}
}
Since Kendo AngularJs source is not available, I can only suggest couple of things:
Try to research what happens if you dont stop the propagation and not stop the default on the click in your directive.
If the scenario is that it does not work immediately on page reload and hovering on the element without using clicks- then this is not relevant.
Avoid using isolated scope in your directive and get the attributes via the $attrs link function parameter. Since you did not specify you get js error, I am assuming Kendo isn't using isolated scope, but it is still a direction to investigate.
my solution is I removed the "k-" from the "k-confirm-disable" directive and it worked.
i think its because kendo has "k-" reserved.
I created a simple DIV, which is located on the edge of the page, and I wrote this, a simple script that moves it.
The problem is that when you hover the mouse over a DIV, and then take your cursor. When DIV hides and again move the cursor to the DIV, then the script all the time, ejects and hide DIV.
I created for you, "Fiddle", in jsFiddle.com to better illustrate my problem:
http://jsfiddle.net/IdolwSzutrab7/DWvbJ/, and an animated gif that shows the problem:
$('#h53pg4s4b6').hover(function () {
$('#h53pg4s4b6').delay(400).animate({
right: "3px"
}, 1300);
$('#u26c5lsx9h').animate({
opacity: "1.0"
}, 500);
clearTimeout(time3);
}, function () {
time3 = setTimeout(function () {
$('#h53pg4s4b6').animate({
right: "-220px"
}, 1300);
$('#u26c5lsx9h').delay(1400).animate({
opacity: "0.2"
}, 500);
}, 1000)
})
$('#t895o6n9qs').click(function () {
$('#b37jjlmy2t').css('display', 'block');
$('#a15tnjlyw6').css('display', 'none');
})
$('#u83mz78d5l').click(function () {
$('#b37jjlmy2t').css('display', 'none');
$('#a15tnjlyw6').css('display', 'block');
})
$('#s4iu2h7dra').click(function () {
$('#h53pg4s4b6').fadeOut(3000, function () {
$('#h53pg4s4b6').remove();
});
})
How to ...
How to stop the script?
Or not ...
I do not know ...
Maybe I should write another script?
I do not know what I can do about it :/
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Please, can you help me?
PS: Sorry for my english, I hope you understood me.
jQuery .stop() will help you here
See the updated JSFiddle here
I updated your code as follows
$('#h53pg4s4b6').hover(function () {
$('#u26c5lsx9h').stop().animate({
opacity: "1.0"
}, 500, function () {
$('#h53pg4s4b6').stop().animate({
right: "3px"
}, 1300);
});
clearTimeout(time3);
}, function () {
time3 = setTimeout(function () {
$('#h53pg4s4b6').stop().animate({
right: "-220px"
}, 1300);
$('#u26c5lsx9h').stop().animate({
opacity: "0.2"
}, 500);
}, 1000)
})
Also, I have one suggestion: You may remove the delay() functions since the effect will be more smooth without those.
here is my code:
$('myButton').addEvents({
mouseenter: function(){
$('myImage').setStyle('display','block');
$('myImage').morph({
'duration': 500,
'transition': Fx.Transitions.Sine.in,
'opacity': 1,
'top': -205
});
},
mouseleave: function(){
$('myImage').morph({
'opacity': 0,
'top': -175,
'onComplete': hidemyImage
});
}
});
function hidemyImage() {
$('myImage').setStyle('display','none')
}
the onComplete inside the mouseleave does not work as expected... it hides the image immediately when i move away from myButton instead of hiding it after the morph has finished... i tried several solutions but none worked so far. any idea / help? thanks in advance!
you need to work with the instance and not pass on things in the morph function directly, that takes properties to morph and it probably runs your function immediately in the hope it will return a property value. you can do el.set('morph', {onComplete: hideImagefn}) before that and it will work but read on...
one way to do it is to set your morph options/instance once and work with it afterwards like so:
(function() {
var img = document.id('myImage').set('morph', {
duration: 500,
transition: Fx.Transitions.Sine.in,
link: 'cancel',
onStart: function() {
this.element.setStyle('display', 'block');
}
}), fx = img.get('morph');
// of you can just do var fx = new Fx.Morph(img, { options});
document.id('myButton').addEvents({
mouseenter: function(){
fx.start({
opacity: 1,
top: -205
});
},
mouseleave: function(){
fx.addEvent('complete', function() {
this.element.setStyle('display', 'none');
this.removeEvents('complete');
}).start({
opacity: 0,
top: -175
});
}
});
})();
the start ensures its always visible when mouseovered, the link is cancel which means it will stop execution if you mouse out too early and if you do mouseout, it will then hide the image and remove the onComplete event so that if you show it once more, it stays visible when it comes into view.
if you don't plan on being able to bring it back you can clean-up better and even use event pseudos like onComplete:once etc - though thats part of Event.Pseudos from mootools-more.
in general - .get/.set morph is your setup. el.morph() passes values to morphInstance.start()
play here: http://jsfiddle.net/dimitar/NkNHX/
I'm trying to get jQuery Cycle to only run when the slideshow is being hovered (which is the opposite of the functionality that they have built in).
Here's where I'm at: http://jsfiddle.net/zSBMU/
$(document).ready(function() {
$('.slideshow').hover(
function() {
$(this).cycle({
fx: 'fade',
speed: 600,
timeout: 300,
pause: 0
});
},
function(){
$(this).cycle('stop');
}
).trigger('hover');
});
The first time you hover, it's great, works fine. But if you try to hover the same one again, it only goes through one fade instead of looping through again.
Any ideas?
Please ignore some of the gross code, working with a pretty old theme here, trying to clean it up!
You're using "stop" and recreating the cycle, so you're adding several cycles on the object.
You've to use "pause" and "resume".
Example bellow:
var cycleConfigured = false;
$(document).ready(function() {
$('.slideshow').hover(
function() {
if(cycleConfigured)
$(this).cycle('resume');
else
{
$(this).cycle({
fx: 'fade',
speed: 600,
timeout: 300,
pause: 0
});
cycleConfigured = true;
}
},
function(){
$(this).cycle('pause');
}
).trigger('hover');
});
The variable cycleConfigured will be used to control our cycle plugin, to check if it was already instantiated. In alternative you can create it on $(document).ready() and then pause it like this:
$(document).ready(function() {
// configure the cycle plugin
$('.slideshow').cycle({
fx: 'fade',
speed: 600,
timeout: 300,
pause: 0
});
$('.slideshow').cycle('pause'); // pause it right away.
$('.slideshow').hover(
function() {
$(this).cycle('resume'); // start playing.
},
function(){
$(this).cycle('pause'); // pause the slideshow.
}
).trigger('hover');
});
Then everything you need to do is use $(this).cycle('pause') on out and $(this).cycle('resume') on over.
Anything let me know.
I know that Chrome don't support onfinish event on marquee tag.
I decide to use JQuery plugin here: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
In this post, the author say it can capture stop event.
How ever, I cannot use it. Please help me out.
you should call .bind() for the the stop event. please see my example code below. hope it helps.
$(document).ready(
function(){
$('div.demo').marquee('pointer')
.bind('stop', function() {alert($(this).text())})
.mouseover(function () {
$(this).trigger('stop');
//alert($(this).html());
}).mouseout(function () {
$(this).trigger('start');
}).mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
}).mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
}).mouseup(function () {
$(this).data('drag', false);
})
});