Beiträge von Sempervivum

Beim Durchlesen deines Codes kann ich keine Fehler erkennen. Ajax, und dieses jQuery-load ist ja Ajax, braucht jedoch einen Webserver, wenn Du die Datei einfach mit file: öffnest, wird es nicht funktionieren. Die Console müsste entsprechende Hinweise geben.

Nein, so geht das nicht, das PHP muss ja schon auf dem Server zur Verfügung stehen, wenn Du auf dem Client bist und mit Javascript arbeitest, ist es zu spät.

Mache es genau wie mit dem Inhalt von body: Die URL abhängig von der Fensterbreite zur Verfügung stellen und mit jQuery-load in den Header hinein laden.

Zitat

dass ich immer manuell den Ordner auswählen muss und das Script nicht die Datei im gleichen Ordner wieder speichert, aus dem ich die Datei geladen habe.

Hat jemand vlt. Eine Idee wie man das machen kann?

Leider nicht: Aus Sicherheitsgründen ist der Pfad, aus dem eine Datei geladen wird, in Javascript nicht verfügbar.

Ganz so einfach ist es nicht, denn das audio-Element unterstützt keine Playlists, diese muss man selber bauen. Du findest aber Beispiele im Netz.

Und wenn Du die Dateien aus einem Verzeichnis auslesen und in der Playlist verwenden willst, brauchst Du PHP. Mit der Funktion glob() kannst Du die Dateien auslesen und daraus die Struktur generieren, die deine Playlist braucht.

Oh, mein Fehler, dass muss in Anführungszeichen.

Nein, da bist Du jetzt etwas auf dem falschen Wege. Die forEach-Schleife auf das Ergebnis von querySelectorAll() anwenden:

document.querySelectorAll(.btn).forEach(function(item, idx) {
    item.addEventListener('click', btnClick);
});

In der Funktion btnClick hast Du dann wieder über this Zugriff auf den geklickten Button. Oder alternativ über event.target.

Zitat

Nach einigen recherche habe ich etwas gefunden mit querySelectorAll(); denke das es ein falscher weg ist.

Ich denke, dass das genau der richtige Weg ist. Mit querySelectorAll() kannst Du eine Liste der Elemente erzeugen, wenn Du die Klasse als Selektor verwendest. Dann kannst Du mit einer forEach-Schleife diese Elemente abarbeiten und mit der Funktion addEventListener() deine Funktion btnClick registrieren.

In der Console werden Hinweise und Fehlermeldungen ausgegeben, häufig sehr hilfreich. Drücke F12 in IE/Edge oder Strg+Umsch+I

Überprüfe mal deinen Pfad:

<script src="/java1.js"></script>

Wenn Du einen Schrägstrich davor hast, wird die Datei im Wurzelverzeichnis deiner HP gesucht. Liegt sie dort auch?

Wirf einen Blick in die Console, u. U. findest Du dort Hinweise.

Zitat

die .width() geht doch nach pixeln, desktop hier 1920, was wäre wenn ein gutes händy display auch zb > 1400 wäre

Keine Sorge, man muss dabei zwischen der physikalischen Auflösung und den CSS-Pixeln unterscheiden, siehe hier:

https://webplatform.github.io/docs/tutorials…ding-css-units/

Ich hoffe Mal, dass $(window).width() die CSS-Pixel liefert, werde ich mal untersuchen.

Du kannst natürlich auch clientseitig die Fensterbreite abfragen und gleich die richtige Seite holen:

$(document).ready( function() {
    var height = $(window).height();
    var width = $(window).width();
    if (width > 600) url = 'body.php'; else url = 'body_mobile.php';
    $('body').load(url);
});

AFAIK hat man von PHP aus keinen Zugriff auf die Abmessungen des Browserfensters. Du kannst jedoch den Inhalt des body-Elementes mit Ajax holen und dabei Breite und Höhe übergeben. Dann kann das PHP jeweils die richtige Seite aufbauen und zurück liefern.

Das wird hier beschrieben:

