Hallo!
Ich packe es einfach nicht einen DIV Element mit JQuery zu terminieren. Damit ihr versteht was ich meine, muss ich leider ein wenig ausholen.
Es geht um Wordpress bzw. dass ich dafür grade ein Theme baue.
Ich habe, folgenden Code (durch den Seiten Editor erzeugt):
Alle Elemente mit der Klasse SliderGallery werden in einen DIV gepackt.
Das macht dieser Code:
Das Resultat ist nun folgendes:
Nun entferne ich mit
noch den <p> Tag der den DIV Container umschießt.
Das war der einfache Teil, nun kommt mein Problem:
Der DIV mit der Klasse entry-content soll vor dem DIV owl-carousel aufhören und danach wieder anfangen.
Gewünschtes Resultat:
Hab es mit
versucht, aber das er hebt den DIV einfach nicht auf.
Kurz noch warum ich das ganze so aufbauen möchte:
entry-content hat eine Breite von 80% der DIV owl-carousel soll aber 100% Seitenbreite haben. Viewport geht nicht, da ich sonst ja einen horizontalen Scroll Balken habe.
Bin um jede Idee dankbar.
Grüße
Christian
Ich packe es einfach nicht einen DIV Element mit JQuery zu terminieren. Damit ihr versteht was ich meine, muss ich leider ein wenig ausholen.
Es geht um Wordpress bzw. dass ich dafür grade ein Theme baue.
Ich habe, folgenden Code (durch den Seiten Editor erzeugt):
HTML:
<div class="entry-content">
<p>Ich bin der Text</p>
<p>Noch mehr Text</p>
<p>
<img class="SliderGallery alignright wp-image-408 size-medium" src="bild01.jpg">
<img class="SliderGallery alignright wp-image-408 size-medium" src="bild02.jpg">
<img class="SliderGallery alignright wp-image-408 size-medium" src="bild03.jpg">
<img class="SliderGallery alignright wp-image-408 size-medium" src="bild04.jpg">
</p>
::after
</div>
Alle Elemente mit der Klasse SliderGallery werden in einen DIV gepackt.
Das macht dieser Code:
Code:
$(".SliderGallery").wrapAll("<div class='owl-carousel'>");
Das Resultat ist nun folgendes:
HTML:
<div class="entry-content">
<p>Ich bin der Text</p>
<p>Noch mehr Text</p>
<p>
<div class='owl-carousel'>
<img class="SliderGallery alignright wp-image-408 size-medium" src="bild01.jpg">
<img class="SliderGallery alignright wp-image-408 size-medium" src="bild02.jpg">
<img class="SliderGallery alignright wp-image-408 size-medium" src="bild03.jpg">
<img class="SliderGallery alignright wp-image-408 size-medium" src="bild04.jpg">
</div>
</p>
:: after
</div>
Nun entferne ich mit
Code:
$('.owl-carousel').unwrap('<p>');
Das war der einfache Teil, nun kommt mein Problem:
Der DIV mit der Klasse entry-content soll vor dem DIV owl-carousel aufhören und danach wieder anfangen.
Gewünschtes Resultat:
HTML:
<div class="entry-content">
<p>Ich bin der Text</p>
<p>Noch mehr Text</p>
</div>
<div class='owl-carousel'>
<img class="SliderGallery alignright wp-image-408 size-medium" src="bild01.jpg">
<img class="SliderGallery alignright wp-image-408 size-medium" src="bild02.jpg">
<img class="SliderGallery alignright wp-image-408 size-medium" src="bild03.jpg">
<img class="SliderGallery alignright wp-image-408 size-medium" src="bild04.jpg">
</div>
<div class="entry-content">
[hier steht dann wieder was]
</div>
Hab es mit
Code:
$('.owl-carousel').before('</div>');
$('.owl-carousel').after('<div class="entry-content">');
Kurz noch warum ich das ganze so aufbauen möchte:
entry-content hat eine Breite von 80% der DIV owl-carousel soll aber 100% Seitenbreite haben. Viewport geht nicht, da ich sonst ja einen horizontalen Scroll Balken habe.
Bin um jede Idee dankbar.
Grüße
Christian