Danke dir!
Nun schaut es so aus...
es erscheint der collapsible Balken umgekehrt, also geöffnet, glücklicher Weise mit Bild und kann erstmals mit zwei Mausklick zusammenklappen und dann mit jeweils einem Klick öffenen und schließen.
Danke dir!
Nun schaut es so aus...
es erscheint der collapsible Balken umgekehrt, also geöffnet, glücklicher Weise mit Bild und kann erstmals mit zwei Mausklick zusammenklappen und dann mit jeweils einem Klick öffenen und schließen.
ok. danke dir, alles klar
JA #10 habe ich ausprobiert und ergibt das Gleiche wie immer. Es klappt nur der Anfang vom responsiven Rahmen des Bildes auf. html-seminar.de/woltlab/attachment/1972/
wie meinst du das bzw. wie ist das um zu setzten?
Mit Java kenne ich mich nicht wirklich aus. Daher bitte um genauere Beschreibung. Checke das nicht einfach so #10, sorry
Ansonsten ist alles von mir hier protokolliert, was ich bis jetzt gemacht, probiert habe.
das habe ich von https://www.w3schools.com/howto/howto_js_collapsible.asp so übernommen
Ja, der html drupal code für responsive Bildeinstellung
<respimg fid="709" figure="center" inner-height="150" /> funktioniert außerhalb vom collapsiblen content ohne weiters.
Nun lässt sich der collapsible Balken leider nicht öffnen, oder ich habe das Script falsch eingefügt?
Habe es im JS-Injector so integriert...
document.addEventListener('DOMContentLoaded', function() {
// var coll = document.getElementsByClassName("green-collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("green-active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
});
habe das Javascript extra im JS-Injector unter den Drupal-Configurationen hinzugefügt.
Interessanterweise wird das Bild im Handymodus etwas zeitverzögert (aslo auf meinem Android-Smartphone) geladen, aber eben nicht am Bildschirm eines PCs/Laptops (mit Firefox, Chrome, Edge ausprobiert) oder Tablett.
Hatte zuerst das Script generell auf der HTML-Seite , aber so hats garnicht nicht funktioniert. Erst mit dem JS-Injector hats dann geklappt/augeklappt.
CSS:
.green-collapsible {
background-color: #399f31;
color: white;
cursor: pointer;
padding: 2px;
width: 100%;
border: 1px solid #ffffff;
outline: none;
font-size: 20px;
text-align: center;
}
.green-active, .green-collapsible:hover {
background-color: #ea7600;
}
.green-content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: white;
}
.green-collapsible:after {
content: "\02795"; /* Unicode character for "plus" sign (+) '\02795` */
font-size: 8px;
color: white;
float: left;
margin-left: 5px;
}
.green-active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
HTML:
<button class="green-collapsible"><b>GO GREEN - Netzwerk</b></button>
<div class="green-content"><br/>
<p>123</p>
<a href="https://docs.google.com/forms/d/e/1FAIpQLScwy03Fu35rlnLarc6lGazLC2C4xlqy54nb3NTB9hNynGe5NQ/viewform"><respimg fid="709" figure="center" inner-height="150" /></a>
</div>
Verwende Drupal 7.64
Hallo,
habe mir mit diesem Javascript von https://www.w3schools.com/howto/howto_js_collapsible.asp
ein paar aufklappbare Balken erstellt, nur leider werden keine Bilder <respimg fid="750" figure="right" /> aufgeklappt. Diese werden dann leider nicht angezeigt. Videos zB.:<respvideo src="https://youtu.be/YUWP2SBrH1U?list=PLJtNc5fbAOY9qW3ExrLxawEjmZdQ_zVMj" /> funktionieren aber.
Vielleicht kann mir da wer weiterhelfen. Hier das Javascript
var coll = document.getElementsByClassName("green-collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("green-active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
Bitte um eine kleine Hilfe: Erstelle gerade eine PHP-Seite das eine Textdatei, wo ich immer meine Kurse angebe ladet und verlinken soll wenn ich einen bestimmten Kurs angebe, wohin man dann zu seiner genaueren Beschreibung gelangt. Habe nach Lösung lange im Netz gesucht, aber bin damit nicht schlauer geworden.
<span class="syntaxdefault">$fd </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> fopen </span><span class="syntaxkeyword">(</span><span class="syntaxstring">"Kochkurse.txt"</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxstring">"r"</span><span class="syntaxkeyword">);</span><span class="syntaxdefault"> <br />while </span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$inhalt </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> fgets </span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$fd</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> 4096</span><span class="syntaxkeyword">))</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault"> list </span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$datum</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> $kurs</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> $beschreibung</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> $ort</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> $preis </span><span class="syntaxkeyword">)</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> explode </span><span class="syntaxkeyword">(</span><span class="syntaxstring">"|"</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> $inhalt</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault"> echo $datum</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxdefault"> if </span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$kurs </span><span class="syntaxkeyword">===</span><span class="syntaxstring">"La cuisine équitable 1"</span><span class="syntaxkeyword">)</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault"> echo </span><span class="syntaxstring">"<b><a href=\"http://www.kochenmitcharakter.at/Kochkurse#La1\">$kurs</b></a><br />"</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">}</span><span class="syntaxdefault"> else </span><span class="syntaxkeyword">{</span><span class="syntaxdefault"> echo </span><span class="syntaxstring">"<b>$kurs</b>"</span><span class="syntaxkeyword">;}</span><span class="syntaxdefault"> <br /><br /> echo </span><span class="syntaxstring">"<i>$beschreibung</i><br />"</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault"> echo </span><span class="syntaxstring">"$ort<br />"</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault"> echo </span><span class="syntaxstring">"$preis<br />"</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault"> echo </span><span class="syntaxstring">"<hr />"</span><span class="syntaxkeyword">;<br />}</span><span class="syntaxdefault"> </span>
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.