Größe eines Akkordeon-Widgets frei definieren

christian-juhasz schrieb am 09.01.2018 um 23:32 Uhr

Servus,

 

in in meinem aktuellen Projekt möchte ich dieses Akkordeon-Widget benutzen.

Dabei soll sich das Widget über das komplette Sichtfeld erstrecken. Das Format des Widgets stimmt allerdings nicht mit dem des Sichtfeldes überein. Eigentlich kein Problem. Einfach das obere, mittlere Quadrat geschnappt und nach oben gezerrt und hinterher Bilder mit dem passenden Format eingefügt.

 

Denkste! Nach dem Zerren springt das angezeigte Bild wieder in die Irsprungsform, das Widget an sich hat aber die neue Form. Auch das Lösen des Demobildes und das Einfügen eines eigenen Bildes im dann richtigen Format, bringt nichts. Es wird immer nur der Ursprüngliche Bereich angezeigt, der Rest bleibt transparent.

Mit anderen Widgets habe ich das auch versucht und da hat es wunderbar funktioniert.

Ich habe auch schon im Wifget selber versucht die Seitengeössen dem Sichtfeld anzupassen, doch ohne Erfolg.

 

Was mache ich falsch?

 

Gruss, Chris

 

 

Kommentare

BeRo schrieb am 10.01.2018 um 00:39 Uhr

[...] Nach dem Zerren springt das angezeigte Bild wieder in die Irsprungsform, [...]

Ich hatte keine Probleme, das Widget in einer beliebigen Größe einzustellen...

Einfach am Eckanfasser in die gewünschte Größe ziehen, hier 1.900px breit und gut ist... 😊

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

christian-juhasz schrieb am 10.01.2018 um 06:05 Uhr

Servus BeRo,

die Grösse ändern geht, nur das Seitenverhältnis nicht.

Mach mal eine Größe von 1000x 800 z.B.

 

Chris

BeRo schrieb am 10.01.2018 um 10:05 Uhr

[...] Mach mal eine Größe von 1000x 800 [...]

voila

[...] Grösse ändern geht, nur das Seitenverhältnis nicht. [...]

Das ist korrekt, aber nicht endgültig. 😊

Wenn Du dem WD "verbietest" das Seitenverhältnis für die Ausgabe der Bilder zu berechnen, kannst Du stattdessen eine beliebige Bildhöhe einstellen. In Deinem "Fall" also 800px.

Dazu öffnest Du die JS Steuerdatei "bx_zaccordionc_conf.js", die Du im Verzeichnis "index_htm_files" findest, z. B. mit Notepad++.
Dann änderst Du in Zeile 230 die Zuweisung für die Variable "height1" in 800

Wie schon gesagt, muss Du die Datei nach der Änderung separat speichern und später wieder in das Verzeichnis "index_htm_files" einfügen.

Probier's mal.

Viel Erfolg

 

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

christian-juhasz schrieb am 10.01.2018 um 22:20 Uhr

Servus,

mal wieder 1000 Dank für die Hilfe. Irgendwie werde ich das Gefühl nicht los, dass es nicht das letzte mal war. 😆

Aber ich sehe schon; ganz ohne HTML-Kenntnisse kommt man doch nicht aus. Darum habe ich meine Signatur um den letzten Punkt ergänzt. 😬 Mal schauen, ob da eine Steigerung drin ist.

christian-juhasz schrieb am 10.01.2018 um 22:40 Uhr

Hm, ich habe mich wohl zu früh gefreut.

Ich habe die besagte Zeile geändert, allerdings hat sich nicht das Widget an sich, sondern nur das angezeigte Bild vergrössert.

BeRo schrieb am 10.01.2018 um 22:54 Uhr

[...] allerdings hat sich [...] nur das angezeigte Bild vergrössert. [...]

Wahrscheinlich hast Du übersehen, dass (natürlich) auch der Container für das Widget min. 800px hoch sein muss, damit das große Bild da hineinpasst... 😇
Zieh also den Rahmen für das Widget auf die gewünschte Größe und Du bist Dein Problem los... 😉

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

christian-juhasz schrieb am 10.01.2018 um 23:15 Uhr

Nein, das hab ich nicht übersehen ... daran habe ich nicht mal gedacht. 😆

Und schon hab ich das nächste Problem. Im WD wird das Widget vollflächig angezeigt, auf der Seite dann links und rechts beschnitten, sodass Text fehlt.

BeRo schrieb am 10.01.2018 um 23:33 Uhr

[...] auf der Seite dann links und rechts beschnitten [...]

Dann "sag" dem WD, dass er das lassen soll...

...indem Du das Häkchen aus der markierten Checkbox entfernst. 😋

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

christian-juhasz schrieb am 10.01.2018 um 23:40 Uhr

Ja vedammte Axt, da soll mal ein Noob drauf kommen, dass es dieses Kästchen irgendwo gibt. 😆

