We Keep Coding

Powertip on dynamically loaded content without running script again or loop

I'm using the jQuery plugin PowerTip to show tooltips on hover. I initialize it with $('.tooltip').powerTip() and this works great on already loaded content, but if I dynamically load <div class="tooltip" data-powertip="Hey">Hey</div>, I have to run the $('.tooltip').powerTip() function again, which seems like a waste, especially if I have hundreds of these. Is it possible to do something like this? :
1)
$(document).powerTip('.tooltip', {})
or
2)
$(document).on('mouseover', '.tooltip', function(e) {
$(this).powerTip()
});

The logic seems sound the only issue is you might need a callback function to trigger the popup because triggering the popup and initialising it happen at the same time (which could be problematic)
$('body').on('mouseenter','.tooltip', function(event) {
$(event.target).powerTip();
var delay = 250; // 1/4 of a second
setTimeout(() => {
$(event.target).tooltip('show')
}, delay);
});

Calling function after animation complete

I have 2 functions to open & close a sidebar on my page.
function closeSidebar(functionAfterClose) {
var functionAfterClose = functionAfterClose || function() {};
$("#sidebar").removeClass("open");
$("#sidebar").animate({marginLeft: margin*-1},"fast", "swing", functionAfterClose);
$("#dummy-column").animate({marginLeft: margin*-1},"fast", "swing");
}
function openSidebar() {
$("#sidebar").addClass("open");
$("#sidebar").animate({marginLeft:0},"fast", "swing");
$("#dummy-column").animate({marginLeft:0},"fast", "swing");
}
I'm trying pass function to closeSidebar() to run after the close animation is complete. But it seems to run straight away rather than waiting for the sidebar animation complete.
closeSidebar(function() {
alert("function called");
$(this).addClass("current");
openSidebar();
});
What am I missing to make the function call once the animation is complete?
The jsFiddle - Click a button on the right side, it should animate in, call the function, then animate back out again.

Your javascript is correct. The problem is in the CSS. You have a transition set up for the margin attribute. Erase that and your JS works fine.

fire one set of functions first, then callback to a final function

I have an jquery ajax success function which uses a template to put json information in a div, then a modal plugin to fade in a modal. The problem is, the modal is firing before all the content is completely written to the div. Is there a way that I can make this collection of template actions complete before I call the modal fires?
success: function (data) {
//run generic order header through template
$('#order_detail_header').vkTemplate('scripts/templates/header_template.tmpl?<?=time()?>', data);
//run header 2 information through template
$('#order_detail_header_2').vkTemplate('http://scripts/templates/detail_header_2_template.tmpl?<?=time()?>', data);
//run shipment information through template
$('#order_detail_shipment_information').vkTemplate('scripts/templates/detail_shipment_information_template.tmpl?<?=time()?>', data, function(){ $(".tracking_box").hide();});
//run line item information through template
$('#order_detail_line_item_information').vkTemplate('http://www.isco.net/dev/webtrack/scripts/templates/order_detail_line_item_information_template.tmpl?<?=time()?>', data, function(){ $(".tracking_box").hide();});
//run pricing information through template
$('#order_detail_pricing_information').vkTemplate('http://www.isco.net/dev/webtrack/scripts/templates/order_detail_pricing_information_template.tmpl?<?=time()?>', data['order']);
$('#order_detail_modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close_modal' // the class of a button or element that will close an open modal
});
}
I tried wrapping the whole thing in an function and putting the .reveal function in a callback, but i must have the wrong syntax or idea. Any suggestions are appreciated. Thank you!

I presume that vkTemplate dose a ajax call. If so then you have 2 options:
use sync ajax
add a callback param to vkTemplate so you can order the requests
div1.vkTemplate(url1,data1,function(){
// the cbk function, when vkTemplate is done getting data from url and added the html
div2.vkTemplate(url2,data2,function(){
// all data loaded? yes? then call your function
modal.reveal()
})
})

