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");
}
});
Related
I'd like to create two functions without using jQuery to scroll from top to bottom and bottom to top with a timeout.
My code using jQuery (it works) :
function scrollToTop() {
setTimeout(function() {
$('html, body').animate({ scrollTop: 0 }, {
duration: 10000,
complete: function() {
scrollToBottom();
}
});
}, 10000);
}
function scrollToBottom() {
setTimeout(function() {
$('html, body').animate({ scrollTop: $(document).height() }, {
duration: 10000,
complete: function() {
scrollToTop();
}
});
}, 10000);
}
scrollToBottom();
You can use this:
// top
setTimeout(() => window.scrollTo(0,0), 1000);
// bottom
setTimeout(() => window.scrollTo(0, document.body.scrollHeight), 1000);
You could use the scroll method, it's a native method and also has a option for different behavior.
function scrollToTop() {
setTimeout(function() {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
}, 10000);
}
function scrollToBottom() {
setTimeout(function() {
window.scroll({
top: 1000,
left: 0,
behavior: 'smooth'
});
}, 10000);
}
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);
});
}
});
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);
});
});
});
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" );
});
here is a working jsfiddle:
http://jsfiddle.net/YnT2X/
I don't want the div to display until AFTER the return animation completes.
jQuery:
$(document).ready(function () {
$("#menu").hover(function () {
$('#arrow').hide();
$("body").children(':not(#menu)').css("-webkit-filter", "blur(2px)");
$(this, '#arrow').stop().animate({
width: "200px"
}, 250,
function () {
if ($('#menu').width() == '200') {
$('.text').fadeIn(200);
}
});
}, function () {
$(this).stop().animate({
width: "0px"
}, 250)
$("body").children(':not(#menu)').css("-webkit-filter", "none");
$('.text').fadeOut('fast');
$('#arrow').show();
});
});
Try this:
Fiddle: http://jsfiddle.net/upycZ/
$(document).ready(function () {
$("#menu").hover(function () {
$('#arrow').hide();
$("body").children(':not(#menu)').css("-webkit-filter", "blur(2px)");
$(this, '#arrow').stop().animate({
width: "200px"
}, 250,
function () {
if ($('#menu').width() == '200') {
$('.text').fadeIn(200);
}
});
}, function () {
$(this).stop().animate({
width: "0px"
}, 250,function(){
$('#arrow').show(); //<- Shows arrow after run
});
$("body").children(':not(#menu)').css("-webkit-filter", "none");
$('.text').fadeOut('fast');
});
});