Kann ich jetzt nach dem ganzen "Streching" noch irgendwo "rausmessen" oder lesen, wie gross nun die tatsächliche Fläche des angezeigten Einzelbildes ist? Ich möchte ja eigene Bilder verwenden und muss diese noch zurechttrimmen.

 

Ist das irgendwo in der JS-Datei definiert, um wieviel die einzelnen Bilder sich überlappen sollen? Dann brauch ich das ja nur von der Bildschimbreite abziehen.

 

Zuletzt geändert von christian-juhasz am 10.01.2018, 23:45, insgesamt 1-mal geändert.

Windows 7 Pro 64 bit mit SP 1, AMD FX-8530 4.00 GHz, 16 GB DDR4, GTX 1070 8 GB, 2x Lenovo L24Q-10, MAGIX Web Designer 15 Premium, MAGIX Audio & Music Lab Premium, HTML-Level: Depp!

BeRo schrieb am 11.01.2018 um 00:26 Uhr

[...] möchte ja eigene Bilder verwenden und muss diese noch zurechttrimmen. [...]

Das kann ein bisschen tricky werden, weil die Bilder ja im Browser verzerrt dargestellt werden...

Die Originalgröße ist 1060 x 500 px und in der Standardauflösung 530 x 250 px.

Wie Du im Screenshot siehst, habe ich die Bilder direkt im Widget Editor auf 800 x 800 px gesetzt. Mit der Einstellung machen sie bei der Darstellung im Browser einen halbwegs "gesunden" Eindruck. Aber hier ist sicher Experimentieren angesagt...

Viel Spaß dabei 😇

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

christian-juhasz schrieb am 11.01.2018 um 00:31 Uhr

Ich hab jetzt gefunden, um wieviel die Karteikarten sich überlappen. In Zeile 257 tabWidth.

Displaybreite - ((Anzahl der Tabs - 1)*3%)

BeRo schrieb am 11.01.2018 um 00:39 Uhr

[...] In Zeile 257 tabWidth. Displaybreite - ((Anzahl der Tabs - 1)*3%) [...]

Chapeau! 😋

Ich hatte noch nicht nachgesehen, weil ich der Meinung war, dass die zu ermittelnde Größe (Seitenverhältnis) der Bilder als Problem schon genügt... 😉

Also, CU & GN

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

christian-juhasz schrieb am 11.01.2018 um 01:03 Uhr

Auf dem bekannten Link ist das Zwischenergebnis.

Wenn ich jetzt noch wüsste, wie ich die Schrift im zusammengeklappten Zustand hochkant stellen kan ...

Aber das wird eine Baustelle für die nächste Nachtschicht.

N8! Und nochmals 1000 Dank für die Unterstützung.

BeRo schrieb am 11.01.2018 um 17:43 Uhr

[...] Wenn ich jetzt noch wüsste, wie ich die Schrift im zusammengeklappten Zustand hochkant stellen kan [...]

Wenn Du Dir die '"Bastelei" antun willst, geht das am besten mit ein paar Zeilen CSS Code, die Du in das JScript "bx_zaccordionc_conf.js" in Zeile 250 einbaust...😉
------------------------------------

     -moz-transform: rotate(-90deg); -ms-transform:rotate(-90deg);
     -o-transform:rotate(-90deg); -webkit-transform:rotate(-90deg);
     transform:rotate(-90deg);

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

So sieht das im eingebauten Zustand aus:

Der Code berücksichtigt die unterschiedlichen Browser, daher sind mehre Anweisungen nötig.
Leider will der aktuelle Firefox nicht darauf hören, er zeigt den gedrehten Text also brav weiter horizontal ausgerichtet an.
Immerhin ist der Internet Explorer hier folgsamer...

Die im Beispielcode rot unterstrichenen Einstellungen sind Anpassungen, die nicht unbedingt nötig sind.
In Zeile 245 wird der Abstand des gedrehten Textes von der Grundlinie erhöht, auf 100px.
In Zeile 250 wird die gedrehte Schrift größer dargestellt, hier 22px.

Du könntest Dir die ganze Arbeit aber sparen, wenn Du das Widget "Z-Akkordeon 2" benutzt...


Da sind die Titel Texte auf den zusammengeklappten Bildern standardmäßig um -90° gedreht. 🙂

Wenn Du das Widget benutzt, musst Du nur berücksichtigen, dass die Änderungen an der zuständigen JS Steuerdatei dann an der Datei "bx_zaccordionb_conf.js" gemacht werden müssen, also "zaccordionb" statt "zaccordionc".

Noch Fragen? 😉

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

christian-juhasz schrieb am 11.01.2018 um 18:54 Uhr

Danke für die Antwort.

Danke für die Antwort.

Ich werde mich damit mal etwas spielen. Das andere Widget habe ich deswegen nicht genommen, weil es ursprünglich nicht geplant war den Text zu kippen.

Aber ich glaube ich werde jetzt umschwenken auf das andere Widget.

