Doppelte Einbindung Java-Script, Größe Java-Script-Ausgabe ändern ...

joachimgross schrieb am 27.05.2021 um 12:16 Uhr

Hallo zusammen,
ich habe seit längerem ein paar Probleme mit meiner Seite ww.hfm1892.de, die mit dem "MAGIX Web Designer Premium 17.1.0.60742 DL x64 Dec 9 2020" erstellt bzw. bearbeitet wurde. Leider konnte ich zuvor in verschiedenen Foren nicht fündig werden.
Es geht um die Einbindung des Widgets "www.bundesliga-widgets.de". Meine Homepage hat 2 Varianten (1x für PC und 1x für Smartphone). Die Widgets (1x Tabelle und 1x letzte Spielergebnisse) wurden mittles HTML-Platzhalter auf der PC-Variante eingefügt. Leider erscheinen Sie nicht auf der Smartphone-Variante, obwohl sie mit der Funktion "Für alle Varianten" markiert wurden. Das ist das eine Problem.
Das andere Problem ist, dass ich die Größe der Anzeige verändern möchte (bzw. für die Smartphone-Variante sogar verändern muss). So wie ich das verstehe bzw. bisher durch probieren erfahren habe ist das anscheinend nur über eine Veränderung im Java-Script-Text möglich. Da der Java-Script öffentlich freigegeben ist, kann ich ihn hier posten:

<div id="fblwidget_table"></div>
<script src="//bundesliga-widgets.de/js/table.js" type="text/javascript"></script>

<script type="text/javascript">
var fblWidgetSettings = {
compactview: false, // eine kompaktere Darstellung
league: 'bl1', // bl1 oder bl2
season: 2020, // die Saison, 2017 steht für die Saison 2017/2018

// hebt in allen Widgets die Teamnamen hervor:
teamsToHighlight: ['Hertha BSC'],

// generiert aus den angegebenen Teams Links zu der angegebenen Url:
teamLinks: [{
'teamname': 'Hertha BSC',
'link': 'https://www.herthabsc.de/'
}]
};
</script>

Nun kenne ich mit Java überhaupt nicht aus und konnte leider auch hier in diversen Foren nicht fündig werden.
Wer kann helfen?

Zum Abschluss noch eine weitere Frage.
Viele Probleme könnten mit "Responsive Design" gelöst werden. Das soll mit meiner Web Designer Version möglich sein. Ich konnte aber keine Lösung finden. Geht das überhaupt und wenn ja, müssen dafür die aktuellen Seiten in eine neue Seite übertragen werden?

Ich hoffe sehr, dass ich trotz meiner zugegeben teilweisen anfängerhaften Fragen hilfreiche Antworten bekomme.
Liebe Grüße
Joachim

Kommentare

BeRo schrieb am 27.05.2021 um 21:11 Uhr

Zäumen wir das Pferd mal von hinten auf... 😉

[...] Viele Probleme könnten mit "Responsive Design" gelöst werden. Das soll mit meiner Web Designer Version möglich sein [...]

Der WD kann als WYSIWYG Programm leider kein echtes responsive Design erstellen, weil dazu eine individuelle Programmierung nötig wäre. Aber Du kannst dem gewünschten Ergebnis trotzdem sehr nahe kommen, wenn Du eine der neuen Funktionen benutzt, die in der 18er Version hier zu finden ist:

In der 17er Version findest Du die Einstellung unter "Extras > Web Exportoptionen" als Option "An Breite anpassen".
Damit wird der Inhalt jeder Seite automatisch auf die Fensterbreite des aktiven Browsers skaliert. Das funktioniert auch nach der automatischen Umschaltung auf die Mobilvariante...

[...] Das andere Problem ist, dass ich die Größe der Anzeige verändern möchte (bzw. für die Smartphone-Variante sogar verändern muss). [...]

Das ist nicht so einfach, weil der Ursprung der Tabellen mit einem externen (JQuery) Script gesteuert wird, auf das Du keinen Einfluss hast.
Weiter unten findest Du aber eine CSS basierte Lösung, die das trotzdem ermöglicht.

[...] Die Widgets [...] wurden mittles HTML-Platzhalter auf der PC-Variante eingefügt. Leider erscheinen Sie nicht auf der Smartphone-Variante,

Das Problem haben wir gefühlt 100 Mal im Forum "auf dem Tisch" gehabt. 🙃
Die Ursache ist i. d. R. immer dieselbe. Auch Du versuchst innerhalb eines HTML Codes eine einzige ID für verschiedene Aufgaben zu verwenden.
Der Effekt ist vergleichbar mit einem bestimmten Autokennzeichen, das 2 verschiedenen Fahrzeugen zeitgleich zugeteilt wird. Das fällige "Knöllchen" für eine Ordnungswidrigkeit bekommt immer nur 1 Halter, nie alle beide...
Genau so läuft die Zuteilung (Anzeige) der Tabelle ab, das Script, das beim Aufruf der HTML Seite zuerst aktiviert wird, kann die Tabelle anzeigen, das andere geht leer aus.

Die Lösung ist aber relativ einfach und ganz ohne Programmierkenntnisse machbar, wenn Du dafür sorgst, dass das Script nur 1x angelegt wird.
Dazu legst Du ein neues Projekt an, dem Du (für unser Beispiel) den Namen "tabellen" gibst.
Das Projekt enthält normalerweise schon eine leere 1. Seite, der Du den Namen "b-liga" gibst.
Die Breite der Seite stellst fürs Erste auf schmale 650px ein und fügst anschließend die von Dir geposteten Codes in den HTML Body der Seite ein.

