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);
});

youtube spf is not working after loading with ajax

On my web page, everything is okay.
My js is working very well but clicking on any page, page is loading with ajax but some function is not working for example my bootstrap carousel or my parallax.js plugin..
How do I do event management ?
I'm using youtube spf plugin
some js example on my page
if (!$(".scene").length) return false;
var q = document.getElementsByClassName("scene")[0];
var r = new Parallax(q, {
calibrateX: false,
calibrateY: true,
invertX: false,
invertY: true,
limitX: false,
frictionX: .2,
frictionY: 4,
originX: 0,
originY: 1
});
$('.img-area').cycle({
fx: 'fadeout',
speed: 950,
timeout: 100
}).cycle("pause");
$(".otel-history-list").on("click",function(){
var historyName = $(this).find(".history-current-name").text();
var historyDateIn = $(this).find(".history-current-datein").text();
var historyDateOut = $(this).find(".history-current-dateout").text();
var historyKisi = $(this).find(".history-current-kisi").text();
$(".input-form-ara input").val(historyName);
$(".otel-giris-cikis #checkin").val(historyDateIn);
$(".otel-giris-cikis #checkout").val(historyDateOut);
$(".kisi-sayi-otel-sec .kisi-count").text(historyKisi);
});
or something like these code
and my ajax code
$(function () {
spf.init();
NProgress.configure({ showSpinner: false });
$(document).on('spfrequest', function (event) {
NProgress.set(0.4);
});
$(document).on('spfprocess', function (event) {
NProgress.set(0.6);
NProgress.set(0.8);
});
$(document).on('spfdone', function (event) {
NProgress.set(1.0);
NProgress.done();
});
$(document).on('spfhistory', function (event) {
NProgress.set(0.7);
NProgress.set(0.9);
NProgress.set(1.0);
NProgress.done();
});
});
and I'm using bootstrap,parallax.js,cycle2.js,select2 plugin

