Div-Box ca. 1000 Pixel weiter unten anordnen

[Stefan]

Folgendes Problem: wir möchten unseren neuen Twitter-Banner in den Workshops (z. B hier: ) so einfügen, dass dieser erst nach dem sagen wir 1. oder 2. Bild im Workshop erscheint. Leider bekomme ich das nicht hin mit der Positionierung. Ich möchte den Div-Code auch nicht in den Code des Workshops integrieren, weil ich das ja sonst in 2000 Stück machen müsste.

Hat jemand einen Tipp, wie es möglich ist? Der Workshop muss dann auch entsprechend ab der Stelle weiter nach unten gedrückt werden, so das der Banner nicht einfach nur ein Bild / Text überdeckt.

Danke Euch sehr!

Stefan

 

[MyBad]

AW: Div-Box ca. 1000 Pixel weiter unten anordnen

Hallo Stefan,

ich vermute das wird so leider nicht hinhauen. Du wirst leider nicht drum herumkommen den DIV-Code in den WS zu integrieren.

Gruß
Tim

 

[Tattoomaus78]

AW: Div-Box ca. 1000 Pixel weiter unten anordnen

geht mE nicht...Woher soll der Workshoptext dann wissen, wie weit und an welcher Stelle er nach unten rutschen soll wenn du den Twitter-Container außerhalb vom Workshop-Container platzierst?

Warum packst du den Banner nicht einfach ans Ende des Workshops? Oder noch den Möglickeit wäre den Banner mit dem "Lightbox-Effekt" einzublenden...

[meckermodus on] Und tut es Not, dass der Banner sooooooooo groß (hoch) ist? [meckermodus off]

 

[sokie]

AW: Div-Box ca. 1000 Pixel weiter unten anordnen

Hallo Stefan,
Damit das mit der richtigen Stelle funktioniert, und der restliche Content sich entsprechend nach unten verschiebt, kannst du das nur durch javascript an die entsprechende Stelle setzen.
der Ansatz ist: die Bilder(img) selektieren und mit insertBefore an der Stelle deine Div Box einfügen.

css
meckermodus{font-size:24px; text-decoration:underline;font-weight: bold} !

 

[Tattoomaus78]

AW: Div-Box ca. 1000 Pixel weiter unten anordnen

der Ansatz ist: die Bilder(img) selektieren und mit insertBefore an der Stelle deine Div Box einfügen.

muss er doch dann aber auch in jedes Tut manuell anfügen oder? :uhm:

 

[sokie]

AW: Div-Box ca. 1000 Pixel weiter unten anordnen

Nö, kann man doch über ein js im head der Seite machen
beisp:

 

[Tattoomaus78]

AW: Div-Box ca. 1000 Pixel weiter unten anordnen

hmm...ich hab jetzt schon gegooglet wie verrückt aber das Prinzip immernoch nich verstanden :uhm:

 

[Stefan]

AW: Div-Box ca. 1000 Pixel weiter unten anordnen

@sokie: diese Lösung hört sich gut an und scheint in Deinem Beispiel auch perfekt zu funktionieren. Ich werde es morgen in Ruhe mal probieren. Bin gespannt! DANKE!

Es funktioniert tatsächlich genau so, wie ich es vorhatte. Perfekt. Siehe z. B. :

 

[sokie]

AW: Div-Box ca. 1000 Pixel weiter unten anordnen

hmm...ich hab jetzt schon gegooglet wie verrückt aber das Prinzip immernoch nich verstanden :uhm:

ich versuche da mal auf ein einfaches runterzubrechen.
hier erstmalder ganze code den es braucht:

  <script src="jquery.js"></script>
  
  <script>
  $(document).ready(function(){
    myHTML = '<div id="twitterHinweis"><a href="http://twitter.com/PSDTutorials_de" target="_blank"><img border="0" src="http://www.psd-tutorials.de/images/twitter.png" /></a></div>';
    $("#bilder img:eq(2)").before(myHTML);
  });
  </script>

im headbereich wird das ganze eingebunden, das heisst erstmal,dass man es praktisch in das template packen kann,und es nicht in wechselnden Inhalte setzen muss (also einmal für alle seiten)
1.

$(document).ready(function(){

heisst, dass die funktion erst ausgeführt wird, wenn das dokument fertig geladen hat - vergleichbar mit window.onload = function(){...

2.

myHTML = '<div id="twitterHinweis"><a href="http://twitter.com/PSDTutorials_de" target="_blank"><img border="0" src="http://www.psd-tutorials.de/images/twitter.png" /></a></div>';

hier habe ich in myHTML festgelegt, was später nach dem 2. Bild des Tutorials einglendet werden soll.

3.

$("#bilder img:eq(2)").before(myHTML);

das ist eine ziemlich komplexe Sache, für die jquery's slogan steht "weniger schreiben - mehr machen"
$("#bilder img") ist ein selektor, wie er auch in css vorkommt, wenn man alle Bilder(img) im container mit der id #bilder ansprechen will:
css pendant:

  #bilder img {formatierungen}

dabei werden alle img in der Reihenfolge ihres Vorkommens im HTML in ein Array -beginnend bei 0 für das erste- gespeichert.

:eq(2)

heisst dabei: das img, das in diesem Array den index = 2 hat (also das dritte) und füge

.before(myHTML);

VOR diesem (dritten Bild) meinen code ein, der in myHTML gespeichert ist.
das alles also erst NACHDEM die Seite komplett geladen ist.
ich hoffe das kann man so nachvollziehen