We are using the twitter bootstrap scrollspy on a sidebar ul/il list, this works great.
We do however also use smooth scrolling when clicking the links in the sidebar.
This causes the scrollspy to highlight each and every element that comes into view, as it should in normal cases.
But when the scrolling is triggered by a click on the links in the side nav, the users most likely don't expect the menu to animate as the scrolling occurs.
Is there any way to temporarily disable the scrollspy while the animated scroll is running, and then reenable it once scrolling is complete?
By setting a class as the target of scrollspy you can dynamically stop/resume scrollspy operation.
$('body').scrollspy({ target: '.spy-active' });
Now one will just need to add or remove the .spy-active class on the navigation.
add the following to the top of your local javascript...
$.fn.scrollspy.Constructor.prototype.destroy = function(){
this.$element.off('scroll.bs.scroll-spy.data-api');
this.$body.removeData('bs.scrollspy');
return this.$body;
}
Related
I'm having some issues with jQuery not animating the mobile menu. I am trying to make it slide down and have the links in the menu slide in from the side or top. Right now its animating the links on the menu, but not the menu it self. It just appears and disappears. I have an .expanded class that has css transitions applied to it as well as the selector for the menu, but it still doesn't seem to be working as it was before.
Website (Shrink your window for the mobile menu)
CSS (towards the bottom in the media query)
JS
Have you tried to use bootstrap? Check this out http://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html this page uses bootstrap that makes it responsive.
There's the slider syncing functionality that I need to use (can be seen here http://kenwheeler.github.io/slick/ when you scroll down a bit), but, as we can see, when you click on the navigation slide, the whole navigation autoslides further, I'd like to disable this functionality so that the main slide changes, but the navigation stays at the same level as it is until I click next or previous arrow.
Is there a setting for that or do I have to change the core to achieve this?
jsfiddle http://jsfiddle.net/9kp36e09/ - so now if you click on navigation, it scrolls, I want to disable that scrolling.
Well, it is not in the documentation, but I fixed it by add the accessibility to false. e.g:
$('#sliders').slick({
accessibility: false
});
I'd like to create sidebar navigation with subnavigation that appears when a user enters the parent section on the page:
eg https://parse.com/docs/ios_guide#queries/iOS
I think the way to do it with bootstrap is a combination of the affix, scrollspy and collapse plugins, but I'm not sure how to fire the correct collapse event when the user scrolls into or clicks into the correct parent section.
For anyone else wondering, I ended up using the Tocify plugin. Not exactly what I had in mind, but does what I needed.
I am running into an issue. I am creating a simple fixed sidebar (similar to Facebook's sidebar on the right-hand side)
In Facebook when you interact with the sidebar 2 things happen
A scrollbar appears when the contents need to be scrolled
When you hover or click a name a popover appears to the left
I am having an issue with the popover conflict with overflow. As from what I understand to get the sidebar to scroll the overflow must be set to scroll on the parent div, this hiding any elements appearing outside of it.
I am using Twitter Bootstrap to build my sidebar and have created a JSFiddle here of a working example
http://jsfiddle.net/bNFAf/5/
The problem with my example is that when I click on the Icon <i class="icon-cog icon-white"></i> to activate the dropdown-menu, it gets cut off due to the overflow set on the #sidebar div.
Does anyone have any advice on how to get this working? If possible to do without jQuery and just CSS, great! Otherwise, jQuery could work.
DEMO - http://jsfiddle.net/bNFAf/5/
Fiddle
This uses bootstrap popover it allows for positioning left so that the options fly out over the menu.
$(document).ready(function(){
$('.icon-cog').popover({
placement: 'left',
html: 'true',
trigger: 'click',
container: 'body'
});
});
You could use JQuery Drill Down Ipod Menu
I'm developing a mobile app with jQuery mobile and I have the following issue:
I have a menu which has a div inside with a vertical scroll. Once the scroll reaches the bottom of the container, it starts scrolling the page itself and this is not what I want. Is there a way to prevent the behavior? I mean, allow to scroll the menu's scroll until the bottom and when it happens, deny the page scroll when I'm scrolling on the menu?
Update:
Here's a raw example that has the same problem - http://jsfiddle.net/Wg8pk/.
If you scroll down the "Menu Options", it will scroll down the page when the menu reaches the end.
How about calling event.preventDefault() on the element you are scrolling:
$('#my-scroll-div').bind('touchmove', function (event) {
event.preventDefault();
});
I'm not sure which event would be better to bind to but touchmove seems like it would work. If you setup a jsfiddle of your code we can give better advice.
You need to make the menu have a fixed height and then using css to prevent overflow.
user overflow:hidden; that should work