Widget wird in Mobilversion nicht angezeigt

info.cc schrieb am 19.03.2023 um 11:42 Uhr

Hallo Community,

dieses Problem beschäftigt mich nun schon seit Tagen: möchte mit WD19 eine Karte von mapz.com (iframe.code) einbinden (Desktop- und Mobil-Version) und wollte das - wie üblich bei Widgets - mittels Platzhalter tun. Nun erscheint sie in der Mobilversion nicht - statt dessen in der Desktop-Version 2x, und zwar untereinander. Woran kann das liegen? Falls hilfreich, so sieht der code aus:

<div id="5wy61phu"></div>
<script language="JavaScript" type="text/javascript">
function loadMapz() {
var myMapz = document.createElement("iframe");
myMapz.setAttribute("src", "https://www.mapz.com/embedded/map/5wy61phu?lon=11.8895264917293&lat=47.9895612696069&zoom=15");
myMapz.frameBorder = "0";
myMapz.style.width = "500px";
myMapz.style.height = "500px";
var element = document.getElementById('5wy61phu')
element.appendChild(myMapz);
}
loadMapz()
</script>

Den Beitrag, dass dem Code ein Zeichen etc. hinzugefügt werden sollte habe ich gesehen, weiß aber nicht an welcher Position ich das tun müsste.

Wäre schön, wenn jemand 'ne Idee dazu hätte.

hab gestern versäumt meine Seriennummer mitzuteilen:
[wieder entfernt, sie gehört hier nicht her!] (Windows 10)

Kommentare

Robbin schrieb am 21.03.2023 um 01:09 Uhr

Das "Problem" ist eigentlich keins. Die Ursache ist die doppelte Verwendung einer ID im Scriptcode.
Weil der WD/XD grundsätzlich den HTML- und Scriptcodes für alle Varianten einer Site in einer einzigen HTML Datei anlegt, wird ein mehrfach vorhandener, Scriptcode mit einer dann mehrfach vorhandenen, identischen ID nicht korrekt erkannt.

Die Lösung:
Lege in allen Varianten deiner Site je einen Platzhalter in geeigneter Größe an, der später die Karte zeigen soll und lege im HTML Body je einen iframe Code wie unten gezeigt an:

<iframe src="./index_htm_files/Karte.htm" width="110%" height="110%" frameborder="0" scrolling="auto" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>

Kopier' den Scriptcode für das Widget in eine neue, leere Textdatei, der du z. B. den Namen "Karte.htm" gibst und ändere die Größenangabe der Kartendarstellung so, dass sie in den Platzhalter passt.
Für jede Variante legst du am besten je eine neue HTM Datei mit dem in der Größe entsprechend angepassten Scriptcode an.
Die fertigen HTM Dateien gehören in das Verzeichnis "index_htm_files", das der WD/XD beim lokalen Export auf deinem PC und beim Upload auf dem Webserver anlegt. Am besten kopierst du dazu die Dateien in das Hilfsverzeichnis deines Projekts, dann sorgt der WD/XD beim Upload/Export automatisch dafür, dass die Dateien im Verzeichnis "index_htm_files" landen.

Fertiggestellt kann das z. B. so aussehen:

Voila c'est tout

Nach dem Export/Upload sollte die Anzeige In der Desktop Version und in der mobilen Version jetzt passen

   

Viel Erfolg

info.cc schrieb am 22.03.2023 um 10:57 Uhr

Das "Problem" ist eigentlich keins. Die Ursache ist die doppelte Verwendung einer ID im Scriptcode.
Weil der WD/XD grundsätzlich den HTML- und Scriptcodes für alle Varianten einer Site in einer einzigen HTML Datei anlegt, wird ein mehrfach vorhandener, Scriptcode mit einer dann mehrfach vorhandenen, identischen ID nicht korrekt erkannt.

Die Lösung:
Lege in allen Varianten deiner Site je einen Platzhalter in geeigneter Größe an, der später die Karte zeigen soll und lege im HTML Body je einen iframe Code wie unten gezeigt an:

