Javascript in Htmlseite nicht ausführen wenn Seite (für mobile Geräte) kleiner ist

  • Hallo zusammen,


    wie oben schon erwähnt, möchte ich ich ein JavaScript das bei mir in einer Html Seite verbaut ist, nicht ausführen sobald die Seite kleiner gezogen wird. (z.B für Mobile Endgeräte).

    Ausgeführt soll es nur werden, wenn die Seite eine gewisse Größe hat.


    Ich hoffe das es eine Möglichkeit gibt das zu realisieren, und danke euch schon einmal im vorraus =)

    Lg Keulenkarl:)

  • Hm kann das sein so?



    var w = window.outerWidth;

    var h = window.outerHeight;

    if(w > 768 && h > 1024 >){

    var menu = document.getElementById('menu');


    window.onscroll = function () {


    if(window.pageYOffset > 100){


    menu.style.position = "fixed";

    menu.style.top = 0;

    menu.style.marginLeft= "62.5%";


    }else{

    // nav.style.position = "absolute";

    menu.style.position = 'relative'; //fixed


    }

    }

    }


    leider tut sich dann nix ;)

  • Nun ja... beinahe ;)!

    Du nutzt 'onscroll' um deine deine Funktion aufzurufen - dann wird auch nur der Teil ausgeführt, der sich innerhalb der Funktion ( im Bereich der {} ) befindet.

    Versuche mal, deinen gesamten Script-Code innerhalb der window.onscroll = function () {...} unterzubringen.

    Dann hast du if(w > 768 && h > 1024 >) als Abfrage. da ist die letzte spitze Klammer zuviel - und ist es das, was du willst WENN die Breite größer 768px UND die Höhe größer 1024px??

    Um ein kleines, mobiles Display zu erkennen, würde da nicht if( w < 768 && h < 800 ) (Werte natürlich nach deinen Vorstellungen) eher zum Ziel führen?

    Die Methode, die Style Attribute zuweist, ist vielleicht auch etwas unglücklich - und warum setzt du in der else Anweisung nur die Position zurück?

  • Es ist ein wenig schwierig für mich, ich kenne mich eigentlich nicht wirklich mit JS aus. Es ist also so, ich habe eine Webpage bei der ich eine Navbar habe die beim scrollen nach unten oder nach oben mitscrollt. So jetzt ist das aber leider auch der Fall wenn ich die Seite auf einem mobilen Gerät anschaue, und genau das möchte ich nicht. Sondern die Navbar darf nur dann mitscrollen sobald die Seite mit einem Endgerät angesehen wird wo der Browser z.B 1920 x 1080 groß ist.


    Ich hoffe das ich es verständlich erläutern konnte =)


    Sry und trotzdem nochmal Vielen Dank

  • Die Seite ist leider nicht online. Ich meine wenn ich auf der Page nach unten scrolle in Richtung Footer, dann soll die Navigationsleiste mit runter scrollen. Aber eben nur auf der Desktopvariante. Sobald die Seite mit einem mobilen Gerät angesehen wird soll die Navigation nicht mit scrollen, hier in dem Fall wird Sie durch einen klick auf einen Button angezeigt. Naja ich hab nun aber das Problem das durch die JS Funktion mit der die Navigation in der Desktopvariante mitscrollen soll, leider auch in mobilen Version greift und mir somit mein ganzes Layout verzieht ;)^^

  • Rufe das Script im Event window.onresize auf und frage da halt, ob die Größe erreicht ist, wenn nicht: springst Du raus und nichts wird verarbeitet.