Informationen für CMS/made simple

langweilo · 14. November 2011 14:45

Grüße,
entweder bin ich zu blöde oder ich habe einen absoluten Denkfehler.

ich wollte einen Animierten Header einbinden, habe leider kein fertiges Plugin gefunden und mich somit für eine jquery alternative entschieden.

Folgenden Code habe ich im bereich zwischen <head></head> im Template eingefügt:

<script type="text/javascript" src="/uploads/cae/jquery-1.7.min.js"></script>
<script type="text/javascript" src="/uploads/cae/jquery.cross-slide.min.js"></script>

<script type="text/javascript">
{literal}$('#headerani').crossSlide({{/literal}
  sleep: 2,
  fade: 1
{literal}}, [{/literal}
{literal}  { src: '/uploads/cae/front.jpg' },{/literal}
{literal}  { src: '/uploads/cae/front1.jpg'   },{/literal}
{literal}  { src: '/uploads/cae/front.jpg'  },{/literal}
{literal}  { src: '/uploads/cae/front1.jpg' }{/literal}
{literal}]);{/literal}
</script>

im Template habe ich natürlich einen DIV mit dem placeholder "headerani" erstellt, dieser hat auch eine fixe Höhe.

<div id="headerani"></div>

#headerani { margin: 0 0 0 0; padding: 0; height: 280px; }

der DIV ist vorhanden nur eben werden die Bilder nicht angezeigt. Pfade sind korrekt, Bilder liegen wirklich in dem Verzeichnis, auch die .js liegen dort. da ist also der Fehler ausgeschlossen.

hat jemand nen tip was ich falsch mache bzw. vergessen haben könnte?

Oder gibt es mittlerweile ein fertiges Plugin für einen Header mit Fade Funktion, muss noch nicht mal cross-slide sein, faden würde mir schon reichen.

Danke!

Beitrag geändert von langweilo (14. November 2011 14:46)

piratos · 14. November 2011 14:49

Firebug anwerfen oder Chrome Safari nutzen - Element prüfen und schauen was für Fehler gezeigt werden.

langweilo · 14. November 2011 15:15

der firebug zeigt folgendes:

CrossSlide: crossSlide() must be called on exactly 1 element

aber was er mir damit sagen will verstehe ich nicht ganz, habe mich ja strikt an die anleitung von CrossSlide gehalten.

NaN · 14. November 2011 15:17

Setz die Javascripts mal nach unten kurz vor </body>

langweilo · 14. November 2011 15:29

Edit: habs am ende vor </body> eingefügt und es funktioniert, danke...

nur mal für den DAU, warum ans ende... hatt das nen Grund?

Beitrag geändert von langweilo (14. November 2011 15:33)

NaN · 14. November 2011 15:36

langweilo schrieb:

oder meinst du wirklich </body> also am ende des Tempate

Ich meinte Exakt das wink
So blöd es auch aussehen mag.
Die Erklärung ist simpel: Der Browser arbeitet den HTML Code Zeile für Zeile ab. D.h., dass Du im Head auf ein Element zugreifen willst, was zu diesem Zeitpunkt für den Browser noch garnicht existiert, weil der Browser ja erst beim Javascript ist und demzufolge noch garnicht weiß, dass weiter unten dieses Element kommt.

Du könntest im Head auch folgendes versuchen:

<script type="text/javascript" src="/uploads/cae/jquery-1.7.min.js"></script>
<script type="text/javascript" src="/uploads/cae/jquery.cross-slide.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    {literal}$('#headerani').crossSlide({{/literal}
      sleep: 2,
      fade: 1
    {literal}}, [{/literal}
    {literal}  { src: '/uploads/cae/front.jpg' },{/literal}
    {literal}  { src: '/uploads/cae/front1.jpg'   },{/literal}
    {literal}  { src: '/uploads/cae/front.jpg'  },{/literal}
    {literal}  { src: '/uploads/cae/front1.jpg' }{/literal}
    {literal}]);{/literal}

});

</script>

Dann wird Dein Javascript Code für den Slider nur dann ausgeführt, wenn der komplette HTML Code fertig "geladen" wurde.

langweilo · 14. November 2011 16:05

Danke für die Antwort, eigentlich auch logisch.

eine frage hab ich direkt noch, passt bestimmt nicht hier her, aber eventuell kann mir doch einer helfen.

über das DIV wo nun endlich der Jquery crossslider läuft müsste ich ein Firmenlogo legen, dazu habe ich ein DIV über dem DIV vorgesehen, allerdings bekomme ich es mit z-index nicht drüber, der Header ist immer im Vordergrund. Wenn jemand nen Tipp hat wär ich dankbar.

NaN · 14. November 2011 16:07

Poste mal den Abschnitt des Templates und das zugehörige CSS.
So per Ferndiagnose ist das schwierig.

langweilo · 14. November 2011 16:22

erledigt, manchmal ist man wie vernagelt.

hab jetzt so hinbekommen, weiß auch nicht was ich vorher falsch gemacht habe.
habe einfach den kompletten teil im css nochmal nue gemacht und jetzt geht es:

#headerover { position:absolute; top:0px; left:50%; margin-left: -500px; width:1000px; height:50px; z-index:1000; }

danke nochmal für schnelle Hilfe und Antworten!

#1 14. November 2011 14:45

Re:

#2 14. November 2011 14:49

Re:

#3 14. November 2011 15:15

Re:

#4 14. November 2011 15:17

Re:

#5 14. November 2011 15:29

Re:

#6 14. November 2011 15:36

Re:

#7 14. November 2011 16:05

Re:

#8 14. November 2011 16:07

Re:

#9 14. November 2011 16:22

Re:

Fußzeile des Forums