<iframe src="./index_htm_files/Karte.htm" width="110%" height="110%" frameborder="0" scrolling="auto" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>

Kopier' den Scriptcode für das Widget in eine neue, leere Textdatei, der du z. B. den Namen "Karte.htm" gibst und ändere die Größenangabe der Kartendarstellung so, dass sie in den Platzhalter passt.
Für jede Variante legst du am besten je eine neue HTM Datei mit dem in der Größe entsprechend angepassten Scriptcode an.
Die fertigen HTM Dateien gehören in das Verzeichnis "index_htm_files", das der WD/XD beim lokalen Export auf deinem PC und beim Upload auf dem Webserver anlegt. Am besten kopierst du dazu die Dateien in das Hilfsverzeichnis deines Projekts, dann sorgt der WD/XD beim Upload/Export automatisch dafür, dass die Dateien im Verzeichnis "index_htm_files" landen.

Fertiggestellt kann das z. B. so aussehen:

Voila c'est tout

Nach dem Export/Upload sollte die Anzeige In der Desktop Version und in der mobilen Version jetzt passen

   

Viel Erfolg

Vielen Dank, habe aber leider noch mächtige Probleme (die z.B. mit einer Googlemapskarte bei Varianten nicht auftreten):

- wie geraten habe ich in den Varianten „Hauptfenster“ und „mobil“ je einen Platzhalter in gewünschter Größe angelegt und deinen gesendeten code <iframe src="./index_htm_files/Karte.htm" width… in HTML Body reinkopiert.

- In der Browser-Vorschau erschien dann ja zunächst „not found“ da der eigentliche Karten-code fehlt.

- Lt. Deiner Beschreibung habe ich deinen gesendeten IframeCode in ein leeres Textdokument (Libre-Office) kopiert und habe es mit dem Namen „Karte/htm“ wie empfohlen abgespeichert.

- Insofern sollte ich wohl das zweite Textdokument mit einem Zusatz-zeichen, z.B. „Karte/htm2 abspeichern?

- wie geht „für jede Variante legst du am besten je eine neue HTM Datei mit dem in der Größe entsprechend angepassten Scriptcode an.“

- Wo muss dann bitte der eigentliche Kartencode „function loadMapz() {…“ rein?
- Wo ist das „Hilfsverzeichnis“? (ich lege immer einen „Export“-Ordner an in dem ich die Dateien sammle bevor ich die Website über Filezilla veröffentliche, muss da das sog. Hilfsverzeichnis rein?)

Sorry, wie du siehst sinds noch viele Fragen.

 

BilderMacher schrieb am 22.03.2023 um 11:16 Uhr

@info.cc, muss das sein? Warum steht der Kommentar von @Robbin als Vollzitat im Beitrag? Kommst du mit dem Forum nicht klar?
Schreibe den Kommentar in das Feld, was sich am Seitenende 🔽 befindet oder nutze den Button oben rechts ↗️, neben deinem Profil-Bild! Danke!

"Je mehr die Menschen wissen, desto weniger müssen sie glauben!"

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Ich kann vieles, darf aber nicht alles.
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

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

Hardware / Software:
::::::::::::::::::::::::::::::::::::++++:::::::::::::::::::::::::::::::::::::::::::::::::

Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 CPUs), ~2.3GHz
12288 MB RAM
DirectX 12
 

Intel(R) UHD Graphics (für Import, Verarbeitung, Export)

NVIDIA GeForce MX250 (wird nicht in Schnitt-SW verwendet)

  • Video deluxe 2016 Premium
  • Video deluxe 2024 Premium
  • Video Pro X 15
  • Photostory Deluxe 2024
  • Samplitude X7 Suite
  • ACID Pro 11
  • Music Maker 2024
  • MAGIX/XARA Graphic-/Web-Designer

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

Edition    Windows 10 Home
Version    22H2
Installiert am    ‎15.‎10.‎2020
Betriebssystembuild    19045.4291
Windows Feature Experience Pack 1000.19056.1000.0

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

Browser: Mozilla Firefox 124.0.2 (64-Bit)

