Develop Reference

Temporarily Stop One Function Execution with setTimeOut() when a Button is Clicked

I have an animation triggered by a scroll event, which makes a menu slide out of view. There is also a button that when clicked brings the menu back into view.
Because the menu can be closed by scrolling, when the user clicks the button to bring the menu in, if they scroll during this period of the animation, the menu disappears again without the animation completing.
I have put together a simplified version of the animation here http://codepen.io/emilychews/pen/evbzMQ
I need to temporarily prevent the scroll function working after the button is clicked, which I'm assuming would be best done with the setTimeout() method on the click function? I've tried a number of things but can't seem to solve it/ get it to work.
Any help would be awesome. For quick reference as well the code is below
JQUERY
jQuery(document).ready(function($){
// slide menu to left on scroll
function hideOnScroll() {
$(window).scroll(function() {
if ( $(document).scrollTop() > 1) {
$('.menubox').css('left', '-25%');
}
});
}
hideOnScroll(); // call hideOnScroll function
// click handler to bring menu back in
$('.mybutton').on('click', function() {
$('.menubox').css('left', '0%');
var scrollPause = setTimeout(hideOnScroll, 2000) // temporarily pause hideOnScroll function
});
}); //end of jQuery
CSS
body {
margin: 0;
padding: 0;
height: 200vh;}
.menubox {
top: 100;
position: fixed;
width: 20%;
height: 100%;
background: red;
padding: 10px;
color: white;
transition: all 2s;
}
.mybutton {
position: fixed;
left: 40%;
top: 50px;
padding: 5px 10px;
}
HTML
<div class="menubox">Menu Box</div>
<button class="mybutton">Click to bring back menu</button>
** Also please note I've simplified the animation for the sake of the forum, the actual animation function contains Greensock code, but I didn't want to include this in case it confused the issue. I can't therefore just use the .addClass() and .removeClass() or have a workaround that changes the given CSS or scrollTop() values. I need to disable the hideOnScroll() function when the button is clicked for the duration of the click invoked animation - which in the examples is 2s. Thus I think the only way to achieve this is with the setTimeOut() method (i may be wrong on this). But I can't get it to work.
Many thanks
Emily

you can simply check the offset is complete.
function hideOnScroll() {
$(window).scroll(function() {
if ( $(document).scrollTop() > 1) {
if( $('.menubox').offset().left == 0 ){
$('.menubox').css('left', '-25%');
}
});
}
http://codepen.io/anon/pen/aJXGbr

I have made a few changes in your javascript. Have a look
var animating = false;
$(document).ready(function(){
function hideOnScroll() {
$(window).scroll(function() {
event.preventDefault();
if ( $(document).scrollTop() > 1 && !animating){
console.log("Hiding")
animating = true;
$('.menubox').animate({'left': '-25%'},2000,function(){
animating = false;
});
}
});
}
hideOnScroll();
$('.mybutton').click(function() {
var pos = $(window).scrollTop();
animating = true;
$('.menubox').animate({'left':'0%'},2000,function(){
console.log("Finished Opening");
animating = false;
});
console.log("Animating Open");
var siId = setInterval(function(){
if(animating){
console.log("Preventing Window Scrolling.");
$(window).scrollTop(pos);
}
else{
console.log("Stopping setInterval");
animating = false;
clearInterval(siId);
}
},0);
});
});
This will stop your browser window from scrolling until your Menu Open Animation is finished.
Also I have removed the transitionproperty from style.
Tested in Google Chrome.
Kindly inform me if i have misinterpreted your question.

How to allow for multiple sliding boxes with javascript

trying to edit this javascript and page so that when I hit one button, two slidouts will occur at one time, with one behind the other sliding out twice as far. Kind of like sliding doors. For instance, if you hit Melbourne, I want two windows to slide out instead of one. You can see where I already butchered the code with the black box and added the redundant javascript. It will be used as a nifty way of displaying form options/navigation, eventually. I'm having trouble figuring out how to make two slide out at once, though. Here's the code. Any help?
http://jsfiddle.net/justin1390/tL2eo45z/
$(document).ready(function () {
$('.w3c a').click(function () {
var location = $(this).data('location');
var formSelector = '.crmWebToEntityForm[data-location="' + location + '"]';
console.log(formSelector);
var targetForm = $(formSelector);
var formWasAlreadyVisible = targetForm.is(':visible');
$('.w3c a').removeClass('selected');
$(".crmWebToEntityForm:visible").hide().animate({
right: '-320px'
});
if (formWasAlreadyVisible) {
return;
}
$(this).addClass('selected');
targetForm.show().animate({
right: '0'
}, 1300);
});
});
$(document).ready(function () {
$('.w3c a').click(function () {
var location = $(this).data('location');
var formSelector = '.crmWebToEntityForm1[data-location="' + location + '"]';
console.log(formSelector);
var targetForm = $(formSelector);
var formWasAlreadyVisible = targetForm.is(':visible');
$('.w3c a').removeClass('selected');
$(".crmWebToEntityForm1:visible").hide().animate({
right: '-320px'
});
if (formWasAlreadyVisible) {
return;
}
$(this).addClass('selected');
targetForm.show().animate({
right: '0'
}, 1300);
});
});

I'm having difficulty understanding what you're trying to do, but if you want to have two elements sliding, why don't you just create two divs with different background colours? Then on click you can assign them a class to animate them, or animate with jQuery. It would be a simple matter of having one element slide at a slower rate than another to have it trailing behind.
//JAVASCRIPT
$('.w3c a').click(function (){
$('#yourElement').addClass('animate');
$('#your2ndElement').addClass('animateSlow');
});
/CSS
#yourElement, #your2ndElement{
position: absolute;
right: 1000px;
}
.animate{
animation: slide 1s linear;
}
.animateSlow{
animation: slide 2s linear;
}
#keyframes slide{
transform: translate(-2000px);
}
Don't forget your vendor prefixes on your keyframes!

