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/
Related
I've got this code
var goRight = function() {
$(this).animate({'left:' '40px'}, 1000, goLeft);
};
var goLeft = function() {
$(this).animate({'left:' '-40px'}, 1000, goRight);
};
var main = function() {
$('.square').hover(function() {
$(this).toggleClass('active');
});
$('.square').goRight();
};
$(document).ready(main);
It supposed to move the square(a div) to the right then back to the left infinitely and make it blue when the user hovers over it. But it doesn't work. The problem is probably in the goRight and goLeft, functions. Since if I remove them completely the hover changes the color fine. And when these functions are there nothing works.
You need to do the chaining like this
$.fn.goRight = function() {
this.animate({
'left': '40px'
}, 1000, function() {
$(this).goLeft()
});
return this;
};
$.fn.goLeft = function() {
this.animate({
'left': '-40px'
}, 1000, function() {
$(this).goRight()
});
return this;
};
var main = function() {
$('.square').hover(function() {
$(this).toggleClass('active');
});
$('.square').goRight();
};
$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width:100px;height:100px;background:black;position:relative;" class="square"></div>
For more about jQuery plugin development : https://learn.jquery.com/plugins/basic-plugin-creation/
I apologize in advance if this is a rookie question. I am just learning to program/create a website and I can't find the solution to my problem.
I have a form on my website that appears/disappears after clicking on a button. I want the form to be hidden upon the page loading. As of now, the form is visible on the page once it loads, then when someone clicks the button the form hides/unhides. My current code is shown below. Could someone please help? Thanks!
<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' }, 'slow', easing, callback);
};
</script>
You can modify the custom function to accept a timing parameter as follows:
$.fn.slideFadeToggle = function(easing, timing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, timing , easing, callback);
};
and call it in ready() handler with 0 timing to hide the form on page load.
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('.pop').slideFadeToggle("linear",0)
$('#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, timing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, timing , easing, callback);
};
form{
background:dodgerblue;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="pop">
<input type="text" /><br/>
<input type="text" /><br/>
</form>
<input type="button" id="contact" value="toggle"/>
I want to add fade-in and fade-out transitions in this script, so i want to insert fadeOut(1000) fadeIn(1000) in the script.
Here is the script:
jQuery(document).ready(function () {
var $box=jQuery(".post"),
$bar=jQuery("a.bar_view");
$dat=jQuery("a.dat_view");
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
jQuery.cookie("dat_style", 1);
return false
});
if(jQuery.cookie("dat_style")==0) {
$box.removeClass( "bar");
$dat.addClass("active")
} else {
$box.addClass("bar");
$bar.addClass("active")
}
});
this is jQuery script for switch between grid and list views to display content.
This is the site, here i implemented this script: http://bbelog-megagrid.blogspot.com View the HTML Sources there.
This is a same example script transitions added:
$(document).ready(function () {
var elem=$('ul');
$('#viewcontrols a').on('click',function(e) {
if ($(this).hasClass('gridview')) {
elem.fadeOut(1000, function () {
elem.removeClass('list').addClass('grid');
elem.fadeIn(1000);
});
}
else if($(this).hasClass('listview')) {
elem.fadeOut(1000, function () {
elem.removeClass('grid').addClass('list');
elem.fadeIn(1000);
});
}
});
});
I want to modify the first script like this one.
you can add those like this
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
$bar.fadeOut(1000);
$dat.fadeIn(1000);
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
$dat.fadeOut(1000);
$bar.fadeIn(1000);
jQuery.cookie("dat_style", 1);
return false
});
I would like this animation to repeat from the very beginning each time (#slide1).
I tried the setTimeout method but could not get it to work.
I am using a simple line by line since the timing difference and (lack of knowledge).
Thanks for your help.
http://jsfiddle.net/q9EZg/6/
$(document).ready(function () {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, function () {});
});
});
});
});
});
});
});
});
});
});
<div id="slide1">Slide 1</div>
<div id="slide2">Slide 2</div>
<div id="slide3">Slide 3</div>
<div id="slide4">Slide 4</div>
<div id="slide5">Slide 5</div>
<div id="slide6">Slide 6</div>
<div id="slide7">Slide 7</div>
<div id="slide8">Slide 8</div>
<div id="slide9">Slide 9</div>
<div id="slide10">Slide 10</div>
Check the following JSFiddle...
$(document).ready(function () {
(function animate() {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, animate); // Call animate again
});
});
});
});
});
});
});
});
});
}()); // Call the animate function
});
I wrapped your code in a Animate function that is called again after the last step.
PS. And yes you forget to enable JQuery in JSFiddle, but I assume that is not your question or related to your question.
Wrap you main animation logic in a function (which you have already done). Like this:
function Animate() {
//your animation logic
}
And then call the same function at regular interval. Like this:
setInterval(function(){
Animate()
}, 1000);
But, you definitely need to improve your main logic and structure.
Try this
JS CODE
$(document).ready(function () {
setInterval(intervalTest, 1000);
});
function intervalTest() {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, function () {});
});
});
});
});
If you want a nice way of queueing up animations, you can make an animation queue array containing objects with instructions, something like this:
var animationQueueArr = [
{
selector: '#slide1',
delay: 4000,
animation: 'fadeIn',
duration: 2000,
callback: true
},
{
selector: '#slide1',
animation: 'fadeOut',
duration: 2000,
callback: false
},
{
selector: '#slide2',
delay: 6000,
animation: 'fadeIn',
duration: 2000,
callback: true
}
// and so on
];
Then, you can loop over them:
function animate (i, skipDelayBool) {
skipDelayBool = skipDelayBool || false;
var animationObj = animationQueueArr[i];
if (animationObj.delay && false === skipDelayBool) {
return setTimeout(function () {
animate(i, true);
}, animationObj.delay);
}
if (false === animationObj.callback) {
$(animationObj.selector)[animationObj.animation](animationObj.duration);
i += 1;
i %= animationQueueArr.length; // reset back to 0 if necessary to start new loop
animate(i);
} else {
$(animationObj.selector)[animationObj.animation](animationObj.duration,
function () {
i += 1;
i %= animationQueueArr.length;
animate(i);
);
}
}
animate(0);
Note I havent tested this, but it will send you on the right path and away from your worst indentation nightmares.
I've already answered this question once. Duplicate: jQuery looping command
See the edits to the question and you will see that I have answered it twice now.
$(document).ready(function me() {
$("#slide1").fadeIn(100).delay(100).fadeOut(100, function () {
(function startFade(slide, step) {
if ((slide === 1) && (step === -1)) {
setTimeout(me, 100);
} else if (slide < 10) {
$("#slide" + slide)[step === 1 ? "fadeIn" : "fadeOut"](100, function () {
startFade(slide + step, step);
});
} else {
startFade(slide - step, -step);
}
}(2, 1));
});
});
jQuery(document).ready(function(){
$(function() {
$('.button-a').each(function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
});
$(function() {
$('.button-b').each(function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
});
$(function() {
$('.button-c').each(function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
});
$(function() {
$('.button-d').each(function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
});
});
I have many buttons, when hover each, there will have some opacity change.
The codes are similar, the small different is $('.button-a'),$('.button-b'),$('.button-c'),$('.button-d'), whether can combine jquery each function? so that I can shorter my code? Thanks.
You can use the multiple-selector[docs] .
$(function() {
$('.button-a,.button-b,.button-c,.button-d').hover(function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
Two simplifications:
var fn = function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
}
});
});
jQuery(document).ready(function() {
$('.button-a').each(fn);
$('.button-b').each(fn);
$('.button-c').each(fn);
$('.button-d').each(fn);
});
You can shorten the on-ready call too:
var fn = function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
}
});
});
$(function() {
$('.button-a').each(fn);
$('.button-b').each(fn);
$('.button-c').each(fn);
$('.button-d').each(fn);
});
And you can merge selectors:
var fn = function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
}
});
});
$(function() {
$('.button-a, .button-b, .button-c, .button-d').each(fn);
});
Now, you don't really need .each, as .hover will automatically apply to each element given by the selector:
$(function() {
$('.button-a, .button-b, .button-c, .button-d').hover(function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
Take your pick!
I don't see anything different about these functions, opacity included. But you can group selectors in the jQuery call, like:
$('.button-a,.button-b,.button-c,.button-d')...
You can also use jQuery.add() if you don't have the selectors initially, but want to add them to the chain later on. e.g.
$('.button-a,.button-b,.button-c').add('.button-d')
Yes, use the multiple selector.
$('.button-a,.buttcon-b,.button-c,.button-d');
All you need is:
$('.button-a, .button-b, .button-c, .button-d').each(function() {
$(this).hover(function() {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
As I said in a comment, it's not necessary to use
$(function() {
// code code code ...
});
all the time. You've already got everything inside a "ready" handler.