We Keep Coding

Prevent Background Scroll on Modal Box

I am using a plugin which has a modal pop up box for login (CM Registration Pro). I would like the background (body of my website) to not be able to scroll when the modal pop up is open.
I have tried the following code but am unable to get it to work
jQuery(document).ready(function ($) {
if($('.cmreg-overlay').length){
$('html').css('overflow', 'hidden');
}
});
If you would like to see the problem live my website is Redec

A Quick example that should work is:-
var element = document.querySelector('body');
element.addEventListener('click',function(){
if(element.classList.contains('.cmreg-overlay-visible')){
document.documentElement.style.overflow = 'hidden';
}
else{
document.documentElement.style.overflow = 'visible';
}
});

As it stands, your body has no background. If you mean you don't want your body to scroll when the modal box is open, then you can check whether .cmreg-overlay is shown, and if so then set overflow:hidden to the body.
I will assume that only #menu-item-16137, #menu-item-16194 and #menu-item-16195 are Here is how to do it:
// Prevent the body from scrolling when the modal opens
var x = document.querySelectorAll("#menu-item-16137, #menu-item-16194, #menu-item-16195");
for(var i = 0; i < x.length; i++) {
x[i].addEventListener("click", function() {
if($(".cmreg-overlay").style.display != none) {
document.body.style.overflow = hidden;
}
});
}
// Return the body back to scrolling when closing the modal
document.querySelector(".cmreg-overlay").addEventListener("click", function() {
document.body.style.overflow = "auto";
}

not able to move scroll bar inside a div

I have a div that gets filled dynamically when the user sends data from form, it is similar to chat box. where the user ends message and that message gets displayed inside the div. Now this div has a scroll bar that should stay at the bottom but if the user scrolls then it should stay at that position where the user has kept it
The issue is that although the scroll bar stays at the bottom but when the user pulls it up, then also it pulls itself to bottom and the user can't use it to scroll.
Code for div
var youInterval;
function startInterval() {
youInterval = setInterval(function() {
var elem = document.getElementById('scrollbody');
elem.scrollTop = elem.scrollHeight;
}, 500);
}
document.addEventListener('scroll', function(event) {
if (event.target.id === 'scrollBottom') {
clearInterval(youInterval);
}
}, true);
startInterval();
.chatbox__body {
overflow-y: auto;
}
<div class="chatbox__body" id="scrollbody"></div>
Can anyone please help me with the issue

Your condition here is failing if (event.target.id === 'scrollBottom') {
The event generated by scroll is on document so, event.target.id is actually checking id property of document which is not there.
You have to disable overflow in body first and then add overflow to div
html,body{ height:100%; width:100%;overflow:hidden;}
.chatbox__body {
overflow-y: auto;
height:100%;
}
In your JS check for if (event.target.id === 'scrollbody') {
SNIPPET
var youInterval;
function startInterval() {
youInterval = setInterval(function() {
var elem = document.getElementById('scrollbody');
elem.scrollTop = elem.scrollHeight;
}, 500);
}
document.addEventListener('scroll', function(event) {
debugger;
if (event.target.id === 'scrollbody') {
clearInterval(youInterval);
}
}, true);
startInterval();
html,body{ height:100%; width:100%;overflow:hidden;}
.chatbox__body {
overflow-y: auto;
height:100%;
}
#content{
height:200%;
width:100%;
background-color:red;
}
<div class="chatbox__body" id="scrollbody">
<div id="content"></div>
</div>

Stopping the scrolling animation once it has been closed

I have a newsletter section that appears on the site when the person starts to scroll down after a certain point. On this newsletter section there is a close button that allows this Newsletter section to be closed. However the problem is that when they close the newsletter and start scrolling again it reappears. So the first function is cancelling out the second. How can the close button remove the newsletter button from the page and not reappear when they start to scroll again?
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('.Newsletter_btn').fadeIn('slow');
} else {
$('.Newsletter_btn').fadeOut('slow');
}
});
$(document).ready(function(c) {
$('.alert-close').on('click', function(c){
$(this).parent().fadeOut('slow', function(c){ });
});
});
×

It's simple. Just add a variable, what listenst is the newsletter has closed?
I called it showNewsletter.
When you load the pages, it's true. When use scroll down, it appears. If user has closed, then set it to false, so now you know, you should not appear it again.
var amountScrolled = 300;
var showNewsletter = true; //init
$(window).scroll(function () {
if ($(window).scrollTop() > amountScrolled) {
if (showNewsletter) { //show only if not turned off
$('.Newsletter_btn').fadeIn('slow');
}
} else {
$('.Newsletter_btn').fadeOut('slow');
}
});
$(document).ready(function (c) {
$('.alert-close').on('click', function (c) {
$(this).parent().fadeOut('slow', function (c) { });
showNewsletter = false; // turn off
});
});

How to make a picture fly in and out on transitions with jquery

