Develop Reference

Jumping element by element when scrolling

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.

Browser scrollbar doesn't work sometimes when using slimscroll

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

Twitter Bootstrap affix events not firing

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.

Trigger a height calc - jQuery Cycle2

I've got a page using Cycle2 to run a slideshow with a hide show element to it.
It's all working great, except when I expand the slide and close it again, the height goes off. If I slightly resize the window, this will trigger the recalculation and then the space from the height gets put back right.
I'm using
data-cycle-auto-height="container"
I basically just need to trigger this action that happens on a resize.
Any tips?

The cheat way to do it would be to assign a listener to your plugin's open/close events that triggers a window resize.
$(window).on('your_event_name', function() {
$(this).resize();
});
If you've got the time though, you should dig in a little deeper and figure out what's actually happening. Ideally, your plugin would handle this stuff on it's own.

Detecting div size change not working in IE

I have a little Google Map app here: http://crocdoc.ifas.ufl.edu/projects/saveyourlogo/map/
This page is being embedded into the "Actions" tab on this page via iframe: http://saveyourlogo.org/en/programs/crocodile/american-crocodile/
Since that page begins with the "Actions" content div set to display:none, my map div (#map_canvas) starts out at size 0x0 and the map can't initialize properly. The Google Maps API says to simply use google.maps.event.trigger(map, 'resize'); once your map div is resized.
Since I don't have control of anything outside my little map's iframe, I can't attach the resize function to the "Actions" button. So I'm trying to detect a change in the #map_canvas div's size, and then fire the resize function. Since (I believe) you can't normally attach a resize event to a div, I've used Ben Alman's jQuery resize event script. (StackOverflow isn't letting me post more than two links, but it's easily Googled.) It is said to work with IE8, and I've seen that the examples on his site do.
It works perfectly in Firefox, but the resize event doesn't fire at all in IE8. (When I un-comment out the width alert, it does not display in IE8.)
function reset_map() {
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
map.setZoom(zoom);
}
$('#map_canvas').resize(function() {
// alert(document.getElementById('map_canvas').offsetWidth);
reset_map();
});
Any idea why? Or perhaps suggestions for a more elegant solution?
UPDATE:
I've tried building my own little script that takes the offsetWidth of the div every 300ms, and then compares it to the last, but I just end up crashing the browser. Is there any way to detect this change from display:none to display:block without using a constant, quick loop? I know Ben Alman's script mentioned above uses one every 250ms.