Robbin schrieb am 22.03.2023 um 16:09 Uhr

@info.cc

Lt. Deiner Beschreibung habe ich deinen gesendeten IframeCode in ein leeres Textdokument (Libre-Office) kopiert und habe es mit dem Namen „Karte/htm“ wie empfohlen abgespeichert.

Da hast du wohl nicht genau genug gelesen.
Der iframe Code gehört in jeweils angepasster Version in den HTML Body jeden Platzhalters. Die Anpassung bezieht sich auf den Namen der aufzurufenden HTML Datei.
Wie in meinem ersten Posting beschrieben, müssen die HTML Dateien für jede Variante deiner Site einen eigenen Namen bekommen. Die Datei für die Desktop Variante heißt dann z. B. "Karte.htm". Die Datei für eine Tablet Variante könnte z. B. "Karte_t.htm" heißen, die für eine Smartphone Variante entsprechend "Karte_s.htm" u.s.w.

Hier nochmal zur Verdeutlichung die div. iframe Codes:

Desktop:

<iframe src="./index_htm_files/Karte.htm" width="110%" height="110%" frameborder="0" scrolling="auto" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>

Tablet:

<iframe src="./index_htm_files/Karte_t.htm" width="110%" height="110%" frameborder="0" scrolling="auto" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>

Smartphone:

<iframe src="./index_htm_files/Karte_s.htm" width="110%" height="110%" frameborder="0" scrolling="auto" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>

Jeder einzelne der o. a. iframe Codes gehört also in den zugehörigen HTML Body der Platzhalter in den jeweiligen Varianten.

Lt. Deiner Beschreibung habe ich deinen gesendeten IframeCode in ein leeres Textdokument (Libre-Office) kopiert und habe es mit dem Namen „Karte/htm“ wie empfohlen abgespeichert.

Wie du gerade gelesen hast, war das falsch. In die separat anzulegenden HTML Dateien gehört ausschließlich der vollständige Scriptcode des Karten Widgets wie unten gezeigt. Außerdem darf in einem Dateinamen keinesfalls ein Slash Zeichen "/" enthalten sein...

