[ERLEDIGT] Veränderter Header beim scrollen / codepen.io Code Fehler?

[kristalljunge]

Was JavaScript angeht bin ich totaler Newbie, deswegen bediene ich mich gern an Codes wie denen von codepen.io.

Ich möchte einen Header erstellen, der sich beim runterscrollen in eine "kleinere Variante" des eigentlichen Headers verwandelt, ähnlich wie es die Seite https://www.tres-click.com/ z.B. hat.

Hierzu habe ich mir bei codepen.io einen passenden Code ausgesucht, und zwar den hier: http://codepen.io/BuiltBySam/pen/merjWp

Den HTML-Code habe ich ganz normal eingefügt, den CSS Code lade ich extern, und die JavaScript-Datei habe ich in eine Textdatei geschrieben, und als test.js gespeichert.

<script language="javascript" type="text/javascript" src="css/test.js"></script>
habe ich vor </head> eingefügt, und er will den Effekt einfach nicht umsetzen, wie bei codepen.io.

Hier das Disaster: http://yeezmag.com/index9.php


kann mir jemand sagen, wo ich den Fehler mache?

 

[SpiceLab]

Das Script ist auf das JS-Framework jQuery http://jquery.com/ ausgelegt, dessen Library-Script in Deinem Code fehlt.

In dem codepen-Demo ist über das Setting-Symbol des JS-Frames die Library eingebunden:

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

 

[MrMurphy]

Hallo

Zunächst solltest du die HTML-Fehler beseitigen, siehe

https://validator.w3.org/nu/?doc=http://yeezmag.com/index9.php

Vielleicht hilft das schon.

Gruss

MrMurphy

 

[SpiceLab]

Zunächst solltest du die HTML-Fehler beseitigen, siehe

https://validator.w3.org/nu/?doc=http://yeezmag.com/index9.php

Vielleicht hilft das schon.

Ein valider HTML-Code reicht hier bei weitem nicht aus - siehe mein Post zuvor.

 

[MrMurphy]

Hallo

Entschuldigung. Ich wollte nur in meinem Rahmen helfen habe meinen Beitrag zeitgleich mit deinem geschrieben.

Gruss

MrMurphy

 

[SpiceLab]

Hallo

Entschuldigung. Ich wollte nur in meinem Rahmen helfen habe meinen Beitrag zeitgleich mit deinem geschrieben.

Gruss

MrMurphy

Alles gut :)

 

[kristalljunge]

Vielen Dank dafür. Mit dem w3-Link setze ich mich im Anschluss auseinander. Ich wollte erstmal einzig den Javascript-Code ausprobieren...

Ich weiß selber, dass ich hier wieder einen Fehler mache - einen ganz simplen. Aber ich krieg das grad nicht ergoogelt. Habe jetzt den "zweiten" Link ebenfalls eingebunden, es passiert nichts...

<script language="javascript" type="text/javascript" src="css/headerflow.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>



Sorry fürs nerven. :/

 

[SpiceLab]

Ich weiß selber, dass ich hier wieder einen Fehler mache - einen ganz simplen. Aber ich krieg das grad nicht ergoogelt. Habe jetzt den "zweiten" Link ebenfalls eingebunden, es passiert nichts...

<script language="javascript" type="text/javascript" src="css/headerflow.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>



Sorry fürs nerven. :/

Bitte die Reihenfolge der beiden Scripts tauschen: immer zuerst die jQuery-Lib, anschließend die jQuery-Scripts laden.

Ist zwar unerheblich, aber language="javascript" kannst Du entfernen, und zukünftig "links liegen lassen" ;)

 

[kristalljunge]

Ich habs hinbekommen! Zwar funktioniert es (noch) nicht eins zu eins wie bei codepen (Also die Links verhalten sich nicht so), aber der Effekt des kleiner werdenen Headers passiert.


10000 Dank!

 

[SpiceLab]

Und gib Obacht mit dem HTTPS-Protokoll im URL, da Dein Server "nur" über HTTP läuft, fällt dies unter "Gemischte Inhalte" (https://de.wikipedia.org/wiki/Hypertext_Transfer_Protocol_Secure#Gemischte_Inhalte), die vom Browser aus Sicherheitsgründen geblockt werden.

Am besten den URL so übernehmen, wie ich ihn heute morgen vom codepen-Demo übernommen, und hier gepostet hatte.

In dem codepen-Demo ist über das Setting-Symbol des JS-Frames die Library eingebunden:

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js