WebSite X5Help Center

 
Peter B.
Peter B.
User

Accordion Text mehrspaltig  de

Autor: Peter B.
Visitado 686, Seguidores 2, Compartilhado 0  

Hat jemand eine Lösung, wie ich den Text im "Accordion Text"

https://peters-liederbox.de/liederauswahl-mit-text-und-musik.html

mehrspaltig gestalten kann, so, dass er sich auch in der responsiven Darstellung auf die Seitenbreite anpasst. Alternativ auch eine Lösung mit einzelnen Textbausteinen.

Danke an die, die sich Gedanken machen.

Peter B.

Publicado em
12 RESPOSTAS
Andreas S.
Andreas S.
Moderator
Usuário do mês DE

Ich glaube ich weis was du meinst, aber nein, man kann die Liste nicht 2 oder mehrspaltig erstellen. Du kannst nur 2 Accordeon Text Objekte auf 2 Spalten legen.

Ler mais
Publicado em de Andreas S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT

(It > De)  ... Versuchen Sie, die Tabelle mit zwei Spalten auf einer ausgeblendeten Seite zu erstellen, ohne Grafiken anzuwenden, und importieren Sie diese Seite dann mit dem in Accordion eingefügten IFRAME-Code...

.

ciao

-------------------------------

... oder mit einem Klick mit einer meiner Erfindungen mit EXTRA-Code (elastisch/reaktionsfreudig):

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Peter B.
Peter B.
User
Autor

Dieser Vorschlag gefällt mir sehr gut.
Welchen Programmcode muß ich dafür nehmen und wo muss ich den Programmcode einbinden?

Danke im Voraus!
Peter

Ler mais
Publicado em de Peter B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT

(It > De) ... wenn Sie sich auf meine Erfindung beziehen, die Sie im vorherigen DRUCK (STAMP) gesehen haben, wird auch eine doppelte Erfindung von mir angewendet, wobei offset  der Karte immer sichtbar ist, was ihre Benutzerfreundlichkeit verbessert ...
... der Audio-Button "[Du und ich im Mondenschein]" auf dem letzten Tab ist mit meinem Code gekoppelt, um das Video in der Showbox zu öffnen und mit automatischem Start...
...mein Code ist ausschließlich auf die aktuelle Struktur des Accordion  Ihrer Seite ausgerichtet ...
...mein Code lässt sich mit nur einem einfachen Kopieren/Einfügen anwenden...

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT


...das ist mein Code für dich:

<script>
$(document).ready(function () { //K>;
divK = '<div class="divK1" style="position:relative;width:50%;height:auto;background-color:seashell;float:left"></div><div class="divK2" style="position:relative;width:50%;height:auto;background-color:lavender;float:left">■</div>';
xK =$( ".accordion_el" );
nK = 0;hK = $("#imStickyBar").height() + 10;
$(xK).each( function() { //K1>;
nK += 1;var idK = "anchorK"+nK;
$(this).prepend('<a id="'+idK+'" class="anchorK" style="position:relative" ></a>');
$(".anchorK").css("top",- hK+"px");
var anchorK = "#"+ idK;
$(this).click(function(){//K2>;
var classK = $(this).attr("class");
if(classK.indexOf("selected") == -1 ){//K3>;
x5engine.utils.location("#anchorK1", null, false);
} else {
setTimeout(function(){ //K4>;
x5engine.utils.location(anchorK, null, false);
}, 500); //K4<<;
}//K3<<;
})//K2<<;
$(this).find(".accordion_desc").prepend(divK);
var K =$(this).find('br');
var TotK = parseInt(K.length/2);
$(K[TotK]).text("***");
var KK =$(this).find(".accordion_desc");
var strK = $(KK).text();var taglioK = "***";
var indextaglioK = strK.indexOf(taglioK);
if (indextaglioK !== -1) {//K5>;
var strK1 = strK.substring(1, indextaglioK);
var strK2 = strK.substring(indextaglioK).split("***").join("");
}//K5<<;
var strK1 = strK1.split("•").join("<br>•");
var strK2 = strK2.split("•").join("<br>•");
var strK2 = strK2.split("Und ein Lied als Beispiel:").join("<br> - Und ein Lied als Beispiel:");
var strK2 = strK2.split(" Du und ich im Mondenschein").join("");
$(this).find('.divK1').html(strK1);
$(this).find('.divK2').html(strK2);
var brK1 = $(this).find(".divK1 br");$(brK1[0]).hide();
var brK2 = $(this).find(".divK2 br");$(brK2[0]).hide();
$(this).find('.accordion_text ').hide();
}); //K1<<;
//------------------------------------------
$(".accordion_button").attr("onclick","$('#imShowBox > div > iframe').attr('allow','autoplay');x5engine.imShowBox({ media:[{type:'iframe', url:'https://www.youtube.com/embed/shDf-OSWPYA' , width: 1920, height: 1080}]}, 0);ShowBoxK()")
//------------------------------------
}); //K<<;
//------------f K6----------------------
function ShowBoxK(){//K6>;
setTimeout(function(){ //K7>;
$('#imShowBox > div > iframe').attr('allow','autoplay');
k = $("#imShowBox > div > iframe").attr("src")
$("#imShowBox > div > iframe").attr("src", k+"?autoplay=1&enablejsapi=1")
}, 600); //K7<<;
} //K6<<;
</script>

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT

