We Keep Coding

Two the same popup plugins not working on one page

I am using popup plugin presented by some user of stackoverflow.
It works perfectly, but I wanted to add another one on the same page and it does some strange things. The first one works fine, the second one opens, but when i want to close it, it opens the first one instead. Could someone give me any clue please? I have changed all the classes, IDs etc
First one:
...
<a href='/contact' class='menuButton' id='contact'>KONTAKT</a>
<div class="messagepop pop">
<p>popup message1</p>
</div>
...
<script>
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#contact').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#contact'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
</script>
Secone one:
...
<a href='/contact2' class='menuButton' id='contact2'>BILETY</a>
<div class='messagepop2 pop2'>
<p>popup message 2</p>
</div>
...
<script>
function deselect(e) {
$('.pop2').slideFadeToggle(function() {
e.removeClass('selected2');
});
}
$(function() {
$('#menuButtonBilety').on('click', function() {
if($(this).hasClass('selected2')) {
deselect($(this));
} else {
$(this).addClass('selected2');
$('.pop2').slideFadeToggle();
}
return false;
});
$('.close2').on('click', function() {
deselect($('#menuButtonBilety'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
</script>
EDIT: The script comes from the best answer HERE

In your case probably you are overriding the deselect function.
But instead of multiply your code one for each element instance you can set it more general using DOM structure hierarchy, like:
function deselect(e) {
e.next('.pop').slideFadeToggle(function () {
e.removeClass('selected');
});
}
$(function () {
$('.menuButton').on('click', function () {
if ($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$(this).next('.pop').slideFadeToggle();
}
return false;
});
});
$.fn.slideFadeToggle = function (easing, callback) {
return this.animate({
opacity: 'toggle',
height: 'toggle'
}, 'fast', easing, callback);
};
Demo: http://jsfiddle.net/IrvinDominin/u2fkff64/

Loop each forever

I want this loop forever
$(document).ready(function() {
function news_hot() {
$("div p").each(function(i) {
$(this).delay(1000 * i).queue(function() {
$(this).addClass('hot_li ');
$(this).prev().removeClass('hot_li');
});
});
}
news_hot();
});
<div>
<p>dfsdfsd</p>
<p>dfsdfsd</p>
<p>dfsdfsd</p>
</div>

You can use setInterval() JavaScript function with specified time in milliseconds. The called function will run forever after interval time unless you stop it.
$(document).ready(function () {
function news_hot() {
$("div p").each(function (i) {
$(this).delay(1000 * i).queue(function () {
$(this).addClass('hot_li ');
$(this).prev().removeClass('hot_li');
});
});
}
setInterval(news_hot(),5000);
});
UPDATED CODE WORKING FIDDLE
function news_hot() {
$("div p").each(function (i) {
$(this).delay(1000 * i).queue(function () {
$("div p").removeClass("hot_li");
$(this).addClass('hot_li');
//$(this).prev().removeClass('hot_li');
$(this).dequeue();
});
});
}
setInterval(function(){news_hot()},5000);
.dequeue() function has been added to the code

Get callback after height animation

Here I tried to run some code after height animation
<button id="btn1">Animate height</button>
<div id="box"style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
$(document).ready(function () {
$("#btn1").click(function () {
$("#box").animate({height:"300px"});
});
var x = $('#box').height();
if(x == 300){alert('animation is finished');}
});
I can't place the code which I want to run after height animation into animate method callback cause the animating box script is placed in one document and code which I want to run in other.

use jquery .promise().done
$(document).ready(function () {
$("#btn1").click(function () {
$("#box").animate({
height: "300px"
}).promise().done(function () {
alert('animation is finished');
});;
})
});
or separately like this:
$(document).ready(function () {
$("#btn1").click(function () {
$("#box").animate({
height: "300px"
});
$("#box").promise().done(function () {
alert('animation is finished');
});
})
});
Fixed Fiddle

Event-driven JavaScript a la jQuery:
//file 1
$("#box").animate({height:"300px"},function() {
$(this).trigger('myBoxFinishedAnimatingHeight');
});
//file 2
$('#box').on('myBoxFinishedAnimatingHeight',function() {
//your code
});

You can simply use the complete property as a callback function:
.animate( properties [, duration ] [, easing ] [, complete ] )
From http://api.jquery.com/animate
Here's a demo

$("#adjest").animate({"height":"300px"},1000);
$("#adjest").promise().done(
function() {
alert("done");
}
);
i would use promise and done, if you can't run it inside animate().
see here
http://jsfiddle.net/5p8Ww/

You could name space your file and call the fucntion...
var NameSpace = Namespace || {};
NameSpace.yourFunction() {
//Do stuff...
}
Then in your html/other_file
.animate( properties , 1000, ease, NameSpace.yourFunction())

how to make jquery infinite loop

this is my jquery code.this code contain three functions.this three function repeatedly execute for looping.but this code not run properly.how to make recursive call with three functions.the pid1,pid2,pid3 is paragraph tag id's.this code used to make text animation.
$(document).ready(function(){
function animate()
{
$('#pid1').fadeOut(3000, function()
{
$(this).text('string1').fadeIn(3000);
});
animate1();
}
function animate1()
{
$('#pid2').fadeOut(3000, function()
{
$(this).text('string2').fadeIn(3000);
});
animate2();
}
function animate2()
{
$('#pid3').fadeOut(3000, function()
{
$(this).text('string3').fadeIn(3000);
});
animate();
}
});

try like this :
$(document).ready(function(){
function animate() {
$.when($('#pid1').fadeOut(3000, function() {
$(this).text('string1').fadeIn(3000);
})).then(function() {
animate1();
});
}
function animate1() {
$.when($('#pid2').fadeOut(3000, function() {
$(this).text('string2').fadeIn(3000);
})).then(function() {
animate2();
});
}
function animate2() {
$.when($('#pid3').fadeOut(3000, function() {
$(this).text('string3').fadeIn(3000);
})).then(function() {
animate();
});
}
animate();
});
Here a jsFiddle : http://jsfiddle.net/Pascalz/CNRSd/

You must call the function again after making sure that element has fadeout. You should use fadeout callback functions
change you function like this:
function animate()
{
$('#pid1').fadeOut(3000, function()
{
$(this).text('string1').fadeIn(3000, function(){animate(); });
});
}

Here is the link of jsbin by using callback functions
animate by using callback

Passing an HTML Element into a Javascript Function

I know this has been answered, but it seems that none of the questions are relevant to exactly my point.. My code is below. I need to pass in either the variable $dynamicPanel in to the second function, or pass this in to the second function. Either way would be acceptable.
While we're at it, is there any way that I can wait some number of seconds to execute the FirstAnimation function without again using the animate() method.
$(document).ready(function FirstAnimation() {
var $dynamicPanel = $(".dynamicPanel");
$('.dynamicPanel').animate({
opacity: 0,
left: '100'
}, 5000, function () {
alert('first animation complete');
SecondAnimation(this);
});
});
function SecondAnimation(this) {
$(this).animate({
opacity: 1
}, 100, function () {
alert('second animation complete');
FirstAnimation();
});
};

this is a reserved word and can't be used as a parameter name. You should do this:
$(document).ready(function(){
FirstAnimation();
});
function FirstAnimation() {
//this function doesn't change, use your code
};
function SecondAnimation(elem) {
$(elem).animate({
opacity: 1
}, 100, function () {
alert('second animation complete');
setTimeout(function(){ //Delay FirstAnimation 7 seconds
FirstAnimation();
}, 7000);
});
};
Hope this helps. Cheers

What about changing SecondAnimation(this); to SecondAnimation($dynamicPanel);? It looks like it would do what you want.

Use SecondAnimation.apply(this).

this waiting can be done with jQuery.delay()
$(document).ready(function FirstAnimation() {
var $dynamicPanel = $(".dynamicPanel");
$dynamicPanel.animate({
opacity: 0,
left: '100'
}, 5000, function () {
alert('first animation complete');
SecondAnimation($dynamicPanel); // <--pass the proper variable ;)
});
});
function SecondAnimation(this) {
$(this).delay(5000).animate({ //<<-- wait five seconds
opacity: 1
}, 100, function () {
alert('second animation complete');
FirstAnimation();
});
};
however you can call the whole function recursive and pass the animation settings as paramaters from an array. So you reuse the function and only change the behaviour.
// store animationsettings in an array;
var animationSettings = [{opacity: 0, left: '100'},{ opacity: 1 }];
// initialize the startup index
var x = 1;
// cache selector
var $dynamicPanel = $(".dynamicPanel");
// single function
(function animate(){
x = x == 1 ? 0 : 1;//<--- toggle the index
$dynamicPanel.delay(x * 5000).animate(animationSettings[x],
1000,
function () {
animate(); // recursive call this function.
});
}());
fiddle here