Crome ignoriert meine js Scroll Animation bei eingebundenen Objekten

Karol · 03.09.2013

Hi,
ich verzweifle an der Aufgabe Crome klar zumachen sich wie die anderen Browser zu verhalten. Ich habe auf der Website www.smz.de hauptsächlich die Gestaltung, HTML und CSS umgesetzt. Das Java Script wurde von einer ehemaligen Mitarbeiterin geschrieben zu der ich leider kein Kontakt mehr habe. Da ich im Java Script Bereich noch ein Neuling bin kriege ich das Problem ohne Hilfe nicht in den Griff.

Alle anderen Browser führen den Code richtig aus nur Crome lässt alle <li> stehen und bewegt das enthaltene <object>.

Ich wäre sehr dankbar wenn jemand eine Idee hätte dem engegenzuwirken oder findet jemand einen Fehler im Code?

Code:

    // Scroll cases
    var scrollAnimation,
        fadeAnimation,
        scrollSpeed = 0,
        // higher number = slower scroll, must be > 0
        scrollSpeedAdjust = 1.6,
        listPosition;
    
    function scrollCases(visibleSectionCasesList, direction, e){
        var listPosition = parseInt(visibleSectionCasesList.css('left'));
        
        // check if we leave maxwidth of the caseslist
        if(direction == 'left' && listPosition <= 0){
            scrollSpeed = scrollSpeedAdjust * (listPosition * -1 + (visibleSectionCasesList.width() / 10));
            scrollAnimation = visibleSectionCasesList.animate({
                left : 0
            }, scrollSpeed);
        } else if(direction == 'right' && (parseInt(visibleSectionCasesList.css('width')) * -1) + parseInt($('section').css('width')) <= listPosition){
            scrollSpeed = scrollSpeedAdjust * (visibleSectionCasesList.width() + listPosition);
            scrollAnimation = visibleSectionCasesList.animate({
                left : (visibleSectionCasesList.width() * -1) + $(window).width()
                        
            }, scrollSpeed);
        } else {
            // trigger mouseout to one of both links to stop scrolling right/left and check arrow visibility
            $('.arrow-right').trigger('mouseout');
        }
        
    }
    
    // start scrolling cases when mouseover the hidden links
    $('.arrow-right, .arrow-left').on('mouseover', function(e){
        if(typeof scrollAnimation != 'undefined') {
            scrollAnimation.stop();
        }
        if(typeof fadeAnimation != 'undefined') {
            fadeAnimation.stop();
        }
        
        var visibleSection = $('section:eq(' + ($(window).scrollTop() / $(window).height())+ ')'),
            visibleSectionCasesList = visibleSection.find('ul, object'),
            direction = $(this).attr('data-direction');
        
        scrollCases(visibleSectionCasesList, direction, e);
        
    }).on('mouseout', function(){
        var visibleSection = $('section:eq(' + ($(window).scrollTop() / $(window).height())+ ')'),
            visibleSectionCasesList = visibleSection.find('ul, object'),
            listPosition = parseInt(visibleSectionCasesList.css('left')),
            direction = $(this).attr('data-direction');
        
        // stop scroll animation
        scrollAnimation.stop();

        if(direction == 'left' && (listPosition + 30) <= 0){
            fadeAnimation = visibleSectionCasesList.animate({
                left : listPosition + 30
            }, 200);
        } else if(direction == 'right' && (parseInt(visibleSectionCasesList.css('width')) * -1) + parseInt($('section').css('width')) + 30 <= listPosition){
            fadeAnimation = visibleSectionCasesList.animate({
                left : listPosition - 30
                        
            }, (scrollSpeedAdjust * 200));
        }
        
        
        // check button visibility
        // right arrow button
        if (visibleSectionCasesList.length <= 0 || (parseInt(visibleSectionCasesList.css('left')) -  $('section').width()) * -1 == parseInt(visibleSectionCasesList.css('width'))) {
            $('.arrow-right').hide();
        } else {
            $('.arrow-right').show();
        }
        
        // left arrow button
        if (visibleSectionCasesList.length <= 0 || parseInt(visibleSectionCasesList.css('left')) == 0) {
            $('.arrow-left').hide();
        } else {
            $('.arrow-left').show();
        }
    });

Duddle · 03.09.2013

AW: Crome ignoriert meine js Scroll Animation bei eingebundenen Objekten

Welche Chrome benutzt du denn und auf welchem OS? Beziehungsweise: welche Aktion läuft anders ab als erwartet?

Selbst in meinem sehr alten Chrome scrollt da einiges hin und her (und ist als Navigation eine der nervigsten, die ich seit langer Zeit erlebt habe). Ich weiß natürlich nicht, was da genau wie aussehen soll, aber für mich funktioniert es erstmal.

Duddle

Karol · 03.09.2013

AW: Crome ignoriert meine js Scroll Animation bei eingebundenen Objekten

Also das Problem besteht auf der Crome Version 29.0.1547.62 aufm MAC als auch auf einer aktuellen Version von Crome auf Windows. Allgemein hat die Performance der Seite noch so einige Bugs. Unter dem Menüpunkt Cases sollen alle Referenzen horizontal srollbar sein. Dies Funktioniert auch wunderbar nach dem Seite geladen wurde allerdings nicht bei den swf files die mit object eingebunden sind. Hier spielt Crome bei mir nicht richtig mit. Nur das Video wird gescrollt alle anderen background-images bleiben auf der stelle.

Duddle · 03.09.2013

AW: Crome ignoriert meine js Scroll Animation bei eingebundenen Objekten

Okay, ich konnte das Problem jetzt bei einem neueren Chrome nachvollziehen.

Füge der Klasse .content (oder .site-cases.content) ein "position:relative" hinzu, dann funktioniert es. Wie sich das auf andere Browser auswirkt, kann ich gerade nicht testen.

Duddle

Karol · 03.09.2013

AW: Crome ignoriert meine js Scroll Animation bei eingebundenen Objekten

Hey super, das es einer einer fehlenden position Angabe liegt hätte ich nicht gedacht.

ja toll jetzt funktioniert es bei mir auch. Ganz dickes Danke !!!

Ich bin auch offen falls du oder jemand sonst noch Verbesserungsvorschläge hat.

Duddle · 03.09.2013

AW: Crome ignoriert meine js Scroll Animation bei eingebundenen Objekten

Ich bin auch offen falls du oder jemand sonst noch Verbesserungsvorschläge hat.

Wirf die Idee vom "seitenweisem" scrollen weg. Es ist schrecklich in der Bedienung und bringt im Gegenzug keinen Mehrwert (zumindest für mich).

Ein direkter Sprung zu den Unterprojekten ist okay und hilfreich, aber wenn ich mein Mausrad bediene soll die Seite mir nicht vorschreiben was das bedeutet. Anstelle dessen lieber eine optische Unterscheidung der "Seiten" machen (Trennlinien oder Hintergrundfarbe), wenn es wichtig ist.

Duddle