I've answered a similar question in the past, so I'm restating it below:
I'm not sure what your full code set is, but based on what you posted, I'm guessing that several of your html elements (that have JQuery event handlers attached to them) are generated and re-generated using your ajax functions-- probably several times, after your original DOM is loaded.
This is the most likely reason why some of your events don't fire after your Ajax codes fire. The event handlers attached to your html elements (such as divs) get "detached" when these elements are programmatically (re)generated using Ajax.
As such, what you would want to do is to "attach" the event handler to a higher level in the DOM tree (highest being your html) that you are sure won't get 'programmatically' regenerated, then you'd want to check if the element in question, which is inside the DOM, exists. You then run your function when this element is found.
So as an example, you have this onclick function in your code:
$(".otel-history-list").on("click",function(){
//your actions
});
The element with the class "otel-history-list" is likely being generated or regenerated by your Ajax call after page load, and as such would get detached from your onclick event listener (See #1-#2 above).
So to rewrite your code following #3 above, you'd want to attach the event listener to something that won't be regenerated by your Ajax, then just look for the specific element inside it, which contains your class of interest:
$(document).on("click",".otel-history-list", function(){
//your actions
});
Hope this helps!

jQuery Event Delegation for certain links

I'm having trouble delegating a click function to only certain links. Essentially, I'm trying to trigger a simple fadeout for all internal links that won't kill a lightbox functionality. Here's my problem (in essence):
HTML
<body>
<div id="fade">
<p>some content</p>
</div>
</body>
jQuery
$("#fade").on("click", "a", function () {
// get the href attribute
var newUrl = $(this).attr("href");
// veryfy if the new url exists or is a hash
if (!newUrl || newUrl[0] === "#") {
// set that hash
location.hash = newUrl;
return;
}
// now, fadeout the html (whole page)
$("body").fadeOut(function () {
// when the animation is complete, set the new location
location = newUrl;
});
// prevent the default browser behavior.
return false;
});
I can't figure out why this isn't working. The function isn't executed on any links. I'm trying to delegate it to all links within the wrapper id of "fade."
When I change
$("#fade").on("click", "a", function () {
to
$("document").on("click", "a", function () {
//specifying all links
The fade works perfectly, but it destroys the lightbox function that is needed for the site.
Is there a better way to delegate links for this event? Or perhaps not include the lightbox links in a different manner? Ideally I would keep the code above for executing on all links using $("document") and exclude the lightbox gallery from the function, but I don't know how I could do that.

Jquery function not firing on initial load

I have a situation where I must wait for a Specific image to load, and then either swap out its src, or locate the next image and hide/show it.
What I need to happen is show a placeholder image (silhouette) until its main image is ready, and then hide the silhouette and show the main image. Very common stuff.
Problem is this jquery function does not fire on a new tab, or window... but if I hit f5 it works perfectly... but then again I open a new tab, and it wont fire until I hit f5.
CSS:
.staffImage1, .staffImage2, .staffImage3, .staffImage4, .staffImage5 { display: none; }
Jquery:
$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5')
.load(function () {
$(this).next('.sillhouette').hide();
$(this).show();
console.log("function fired")
})
I get the log message only after refresh.
Something to be aware of is I am using the "First 14k" method to increase page speed, so maybe jquery just is not ready when the images are initially loaded the first time, but are cached and work after f5?
Each image must wait until its fully loaded, they are in a slider, so I need to show the first slides image as soon as its ready,I cannot wait until all 5 images are ready, as that would slow down the first slides image.
Any advice is appreciated, thank you

This structure:
$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5').load(...)
does not work to notify you when all the images have been loaded. .load() only works on a single image at a time. And, if the images are cached, they may already have finished loading before your jQuery even runs so you would miss the load event entirely.
The simplest work-around is to use the window load event when all page resources have finished loading:
$(window).load(function() {
// all images are loaded here
});
It is also possible to monitor just those 5 images, but that is more work. I've written code to do this before so I'll see if I can find that prior code.
Here's a jQuery plug-in function that monitors just specific images. It will call its callback when all the images in the jQuery object are loaded:
// call the callback when all images have been loaded
// if all images are already loaded or there were no images in the jQuery
// object, then the callback will be called immediately
jQuery.fn.imgsLoaded = function(fn) {
var cntRemaining = 0;
function checkDone() {
if (cntRemaining === 0) {
fn();
}
}
function imgDone() {
--cntRemaining;
checkDone();
// remove event handlers to kill closure when done
$(this).off("load error abort", imgDone);
}
this.each(function() {
if (!this.tagName.toLowerCase() === "img" && !this.complete && this.src) {
++cntRemaining;
$(this).on("load error abort", imgDone);
}
});
checkDone();
return this;
}
You could use it like this:
$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5').imgsLoaded(function () {
$(this).next('.sillhouette').hide();
$(this).show();
console.log("function fired")
});
Working demo: http://jsfiddle.net/jfriend00/zaoweyoo/

Write jquery code
'$(document).ready(function(){
//your code
});'

jQuery loaded html content - Check if images are loaded and rendered

I have tabs logic that load html templates inside a wrapper. That's works fine, but I included an animation that animate height of the tab wrapper when tab is switched.
The problem is the following: When a template contains <img src="/some-image.png"> the $('#tab-content').load('template-url', function() {...}) callback function sometimes is executed before the browser show the images. And my animation is not working correctly.
Code example (jsFiddle):
var currentHeight = $contentHolder.height();
$contentHolder.load(path, function() {
$contentHolder.stop();
function animateHeight() {
var loadedContentHeight = $contentHolder.css('height', 'auto').height();
$contentHolder.height(currentHeight);
$contentHolder.animate({
height: loadedContentHeight
}, 800, 'linear');
}
animateHeight();
});
I tried to set little timeout, but it's not working every time. If I set more that 300ms timeout, It feels like tabs are changed too slow.
I tried to execute the animation when $('img').load(function() {}) is fired, but with no luck.
This bug occurs most often when the web page is fully refreshed and each tab content loading for first time.

The image load event is kind of broken. To know when images are loaded you will have to observe the DOM for changes. Then on every change, you have to fetch all the new images and add the onload event to them from the callback. To prevent checking each element every time, once they've been loaded you could mark them as such by adding a data-loaded="true" property for instance.
One way to listen to DOM changes is the MutationObserver event. This is supported by all modern browsers and IE11.
A better supported solution (IE9 and up) can be found in this answer: Detect changes in the DOM. I will not repeat it here (but it's included in the demo below).
On every DOM change first you check for images without the data-loaded attribute that are already loaded anyway (this could happen when an image was still in the browser's cache) by checking element.complete. If so, fire the callback function and add the attribute to it.
If .complete is not the case, add an onload event to them that also fires the callback once it is loaded.
In your case you only want to fire your callback when all images are loaded, so I added a check if there's still images without the data-loaded attribute. If you remove that if-clause your callback would run after each image is loaded.
// Observe the DOM for changes
observeDOM(document.body, function(){
checkNewImages();
});
var checkNewImages = function() {
var images = $('img:not([data-loaded]').each(function() {
addImageLoadedEvent( this );
});
}
var addImageLoadedEvent = function(img) {
if (img.complete) {
onImageLoaded(img);
} else {
$(img).on('load', function() {
onImageLoaded(this);
});
}
}
// The callback that is fired once an element is loaded
var onImagesLoaded = function(img) {
$(img).attr('data-loaded', 'true');
if($('img:not([data-loaded])').length === 0) {
// YourCallbackHere();
}
}
DEMO: fire event on all images loaded

You can call your animateHeight function as each image in the loaded HTML is in turn loaded. You can expand this selection if you have other objects like videos.
// Call animateHeight as each image loads
var items = $('img', $contentHolder);
items.bind('load', function(){
animateHeight();
});
Updated demo: http://jsfiddle.net/jxxrhvvz/1/