... Sie benachrichtigen mich, wenn Sie den Code angewendet haben, damit ich es überprüfen kann...
...wenn es aufgrund der Seitenlatenz zufällig nicht funktioniert, werden wir versuchen, eine Zeitverzögerung anzuwenden...

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT

...Ich habe es überprüft und Sie haben den Code korrekt angewendet...
...das Problem könnte davon abhängen, was ich zuvor gesagt habe:

‪ KolAsim ‪ ‪
... ... ... ...wenn es aufgrund der Seitenlatenz zufällig nicht funktioniert, werden wir versuchen, eine Zeitverzögerung anzuwenden...
... ...Ich werde die Verzögerung anwenden und dann den Code posten...

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT

... OK ... ich habe eine Verzögerung von 3 (drei) Sekunden angewendet
ritardoK = 3;

... Ersetzen Sie den vorherigen Code durch diesen aktualisierten:

<script>
/** -- text Accordion WSx5 in due colonne by KolAsim -- **/
$(document).ready(function () { //K>;
ritardoK = 3;
setTimeout(function(){//K0>;
divK = '<div class="divK1" style="position:relative;width:50%;height:auto;background-color:seashell;float:left"></div><div class="divK2" style="position:relative;width:50%;height:auto;background-color:lavender;float:left">■</div>';
xK =$( ".accordion_el" );
nK = 0;hK = $("#imStickyBar").height() + 10;
$(xK).each( function() { //K1>;
nK += 1;var idK = "anchorK"+nK;
$(this).prepend('<a id="'+idK+'" class="anchorK" style="position:relative" ></a>');
$(".anchorK").css("top",- hK+"px");
var anchorK = "#"+ idK;
$(this).click(function(){//K2>;
var classK = $(this).attr("class");
if(classK.indexOf("selected") == -1 ){//K3>;
x5engine.utils.location("#anchorK1", null, false);
} else {
setTimeout(function(){ //K4>;
x5engine.utils.location(anchorK, null, false);
}, 500); //K4<<;
}//K3<<;
})//K2<<;
$(this).find(".accordion_desc").prepend(divK);
var K =$(this).find('br');
var TotK = parseInt(K.length/2);
$(K[TotK]).text("***");
var KK =$(this).find(".accordion_desc");
var strK = $(KK).text();var taglioK = "***";
var indextaglioK = strK.indexOf(taglioK);
if (indextaglioK !== -1) {//K5>;
var strK1 = strK.substring(1, indextaglioK);
var strK2 = strK.substring(indextaglioK).split("***").join("");
}//K5<<;
var strK1 = strK1.split("•").join("<br>•");
var strK2 = strK2.split("•").join("<br>•");
var strK2 = strK2.split("Und ein Lied als Beispiel:").join("<br> - Und ein Lied als Beispiel:");
var strK2 = strK2.split(" Du und ich im Mondenschein").join("");
$(this).find('.divK1').html(strK1);
$(this).find('.divK2').html(strK2);
var brK1 = $(this).find(".divK1 br");$(brK1[0]).hide();
var brK2 = $(this).find(".divK2 br");$(brK2[0]).hide();
$(this).find('.accordion_text ').hide();
}); //K1<<;
//------------------------------------------
$(".accordion_button").attr("onclick","$('#imShowBox > div > iframe').attr('allow','autoplay');x5engine.imShowBox({ media:[{type:'iframe', url:'https://www.youtube.com/embed/shDf-OSWPYA' , width: 1920, height: 1080}]}, 0);ShowBoxK()")
//------------------------------------
}, ritardoK * 1000); //K0<<;
}); //K<<;
//------------f K6----------------------
function ShowBoxK(){//K6>;
setTimeout(function(){ //K7>;
$('#imShowBox > div > iframe').attr('allow','autoplay');
k = $("#imShowBox > div > iframe").attr("src")
$("#imShowBox > div > iframe").attr("src", k+"?autoplay=1&enablejsapi=1")
}, 600); //K7<<;
} //K6<<;
</script>

.

ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Peter B.
Peter B.
User
Autor

Hallo KolAsim,

der Code funktioniert einwandfrei, allerdings ist die mehrspaltige Anordnung bei der responsiven Darstellung unter 500px nicht mehr so sinnvoll und wird auch unübersichtlich.

Eine 1spaltige Darstellung bei einer Auflösung unter 500px wäre wünschenswert.

Ist das noch möglich?

Peter

Ler mais
Publicado em de Peter B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT

Hallo, ...mir ist aufgefallen, dass der Unterschied zwischen den Haltepunkten (breakpoint) minimal ist; ...bei 460 Pixeln  gibt es keine Leseprobleme...

ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