Custom Javascript not working in Chrome

Question

Browsed a lot, fiddled with it a lot. Came to the conclusion others may see the mistake that I am blind to.

The code is supposed to move the sidebar according to window height, sidebar height, content height, etc.

This is the code:

$(document).ready(function() {
    var windowheight = $(window).height();
    var identheight = $(".ident").height();
    var sidebarheight = $(".sidebar").height();
    var mainheight = $(".main").height();
    var pos = $(window).scrollTop();
    var diff = (((sidebarheight + 20) + identheight) - windowheight);
    var cur = ((sidebarheight + 20) + (pos - diff)) - 2;
    var max = (mainheight + 30);
    contentScroll();
$(window).resize(function(){
    windowheight = $(window).height();
    identheight = $(".ident").height();
    sidebarheight = $(".sidebar").height();
    mainheight = $(".main").height();
    pos = $(window).scrollTop();
    diff = (((sidebarheight + 20) + identheight) - windowheight);
    cur = (sidebarheight + 20) + (pos - diff);
    max = (mainheight + 30);
    contentScroll();
});
$(window).scroll(function (){
    pos = $(window).scrollTop();
    diff = (((sidebarheight + 20) + identheight) - windowheight);
    cur = (sidebarheight + 20) + (pos - diff);
    max = (mainheight + 30);
    contentScroll();
});
function contentScroll() {
if (sidebarheight < mainheight) {
        if (diff < identheight) {
            if (pos >= identheight) {
                $('.sidebar').css({
                    'margin-top'    :   (pos - identheight) + 'px'
                });
            }
        } else {
            if (pos >= diff && cur <= max) {
                $('.sidebar').css({
                    'margin-top'    :   (pos - diff) + 'px'
                });
            }
            if (pos <= diff) {
                $('.sidebar').css({
                    'margin-top'    :   '0px'
                });
            }
        }
    }
}
});

I'm aware of it not being perfect, it's still in the rough phase. It works perfectly fine in FireFox, but not in chrome. The function is being called (tested with alerts). It just doesn't do anything.

Probably something about chrome reading syntax different.

If anyone that see's my mistake would kindly point me to it, it's been too long for me to keep cracking my head open over this.

This is the mock-website in question: http://klok-bremen.de/fff/

Open the site in firefox to see what it should do. It's supposed to scroll the sidebar, depending on how big the window size, sidebar size, content size, etc. If any errors would be thrown I wouldn't be asking this question here, I guess. Thanks for the pointer, I checked the chrome console, nothing. — Roman Rutkowski
– Roman Rutkowski, Commented Jan 24, 2015 at 21:55
Shouldn't have to go to any other site to get a clear defintion of what the expected behavior of your code is. The question should be self contained including a proper problem statement and expected behavior — charlietfl
– charlietfl, Commented Jan 24, 2015 at 21:57
that's cool, not trying to bust balls...rather tune up what's needed for proper troubleshooting without a lot of wasted time — charlietfl
– charlietfl, Commented Jan 24, 2015 at 22:04
Can get rid of duplication by just triggering rezize on page load. Chain it to the resize handler. $(window.).resize({/*code*/}).resize() — charlietfl
– charlietfl, Commented Jan 24, 2015 at 22:10

Robert · Accepted Answer · 2015-01-24 22:21:35Z

1

Use $(window).load instead of $(document).ready because the parent elements' heights will change after the images load.

answered Jan 24, 2015 at 22:21

Robert

3623 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom Javascript not working in Chrome

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related