Melting/sliding table bug

JavaScript
1

I have a weird bug on this page that is difficult to describe, so I’ll give a few screenshots. When you grab the left or right edge of the window and move it back and forth a bit, an inner table begins melting/sliding down. I’m sure it has something to do with a JS snippet I’m using, but I don’t know how to fix it. Please assist. Thank you!

693×468 88.3 KB

2

Yeah it’s your Javascript. Not 100% sure but I think it’s this code. Basically everytime the window is resized, another 85px sticky-wrapper is being made nesting and just pushing down the content that you are seeing “melting”

<script>
$(function(){
	if ($(window).width() >= 530) {
		$(".sticky").sticky({topSpacing:40, getWidthFrom: "#comparison", responsiveWidth: true, className: "stuck-wrapper", wrapperClassName: "sticky-wrapper"});
	}
	var eventFired = 0;
	$(window).on('resize', function() {
		if (!eventFired) {
			if ($(window).width() >= 530) {
				$(".sticky").sticky({topSpacing:40, getWidthFrom: "#comparison", responsiveWidth: true, className: "stuck-wrapper", wrapperClassName: "sticky-wrapper"});
			}
			if ($(window).width() < 530) {
				$(".sticky").unstick();
			}
		}
	});
});
</script>
3

Ah, yes. That makes sense. I have two JS snippets. The first makes the big table#comparison scroll left-right when there isn’t enough horizontal room. The other (which you quoted) allows a subtable to stick at the top of the screen as the user scrolls downward. I didn’t want both happening at the same time, so I picked 530px as the cutoff for the latter. Apparently I did a bad job. Let me see if I can combine them better…

4

Before:[code]

[/code]

<script> // FOR TABLE SCROLL $(window).on('load', function() { // Check these $('table#comparison').each(function() { var element = $(this); // Create wrapper var scrollWrapper = $('<div />', { 'class': 'scrollable', 'html': '<div />' // Inner div needed for styling }).insertBefore(element); // Store reference to wrapper element.data('scrollWrapper', scrollWrapper); // Move scrollable element inside wrapper element.appendTo(scrollWrapper.find('div')); // Check if element is wider than parent if (element.outerWidth() > element.parent().outerWidth()) { element.data('scrollWrapper').addClass('has-scroll'); } // When viewport size is changed, check again if element needs to be scrollable $(window).on('resize orientationchange', function() { if (element.outerWidth() > element.parent().outerWidth()) { element.data('scrollWrapper').addClass('has-scroll'); } else { element.data('scrollWrapper').removeClass('has-scroll'); } }); }); }); </script>

After. My attempt to combine these:

<script type="text/javascript" src="../jquery.sticky.js"></script>
<script>
// FOR TABLE SCROLL
$(window).on('load', function() {
    // Check these
    $('table#comparison').each(function() {
        var element = $(this);
        // Create wrapper
        var scrollWrapper = $('<div />', {
            'class': 'scrollable',
            'html': '<div />' // Inner div needed for styling
        }).insertBefore(element);
        // Store reference to wrapper
        element.data('scrollWrapper', scrollWrapper);
        // Move scrollable element inside wrapper
        element.appendTo(scrollWrapper.find('div'));
        // Check if element is wider than parent
        if (element.outerWidth() > element.parent().outerWidth()) {
            element.data('scrollWrapper').addClass('has-scroll');
        } else {
        	$(".sticky").sticky({topSpacing:40, getWidthFrom: "#comparison", responsiveWidth: true, className: "stuck-wrapper", wrapperClassName: "sticky-wrapper"});
        }
        // When viewport size is changed, check again if element needs to be scrollable
        $(window).on('resize orientationchange', function() {
            if (element.outerWidth() > element.parent().outerWidth()) {
                element.data('scrollWrapper').addClass('has-scroll');
                $(".sticky").unstick();
            } else {
                element.data('scrollWrapper').removeClass('has-scroll');
                $(".sticky").sticky({topSpacing:40, getWidthFrom: "#comparison", responsiveWidth: true, className: "stuck-wrapper", wrapperClassName: "sticky-wrapper"});
            }
        });
    });
});
5

Oops, not fixed.

6

The second version is an improvement in that there is no longer an arbitrary 530px cutoff, but the cause you described is still there. Can anyone help fix that? Thanks!

7

Oh—here is the sticky plugin:
http://stickyjs.com

8

@RyanReese
Almost fixed! I improved it to this point, but there is still a small bug where sometimes I can get both the scroll and the sticky.

[code]

[/code]
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.