On my webpage I have a members button which animates a dropdown when toggled. The only problem is that it animates every time I load a page without clicking the button to cause the action. I would like it to only open when the button is clicked and be hidden completely the rest of the time.
The javascript I am using is:
$(document).ready(function() {
$('#members').animate({
marginTop: '-80px'
}, 0);
$('.mem').toggle( function() {
$('#members').animate({
marginTop: '0'
}, 500);
},
function() {
$('#members').animate({
marginTop: '-80px'
}, 500);
});
});
As you can see it first animates the div to be -80px. I want it to be -80px without having to animate it every time I load up any page.
Thanks!
To #members css class, just add that:
display:none;
I also updated the javascript:
$(document).ready(function() {
$('#members').css({
marginTop: '-80px'
});
$('.mem').toggle(function(){
$('#members').css({
display: 'block'
});
$('#members').animate({
marginTop: '0'
}, 500);
},
function(){
$('#members').animate({
marginTop: '-80px'
}, 500);
});
});
You need to attach the animate function to a button click. Since you haven't posted the HTML, you'll need to replace "buttonSelector" with the actual selector you want to use.
For example
$(document).ready(function () {
$(buttonSelector).click(function () {
$('#members').animate({
marginTop: '-80px'
}, 0);
$('.mem').toggle(function () {
$('#members').animate({
marginTop: '0'
}, 500);
}, function () {
$('#members').animate({
marginTop: '-80px'
}, 500);
});
});
});
Related
https://jsfiddle.net/rabelais/6rdzb1x9/
Please see the fiddle above.
When user clicks on the work link the first menu slides out.
When the user clicks on the Igna link a second menu slides out.
When the user clicks on the menu link again both menus slide away.
Question: How do I re-code this so that the first menu slides away only when the second menu has finished sliding back away?
$('#menu').click(function () {
if ($('#fatal').css('display') == 'none') {
$('#fatal').animate({ left: 'toggle' }, 300);
window.setTimeout(function () {
$('#igna, #black').slideToggle("slow");
}, 100);
}
else {
$('#black, #igna, #igna-1').slideUp("fast");
window.setTimeout(function () {
$('#fatal, #igna-2').animate({ left: 'hide' }, 300);
}, 300);
}
});
$('#igna').click(function () {
if ($('#igna-2').css('display') == 'none') {
$('#igna-2').animate({ left: 'show' }, 300);
window.setTimeout(function () {
$('#igna-1').slideToggle("slow");
}, 300);
}
else {
$('#igna-1').slideToggle("fast");
window.setTimeout(function () {
$('#igna-2').animate({ left: 'hide' }, 300);
}, 300);
}
});
As I mentioned in my comment you can use the callback function within slideToggle() and animate(). This will trigger an event after the animation has been completed. I only modified the $('#menu') click event for this and left the rest the same.
Fiddle
$('#menu').click(function() {
if ($('#igna-1').css('display') != 'none') {
$('#igna-1').slideToggle("fast", function() {
$('#igna-2').animate({
left: 'hide'
}, 300, function() {
$('#black, #igna, #igna-1').slideUp("fast", function() {
$('#fatal, #igna-2').animate({
left: 'hide'
}, 300);
});
});
});
} else if ($('#fatal').css('display') == 'none') {
$('#fatal').animate({
left: 'toggle'
}, 300, function() {
$('#igna, #black').slideToggle("slow");
});
} else {
$('#black, #igna, #igna-1').slideUp("fast", function() {
$('#fatal, #igna-2').animate({
left: 'hide'
}, 300);
});
}
});
http://jsfiddle.net/neowot/xgJns/184/
Hi! I am wondering how to get the "resize" function to run when the onClick code is clicked, in a specific part of the code that I've marked with the comment "Here". My attempt was:
$('#Div5').animate({
marginLeft: isOut ? '120px' : '0px'
}, { duration: 200, queue: false }, resize);
but for some reason that isn't working. I'm not sure if my website in particular is just messed up.
Thank you.
Here is the updated click function, add third parameter function(){} to animate and call resize() wrapped in it:
$('#Div1').click(function() {
if ( $('#Div2').is(":visible") ) {
$('#Div2').hide(0);
}
$('#Div5').toggleClass('isSize');
var isSize = $('#Div5').hasClass('isSize');
$('#Div5').animate({
width: isSize ? '408' : '204px'
}, { duration: 200, queue: false }, function(){
resize();
});
$('#Div5').toggleClass('isOut');
var isOut = $('#Div5').hasClass('isOut');
$('#Div5').animate({
marginLeft: isOut ? '120px' : '0px'
}, { duration: 200, queue: false }, function(){
resize();
});
$('#Div3').fadeToggle(500);
$('#Div4').fadeToggle(500);
});
DEMO
I'm using FancyBox 2.1.5.
I need a fullscreen ad (html) to be shown on homepage after it loads and closing this ad with 2 options: standard with user' click and auto hiding if no action during 15 seconds.
First task is not a problem with:
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
But how to set a counter and autohide?
I'm thinking of following:
$(document).ready(function() {
$('.fancybox').fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
$('.fancybox').fancybox({
afterShow: function(){
setTimeout( function() {$.fancybox.close(); },15000);
},
afterClose: function(){
clearTimeout( );
},
});
});
Is this correct?
Thanks in advance for your help!
I think you should rather do
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
},
afterClose: function () {
clearTimeout();
}
});
});
See JSFIDDLE
EDIT :
As properly pointed out by djdavid98, clearing time out on afterClose callback is redundant.
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
}
});
});
See updated JSFIDDLE
You can use the delay and click function together on page load to exe.c and then fadeout after 15 seconds
I have an sliding image and I have a problem it it. If you do fast mouseover over the images multiple times and then you get the mouse outside pics it still animates. Somehow it records and plays the animation even after you are not with mouse over it.
Here is my code and link to check it:
<script type="text/javascript">
$(document).ready(function() {
$('.col-md-4,.col-xs-4').hover(
function () {
$(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
},
function () {
$(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal" );
});
});
</script>
add .stop()
function () {
$(this).find('#hoverpic').stop().animate({ "top": "-=330px" }, "normal" );
},
function () {
$(this).find('#hoverpic').stop().animate({ "top": "+=330px" }, "normal" );
});
if .stop() doesn't work well enough
you can try with .stop(true) or .stop(true, true)
http://api.jquery.com/stop
you should put a check for
if( $(elem).is(':animated') ) {...}
in your code.
<script type="text/javascript">
$(document).ready(function() {
$('.col-md-4,.col-xs-4').hover(
function () {
if(!$(this).is(':animated'))
$(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
},
function () {
if($(this).is(':animated'))
$(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal" );
});
});
</script>
I usually add a class while it's animating.
Something like this:
$(document).ready(function() {
$('.col-md-4,.col-xs-4').hover(
function () {
if(!$(this).hasClass('animate')) {
$(this).addClass('animate');
$(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
}
},
function () {
if($(this).hasClass('animate')) {
$(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal", function() { $(this).removeClass('animate'); } );
}
});
});
You need to make a simple change (see commented code) if you want to avoid the jumping image when hovering out before the animation finishes:
$('.col-md-4,.col-xs-4').hover(
function () {
$(this).find('#hoverpic').stop().animate(
{ "top": "0px" } //WAS -=330px
, "normal" );
},
function () {
$(this).find('#hoverpic').stop().animate({
"top": "330px" //WAS +=330px
}, "normal" );
});
I'm quite new to javascript and I'm having a difficult time with this multi function call
This bit is running fine
$('.pages').live("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
}
});
and I'd like to add
(document).scrollTop(0);
so that a user will be taken to the top of long pages as the menu opens... any help would be appreciated....
You should be able to use something like this to perform your scroll:
$("html, body").animate({ scrollTop: 0 }, "slow");
So if you wanted to add this to your current function as shown: (you can place it wherever you would like it to occur)
$('.pages').on("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
//Perform scroll-to-top action
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});
additionally, this could should also work (as mentioned by Jan):
$('document').on("swiperight",".pages", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
//Perform scroll-to-top action
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});