Stopping the scrolling animation once it has been closed - javascript

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
});
});

Related

collapsing section and scrolling back to top

I am working on a long one-pager. Yes, I know, we hate one-pagers. At least I promise not to implement any parallax-effect, I promise :)
I have multiple sections I can open/close. This part works fine.
The problem: those sections get pretty long, and when they are being closed/collapsed, the user find himself somewhere in the middle of the one-pager.
So, when collapsing a section, I want it to collapse AND to smooth scroll back to the top/the start of the collapsed section.
Here my script:
// Section-Collapse
//---------------------------------------------------------
$("section a.read-more").click(function() {
if($(this).parents("section").hasClass("expanded")) {
var scrollAnchor = $(this).attr("data-scroll"),
scrollPoint = $(".anchor[data-anchor='" + scrollAnchor + "']").offset().top - 0;
$("body,html").animate({
scrollTop: scrollPoint
}, 1500, function() {
// close/collapse section
$(this).parents("section").addClass("close");
$("section.expanded.close div.expandable-content").slideUp();
$(this).parents("section").removeClass("expanded").removeClass("close");
alert("this test-message is being displayed");
});
} else {
// open section
$(this).parents("section").addClass("expanded");
$("section.expanded div.expandable-content").slideDown();
}
});
The problem: this part is not being executed EXCEPT the alert message, that one works. Although it is trying to open the dialog window multiple times and Firefox offers me to block this behavior.
// einklappen
$(this).parents("section").addClass("close");
$("section.expanded.close div.expandable-content").slideUp();
$(this).parents("section").removeClass("expanded").removeClass("close");
alert("this test-message is being displayed");
It scrolls back to top, to the anchor, but the section will not collapse...
Any ideas why it won't collapse?
Regards,
Milan
---------------------------UPDATE
So, it was a problem with the scope of variable "this".
This code here seems to work fine:
// Section-Collapse
//---------------------------------------------------------
$("section a.read-more").click(function() {
if($(this).parents("section").hasClass("expanded")) {
var scrollAnchor = $(this).attr("data-scroll"),
scrollPoint = $(".anchor[data-anchor='" + scrollAnchor + "']").offset().top - 0;
var global_this = $(this);
$("body,html").animate({
scrollTop: scrollPoint
}, 1500, function() {
// einklappen
global_this.parents("section").addClass("close");
$("section.expanded.close div.expandable-content").slideUp();
global_this.parents("section").removeClass("expanded").removeClass("close");
alert("this test-message is being displayed");
});
// return false;
} else {
// ausklappen
$(this).parents("section").addClass("expanded");
$("section.expanded div.expandable-content").slideDown();
}
});
What is bothering me: why this script tries to open multiple alert dialogs?

Accordion Functionality

I've put together an accordion script that works quite nicely (haven't cross-browser tested) and allows for lots of content inside each drawer to be accessed and visible on screen. A lot of times accordions open and cause issues with positioning after opening. Anyway, the code I'm using has a toggle active function and a scroll function being called on click.
function toggleActive(link){ // Set anchor to active
if ( $(link).hasClass("active") ) {
$(link).removeClass("active");
} else {
$(link).addClass("active");
};
};
function scrollToElement(selector, time, verticalOffset) { // param 1 = id, param 2 = speed
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('html, body').animate({scrollTop: offsetTop }, time);
}
$('#accordion a').click(function(e) {
var link = '#' + event.target.id
$(".tab-content").slideUp();
$(".tab").removeClass("active");
toggleActive(link);
$(link).next().slideToggle("fast");
setTimeout(function() {
scrollToElement($(link), 500);
}, 500);
e.preventDefault();
});
So when clicked, all of the tabs are closed and made inactive, then the targeted "drawer" is opened and made active. If for any reason you click an already "active" drawer, it runs through the script again. What I'd like to do is place an IF statement that determines if what you just clicked is already open, and then simply close that drawer. Thanks in advance. I don't know why this is causing me headaches.
JSFiddle
As I understand you need another function as below:
function isAlreadyActive(link)
{
if ( $(link).hasClass("active") ) {
$(link).removeClass("active");
return true;
} else {
return false;
};
}
And you should call that function in your click event. This function will check if the link already active, if so just deactivates it and changes as you want.
$('#accordion a').click(function(e) {
var link = '#' + event.target.id
/* if it is already active, just deactivate it and exit*/
if(isAlreadyActive(link)){
return false;
}
$(".tab-content").slideUp();
$(".tab").removeClass("active");
toggleActive(link);
$(link).next().slideToggle("fast");
setTimeout(function() {
scrollToElement($(link), 500);
}, 500);
e.preventDefault();
});
I hope this helps.