Das Projekt (die HTML Seite) kannst Du jetzt per Export/Upload auf dem lokalen PC und/oder auf dem Webserver ablegen.

Damit die Tabellen auf den einzelnen Varianten Deiner Site zu sehen sind, musst Du auf einer Seite jeder Variante jetzt einen Platzhalter (Rechteck) in der passenden Größe anlegen und in den HTML Body der Platzhalter einen iframe Code kopieren, der die vorhin angelegte Seite "b-liga.htm" referenziert.

So sieht der iframe Code für die Desktop Version aus:

<iframe src="b-liga.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="xara_iframe" >
<p>Your browser does not support iframes.</p>
</iframe>

Damit die mobile Variante die vom Anbieter fix vorgegebene Tabellenbreite passend anzeigen kann, sind ein paar Zeilen CSS Code nötig, die Du im HTML Body des Platzhalters der mobilen Variante anlegen musst.
So sieht der komplette Code (inkl. iframe) aus:

<style>
#wrap {
  width: 440px;
  height: 926px;
  padding: 0;
  overflow: hidden;
}
#scaled-frame {
  width: 600px;
  height: 2000px;
  border: 0px;
}
#scaled-frame {
  zoom: 0.75;
  -moz-transform: scale(0.75);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.75);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.75);
  -webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #scaled-frame {
    zoom: 1;
  }
}
</style>
<div id="wrap">
<iframe id="scaled-frame" src="b-liga.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="xara_iframe" >
<p>Your browser does not support iframes.</p>
</iframe>
</div>

Das war's dann auch schon... 🤓
Natürlich wirst Du an den Parametern im CSS Code noch ein bisschen "herumfeilen" müssen, damit alles in Deine Site passt...

Nach einem Upload auf den Webserver kann das Ergebnis für die Varianten so aussehen:

Die online Demo kannst Du Dir hier ansehen (klick)
Die dazu gehörende Projektdatei (inkl. aller Scriptcodes) kannst Du hier herunterladen (klick)

Na dann, Viel Erfolg ☺️

BTW
Tests mit der neuen Site solltest Du immer online-, also über den Webserver ausführen.
Weil die Script Referenzen serverübergreifend arbeiten, ist die ordnungsgemäße Funktion nicht sichergestellt, wenn Du die Seite lokal-, von der HD Deines PC aufrufst... 😕

joachimgross schrieb am 28.05.2021 um 09:51 Uhr

Super schnelle und umfassende Antwort. Bin absolut begeistert. Vielen lieben Dank. DAs hilft enorm weiter. Liebe Grüße.

BeRo schrieb am 28.05.2021 um 21:01 Uhr

Ich sehe gerade, dass Du Deine "Hausaufgaben" schon erledigt hast. 😍
Die Umsetzung für die mobil Variante ist aber noch nicht so richtig gelungen...

Damit die Tabellen in den (deutlich zu schmalen) Platzhalter passen, musst Du die Werte für die Breite in den CSS Parametern anpassen.
So könnte das für die erste Tabelle aussehen:

<style>
#wrap {
  width: 900px;
  height: 300px;
  padding: 0;
  overflow: hidden;
}
#scaled-frame {
  width: 580px;
  height: 300px;
  border: 0px;
}
#scaled-frame {
  zoom: 0.25;
  -moz-transform: scale(0.25);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.25);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.25);
  -webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #scaled-frame {
    zoom: 1;
  }
}
</style>
<div id="wrap">
<iframe id="scaled-frame" src="https://www.hfm1892.de/b-ergebnisse/b-ergebnisse.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="xara_iframe" >
<p>Your browser does not support iframes.</p>
</iframe>
</div>

Und so für die 2. Tabelle:

<style>
#wrap2 {
  width: 500px;
  height: 926px;
  padding: 0;
  overflow: hidden;
}
#scaled-frame2 {
  width: 483px;
  height: 700px;
  border: 0px;
}
#scaled-frame2 {
  zoom: 0.3;
  -moz-transform: scale(0.3);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.3);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.3);
  -webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #scaled-frame2 {
    zoom: 1;
  }
}
</style>
<div id="wrap2">
<iframe id="scaled-frame2" src="https://www.hfm1892.de/b-tabelle/b-tabelle.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="xara_iframe" >
<p>Your browser does not support iframes.</p>
</iframe>
</div>

Beachte bitte unbedingt, dass Du eine ID nicht mehrfach verwenden darfst!
Du hast die IDs "scaled-frame" und "wrap" in 2 unterschiedlichen Scriptlets verwendet (was nicht nötig war). Das führt zwangsläufig zu fehlerhaften Ergebnissen, wie weiter oben schon ausführlich erklärt...
Ich habe die IDs im 2. Script angepasst auf "scaled-frame2" und "wrap2" und die Referenzen geändert.

Nach den Änderungen sieht das Ergebnis so aus:

Du solltest das Seitenlayout der mobilen Variante überdenken. Wenn Du die Tabellen über die gesamte Seitenbreite anlegst, können sie mit Sicherheit von jedem Besucher besser gelesen werden.
Der jetzt noch links daneben angeordnete Text kann dann ja problemlos darüber/darunter angeordnet werden... 🤓

joachimgross schrieb am 30.05.2021 um 14:13 Uhr

Super. Vielen Dank erneut. Ich wollte Dich eh schon anschreiben, weil ich Probleme hatte, die Größen zu verändern. Hatte Änderungen im CSS-Text vorgenommen, aber leider haben die sich nicht ausgewirkt. Nun hat sich das erledigt, denke ich. Werde es heute oder morgen entsprechend ändern. Noch mal vielen lieben DAnk dafür.