Funktion , Seite erweitern auf und zuklappen mit + plus / - minus
Autor: Michael B.
Besucht 2877,
Followers 2,
Geteilt 0
Ist es möglich mit der neuen Version das auf und zuklappen von erweiterten Seiteninhalten mit plus/minus zu realisieren?
Beispiel dazu, siehe auf
Gepostet am
Nein, so ein Objekt oder Widget gibt es nicht. In den älteren Versionen hatte man auch per Code ein Accordeon Skript einfügen müssen. (https://jqueryui.com/accordion/)
Schade, dass man das Design nicht ändern kann, oder habe ich da etwas übersehen?
Das Design ist selber zu stylen per CSS Code. Im anderen Forum gibt es zwar eine einfachere Möglichkeit wo man nur einmal einen Code eingibt und sonst alles über Text-Objekte machen kann. Allerdings nur für angemeldete User.
Hast du eventuell ein Link dazu?
Hier der
LINK
Vielen Dank, aber mit Anleitung komme ich nicht so richtig klar, da die dort genannten Schritte nicht zu der V 13 passen. Ich ist z.B. "Seo&Code Reiter "Erweitert" nicht unter "4", sondern unter "1" Erweitert. Schade, aber trotzdem vielen Dank für eine Mühe.
Wo ist da das Problem? Müsste auch in der V14 gehen und eben unter "1" statt unter "4" !
Ich habe die V 13 nicht V 14.
....das Thema ist doch eine Erweiterung von X5 V1x wert!...
Incomedia:
Ist der Wunsch "den Entwicklern" bekannt?
Vielleicht bereits in Planung?
Träume ruhig weiter.
Wiesooooo ist doch schon eingebaut oder? LINK
Woooo?
Autor
Hallo Andreas,
ich habe mich jetzt unter
https://unofficialwsx5.de/wsif/index.php/CategoryList/
registriert.
Wo kann ich den Code für die nachfolgende Einstellung, mit dem aufklappbaren Fenster finden?
http://www.webdesign-markersdorf.at/gallerie/accordeon.html
Würde mich über eine Nachricht freuen, da mich dieses Thema sehr interessiert.
Danke vorab.
Füge diesen Code unter -> Sitemap -> Deine Seite -> Eigenschaften -> Erweitert -> Vor dem /Head ein:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script> $( function() { $( "#accordion" ).accordion({ collapsible: true }); } ); </script>
<script>
$(document).ready(function() { $("div[id^='msacc']").parent().addClass("msaccordion"); $(".msaccordion div[id^='imCellStyle_'], .msaccordion div[id^='imCellStyleDescription']").css("display", "none"); $(".msaccordion div[id^='imCellStyleTitle_']").each(function() { $(this).prepend("<span class='symFaq'>+ </span>"); $(this).parent().css("min-height", $(this).outerHeight(true)); }); $(".msaccordion div[id^='imCellStyleTitle_']").click(function() { var $this = $(this); var $opentab = $(".msaccordion div[id^='imCellStyleTitle_']").next(':visible'); $opentab.prev().nextAll().hide("blind", 500, function() { //effekt blind, drop, fade, slide $opentab.prev().css("background-color", "#0190ca").find("span").html("+ ") }); if ($this.next().is(":hidden")) { $this.nextAll().show("blind", 500); //effekt: blind, drop, fade, slide $this.css("background-color", "#575757").find("span").html("– "); } }); });
</script>
Die Farben im Balken kannst Du jeweils unter "background-color", "#Deine Farbe" abändern.
Ziehe nun ein Textobjekt in den Seiteninhalt und füge einen Anker hinzu.
Benenne den Anker msacc1 (für jedes weitere Textobjekt msacc2 usw.)
Fülle nun dein Text-Objekt mit deinem gewünschten Text auf.
Gehe nun für das Textobjekt zum Objektstil, hier kannst Du die Hintergrundfarbe einstellen sowie unter dem Reiter "Text" -> Mein Inhalt den Klappbalken beschriften.
Autor
Hi Martin,
schön wieder von Dir zu hören.
Also das muss ich mir gleich heute Abend mal anschauen. Mit der Feststellung des Haeders hatte ja neulich auch schon nach Deiner Anleitung super funktioniert.
Danke schol mal vorab.
Danke auch für den Code.
Aber was meinst du mit
"Ziehe nun ein Textobjekt in den Seiteninhalt"
Na die normalen Textobjekte da wo man Texte reinschreiben kann. Die kannst Du ja von der rechten Seite im Programm mit der Maus reinziehen.
Hier ist die Anleitung von mir. LINK
Hallo Michael
Martin meinte du sollst auf der gewünschten Seite ein Textobjekt einfügen. Unter Stil "Objektstil" einen Titel mit dem Inhalt eingeben, So wie zB. Weiter lesen. Dort kannst du dann auch noch die Farbe, Hintergrund und Schrift einstellen. So schwierig ist es nicht, ich habe es auch hinbekommen, zwar nur mit hilfe der anderen.
Gruss Cookie
Autor
Hallo Martin, leider zeigte Dein Quellcode, zumindest bei mir, keinen sichbarten Erfolg. Zunächst einmal schade für mich.
Bei dem Quellcode von Dir Andreas habe ich zunächst auf Anhieb einen sichtbaren Erfolg gehabt. Die Tabs lassen sich öffnen und schließen, aber...
So wie es bei den Objekten halt üblich ist, desto meht Textzeilen, Bilder usw. man in ein Objekt einfügt, um so länger erscheint auch das Objekt, sprich die einzelnen Tabs sind von Beginn an "dementsprechend weit auseinander gezogen". Also nicht so schön wie in Deinem Beispiel, dass zunächst die Tabs alle sauber untereinander stehen und erst beim anklicken den gewünschten Inhalt anzeigen.
Als Beispiel siehe das beigefügte Bild.
Ich glaube, dass ich nicht so weit vom gewünschten Ergebnis entfert bin. :-)
Hast Du Andreas noch eine Idee?
Autor
Hallo Andreas,
hier noch ein Beispiel als Bild im Anhang. Der Link ist hier noch schwarz dargestellt, was ich ja noch im Quellcode ändern kann.
Hallo Michael
Ich habe es auf einer Zeile eingeschränkt damit es besser aussieht. Siehe mal hier
Den +weiterlesen kannst du wie oben beschrieben unter Stil, Titel verändern und nicht im Quellcode. Den Code lass nur so wie er ist!
Autor
Klar, kann ich es auch auf eine Zeile bringen. Das Problem ist halt einfach, dass das Objekt aufgrund der Textinhalte den Platz beansprucht. Das Beispiel mit dem Bild macht es deutlich. Der Platz für die Bildgröße ist fix reserviert. Bit dem Tab kann ich das Bild lediglich anzeigen oder nicht anzeigen. Der Platzhalter bleibt mir wie gesagt immer erhalten (entweder eine weiße Fläche oder beim "+" ein Bild, Text oder was auch immer).
Autor
Aber trotzdem kompliment zu Deiner HP, bei Dir funktioniert der Tab auch einwandfrei, bei mir leider nicht. :-)
Hast du mal ein Link zu deiner Seite?
Autor
So sieht es jeweils in meinem Website Browser aus:
Bild = zugeklappt
Autor
So sieht es jeweils in meinem Website Browser aus:
Bild = aufgeklappt
Autor
Hier ist der Platzhalter sehr deutlich zu erkennen und hat somit in der Funktion, nämlich nur bei Bedarf das Objekt zu öffen, eindeutig verfehlt.
Stimmt!
Hier im Quellcode must du was ändern, Sorry.
Fett muss geändert werden!
$opentab.prev().css("background-color", "#FFFFFF").find("span").html("+ ") }); //Hintergrundfarbe für eingeklappten Tab if ($this.next().is(":hidden")) { $this.nextAll().show("blind", 500); //effekt: blind, drop, fade, slide $this.css("background-color", "#FFFFFF").find("span").html("– ");
Autor
Sorry, es geht doch nicht um die Schrift. Es geht einfach darum, dass der Abstand (Platzhalter), siehe meine Bilder, so groß ist wie der Objektinhalt, also so als würde vornerein der Text dort stehen. Also wäre dann das auf- und zuklappen dann weniger effektiv.
Wie gross ist bei dir der Aussenrand? Hast du den unten auf 50 oder 70 eingestellt? Nur so mit einem Foto ist es schwer zu verstehen. Hast du keine Testseite? Und schreibe mal den Text ein damit es förmlich vorstellbarer ist.
Autor
Oder muss ich noch etwas an den Scrippt ändern?
Bei mit unter Startseite>>>Eigenschaften>>>Erweitert
<style>
.msaccordion div[id^='imCellStyleTitle_']{
cursor:pointer;
}
span.symbol {
font-family:"Courier New", Courier, monospace;
font-weight:bold;
}
</style>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("div[id^='msacc']").parent().addClass("msaccordion");
$(".msaccordion div[id^='imCellStyle_'], .msaccordion div[id^='imCellStyleDescription']").css("display", "none");
$(".msaccordion div[id^='imCellStyleTitle_']").each(function() {
$(this).prepend("<span class='symFaq'>+ </span>");
$(this).parent().css("min-height", $(this).outerHeight(true));
});
$(".msaccordion div[id^='imCellStyleTitle_']").click(function() {
var $this = $(this);
var $opentab = $(".msaccordion div[id^='imCellStyleTitle_']").next(':visible');
$opentab.prev().nextAll().hide("blind", 500, function() { //effekt blind, drop, fade, slide
$opentab.prev().css("background-color", "#FFFFFF").find("span").html("+ ")
}); //Hintergrundfarbe für eingeklappten Tab
if ($this.next().is(":hidden")) {
$this.nextAll().show("blind", 500); //effekt: blind, drop, fade, slide
$this.css("background-color", "#FFFFFF").find("span").html("– ");
}
});
});
</script>
Funktioniert das erst ab V 14? In der V 13 bewirkt das jedenfalls gar nichts
"background-color", "#FFFFFF" ist weiss, die Frage ist ob du das willst?
Ich habe es genau so!
Autor
Hallo Cookie,
siehe unter
www.quartettverein-bocholt.de
direkt auf der Startseite weiter unten.
Hier habe ich ein Bild hinterlegt. Der Platzbedarf zwischen den Objekten ist genau so groß wie das Bild selbst auch ist. Dabei sollte der große Zwischenraum ja nicht sein!!!
Aussenrand sagt mir leider im Moment auch nichts.
Autor
Bei Deiner HP ist der Zwischenraum ja nicht da, und der Text erscheint ja erst beim aufklappen, ansonsten geht ja alles bei Dir nahtlos über.
Das mit dem Anker wie Karl es beschrieben hat, hast du gemacht? Das steht auch in der Anleitung vom Andreas.
Wenn du dein Bildobjekt markierst hat es oben links einen Button "Stil" da drauf klicken und dann ganz unten ist Aussenrand... und Innenrand...
Autor
Die Ränder stehen auf 3
Mit dem Anker würde ja ansonsten überhaupt nicht funktionieren.
Füge mal ein Textobjekt ein, nicht in der gleichen Zeile. Ist es dann noch immer so?
Autor
Hallo Cookie,
Du wirst es nichz glauben, aber wenn ich eine ganz neue Seite erstelle und step bei step die vorhandene Objekte einer bestimmten Seite wieder einfüge, scheint es tatsächlich zu funktionieren. Wahrscheinlich muss man sich auch nur auf Zeilen bewegen, also ohne weitere Unterteilungen!
Ich danke Dir zunächst für Deine Geduld. Ich probiere es noch mal weiter und mal sehen wie weit ich komme. ;-)
Also auf eine vorhandene Seite mal eben einen Tab hinzuzufügen scheint aussichtslos zu sein.
Michael
Super
Ab und zu ist der Wurm drin ...
Eigentlich musst du Andreas danken ohne ihn und andere im anderen Forum hätte ich vieles nicht hin bekommen. Da gibt es noch andere coole Sachen...
Du wirst immer besser solltest deine Seite aber noch Responsive machen
Autor
Ja Cookie, dass mit Andreas ist natürlich richtig. Aber trotzdem ist es ja nicht selbstverständlich, dass jemand so wie Du, sich auch mit diesem Thema auseinander setzt, zumal es bei Dir ja alles läuft.
Das Thema "Responsive" gehe ich eher etwas zurückhaltend an, da ich nicht die Pro Version habe und es hier an der Feineinstellung fehlt. Bei mir werden die Seiten 1:1 auf allen Ausgabegeräten soweit korrekt angezeigt, was will man mehr. Auf einem Handy kam es beispielsweise bei der Responsiven Einstellungen, insbesonders bei den verwendeten Grafiken zu unschönen Verschiebungen.
Die Ansicht auf dem Händy ist sicherlich auch nett, aber wer schaut sich zum Beispiel Deine Seiten unbedingt auf einem Handy an, wenn er eine Reise buchen möchte.
Wenn ich unterwegs in den Urlaub bin und eine Übernachtung suche schaue ich mir die Hotels immer auf dem Handy an. Bei dir ist es nicht so wichtig...
Autor
Da hast Du natürlich auch wieder recht.
Hallo,
das ist genau das, was ich gesucht habe, um eine "FAQ" Seite zu erstellen.
Ich habe alles wie oben beschrieben gemacht, es funktioniert auch, bis auf einen Fehler.
Ich habe die Frage ins Textfeld eingegeben und die Antwort dazu in Objektstil, Text, Inhalt.
Der Zustand ist wie folgt: es wird nur die Frage angezeigt, das ist korrekt.
Wenn man mit der Mouse auf die Frage geht ohne zu klicken, kommt die Antwort, das ist so auch o.K.
allerdings geht die Antwort nach oben und legt sich über die Frage, so dass sie zum einen nicht lesbar ist,
weil 2 Texte übereinander liegen und eben nach oben und nicht nach unten geht.
Wo ist da der Fehler?
Ich möchte mehrere Fragen dort beantworten und habe ca. 20 Textfelder untereinander angelegt.
Ich habe mehreres ausprobiert. Alle Textfelder untereinander ohne Platz dazwischen und mit Platz dazwischen,
ohne Veränderung, die Antwort geht immer nach oben und verdeckt die Frage.
Kannst du das mal Online zeigen?
Sorry, das geht leider nicht, weil die Seiten noch nicht fertig sind und nur auf meinem Rechner sind.
Ich habe versucht einen Screenshot zu machen, hat bei dem 1. Foto in dem nur die Fragen angezeigt werden auch geklappt. Beim 2. Foto in dem die Antworten angezeigt werden ging es aber nicht, weil die Antworten nur angezeigt werden, solange sich der Mousezeiger auf der Frage befindet. Nehme ich den Mouse weg, ist auch die Antwort nicht mehr zu sehen. Auch ALT + Druck funktioniert nicht, selbst wenn sich die Antwort in dem Moment auf dem Bildschirm befindet, auf dem Druck ist sie nicht zu sehen.
Also habe ich den Mousezeiger drauf gelassen und mit meiner Kamera eine Aufnahme gemacht.
Beide Fotos lege ich mal in den Anhang.
Die Antwort
2. Foto
Es stimmen anscheinend nicht die Selektoren mit deinem PRojekt zusammen. So kann ich leider nicht sagen was nicht stimmt. Du kannst mir aber das Projekt hochladen um es zu testen. LINK
Ich nehme mal an, Du benötigst die IWZIP-Dateien.
Sollte jetzt da sein
ICh habe es mir angeschaut und du hast das Prinzip nicht ganz verstanden.
Du musst die Frage in den Titel des "STILS" einbauen und die Antwort ganz normal im Text-OBjekt. Du hast aber nichts im Titel stehen sondern im Beschreibungstext und da gehört die Frage nicht hin.
Sorry, aber habe ich tatsächlich nicht verstanden und verstehe es jetzt ehrlich gesagt immer noch nicht.
in den Titel des "STILS" ? Wo ist der Titel des STILS ?
Was auch immer es war. Ich habe den Code genommen, der auf dieser Seite von Karl B. gepostet wurde, damit hat es nicht funktioniert. Dann habe ich den Code aus dem anderen Forum genommen, der hat sofort ohne Probleme funktioniert. Also bin ich scheinbar doch nicht ganz so unfähig, wie ich dachte.