jQuery hover function to display an overlay but closes when hover displayed content

I am a little new to JS / jQuery and have done a hover function so when hover a link it shows a hidden DIV area but when I go to then hover over the div area shown of course it closes. I would like that if I then go into the content area won't close but stay open but then if leave that area would close?
JS:
$('.mini-cart').hover(
function () {
cartOpen();
},
function () {
cartClose();
}
);
var overlay = $("#cart_slide");
var cartContainer = $("#cart_over");
function cartOpen() {
cartContainer.fadeIn("slow");
overlay.addClass("overlay");
}
function cartClose() {
cartContainer.fadeOut("medium");
overlay.removeClass("overlay");
}
HTML:
<a class="mini-cart">hover link</a>
<div id="cart_over" style="display:none;">testing</div>
You could introduce the usage of a flag (isCartOpen) variable which is going to control the whether the DIV should be displayed or not.
See this working JSFiddle example and find below the related code:
var isCartOpen = false;
$('.mini-cart, #cart_over').hover(
function() {
isCartOpen = true;
cartOpen();
},
function() {
isCartOpen = false;
setTimeout(cartClose, 1000); // after 1 sec
}
);
var overlay = $("#cart_slide");
var cartContainer = $("#cart_over");
function cartOpen() {
cartContainer.fadeIn("slow");
overlay.addClass("overlay");
}
function cartClose() {
if (isCartOpen)
return;
cartContainer.fadeOut("medium");
overlay.removeClass("overlay");
}
Looks like you'll need to separate your open/close functions . Look at the following:
$('.mini-cart').hover(
cartOpen();
);
// You'll need to create a close button.. ex. <div class="close-button"></div>
$(".close-button").click(function(){
cartClose();
});

Android + jQuery - second on swipeleft wont execute

I have to do some Special things for my Webpage to work on Android the correct way. Some Images are displayed (one visible, the other unvisible) and through swipe it should be possible to Change them. No Problem so far on all OS.
But it also should be possible to zoom. Now Android starts to be Buggy. It stops the zoom-gesture because of the swipe callback. The callback itself doesn't Change the page because the view is zoomed, so there should be no break.
Now I work arround through turning my swipeleft and swiperight off while two fingers touching the Display, and tourning back on if the fingers leave the Display.
On First run I can swipe, then I can zoom with no break, but then I can't swipe anymore. The function to set the callbacks back on again is called, it set's the callbacks, but they won't be executed...
Here's the code:
app.utils.scroll = (function(){
var $viewport = undefined;
var swipeDisabled = false;
var init = function(){
$viewport = $('#viewport');
$viewport.mousewheel(mayChangePage);
// On touchstart with two fingers, remove the swipe listeners.
$viewport.on('touchstart', function (e) {
if (e.originalEvent.touches.length > 1) {
removeSwipe();
swipeDisabled = true;
}
});
// On touchend, re-define the swipe listeners, if they where removed through two-finger-gesture.
$viewport.on('touchend', function (e) {
if (swipeDisabled === true) {
swipeDisabled = false;
initSwipe();
}
});
initSwipe();
}
var mayChangePage = function(e){
// If page is not zoomed, change page (next or prev).
if (app.utils.zoom.isZoomed() === false) {
if (e.deltaY > 0) {
app.utils.pagination.prev(e);
} else {
app.utils.pagination.next(e);
}
}
// Stop scrolling page through mouse wheel.
e.preventDefault();
e.stopPropagation();
};
var next = function (e) {
// If page is not zoomed, switch to next page.
if (app.utils.zoom.isZoomed() === false) {
app.utils.pagination.next(e);
}
};
var prev = function (e) {
// If page is not zoomed, switch to prev page.
if (app.utils.zoom.isZoomed() === false) {
app.utils.pagination.prev(e);
}
};
var initSwipe = function () {
// Listen to swipeleft / swiperight-Event to change page.
$viewport.on('swipeleft.next', next);
$viewport.on('swiperight.prev', prev);
};
var removeSwipe = function () {
// Remove listen to swipeleft / swiperight-Event for changing page to prevent android-bug.
$viewport.off('swipeleft.next');
$viewport.off('swiperight.prev');
};
$(document).ready(init);
}());
Pastebin
Any ideas what I can do to get the Events back on again?
Thanks for all Ideas.
Regards
lippoliv
Fixed it:
jQuery Mobile itself prevents the swipe Event if an handler is registered, to kill an "scroll".
So I overwrote the $.event.special.swipe.scrollSupressionThreshold value and set it to 10000, to prevent jQueryMobile's preventDefault-call:
$.event.special.swipe.scrollSupressionThreshold = 10000;
Now my Code Looks like
app.utils.scroll = (function(){
var $viewport = undefined;
var swipeDisabled = false;
var init = function(){
$viewport = $('#viewport');
$viewport.mousewheel(mayChangePage);
// See #23.
$.event.special.swipe.scrollSupressionThreshold = 10000;
// Listen to swipeleft / swiperight-Event to change page.
$viewport.on('swipeleft.next', next);
$viewport.on('swiperight.prev', prev);
}
var mayChangePage = function(e){
// If page is not zoomed, change page (next or prev).
if (app.utils.zoom.isZoomed() === false) {
if (e.deltaY > 0) {
app.utils.pagination.prev(e);
} else {
app.utils.pagination.next(e);
}
}
// Stop scrolling page through mouse wheel.
e.preventDefault();
e.stopPropagation();
};
var next = function (e) {
// If page is not zoomed, switch to next page.
if (app.utils.zoom.isZoomed() === false) {
app.utils.pagination.next(e);
}
};
var prev = function (e) {
// If page is not zoomed, switch to prev page.
if (app.utils.zoom.isZoomed() === false) {
app.utils.pagination.prev(e);
}
};
$(document).ready(init);
}());
Thanks to Omar- who wrote with me several minutes / hours in the jquery IRC and gave some suggestions regarding overwriting Standard values for jQueryMobile.