Javascript button appear animation

I have the back to top button that appears when you reach a point on the page, which is working fine, however, when it appears the text is on two lines until the box has finished the animation to appear. So, is there anyway to prevent this? What I mean by the animation is: btt.show('slow');
Code:
$(document).ready(function () {
var btt = $('.back-to-top');
btt.on('click' , function(e) {
$('html, body').animate({
scrollTop: 0
}, 500);
btt.hide('slow');
e.preventDefault();
});
$(window).on('scroll', function () {
var self = $(this),
height = self.height(),
top = self.scrollTop();
if (top > 500) {
btt.show('slow');
} else {
btt.hide('slow');
}
});
});
Example: http://codepen.io/Riggster/pen/WvNvQm

The problem is caused by animating the width of a box, I think it might be better to animate the position of it instead, but - even better - lets use CSS animations!
$(window).on('scroll', function () {
if ($(window).scrollTop() >= 500) {
$(".button").addClass('show');
} else {
$(".button").removeClass('show');
}
});
#wrapper {
width: 100%;
height: 2000px;
}
.button {
position: fixed;
bottom: 50px;
right: -100px;
/* You might still need prefixes here. Use as preferred. */
transition: right 500ms;
}
.button.show {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="wrapper">
<div class="button">Here's my button!</div>
</div>
I've defined your button as hidden by default, by giving it a position of right: -100px. When we hit the correct scroll position, we add the class show and that triggers the animation performed by CSS and not javascript, as we have the transition property for the property right defined - that way the browser does the heavy lifting.

Toggling show/hide alters your elements width. You either have to put it in a container with display: inline
Or more ideally you might want to change show/hide to jQuery fadeIn() / fadeOut() which is more appropriate for "Back to Top" indicators.
Here is your codepen example modified with inline container:
http://codepen.io/anon/pen/MwWweY

Menu animation slide from top function

I would like to add a menu like the one in this demo site Here
it drops down from the top of the page as you can see and i would like to know if this was done with only CSS3 or .
If someone can show me a simple function so i can go off it that would be nice!
EDIT: ok i found the code snippet for it I think , i still want to know if this is a good way to do it , and if someone can make this more simple, seems like a lot of code just for that
var isUp = false;
var navHeight = $('#navContainer').height();
var hideHeight = navHeight - 50;
$('#arrowLink a').click(function(e){
e.preventDefault();
navHeight = $('#navContainer').height();
hideHeight = navHeight - 50;
$('.tooltip').remove();
if(!isUp){
$(this).find('img').attr('src',template_directory+'/images/menu_hide_arrow_bottom.png');
$(this).find('img').attr('title',showNav);
$( "#navContainer" ).animate({
top: '-='+ hideHeight + 'px'
}, 500, "swing", function() {
isUp = true;
});
}else{
$(this).find('img').attr('src',template_directory+'/images/menu_hide_arrow_top.png');
$(this).find('img').attr('title',hideNav);
$( "#navContainer" ).animate({
top: "0"
}, 500, "swing", function() {
isUp = false;
});
if($('body').hasClass('body_show_content'))
{
$('#mainContainer').fadeIn();
}
}
});`

Yes, it can be done. You can use css transition/keyframes and a click event.
Code
html
<div id="container hidden">Something</div>
css
#container {
postion:fixed;
-webkit-transition: all 2s;
transition: all 2s;
}
.hidden {
top: -25px;
}
js
$('#container').click(function(){
$(this).toggleClass('hidden');
});
Explanation
Your menu is fixed at the top of the page. Whenever you toggle the button that displays/hides it, you can add a css class that changes the position of the element. Because you have transition on the element, it will animate to that new location. This can also be done using keyframes instead of transition to have more control.
css transition
css keyframes

If you want to achieve this using pure css, you need to make use of transition effect. Check out the fiddle which gives a fair idea of something similar.
FIDDLE

How can I shrink a header animated when I scroll down and enlarge it when I scroll up?

I'm just going to build me a website. I thought it would be nice if my header is shrinking a litte bit when I'm scrolling down to 30px. Of course it should enlarge again when I'm scrolling up to the top. And thats my problem. I can not find out how I increase the header again! Here is my jQuery Code for the shrink effect:
$(document).ready(function() {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top > 30) {
$("#header").animate({height:50}, 200);
$("#header").animate({opacity:0.5}, 200);
$("#logoimage").animate({height:40}, 200);
$("#logoimage").delay(20).queue(function() { $(this).css({'margin-top':'20px'});
$(this).dequeue();});
}
})});
I've created a Page on JSFiddle that I can show what i mean: http://jsfiddle.net/Xuryon/s46zzkt2/
I hope somebody knows how to solve that Problem...

This should do it : http://jsfiddle.net/gmdxs42t/
$(document).ready(function() {
var fflag = true;
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top > 30 && fflag) {
fflag = false; //Will stop re-entry on every px scrolled
$("#header").animate({height:50}, 200);
$("#header").animate({opacity:0.5}, 200);
}
if (top<30 && !fflag){ //Will occur when scroll reached top
fflag=true; //Will enable the above condition entry when top exceeds 30
$("#header").animate({height:100}, 200);
$("#header").animate({opacity:1}, 200);
}
})});

You could simply add a class to the body (or to the #header) and use a css transition for the animations:
http://jsfiddle.net/s46zzkt2/1/
js
if (top > 30) { $('body').addClass('foo'); }
else { $('body').removeClass('foo'); }
css
#header { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
.foo #header { height: 50px; }