Das nächste Problem, dass jetzt noch aufgetaucht ist, ist dass der Text, wenn man in formatiert, in der Ansicht dann wieder um formatiert wird. D.h. die Schriftart wird wieder auf eine Standardschriftart gesetzt und Absätze die man einfügt werden entfernt. Wo finde ich dafür die Einstellung oder besser den Befehl. Was ich mich noch gefragt habe ist, wo werden denn die Daten gespeichert die ich ein tippe und die angezeigt werden sollen? Also der Text den ich einfüge.

 

BeRo schrieb am 11.01.2018 um 20:58 Uhr

[...] dass der Text, wenn man in formatiert, in der Ansicht dann wieder um formatiert wird. [...]

Das sollte nicht passieren. Ein Test, den ich dazu gemacht habe, zeigt nichts "Verdächtiges"...

[...] Wo finde ich dafür die Einstellung oder besser den Befehl [...]

Der Einbau der eingegebenen Texte in die fertige Slideshow passiert mehrstufig in diversen JS und CSS Scriptlets. Da kannst Du, ohne umfassende Programmierarbeit, kaum sinnvoll eingreifen.

[...] wo werden denn die Daten gespeichert die ich ein tippe und die angezeigt werden sollen? [...]

Die Texte wirst Du vergeblich suchen, weil der WD beim Export daraus Grafiken macht. 😣
Die Grafiken werden in der JS Steuerdatei "1.js" referenziert. Die Grafiken selbst werden beim Export als PNG Dateien im Verzeichnis '"index_htm_files" abgelegt.

Im WD Editor bleiben die Texte als Text erhalten. Sie können da jederzeit ganz normal bearbeitet werden. Beim Speichern eines Projekts landen die Texte als Text in der Projektdatei "Projektname.web".

Zuletzt geändert von BeRo am 11.01.2018, 21:18, insgesamt 2-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

christian-juhasz schrieb am 12.01.2018 um 01:37 Uhr

Servus,

 

mir ist aufgefallen, dass das Akkordeon-Widget 2 sich beim Einfügen von Text anders verhät, als das 3er.

Dafür fängt das 2er irgendwann das Spinnen an. Ich habe zunächst insgesamt 8 Karten erstellt (copy/paste) und dann mit den ersten zwei rumgespielt. Wie schaut der Text aus, wo schreibe ich was wie hin, etc. Als ich dann zufrieden war, habe ich einfachdie ersten beiden Karten wieder kopiert und nur den Textinhalt geändert, die alten übrigen 6 hatte ich zuvor schon gelöscht. Plötzlich fängt der WD an, das Hintergrundbild zu verschieben, sodass weisse Streifen entstehen. siehe Link.

 

Für heute hab ich genug.

 

N8!

BeRo schrieb am 12.01.2018 um 13:36 Uhr

[...] mir ist aufgefallen, dass das Akkordeon-Widget 2 sich beim Einfügen von Text anders verhät, als das 3er. [...]

Richtig. Die mit der Version 2 gelieferten JS Dateien unterscheiden sich im Code z. T. deutlich.

[...] Dafür fängt das 2er irgendwann das Spinnen an. [...]

Den Grund kannst Du evtl. schon im Quellcode der fertigen HTML Seite finden. Da stehen die beiden JS Steuerdateien "bx_zaccordionb_conf.js" und "bx_zaccordionc_conf.js", die jeweils zu einem der Widgets (2 oder 3) gehören, gemeinsam.


Da in beiden Dateien identische JS Variable aktiviert werden, die aber, je nach Datei, anders verarbeitet werden, muss das Probleme machen... 😏

Am besten kontrollierst Du mal das zum Projekt angelegte Hilfsverzeichnis, wahrscheinlich hast Du da beide Dateien abgelegt.

[...] Plötzlich fängt der WD an, das Hintergrundbild zu verschieben, sodass weisse Streifen entstehen. [...]

Wenn das Löschen der überflüssigen- und evtl. fehlerverursachenden JS Steuerdatei nicht hilft, könnte auch der eingefügte Text die Ursache sein.
Du hast z. T. umfangreiche Texte eingefügt, die, wie erklärt, in Grafiken umgewandelt werden. Es ist nicht auszuschließen, dass die Programmierer irgendwo ein Limit für die Textmenge gesetzt haben, das bei Überschreitung zu Fehlern bei der Darstellung führt.

Aber, wie auch immer, wenn Dir die Slideshow Widgets des WD suspekt sind, kannst Du im WWW etliche Alternativen finden, die z. T. wesentlich komfortabler sind und die obendrein deutlich mehr Darstellungsoptionen (Skins) bieten.

Die beiden bekanntesten sind wohl der WOW Slider und der Amazing Slider.

Beide lassen sich mit dem WD problemlos in eine Seite einbauen.

Schau sie Dir mal an...

Zuletzt geändert von BeRo am 12.01.2018, 13:39, insgesamt 2-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

christian-juhasz schrieb am 12.01.2018 um 14:14 Uhr

Ah, OK. Vielen Dank für den Tipp.