jQuery .bind method not activating the second time? - javascript

I have an element, which fills the screen. Under that I have another element which does NOT fill the screen but is hidden. So you can't manually scroll to that.
The first element which is filling the screen has the following CSS properties:
header {
position: relative;
height: 100vh;
background-color: green;
}
And the second element has these CSS properties:
#content {
display: none;
position: relative;
height: 1500px;
width: 100%;
background-color: yellow;
}
I use this code to trace the scrolling:
$('header').bind("DOMMouseScroll mousewheel", function(e) {
...
});
Inside this method I check which panel is activated (by a self created boolean) and which direction I'm scrolling to, by doing this:
$('header').bind("DOMMouseScroll mousewheel", function(e) {
var wheelDelta = e.originalEvent.wheelDelta;
if (active === header && wheelDelta <= 0) {
...
}
});
Inside that if statement I give call a method that displays the #content element below it and smoothly scrolls to it, and when its done scrolling it hides the element where we have scrolled from (header). I'm using this piece of code for that:
$('body').bind("DOMMouseScroll mousewheel", function (e) {
event.preventDefault();
var wheelDelta = e.originalEvent.wheelDelta;
$('header').unbind("DOMMouseScroll mousewheel");
if (active === header && wheelDelta <= 0) {
showScrollHide(500, content, 1000, header, 250, function () {
_window.scrollTop(0);
_scrollBackBtn.fadeIn();
active = content;
});
}
});
This works perfectly, whenever I scroll down on the header element while its active. It smoothly scrolls down to the #content element under it.
There I have a button which scrolls back up the page, I have this code for it:
_scrollBackBtn.on('click', function() {
if (active === content) {
active = header;
scrollBackHide(header, content, 500, 250, function() {
window.location = '#';
});
}
});
Which also works perfectly, it scrolls back to the top of the page.
But whenever I try to scroll down again, it doesn't do anything. How does this come?
I had to add $('header').unbind("DOMMouseScroll mousewheel"); to the code, otherwise it looked very ugly in the end result.
Whenever I added $('header').stop(); in the same section, it didn't make any difference.
So my question is. How can this .bind method be used again for the same thing?
Here's a demo if you don't understand what I mean. Whenever you scroll down on the header element, and scroll back up via the button. Its not doing the same again.

You are unbinding your mousewheel handlers when they run once and then never re-binding them, so there are no event handlers in place to react to mousewheel events after you click the button. Re-binding that event handler when you click the button does the trick.
Here is a fiddle that does that and should point you in the right direction.
I pulled your mousewheel handler out into a function so we can reuse it whenever we need to bind those events:
var handleMouseWheel = function(e){
e.preventDefault();
var wheelDelta = e.originalEvent.wheelDelta;
if (active === header && wheelDelta <= 0) {
$('body').unbind("DOMMouseScroll mousewheel");
showScrollHide(500, content, 1000, header, 250, function () {
_window.scrollTop(0);
_scrollBackBtn.fadeIn();
active = content;
});
}
};
and use that to reattach an event handler when the button is clicked:
_scrollBackBtn.on('click', function () {
if (active === content) {
scrollBackHide(header, content, 500, 250, function () {
window.location = '#';
active = header;
});
$('body').bind("DOMMouseScroll mousewheel", handleMouseWheel);
}
});

Related

Smooth scrolling nor working when element is dynamically wrapped with anchor

