Das sieht ja schon Mal gut aus! Dann sollten wir im JS weiter debuggen: Füge eine Consolausgabe ein:
request.onload = function () {
var superHeroes = request.response;
console.log(superHeroes);
populateHeader(superHeroes);
// showHeroes(superHeroes);
}Das sind offensichtlich die Ausgaben in der Console. Wir sollten erst Mal sicher gehen, dass das PHP-Skript funktioniert. Rufe es direkt auf, also
Dann müssen wir mal debuggen. Schalte die Fehleranzeigen im PHP-Skript ein:
<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
$theurl ='die-url-der-API-mit-key';
// die API auslesen
$response = file_get_contents($theurl);
// und den Inhalt ausgeben
echo $response;
// ginge auch mit einem Einzeiler,
// aber so ist es IMO übersichtlicher
?>Dann rufe es direkt im Browser auf ohne das Javascript.
Aber das ist ja gerade der Sinn der Sache, dass der Key nicht mehr im Quelltext deiner Seite steht.
Wie hast Du denn getestet? Auf deinem Webspace oder mit lokalem Webserver?
Ich schrieb ja, dass ich es nicht getestet habe, es können also noch Fehler drin sein.
Poste am besten erst Mal das neue Javascript und das PHP, Key kannst Du ja löschen.
Wenn das so aussieht, ist es relativ einfach: Die URL brauchst Du nicht als Parameter. Statt direkt die API-URL zu lesen, ruft Du ein PHP-Skript auf deinem Server auf:
function getThem(selHeader, selSection/*, url*/) {
function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = jsonObj['squadName'];
header.appendChild(myH1);
var myPara = document.createElement('p');
myPara.textContent = '' + jsonObj.result.test
header.appendChild(myPara);
}
var header = document.querySelector(selHeader);
var section = document.querySelector(selSection);
// var requestURL = url;
var request = new XMLHttpRequest();
// Anstatt die API direkt zu lesen, rufen wir ein
// PHP-Skript auf dem eigenen Server auf
//request.open('GET', requestURL);
request.open('GET', 'getdata.php');
request.responseType = 'json';
request.send();
request.onload = function () {
var superHeroes = request.response;
populateHeader(superHeroes);
// showHeroes(superHeroes);
}
}
getThem('#api', 'section'/*, 'apikeyhier'*/)
</script>getdata.php:
<?php
$theurl ='die-url-der-API-mit-key';
// die API auslesen
$response = file_get_contents($theurl);
// und den Inhalt ausgeben
echo $response;
// ginge auch mit einem Einzeiler,
// aber so ist es IMO übersichtlicher
?>Die URL mit dem Key steht jetzt nur noch im PHP-Skript und das ist im Browser nicht sichtbar.
Ungestestet aber ich bin relativ sicher, dass es so funktionieren wird.
Ein PHP-Skript, das die API mit file_get_contents ausliest. Dann steht der Key nur im PHP-Code und der ist im Browser nicht sichtbar. Die Daten kannst Du dann gleich in PHP auswerten, wenn sie in HTML umgesetzt werden sollen, oder an ein Javascript übergeben, das sie clientseitig verarbeitet.
Serverseitig die API lesen?
Da sehe ich nichts von den Formular-Elementen. Mache ich diese auch inline funktioniert es:
.sign {
/* float: right; */
text-decoration: none;
/* display: block; */
display: inline;
font-family: arial;
color: #222;
font-size: 14px;
padding-right: 10px;
padding-top: 5px;
}
.header-login form {
display: inline;
}mich interessiert warum es nicht funktioniert...
Der Grund ist, dass ein Formular ein Blockelement ist und dass Du das a-Element ebenfalls zu einem Block-Element gemacht hast. Blockelemente nehmen immer eine neue Zeile ein, siehe hier:
https://developer.mozilla.org/de/docs/Web/HT…-level_elemente
Machst Du alle drei Elemente zu Inlineelementen, werden sie auch ohne float nebeneinander angeordnet.
all-inkl habe ich deshalb erwähnt, weil ich selber dort bin und sehr zufrieden. Sehr guter Support rund um die Uhr. Will aber nicht heißen, dass es nicht auch andere gut gibt.
Das heißt, dass im Gegensatz zum statischen Layout das bei Flexbox automatisch mit einberechnet wird ? Wofür brauche ich dann box-sizing ?
Bei dem, was Du mit Flexlayout gestaltest, brauchst Du kein box-sizing.
BTW: Du brauchst auch die 100% hier nicht:
.content {
width: 100%;
}
.sidebar {
width: 100%;
margin-top: 20px;
}denn ein Flexcontainer hat per Default die Eigenschaft align-items: stretch; d. h. bei Richtung column füllen die Items den Container in horizontaler Richtung automatisch aus.
Bei mir funktioniert der Code aus #6 einwandfrei. Da hast Du u. U. einen Fehler bei der Übertragung vom Forum in deine PHP-Datei gemacht.
Das liegt an dem margin-right, das Du hinzu gefügt hast, um einen Abstand zu bekommen. Du kannst dieses problemlos in der Mediaquery auf Null setzen, dann sollte alles in Ordnung sein.
Wenn ich der ersten Box jetzt 15Px padding zuweise, dann zersprengt es das Layout. Ich muss ja diese zusätzlichen 30px miteinberechnen.
Nein, das ist nicht nötig, wenn Du konsequent Flexlayout verwendest. Ich habe es gerade getestet mit dem Layout, das Du früher gepostet hattest. Am besten postest Du nochmal das vollständige HTML und CSS.
Ach so, Padding kannst Du bei Flex genau so auf deine Container .content und .sidebar anwenden, das ist unabhängig von Flex
Bei einem normalen Layout habe ich den Content zentriert indem ich der Division eine klasse mit beispielsweise 15PX Padding
Das verstehe ich nicht, Padding fügt nur einen Innenabstand hinzu und zentriert nichts. Text kann man sehr einfach horizontal mit text-align:center; zentrieren und Flexitems mit align-items: center; für den Flexcontainer. Erkläre doch mal genauer, was Du unter Zentrierung verstehst und welche Elemente Du zentrieren willst.
Da hat dir Basti in Posting #6 ein Beispiel gegeben. Aber Du schreibst ja leider, dass Du kein PHP auf deinem Webspace hast. Ich würde mir schnellstens einen anderen Provider suchen oder bei der Telekom upgraden.
Aber dass Davis seine API nicht für Cross-Domain-Access freigibt ist auch ein schwaches Bild.
Edit: Wohl besser nicht bei Telekom upgraden: Paket M kostet 15 €, bei all-inkl z. B. gibts PHP schon für 5 € ohne Mindest-Vertragslaufzeit und ohne Einrichtungsgebühr.
Hier schon mal eine Demo, die die Kreise anordnet:
<style>
.circle {
border-radius: 50%;
background-color: lightblue;
position: absolute;
}
#table-circles td {
width: 20px;
height: 20px;
}
</style>
<table id="table-circles">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>3</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
<script>
var radius = 5, // Radius, in dem die Kreise angeordnet werden sollen
radCircle = 3, // Radius der angezeigten Kreise
cellX = 2, cellY = 2; // Position der Zelle, in der der Wert steht
var theTable = document.getElementById('table-circles'),
theCell = theTable.rows[cellY].cells[cellX],
wCell = theCell.offsetWidth, hCell = theCell.offsetHeight;
theCell.style.position = 'relative';
var nrCircles = parseInt(theCell.textContent);
var deltaRad = Math.PI * 2 / nrCircles;
theCell.innerHTML = '';
for (var i = 0, rad = 0; i < nrCircles; i++ , rad += deltaRad) {
var circle = document.createElement('div');
circle.className = 'circle';
var deltaX = radius * Math.sin(rad),
deltaY = radius * Math.cos(rad);
if (nrCircles == 1) deltaX = deltaY = 0;
var x = wCell / 2 - radCircle + deltaX,
y = hCell / 2 - radCircle - deltaY;
circle.style.left = x + 'px';
circle.style.top = y + 'px';
circle.style.width = circle.style.height = 2 * radCircle + 'px';
theCell.appendChild(circle);
}
</script>Hast Du denn den Ordner in einer Variablen vorliegen? Wenn ja, ist es überhaupt kein Problem, diese in der URL-String einzufügen:
'map/mt.google.com/vt/' + deine_variable + '/{z}/lyrs=s&x={x}&y={y}&z={z}.jpg',
Ein funktionierendes Beispiel rein auf das Javascript bezogen ist das geringere Problem, das größere ist, ein Javascript, das das leistet, in deiner Node-Red-Umgebung aufzurufen. Hast Du eine Möglichkeit, ein Javascript auszuführen bzw. eine Javascript-Funktion aufzurufen nachdem die Tabelle fertig aufgebaut und gefüllt ist?