https://stackoverflow.com/questions/1810…p-on-first-load

Zitat

kann man auf der allerersten seite, hier index.php eine art if-abfrage mache, ob die pc variante kommt oder eine völlig abgespeckt, nur 2 menupunkte und alle fotos mittig und groß untereinander

Hast Du dich schon mit Mediaqueries beschäftigt? Damit kannst Du ja das CSS von der Fensterbreite abhängig machen und Elemente, die nicht sichtbar sein sollen, unsichtbar machen.

Wenn ich dies lese: "start_pc.php bzw. start_smartphone.php" so ist es natürlich auch möglich, zwei Varianten der HP zu machen. Man kann daran denken, wenn die Unterschiede sehr groß sind. Ich würde mir das aber zweimal überlegen, weil Du dann beide Varianten pflegen und ändern musst, wenn z. B. neue Bilder hinzu kommen.

Zitat

dass ein frame über dem bild liegt, der zb, transparent macht, oder

die ränder etwas dunkel, ihr kennt diese ja bestimmt sowieso.

bei diesen effekten gehen die einfach über den sticky header beim scrollen, als gäbe es ihn nicht ????

Wenn ich dich richtig verstehe, sind diese Bilder und Frames bzw. Overlays nicht auf dem sticky Header selber sondern irgend wo auf der Seite und überdecken dann den Header?

Vermutung: Häufig ist diese Überdeckung gewollt und wird durch einen hohen z-index erzwungen. Wenn dem so ist, müsstest Du durch einen abgestuften z-index, d. h. auf dem Header einen z-index, der noch höher ist, erreichen können, dass der Header wiederum die Overlays überdeckt.

Besser wäre es allerdings, wenn Du eine Demoseite hättest, wo man sich das Problem ansehen kann. Oder den Code posten, wenn Du noch keinen Webspace hast.

Du brauchst nur einen Container, auf den Du die CSS-Regel anwenden kannst. Also z. B.:

<div class="zeiger_zoom-in"></div>

im body.

Und das CSS trägst Du in deine CSS-Datei ein:

.zeiger_zoom-in {
    cursor:zoom-in;
    height: 200px;
}

Wenn der Container keinen Inhalt hat, musst Du ihm eine Höhe geben, weil die Höhe sonst 0 ist und der Container unsichtbar.

Weißt Du schon, wie man CSS einbindet?

https://www.html-seminar.de/stylesheets_in_html_einbinden.htm

Um das CSS für den Cursor zu definieren, brauchst Du ja einen Selektor, der angibt, für welches Element die Regel gelten soll. Bei dem CSS in Posting #42 und #43 müsste das ein Element, z. B. ein div, mit der Klasse "zeiger_zoom-in" innerhalb eines anderen Elementes mit der ID "Inhalt" sein.

Um einen schnellen Einstieg zu bekommen, versuche aber erst Mal, die Regel auf das body-Element anzuwenden:

body {
    cursor:zoom-in;
}

Beschreibe doch Mal, was Du genau vor hast: Bei welchem Element soll der Mauszeiger auf "zoom-in" gehen? Wie soll dieses Element aussehen?

Für solche Bilderwechsel ist u. a. Cycle2 sehr gut geeignet:

http://jquery.malsup.com/cycle2/

Zitat

Wichtig dabei wäre, dass die Bilder alle in dem Frame scaliert sind, sich also nicht hässlich verzerren, sondern an die Seite angepasst sind.

Diese Aufgabe ist nicht ganz trivial: Es erfordert, dass alle Bilder das selbe Seitenverhältnis haben. Wenn nicht, muss man akzeptieren, dass entweder etwas abgeschnitten wird oder Leerräume bleiben. Das Einpassen kann dann mit CSS object-fit geschehen:

https://wiki.selfhtml.org/wiki/CSS/Eigen…eige/object-fit

Das liegt daran, dass das figure-Element per Default eine relativ großen Außenabstand (margin) hat. Verkleinert man diesen, rücken die Bilder näher zusammen:

html-seminar.de/woltlab/attachment/2253/