<div id="5wy61phu"></div>
<script language="JavaScript" type="text/javascript">
function loadMapz() {
[...]

wie geht „für jede Variante legst du am besten je eine neue HTM Datei mit dem in der Größe entsprechend angepassten Scriptcode an.“

Dazu legst du so viele HTML Dateien an, wie du Varianten hast. Bei 3 Varianten (Desktop, Tablet, Smartphone) also 3 HTML Dateien mit entsprechenden Namen, wie oben schon genau beschrieben.

In den einzelnen Scriptcodes für die Dateien der Varianten musst du die Größe für die anzuzeigende Karte so anpassen, dass die Darstellung in die Abmessungen der Platzhalter passt die du für jede Variante vermutlich in einer anderen Größe angelegt hast.
Hier der Ausschnitt eines Scriptcodes, der die Anweisung für width und height zeigt:

[...]
myMapz.style.width = "500px"; // hier steht für jede Variante die passende Breite der Karte
myMapz.style.height = "500px"; // hier steht für jede Variante die passende Höhe der Karte
[...]

wo muss dann bitte der eigentliche Kartencode „function loadMapz() {…“ rein?

Wie in meinem ersten Posting- und auch jetzt nochmal genau beschrieben, muss der für die Varianten angepasste Scriptcode für die Karten Widgets in den HTML Body der einzelnen Platzhalter kopiert werden.

gerne hier nochmal der dazu passende Screenshot, den ich dir schon in meinem ersten Posting als Erklärung gezeigt habe:

Wo ist das „Hilfsverzeichnis“?

Wie in meine ersten Posting schon per Screenshot gezeigt und in der speech bubble erklärt, liegt das Hilfsverzeichnis genau da, wo du die Projektdatei gespeichert hast.

Das Hilfsverzeichnis muss immer den Namen der Projektdatei (hier "Karte.xar") haben, erweitert um den Zusatz "xar_files", wenn du den Xara Designer benutzt, oder "web_files" wenn du den Web Designer benutzt.

ich lege immer einen „Export“-Ordner an in dem ich die Dateien sammle bevor ich die Website über Filezilla veröffentliche, muss da das sog. Hilfsverzeichnis rein?

Ja und nein.
Ja, wenn du in dem Exportverzeichnis auch die Projektdatei abgelegt hast, andernfalls nein.
Es kann aber kein Missverständnis geben, wenn du dich an die o. a. Regel hältst, das Hilfsverzeichnis immer da anzulegen, wo du die aktive Projektdatei gespeichert hast.
Eventuell hat den WD schon selbst ein Hilfsverzeichnis angelegt. Wenn das zutrifft, findest du es, wie gesagt, in dem Verzeichnis, in dem die Projektdatei liegt.
Der WD legt immer dann ein Hilfsverzeichnis an, wenn du externe Medien (Audio, Video)- oder z. B. PDF Dateien in dein Projekt eingebunden hast.

Lies dir in jedem Fall mal die ausführlichen Infos durch, die der WD in seiner Hilfedatei zum Thema "Hilfsverzeichnis" mitgebracht hat...

info.cc schrieb am 27.03.2023 um 13:12 Uhr

Vielen Dank – aber ich bin leider noch keinen Schritt weiter trotz tagelangen Versuchen. Hoffe, du magst mir trotzdem noch helfen. Bin einfach mit html und alledem hoffnungslos überfordert. Deshalb bin ich ja vor etlichen Jahren auf MagixWD gekommen.

Habe also folgenden code in den Platzhalter der Desktopdatei kopiert:

<iframe src="./index_htm_files/Karte.htm" width="110%" height="110%" frameborder="0" scrolling="auto" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>

Und den folgenden Code kopierte ich in den Platzhalter der Mobildatei:

<iframe src="./index_htm_files/Karte_s.htm" width="110%" height="110%" frameborder="0" scrolling="auto" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>

Jeden einzelnen habe ich in die jew. Variante HTML Body kopiert.

So weit so gut, das entspricht deinem Screenshot und dürfte soweit richtig sein?

Aber ab hier wirds für mich überhaupt nicht mehr nachvollziebar, da brauch ich es bitte für absolut HTML-Unwissende, also Schritt für Schritt:.

Du schreibst weiter:

„Kopier' den Scriptcode für das Widget in eine neue, leere Textdatei, der du z. B. den Namen "Karte.htm" gibst und ändere die Größenangabe der Kartendarstellung so, dass sie in den Platzhalter passt“.

Wie bitte erstelle ich diese HTML-Dateien? Leere Textdatei? Wie vergebe ich die Varianten-Namen, z.B. Karte.htm und Karte.htm.s

Meine Projektdatei mit dem Namen „Magix test mapzkarte varianten“ ist gespeichert im Ordner „Magix test mapzkarte varianten“.

Wie geraten habe ich in der Hilfedatei nachgelesen – da steht z.b. folgendes:

„Sollten Sie den Reiter Platzhalter im Web-Eigenschaften-Dialog verwenden, um auf eine externe Datei zu verweisen, kopiert MAGIX Web Designer Premium automatisch diese Datei in das Hilfsverzeichnis Ihres Designs. Sollte das Hilfsverzeichnis noch nicht existieren, so wird es erzeugt.“

Bei mir wurde jedoch, obwohl eigentlich bereits die iframs in den Platzhaltern sind kein Ordner „Hilfsverzeichnis“ erzeugt.

Wie gesagt, vielleicht du hast noch Lust auf diese hoffentlich letzte Hilfestellung.

BilderMacher schrieb am 27.03.2023 um 14:51 Uhr

@info.cc,

das "Hilfsverzeichnis" heiß nicht so.

Der Ordner trägt den Namen des Ordners, in dem deine Projektdatei (*.web) gespeichert ist und wird ergänzt durch: "_web_files".

Meine Projektdatei mit dem Namen „Magix test mapzkarte varianten“ ist gespeichert im Ordner „Magix test mapzkarte varianten“.

Somit ist dein "Hilfsverzeichnis": Magix test mapzkarte varianten_web_files.

"Je mehr die Menschen wissen, desto weniger müssen sie glauben!"

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Ich kann vieles, darf aber nicht alles.
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

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

Hardware / Software:
::::::::::::::::::::::::::::::::::::++++:::::::::::::::::::::::::::::::::::::::::::::::::

Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 CPUs), ~2.3GHz
12288 MB RAM
DirectX 12
 

Intel(R) UHD Graphics (für Import, Verarbeitung, Export)

NVIDIA GeForce MX250 (wird nicht in Schnitt-SW verwendet)

  • Video deluxe 2016 Premium
  • Video deluxe 2024 Premium
  • Video Pro X 15
  • Photostory Deluxe 2024
  • Samplitude X7 Suite
  • ACID Pro 11
  • Music Maker 2024
  • MAGIX/XARA Graphic-/Web-Designer

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

Edition    Windows 10 Home
Version    22H2
Installiert am    ‎15.‎10.‎2020
Betriebssystembuild    19045.4291
Windows Feature Experience Pack 1000.19056.1000.0

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

Browser: Mozilla Firefox 124.0.2 (64-Bit)

Robbin schrieb am 27.03.2023 um 16:01 Uhr

@info.cc

Wie bitte erstelle ich diese HTML-Dateien?

Mit einem beliebigen, einfachen Texteditor, der Textdateien ohne Formatierungsangaben anlegen kann. Windows bringt dazu von Haus aus z. B. das Programm "Notepad" mit. Ab Windows 10 "Wordpad"...

Auf der sicheren Seite bist du, wenn du hier das kostenfreie Universalgenie "Notepad++" herunterlädst und damit arbeitest.

Starte das Programm und füge den kpl.Scriptcode für das Karten Widget in das leere Dateifenster ein, das dir beim Start angezeigt wird.

Öffne in der Menüleiste die Option "Datei" und wähle "Speichern unter..."

Als Ziel gibst du das Hilfsverzeichnis "Magix test mapzkarte varianten" an, das du idealerweise schon in deinem Projektverzeichnis "Magix test mapzkarte varianten" findest, wie @BilderMacher es hier erklärt hat.

Wurde das Hilfsverzeichnis noch nicht angelegt, erstellst du es manuell, bevor du die beiden HTML Dateien da hinein kopierst.

Bei mir wurde jedoch, obwohl eigentlich bereits die iframs in den Platzhaltern sind kein Ordner „Hilfsverzeichnis“ erzeugt.

Das HV (HilfsVerzeichnis) wird in dem Fall richtigerweise nicht automatisch angelegt. Der WD/XD benötigt für Iframe Codes in Platzhaltern kein HV.
Anders sieht es bei externen Mediendateien- oder Bildern-, PDF Dateien, etc. aus, die du einbindest. Dafür legt der WD/XD immer ein Hilfsverzeichnis an. Die Details dazu hatte ich dir in meinem letzten Posting ja schon erklärt. In der Hilfe, die du gelesen hast, ist das auch so beschrieben, da wird explizit auf das Einbinden externer Dateien Bezug genommen...

Christina-Knpfle schrieb am 22.04.2024 um 14:25 Uhr

Hello,
How can I rename a iframe to put itin the website and smartphone? Because its not showing, I read that I have to change the iframe, but how? Which part.

Iframe:

<script type="text/javascript" src="https://res.onoffice.de/template/std-obj/jscript/jquery-1.8.3.min.js"></script><script type="text/javascript" src="https://res.onoffice.de/template/repository/iframeresizer/iframeResizer.min.js"></script><iframe src="https://smartsite2.myonoffice.de/kunden/gkimmobilien/81/immobilien-de-kauf.xhtml" class="ooiframe" id="ooimmoframe" name="ooimmoframe" width="100%" height="6125" scrolling="auto" frameborder="0" marginheight="0px" marginwidth="0px"></iframe><script type="text/javascript" src="https://res.onoffice.de/template/repository/iframeresizer/ooiframe.js"></script>