Hi i have started making this web.
I am desperately trying to make my menus to fly-in and out on transitions. I want my menus to fly-in in a certain order starting from top to bottom.
I have updated this question from its original.
html:
<div id="flyin">
<form action="WoodEnglish.html" method="get">
<input id="Wood" type="image" src="Wood.png" alt="Submit" >
</form>
</div>
javascript:
<script type="text/javascript">
$(document).ready(function () {
var currWidth = $(window).width();
console.log(currWidth);
var startPos = -1;
var endPos = 1000;
console.log(endPos);
$('#flyin').animate({left: endPos},1000);
$('#Wood, #submit2').click(function () {
if (this.id == 'Wood') {
$('#flyin').animate({left: endPos}, 1000);
}
else if (this.id == 'submit1') {
alert('Submit 2 clicked');
}
});
});
</script>
However there is still two problems with this code
is this; var currWidth = $(window).width(); i think. I need my buttons to fly into the screen from out of screen and atm i am not allowed to do that.
atm it doesn't wait until the animation is complete before loading the next html on action form.
thx in advance for any contributions

You have referenced items in the <head>, even before they are loaded. Please wrap everything in document ready function:
$(document).ready(function () {
var currWidth = $(window).width();
console.log(currWidth);
var startPos = -100;
var endPos = (currWidth / 2) + (startPos / 2);
console.log(endPos);
$('#flyin').animate({left: endPos}, 1000);
});
Fiddle: http://jsbin.com/pafigicabo/edit?js,output

Okay i figured it out. This will make an image fly from outside the screen to inside the screen and then again fly from inside the screen to outside the screen when you click it.
$(document).ready(function () {
$('#flyin').animate({left: "1000px"},1000);
$('#Wood, #submit2').click(function () {
if (this.id == 'Wood') {
$('#flyin').animate({left: "-1000px"}, 1000);
}
else if (this.id == 'submit1') {
alert('Submit 2 clicked');
}
});
});

Button hiding not functioning properly

HTML Code:
<div id="slick-slidetoggle">wxyz</div>
<div id="slickbox" >abcd</div>​
JavaScript:
var hoverVariable=false;
var hoverVariable2=false;
$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
hoverVariable2=true;
$('#slickbox').slideToggle(600);
return false;
})
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
}, 1000);
})
$('#slickbox').mouseleave(function() {
hoverVariable=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
return false;
}, 1000);
})
$('#slickbox').mouseover(function() {
hoverVariable2=false;
hoverVariable=true;
})​
CSS Code:
#slickbox {
background: black;
width:100px;
height: 135px;
display: none;
cursor:pointer;
color:white;
}
#slick-slidetoggle{
background: yellow;
width:100px;
height: 135px;
cursor:pointer;
color:black;
}
​
Now the desired behaviour is that when mouse is slide over yellow div("wxyz") black div("abcd") should slide down and if mouse is moved out of yellow without moving on to black div, the black div should hide after two seconds.
This is happening. If mouse is moved over black div immediately after moving out of yellow div the black div should not hide as long as the mouse is on the black div. This is also happening.
Next steps are bit difficult to explain but I'll try, when mouse is moved over yellow div and black div comes out then mouse is moved over black div and within two seconds if it moved out of it(black div) then the whole animation goes haywire. Its behaviour is reversed. But if the mouse is kept on black div for more than two seconds and then it is moved out then the whole script runs fine.
This is the link to explain better. http://jsfiddle.net/HAQyK/381/

Try replacing slideToggle() with the appropriate slideUp() and slideDown() calls. http://jsfiddle.net/tppiotrowski/HAQyK/386/
var hoverVariable = false;
var hoverVariable2 = false;
$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
hoverVariable2 = true;
$('#slickbox').slideDown(600);
return false;
})
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2 = false;
setTimeout(function() {
if (!hoverVariable && !hoverVariable2) {
$('#slickbox').slideUp(600);
return false;
}
}, 1000);
})
$('#slickbox').mouseleave(function() {
hoverVariable = false;
setTimeout(function() {
if (!hoverVariable && !hoverVariable2) {
$('#slickbox').slideUp(600);
return false;
}
return false;
}, 1000);
})
$('#slickbox').mouseover(function() {
hoverVariable2 = false;
hoverVariable = true;
})​

I re-coded a solution. Checkout the fiddle here
var hideB;
var $black = $('#slickbox');
var $yellow = $('#slick-slidetoggle');
function showBlack() {
if( hideB ) window.clearTimeout( hideB );
$black.stop( true, true );
$black.slideDown(600);
}
function hideBlack() {
hideB = setTimeout( function( ) {
$black.stop( true, true );
$black.slideUp( 600 ); }
, 1000 );
}
$black.hide();
$yellow.mouseenter(function() {
showBlack();
})
$yellow.mouseleave(function() {
hideBlack();
});
$black.mouseleave( function( ) {
hideBlack();
});
$black.mouseenter( function( ) {
showBlack();
});

Your problem seems to be that the slideToggle in firing twice in quick succession because of your duplicate timeout functions. The cleanest way to deal with timeouts or intervals is to store them in a variable to give you the control of removing them when not needed:
// Defined in global scope
var timer;
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2=false;
// Timer set as function
timer = setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
// Timer no longer need and so cleared
clearTimeout(timer);
return false;}
}, 1000);
});
EDIT: Neglected to add the slideUp/slideDown instead of Toggle as per the correct answer above. See the updated jsFiddle which is now correct: http://jsfiddle.net/HAQyK/390/
Another way you could approach your script is to use jQuerys delay funciton and the stop(); method for animation. Wrap the divs in a container and you've got a much simpler block of code:
$('#slick-container').mouseenter(function() {
$('#slickbox').stop().slideDown(600);
}).mouseleave(function(){
$('#slickbox').stop().delay(1000).slideUp(600);
});
Check it out here: http://jsfiddle.net/HAQyK/387/