Javascript Problem

dreadkopp

Aloha Community,

ich möchte auf einer Website ein Willkommensbanner anzeigen lassen. Dazu soll der Header erstmal verschwinden und erst erscheinen, wenn die Seite gescrollt wird oder der continueButton geklickt wird.

Da das ganze nur auf der Startseite passieren soll, hab ich folgendes in die Startseite geschrieben.

Code

<head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


<script src="https://raw.githubusercontent.com/ramswaroop/animatescroll.js/master/animatescroll.js"></script>


<script>
jQuery(document).ready(function() {
      $('.site-header').slideUp(0);
      $('.site-header').after('<img id="banner" style="width:100%; margin-top:-240px" src="https://i.imgflip.com/kpvez.jpg"></img>');
$('.site-header').after('<button id="continuebutton" style="z-index:10; position:absolute; margin-left:48%; margin-top:30%">Continue</button>');
 });
</script>


<script>
jQuery(document).ready(function() {
$("#continuebutton").click(function() {
    $('.entry-content').animatescroll({scrollSpeed: 2000,padding: 0,
    });
    $(".site-header").slideDown(2000);
    document.getElementById('banner').style = "margin-top: 0px";
  })
});
</script>


<script>
window.onscroll = function() {
$('.site-header').slideDown(2000);
document.getElementById("banner").style = "margin-top:0px; width: 100%";
}
</script>
</head>

Alles anzeigen

Mein Problem ist, dass der Header nicht wieder zurückslidet/der style des Banners nicht wieder angepasst wird.

hier ist die entsprechende Seite zu finden https://yoshi.dynu.com/flexosite .

Ich hoffe, ihr könnt mir helfen. Ich find den Fehler nicht.

Grüße!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

dreadkopp

wo ist denn hier der bearbeiten-button?

habe den head nun folgendermaßen abgeändert:

Code

<head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


<script src="https://raw.githubusercontent.com/ramswaroop/animatescroll.js/master/animatescroll.js"></script>


<script>
var clicked = 0;
jQuery(document).ready(function() {
      $('.site-header').slideUp(0);
      $('.site-header').after('<img id="banner" style="width:100%; margin-top:-240px" src="https://i.imgflip.com/kpvez.jpg"></img>');
      $('.site-header').after('<button id="continuebutton" style="z-index:10; position:absolute; margin-left:48%; margin-top:30%">Continue</button>');
      $("#continuebutton").click(function() {
         $('.site-header').style = "margin-top: -10px";
         $('.site-header').slideDown(500);
         $('.entry-content').animatescroll({scrollSpeed: 1500,padding: 0,
         });
         document.getElementById('banner').style = "margin-top: 0px";
         $('.site-header').style = "margin-top: 0px";
         clicked = 1;
     });
});
window.onscroll = function() {
    $('.site-header').slideDown(400);
    document.getElementById("banner").style = "margin-top:0px; width: 100%";
    var height = $('#banner').height() + 19;
    if (clicked == 1) {
        if ($(window).scrollTop() < height) {
            $('.entry-content').animatescroll({scrollSpeed: 0,padding: 220,});
        }
    }
    if ($(window).scrollTop() > height) {
        clicked = 1;
    }
}
</script>
</head>

Alles anzeigen

mit Firefox funktioniert das ganze problemlos, mit Safari nur ansatzweise und mit chrome und ie gar nicht, obwohl alle verwendeten Funktionen von allen (halbwegs) aktuellen Browsern unterstüzt werden (laut dokumentation).

Kann mir da jemand helfen?

Marcus[IS]

Mojn,

Zitat

[COLOR=#333333]wo ist denn hier der bearbeiten-button?[/COLOR]

Nach einem gewissen Zeitraum lassen sich die eigenen Beiträge nicht mehr bearbeiten. Da müsstest du dann das Beitrag Melden Icon klicken und die Foren Admins bitten den Beitrag zum Bearbeiten nochmal freizugeben.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Javascript Problem

Jetzt mitmachen!