I'm trying to affix a toolbar when the user scrolls passed it. The affix portion works fine however I want to adjust the padding on my main container when the affix class actually get applied. http://getbootstrap.com/javascript/#affix-usage Has some events listed However; I can't get any of them to fire. The JSfiddle doesn't look right I'm guessing cuz of the size. But essentially none of those events get fired when the affix is applied to the #nav.
$('#nav').on('affix.bs.affix', function () {
alert('Fired!');
});
You can see more of my code here.. Its essentially just the navbar given in the BS example.
http://jsfiddle.net/dTR4A/1/
The affix.bs.affix event fires when the affixed element is scrolled so if you scroll the page:
This event fires immediately before the element has been affixed.
so make your page content higher.
Demo: http://jsfiddle.net/4vmMd/
Encountered a similar problem..
Turns out that it was older version of bootstrap. It worked just fine with newer version.
Also ensure that your content has enough height.
For future travelers falling into this issue, I was having the same issue but the above solutions did not work for me.
I found out that in a completely remote part of my application, we have:
$(window).unbind('scroll')
$(window).off('scroll')
Which was killing the handler for the scroll event (probably, the Affix library observes the $(window) element in order to fire the scrolling events).
Hope this helps.
Related
Ionic Version: 1.x
Platform: all
I have an ionic app which uses an ionic popover. However, when the popover is active (open), I can no longer interact with things in the background, for example scroll down my list of items. I have tried looking for existing answers for this question, but did not see the question being asked.
The popover itself does not have to be bound to any active element on the page, since it currently has position:fixed and will always appear in the same position.
So basically the question is, is there a way to prevent the popover from preventing me interacting with everything in the background?
I found this codepen someone put up:
https://codepen.io/ionic/pen/GpCst
This may do the trick?
.popover-backdrop {
display:none;
}
I have found an answer, however, not sure if there is a better way to do this, perhaps an option that turns interacting with the background on and off, but for now the answer seems to be as follows:
Ensure the .popover-backdrop class is the same size and position (height and top margin in my case) as the actual fixed popover element. The default is height 100%.
Ensure that for the .popover-open class (applied to the body) you disable pointer-events: none;
Keep in mind that this will change the behaviour where if you click outside of the popover that it will close it by default. So in ionic, I will have to make sure that on the event where I leave the view that closes the popup if active.
I have two divs with the total height of the viewport and a button for scrolling from one to another with ScrollTo jquery plugin. The problem is that I want to prevent the posibility of manual scroll.
I want that when someone scrolls with mouse down, the browser scroll automatically to the second view, and when I scroll to top gets the previous view.
I don't know if I'm explaining well, here an example: http://orangina.eu/heritage
Try to scroll in this webpage, this is what I need.
Thanks!
Correct me if I'm wrong but it looks to me like you're trying to disable the browsers default scrolling behaviour, attach events to scroll up and scroll down and scroll up or down to the height of the page's height.
The way I would do this is disable the browser's default scrolling behaviour with overflow:hidden to the body and html.
Then you can bind the jQuery "mousewheel" and "DOMMouseScroll" to the div checking for "event.originalEvent.detail > 0" or "e.originalEvent.wheelDelta < 0" for down scrolling or else for scrolling up.
Finally add your function call inside the if or else depending on the downscroll or upscroll.
I can write the code if you want but it might help you more if you try this yourself.
You can achieve that same effect by using fullPage.js plugin for jQuery.
Compatible with old browsers such as IE 8.
Touch devices compatible
CSS3 animations improving performance
Lots of options, callbacks and methods.
Thanks for all replies!
I solved my problem, instead of using standard scrolling I used the translateY css property. Setting a data-id to each page layer and doing translateY(100%, 200%, 300%...) every time I want to scroll down/up.
I'm trying for numerous days to solve the following issue.
I have a menu located on the top of the page which needed to be open using swipedown event (I'm using Hammer.js jQuery version).
Problem is, every time I try to interact using swipes I either scroll the page (swipeup) or pulling the page down same as described in the following question.
Here is what I've tried so far:
overflow: hidden; on the body element with an inner container with overflow: auto, swipe on top element still triggered document scroll.
Setting preventDefault on the document also disabled lower elements events in the DOM hierarchy and by that I had no swipe events working in the page.
Also tried using stopPropagation on the actual element when the event occurs, to prevent the bubbling up the chain for the event, the result cause the object to not respond to the events (swipes) and document scroll worked with no problems.
Any ideas how can I still keep page scroll but also when using common gestures, such as swipedown/swipeup, on specific elements that the element only will be affected?
Here is an example using JSFiddle, to better demonstrate the issue.
Would appreciate ideas/thoughts
I don't know if this will help, but I've always liked to use drag more than swipe. Using Hammer on my projects, swipes were a bit finicky. And from a UX standpoint, drag feels instantaneous vs a swipe. Much like, mousedown vs mouseup/click. So in instances where it's appropriate, and I believe in the case of showing swipey menu it is, I'd opt for drag.
Replacing your example with drag rather than swipe, and also using CSS transition, -webkit-transition, rather than jQuery's animate (drag will trigger like a mousemove, vs a click or a mouseup) seemed to make it work.
Hammer('.nav').on('dragdown', function(e){
e.gesture.preventDefault()
$(".blue").html("down")
$('.nav').css({"top":"0px"});
})
.on('dragup', function(e){
e.gesture.preventDefault()
$(".blue").html("dragup")
$('.nav').css({"top":"-150px"});
});
//Added in CSS, for .nav
.nav {-webkit-transition:0.5s top;}
Example
This does still have the page overscroll. A preventDefault() on document.ontouchstart would could fix that but that breaks scrolling. You might be able to do a selective preventDefault() by checking the scrollOffset perhaps. But I guess in the long run, I'd recommend something like iScroll.
Example
Also maybe tweak the hitbox for the drag to be a bit larger. Which I did in the last example. I attached the dragdown event on the document instead of the "menu" so the menu doesn't have to be visibly bigger.
Hammer(document).on("dragdown",function(e){
//calculate ratio of first touch from top
var pos=e.gesture.startEvent.center.pageY/window.innerHeight
if(pos<0.2){ //drag occurs in the first 20% of the screen
menu.style.marginTop="0px" //or animate here
e.gesture.preventDefault()
e.gesture.stopPropagation();
}
})
You should use the preventDefault function of the orginal gesture, to stop the browsers default behaviour, see here: https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults
When you have a div element, on which you want to register swipe events, you would do the following:
$('#swipeDiv').hammer().on("swipe", function(ev) { ev.gesture.preventDefault(); });
That should prevent the scrolling of the page, but only if the swipe happens on the div element.
I am using jquery.slimscroll to replace browser's native scrollbar.
I found sometimes using it causes browser's native scrollbar not responsive to mouse scroll.
One such case:
used along with jqueryui sortable on a element.
Somehow, after rerendering the element, the browser scrollbar stop working.
I can consistently reproduce this in every browser, and I write a jsfiddle to reproduce it:
Fiddle
function rerender(){
$("#wrapper").html($("#content").html());
$("#container").sortable({axis:"y",stop:function(){
rerender();
}});
$("#container").slimScroll(
{railVisible:true, height:"70px",start:"bottom"});
};
rerender();
It happens in other occasions, so this issue may not be related to jqueryui sortable.
Does anyone see similar problems, and how did you solve it?
I think the problem is in a way slimScroll handle wheel event - it's attached to window element, so when you recreate your wrapper html, you removes previous scrollable element, but mouse wheel handler remains and prevents window from scrolling. So, in theory you have to destroy custom scrollbar before updating wrapper html, then reinit scrollbar. But in practice slimScroll does not have destroy method.
There is a lot of other scrollbar plugins you can try: jQuery Scrollbar, jScrollPane, Malihu Custom Scrollbar and others... You can compare their functionality here
Does a div element not have an onscroll event handler?
The behaviour on my page doesn't seem to indicate the div onscroll event handler is recognized.
<div id='bd' onscroll='alert("Scroll Called");'></div>
Also,
Do div scroll events roll up to window scroll events, as per DOM event bubbling ?
Depending on which version of HTML you're using, you could use the onwheel event, instead.
The onscroll event works only if all the following are true:
The div has overflow: auto, overflow: scroll, overflow-y: scroll, etc.
The div currently has a visible scrollbar that can scroll.
The mouse movement actually causes the scrollbar to scroll.
So the onscroll event is not really suited for detecting general mouse wheel movement.
Please note that the onwheel event is new in HTML 5. According to w3schools, it is pretty widely supported, though.
I scratched my head on this one too, until I started learning more about DOCTYPE directives. The onscroll attribute is not supported in most recent version of the HTML spec. It'll show as invalid syntax in Visual Studio. It might work in many browsers, but it's still invalid code.
Instead, you canan event using Javascript or jQuery. I use an approach like this to synchronize scrolling on two separate div's:
$("#gridTableContainer").scroll(function() {
HandlingScrollingStuff();
});
Yes but the element needs to have a scrollbar. You can give it one with either overflow: auto (which gives you a scrollbar when the content is tall enough) or overflow: scroll. (These can be set specifically for x & y as well overflow-y: scroll...)
Although they don't bubble once the div has been scrolled to the bottom the window will start scrolling. (Basically if the div can scroll it will intercept the scroll event, but if it can't then it will go to the page)
I know it may not be exactly what you're looking for, but a lot of javascript frameworks can help you with this. It is not necessary for the div to have a scrollbar for you to hook to the scroll events.
Eg. Mootools has the mousewheel event. Demo here. (It has scrollbars, but you can use Firebug to remove the scrollbars and try -- it still works).
I have used this myself on a site I made a while back. If you scroll while holding your mouse over the images it prevents the default page scrolling and instead slides the image-bar.
JQUERY scroll() can help you.
$("#gridTableContainer").scroll(function() {
HandlingScrollingStuff();
});