For the mobile devices I want to convert all the h1 headings to anchors that can scroll smoothly to their target. To achieve that, when a certain device resize occurs, i just wrap the content of the h1 tag with an a tag and then unwrap the content of the a tag when the device comes back to desktop width.
$(document).ready(function() {
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
//the function to convert the heading to an anchor for devices smaller than 780px
function makeResponsive() {
if ($(window).width() < 780) {
if ($('a').length) {
return true;
} else {
$('h1').each(function() {
$(this).contents().eq(0).wrap('');
});
}
} else {
$('a').contents().unwrap();
}
}
//run on document load and on window resize
$(document).ready(function() {
//on load
makeResponsive()
//on resize
$(window).resize(function() {
makeResponsive();
});
});
body,
html,
.main {
height: 100%;
}
section {
min-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
The Heading
</h1>
<div class="main">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>
The problem is that when the h1 content is converted to an anchor, the smooth scrolling is not happening at all and the anchor just jumps to the target.
Your a-Tag doesn´t get the click event, because you add the listener when it doesn´t exist.
Try this
$(document).on('click', 'a', function(event) {...
Instead of wrapping it in anchors, just add 'mobile-anchor' class to those headings. Then, instead of listening for clicks on anchor, listen for clicks on 'mobile-anchor' and change:
$('html, body').animate({
scrollTop: $('#section2').offset().top
}, 800, function() {
Or even a simpler solution - before the very end of your on click function, add a 'return false;' so the browser doesn't scroll the page down by itself.
EDIT: Also, wrap everything in a single documentReady function and execute the makeResponsive() before adding a click listener.

jQuery scroll() event doesn't propagate

I have one wordpress plugin which displays popup on scroll. So I have code like this:
jQuery(window).scroll(function(){
//display popup
});
I have problem with one site. The site has those css rules:
html, body {
overflow: hidden;
}
div#pageWrap {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
So scroll event is not triggering on window and my popup doesn't work. So in this case I should set scroll event on #pageWrap div instead on window because scroll event doesn't propagate:
jQuery("#pageWrap").scroll(function(){
//display popup
});
My question is can I handle this dinamicaly. I cannot change code of my plugin for each site where I have this problem. Is possible to do something like make scroll event to propagate or to set some failback. Any idea about this will be helpful.
I can't promise that this will accommodate all edge cases, but it should take care of most of them.
JS:
jQuery.fn['any'] = function() {
return (this.length > 0);
};
if (jQuery("html").css('overflow') == 'hidden') {
if (jQuery("body").css('overflow') == 'hidden') {
var scrollElement = jQuery('*').filter(function() { return jQuery(this).css('overflow') == 'scroll'; });
if (!scrollElement.any()) {
var scrollElement = jQuery('*').filter(function() { return jQuery(this).css('overflow-y') == 'scroll'; });
jQuery(scrollElement[0]).scroll(function(){
//display popup
});
}
else {
jQuery(scrollElement[0]).scroll(function(){
//display popup
});
}
}
else {
jQuery("body").scroll(function(){
//display popup
});
}
}
else {
jQuery(window).scroll(function(){
//display popup
});
}
https://jsfiddle.net/hopkins_matt/d0gtqkat/
I don't think there's a global solution for this issue, but maybe you'll find some close solutions.
The close solution in my mind is to find the div element that has (overflow='scroll') and it's width and height are very close to the width and height of the window.
if you found more than one div like that then you need to deal with the deepest div in the DOM.
if you haven't found any div like that, then you deal with jQuery(window) instead.

enabling a button when a button is clicked in jquery

I am working on jQuery and I am rendering a graph. In that I have scrollable arrows on both right and left side of the graph. My requested functionality is:
Whenever the data is more and whenever we click the right arrow automatically the left scrollable arrow must be visible.
If there is not more data, the right button must be invisible.
If there is not enough data for scrolling, the left button must be invisible.
To sum up: buttons should only be available, if they can be used.
here is my code so far:
$(function() {
var $box2 = $('.column'), totalWidth = 900, cursor = 0;
$("#rightarrrowbutton").click(function() {
if (cursor != totalWidth) {
$box2.animate({
marginLeft : "-=15"
}, "fast");
cursor += 100;
}
});
if ($("#rightarrowbutton").click(){
$('#leftarrowbutton').click(function() {
if (cursor != 0) {
$box2.animate({
marginLeft : "+=15"
}, "fast");
cursor -= 100;
}
});
});
}
try like
$("#rightarrrowbutton").click(function() {
$("#leftarrowbutton").show();
});
$("#leftarrowbutton").click(function() {
$("#rightarrrowbutton").show();
});
Rather than trying to attach and remove click handlers, just add them when you page loads and .hide() or .show() your buttons as appropriate.
$('#rightarrowbutton').click() {
// do your stuff
if (/*there's no more stuff to the right*/) {
$('#rightarrowbutton').hide();
}
$('#leftarrowbutton').show();
}
and similar for the left button.
I know your description talks about visibility, but the title of your question mentions enabling. To disable, you can put the attribute "disabled" in the <button> element. If there, it will be disabled, if missing it will be enabled. So you could remove or add the property during the .click() callback.
For example:
$("#leftarrowbutton").click(function ()
{
// if meets ending criteria
if (true)
{
// enable other button
$("#rightarrowbutton").removeAttr("disabled");
// disable current button
$("#leftarrowbutton").attr("disabled", true);
}
});

Delay animation until other animation is complete (sliding content(

I have this code which animates between divs sliding out. If an item is clicked, it's relevant content slides out. If another item is clicked, the current content slides back in and the new content slides out.
However,
var lastClicked = null;
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
for (var i=0; i<animateClasses.length; i++) {
(function(animCls) {
$('.each-brew.'+animCls).toggle(function() {
if (lastClicked && lastClicked != this) {
// animate it back
$(lastClicked).trigger('click');
}
lastClicked = this;
$('.each-brew-content.'+animCls).show().animate({ left: '0' }, 1000).css('position','inherit');
}, function() {
$('.each-brew-content.'+animCls)
.animate({ left: '-33.3333%' }, 1000, function() { $(this).hide()}) // hide the element in the animation on-complete callback
.css('position','relative');
});
})(animateClasses[i]); // self calling anonymous function
}
However, the content sliding out once the already open content slides back is sliding out too quickly - it needs to wait until the content has fully slided back in before it slides out. Is this possible?
Here's a link to what I'm currently working on to get an idea (http://goo.gl/s8Tl6).
Cheers in advance,
R
Here's my take on it as a drop-in replacement with no markup changes. You want one of three things to happen when a menu item is clicked:
if the clicked item is currently showing, hide it
if something else is showing, hide it, then show the current item's content
if nothing is showing, show the current item's content
var lastClicked = null;
// here lastClicked points to the currently visible content
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
for (var i=0; i<animateClasses.length; i++) {
(function(animCls) {
$('.each-brew.'+animCls).click(function(event){
if(lastClicked && lastClicked == animCls){
// if the lastClicked is `this` then just hide the content
$('.each-brew-content.'+animCls).animate(
{ left: '-33.3333%' }, 1000,
function() {
$(this).hide();
}).css('position','relative');
lastClicked = null;
}else{
if(lastClicked){
// if something else is lastClicked, hide it,
//then trigger a click on the new target
$('.each-brew-content.'+lastClicked).animate(
{ left: '-33.3333%' }, 1000,
function() {
$(this).hide();
$(event.target).trigger('click');
}).css('position','relative');
lastClicked = null;
}else{
// if there is no currently visible div,
// show our content
$('.each-brew-content.'+animCls).show()
.animate({ left: '0' }, 1000)
.css('position','relative');
lastClicked = animCls;
}
}
});
})(animateClasses[i]); // self calling anonymous function
}
Well, I'm pretty sure there are other more easy possibilities and I didn't have much time but here is a working jsfiddle: http://jsfiddle.net/uaNKz/
Basicly you use the callback function to wait until the animation is complete. In this special case it's the complete: function(){...}
$("document").ready(function(){
$('#ale').click(function(){
if ($('div').hasClass('toggled')){
$('.toggled').animate({ width: "toggle" }, { duration:250, complete: function(){
$('#alecont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');}
}).removeClass('toggled');
}else{
$('#alecont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');
}
});
$('#bramling').click(function(){
if ($('div').hasClass('toggled')){
$('.toggled').animate({ width: "toggle" }, { duration:250, complete: function(){
$('#bramcont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');}
}).removeClass('toggled');
}else{
$('#bramcont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');
}
});
});
I give a toggled class if a div is expanded. Since the animation on your page seems to be pretty much broken I think this would be a better way to do this. But remember: my code isn't really good. Just fast and it can be refactored. It's working tho..
Rather than using toggles, bind an on "click" handler to your ".each-brew" divs. In the handler, first hide content divs and then show the appropriate content when that animation completes. You can do that with either a promise or a callback. Something like this...
$(".each-brew").on("click", function (event) {
$(".each-brew-content").show().animate({ left: "0" }, 1000, function() {
// Get the brew name from the class list.
// This assumes that the brew is the second class in the list, as in your markup.
var brew = event.currentTarget.className.split(/\s+/)[1];
$(".each-brew-content." + brew).animate({ left: "-33.3333%" }, 1000, function() { $(this).hide(); });
});
});
I think an event and observer would do the trick for you.
set up the callback function on completion of your animation to fire an event.
the listener would first listen for any animation event and after that event is triggered listen for the completion event. when the completion event is fired execute the initial animation event.run method (or whatever you would want to call it)
Within the listener
on newanimationeventtriger(new_anim) wait for x seconds (to eliminate infinite loop poss) while if this lastevent triggers done == true{
new_anim.run();
}

Jquery Blur event on div scrolbar

I have a div with scroll bar.
Using Firefox when I click on scroll bar to drag it down to see the div list the blur event is fired and hides my div which I have set to hide when blur is fired.
How can I prevent the blur to fire when the scroll bar is used:
$("#mydiv").blur(function () {
$('#mydiv').fadeOut();
console.log("fadeout blur");
});
I display this div using:
$('#mydiv').fadeIn();
I want the div to hide when its not active but not hide when I try to click on the scroll bar.
May be this is what you are looking for
$(document).ready(function(){
$('#mydiv').fadeIn();
$("body").bind('click', function(ev) {
var myID = ev.target.id;
if (myID !== 'mydiv') {
$('#mydiv').fadeOut();
}
});
});
This will bind the click event with the body and also check the id of the element which triggers the click event. If it doesn't match the DIV, the div will be closed else the div will be always open.
You can do this one:
$(window).scroll(function() {
$('#mydiv').css('display','block');
});
var scrolling = false, scrollingTimeout, blurTimeout;
$(window).scroll(function () {
if (scrollingTimeout) {
clearTimeout(scrollingTimeout);
}
scrolling = true;
scrollingTimeout = setTimeout(function(){
scrollingTimeout = null;
scrolling = false;
}, 300);
});
$("#mydiv").blur(function () {
var that = $(this);
if (!scrolling) {
that.fadeOut();
} else {
if (blurTimeout) {
clearTimeout(blurTimeout);
}
blurTimeout = setTimeout(function () {
blurTimeout = null;
that.focus();
}, 600);
}
});
see jQuery scroll() detect when user stops scrolling and Can I declare logic on jQuery for the start and end of a scrolling event?
Seems your scroll bar is not formed within the div & clicking on it causes call to blur. Please check the css/style used for showing scroll for div is doing what you are expecting (forming scroll bar inside div), if this is the case then use a parent div over both(div & scroll bar) & use focusOut/blur event on parent div containing both.

Categories