Slowly scroll the content of a div on hover and stop on mouseoff

Please take a look at this website
I'm trying to implement two arrows on top and bottom of the gallery so when people mouse over the arrows, the content would scroll top and bottom respectively.
Here is the code I'm currently using that scrolls the content down when you hover over the bottom arrow. But there are two issues with it:
I want the scrolling to stop when the user mouses off
Hopefully do not display the arrow(s) if there is no more content left to scroll
if ( $("body").hasClass('projects') ) {
$("#jig1").height($(document).height() - 187);
$("#scroll-to-bottom").hover(
function () {
$("#jig1").animate({ scrollTop: $(document).height() }, 10000);
},
function () {
}
);
}
Can anyone offer an improved solution?
Answer to the seccond question.
Add the inner wrapper to the divs blocks
Html should look like this
<div id="jig1">
<div id="jig1Inner">
... here put rest of the code
if ($("body").hasClass('projects'))
{
$("#jig1").height($(document).height() - 187);
var watchScrollers = function()
{
var tmp = $("#jig1Inner").height() - $("#jig1").height();
if (tmp == $("#jig1").scrollTop())
{
$("#scroll-to-bottom").css("visibility","hidden");
}
else
{
$("#scroll-to-bottom").css("visibility","visible");
}
if ($("#jig1").scrollTop() == 0)
{
$("#scroll-to-top").css("visibility","hidden");
}
else
{
$("#scroll-to-top").css("visibility","visible");
}
}
$("#scroll-to-bottom").unbind("hover").hover(function() {
$("#jig1").stop().animate({scrollTop: $("#jig1Inner").height() - $("#jig1").height()}, 10000);
}, function() {
$("#jig1").stop(); //stops the animation
watchScrollers();
});
$("#scroll-to-top").unbind("hover").hover(function() {
$("#jig1").stop().animate({scrollTop: 0}, 10000);
}, function() {
$("#jig1").stop(); //stops the animation
watchScrollers();
});
watchScrollers();
}
Try this:
$("#scroll-to-bottom").mouseover( function () {
$("#jig1").animate({ scrollTop: $(document).height() }, 10000);
});
$("#scroll-to-bottom").mouseout( function () {
$("#jig1").stop()
});

Categories