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

How to Initiate Image Fade Out and Fade In with jQuery Function

I have a little jQuery function in my Asp.Net MasterPage that fades an image out after 3 seconds. It works fine, but I'm having difficulty getting it to fade back in. I've tried several things as I'm new using jQuery, and I know there's something I'm doing or not doing. I can't put my finger on it. Here's what I have:
<script src="/Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (){
setTimeout(function (){
$('#Image1').fadeOut('slow', function(){
$('#Image1').remove();
});
}, 3000);
});
var fadeBack = function () {
$('#Image1').fadeIn();
};
fadeBack();
</script>
Like I said, it fades out with no problem, but I cannot find the right code structure to bring it back in. I'm thinking maybe an If statement block about the opacity is needed?
The real trick is that I want alternate images in 3 boxes I have as seen here:
I have about 12 images total, and just want them to fade one image out, and bring another in. Being more specific, I mean the following:
Column (1): Image1.FadeOut(); Image2.FadeIn(); Image2.FadeOut(); Image3.FadeIn(), and etc.
So for now, I just need help with how to do this in Column One, and I'll see if can string something together to make the other Columns 2 and 3 follow up. The timing would be 3 second for each.
Lastly, could I use an array to store other images which aren't in the Column One box already and call them into the slideshow fade sequence? I appreciate you help for this knowledge, so I can lock this in mind. Thanks.

Use this code, it will hide the image after 3 seconds and after that 1 sec, it will show image back.
$(document).ready(function (){
setTimeout(function (){
$('#Image1').fadeOut('slow');
}, 3000);
setTimeout(function (){
$('#Image1').fadeIn('slow');
}, 4000);
});
if you want like a slideshow use this code
<div class="yourimg_container">
<img src="http://localhost/app/img/off.png" id="Image1"/>
</div>
/* make an array containing your images path (you can fetch images from database using asp.net/php query)*/
var ss= ["http://localhost/app/img/off.png",
"http://localhost/app/img/on.png",
"http://localhost/app/img/slider.png"];
window.setInterval(function(){
slideshow();
}, 3000);
function slideshow(){
var im=$("#Image1").attr("src");
for(i=0;i<ss.length;i++){
if(ss[i]==im){
if(i==ss.length-1) $('#Image1').attr("src",ss[0]);
else $('#Image1').attr("src",ss[i+1]);
}
}
}
additionally you can use other effects like this
function slideshow(){
var im=$("#Image1").attr("src");
for(i=0;i<ss.length;i++){
if(ss[i]==im){
if(i==ss.length-1) {
$('#Image1').fadeOut(500);
$('#Image1').attr("src",ss[0]);
$('#Image1').fadeIn(700);
}
else {
$('#Image1').fadeOut(500);
$('#Image1').attr("src",ss[i+1]);
$('#Image1').fadeIn(700);
}
}
}
}

Your fadeBack() is launched immediately whereas the fadeOut has 3 sec delay. Set a timer for your fadeBack grater than 3 sec and the img will appear.

There is a function $('#Image1').remove(); Applied. It mean once fade over, the html block will be removed. Then you can't access the object. Because fade in and fade out accessing same id #Image1. So comment the line. It may work.

jQuery auto refresh div malfunctioning

Does anyone know what I'm doing wrong?
Basically I'm after loading content (an image) into a div tag, and then refreshing it every x seconds. So this is what I came up with, and it works great until it fades the file back in to which it does a manual refresh.
The current process looks like the following:
Load ... fade out, fade in & then disappears and reappears a few seconds later.
What should be happening is the following:
Load ... fade out, fade in ... fade out, fade in ... (you get the idea, looped)
The code:
$(document).ready(function () {
$("#webcam").load("image.html").fadeIn("slow");
var refreshId = setInterval(function() {
$("#webcam_img").fadeOut("slow");
$("#webcam").load('image.html');
$("#webcam_img").fadeIn("slow");
}, 5000);
});
The online file can be found here: http://colourednoise.co.uk/scripts/webcam.htm
Thank you

load is asynchronous. You are calling fadeIn on an element which is then replaced by the load. You need to fadeIn within the callback of load to ensure that the element exists.
$("#webcam").load('image.html', function(){
$("#webcam_img").fadeIn("slow");
});

Try moving your fadein inside the callback function for the fadeOut so it waits until fadeout is complete first
$("#webcam_img").fadeOut("slow",function(){
$("#webcam").load('image.html');
$("#webcam_img").fadeIn("slow");
});
Here's the full example
$(document).ready(function () {
$("#webcam").load("image.html").fadeIn("slow");
var refreshId = setInterval(function() {
$("#webcam_img").fadeOut("slow",function(){ // <-- added callback function
$("#webcam").load('image.html'); // now this
$("#webcam_img").fadeIn("slow"); // and this waits for fadeOut to complete first
});
}, 5000);
});

Here is a slightly different way to do it, ensuring that each image is fully loaded before the next refresh gets queued:
$(document).ready(function () {
$("#webcam").load("image.html").fadeIn("slow", function () { setTimeout(refreshImage, 5000) });
function refreshImage() {
$("#webcam_img").fadeOut("slow",function(){
$("#webcam").load('image.html');
$("#webcam_img").fadeIn("slow", function() { setTimeout(appendDateToBody, 5000) });
});
}
});

Using ajax javascript to load content into a div in web page

I am having a little problem using javascript-ajax here. In my page, I load in the content into one of the div with id content in an ajax manner, whenever the user clicks on links which have the class myajaxreq, and the contents are loaded into the div in a fade in manner. The javascript that I am using is this
$(document).ready(function(){
$("#content").load($('.myajaxreq:first').attr('href'));
});
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
$('#content').hide().load(myhref).fadeIn('slow');
return false;
});
All works great on localhost, but when i put it online and then when we click on these links, then: First the same content which was initially there in the div is loaded in fade in manner. After a few seconds, the new content is loaded.
I think I am missing some sort of
if(content document is ready)
then load in a fade in manner
and so on..
Please somebody help me out here !!

call fade in after success callback... try this
var jContent = $('#content').hide();
jContent.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
here the whole code (untested)
$(document).ready(function(){
var jContent = $("#content").load($('.myajaxreq:first').attr('href'));
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
jContent
.hide()
.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
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 :)