This is a simplistic answer as I'm not familiar with the plugins you are using, but it will work....
success: function (data) {
var counter = 5;
//run generic order header through template
$('#order_detail_header').vkTemplate('scripts/templates/header_template.tmpl?<?=time()?>', data, function() { doReveal(); });
//run header 2 information through template
$('#order_detail_header_2').vkTemplate('http://scripts/templates/detail_header_2_template.tmpl?<?=time()?>', data, function() { doReveal(); });
//run shipment information through template
$('#order_detail_shipment_information').vkTemplate('scripts/templates/detail_shipment_information_template.tmpl?<?=time()?>', data, function(){ $(".tracking_box").hide(); doReveal(); });
//run line item information through template
$('#order_detail_line_item_information').vkTemplate('http://www.isco.net/dev/webtrack/scripts/templates/order_detail_line_item_information_template.tmpl?<?=time()?>', data, function(){ $(".tracking_box").hide(); doReveal(); });
//run pricing information through template
$('#order_detail_pricing_information').vkTemplate('http://www.isco.net/dev/webtrack/scripts/templates/order_detail_pricing_information_template.tmpl?<?=time()?>', data['order'], function() { doReveal(); });
function doReveal() {
counter--;
if (counter > 0) return;
$('#order_detail_modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close_modal' // the class of a button or element that will close an open modal
});
}
}
It just applies a counter that specifies how many functions need to complete before doing the reveal, and then checks each time a call to vkTemplate is complete.

Disable a next/previous button(link) temporarily when clicked in jQuery Cycle plugin (not necessarily a jquery cycle issue)

I need to prevent link from being clicked for let's say 2 seconds.
Here is an example http://jsbin.com/orinib/4/edit
When you look at the rendered mode you see next and prev links. When you click next, it slides with a nice transition. However if you click multiple times there is no transition sort of, which is expected. But my question: is this how can I prevent clicking on the next link, for about 2 seconds (or what ever time it takes for transition to happen) so that no matter what transition will occur.
This is what I tried to use, but did not work:
function(){
var thePreventer = false;
$("#next").bind($(this),function(e){
if(!thePreventer){
thePreventer = true;
setTimeout(function(){
thePreventer = false;
}, 2000);
}else{
e.preventDefault();
}
});
}
Which I got from here "Disable" a link temporarily when clicked? I think. I believe that i cannot achieve this effect with this code (although it works on other links). I believe this is due to the fact that cycle-plugin got a hold of that link, and I understand that I have to bind/tap-into this functionality of the plugin. Please note: that this code may not work I just used it to show that I tried it and it did not work, you can reuse it if you have to or give me your own stuff.
Please help, if you can.
EDIT:
As mrtsherman proposed this simple yet elegant ANSWER: http://jsfiddle.net/LCWLb.

Take a look at the cycle options page. There are a number of ways to do this. I would consider using the pager event onPrevNextEvent. You can assign a callback function.
$('#slideshow').cycle({
pager: '#nav',
onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement) {
//disable controls
},
after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
//reenable controls
}
});

The following will temporarily prevent clicks while a slideshow is running, as shown in this fiddle:
$.fn.extend({
delayClick: function(callback) {
this.bind('click', function(e) {
$self = $(this);
if( $self.hasClass('disabled') ) {
$('#log').append('<p>click prevented on '+$self.attr('id')+'</p>');
}
else {
$self.addClass('disabled');
callback.call(this, [arguments]);
setTimeout(function() {
$self.removeClass('disabled');
}, 1000);
}
return false;
});
}
});

How to add animation on open of a Jquery SimpleModal?

The animation-enabled example in the SimpleModal site has this animation:
1. Fade in the overlay
2. Slide down the modal div
This is the code:
$("#the-div").modal({
onOpen: function (dialog) {
dialog.overlay.fadeIn('fast', function () {
dialog.data.hide();
dialog.container.show('fast', function () {
dialog.data.slideDown('fast');
});
});
}});
I want this animation instead:
1. Just display the modal
2. Fade in the overlay
Alas, simply removing the 2nd parameter of dialog.overlay.fadeIn() from the code above doesn't work. I also tried removing the parameters of dialog.container.show(), also changing it to dialog.container.open(). I've tried other combinations of the code, to no avail.
How do I achieve the animation that I wish?

You can do it like this:
$("#the-div").modal({
onOpen: function (dialog) {
dialog.data.show();
dialog.container.show();
dialog.overlay.fadeIn('fast');
}
});
Since you just want to display it, remove the callbacks altogether and just show the modal and kick off a .fadeIn() on the overlay at the same time :)