Beiträge von AndreasB

Du versuchst vermutlich bgColor zu setzen. (Achte auf den Case)

Ich bin kein großer Freund von dynamischen styles, deren Werte nicht zur Laufzeit berechnet werden.

Am Besten du definierst eine CSS Klasse mit dem Style und setzt diese dynamisch.

Gibt denn die Konsole einen Fehler aus?

Außerdem git es bei allen Browsern in den Entwicklerwerkzeugen (meist im Netzwerk Tab) eine Checkbox, die den Browsercache, so lange wie die Entwicklerwerkzeuge offen sind, deaktiviert.

Diese Option sollte bei der Entwicklung immer angeschaltet sein (außer man möchte die Performance überprüfen, denn die leidet natürlich unter einem deaktivierten Cache).

Thommy402 Schau' mal im Network Tab in deinen Entwickler Werkzeugen, ob alle deine Bilder geladen werden.

Wenn nicht, schau' mal welche url angefragt wurde.

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

Zitat von langi

Wie geht denn das konkret?

Am besten bindest du ein eigenes Script ein, dass dann so etwas enthält.

window.addEventListener('load', () => {

    // Du musst das Element, auf dem der Eventlistener sitzt selektieren.
    // Da ich deinen Code nicht kenne, kann ich dir hierbei nicht helfen.
    const myElement = document.querySelector('Hier muss der Element Selektor rein')

    // So führst du einen Click auf dem Element aus.
    myElement.click();
});

Du musst auf jeden Fall dafür sorgen, dass dieses Script NACH dem ausgeführt wird, dass den Handler Setzt.

Wie du das machst, kann ich dir leider nicht sagen, da ich deinen Code nicht kenne.

Zitat von tk1234

[...] Per Tastatur lässt sich der Focus nicht auf jedes beliebige Element setzen

Doch, das geht. Dafür ist der tabindex da

Zitat von tk1234

[...] und automatisch auswerten/erkennen lässt sich das schon garnicht.

Was meinst du mit automatisch? Programmatisch?

Zitat von langi

Was kann ich nun mit dem anfangen??

Nicht viel. Nun müsstest du als nächstes den Code nach einem Objekt in der Variablen C und deren Methode .fire() durchsuchen. Außerdem nach einem Objekt das sich in der Variablen r befindet und die Methode .getEvent() besitzt.

Wenn du den Quelltext nicht hast und außerdem, noch Anfänger bist, wird das eine sehr schwierige und langwierige Arbeit.

Ich verstehe jetzt warum du den Klick simulieren wolltest.

Kannst du nicht das HtmlElement, auf dem der Handler registriert ist mit .click() "anklicken"?

Wie gesagt, die .click() Methode existiert auf jedem HtmlElement

Zitat von tk1234

wenn etwas klickbar sein soll, verwende <button>s, sonst ist das nicht bedienbar.

Wieso? Ob man ein UI Element gut bedienen kann, liegt doch daran, wie man es styled und nicht an dem Element, dass zu Grunde liegt.

Wenn man ein <div> oder auch <span> so styled das der User es als Button oder anderes Klickbares UI Element erkennt und eventuell noch ein cursor: pointer vergibt, ist das sehr wohl bedienbar.

Zitat von langi

[...] fast aller Code ist minifiziert.

Und du hast die Quelldateien nicht? Woher ist den der Code?

Zitat von langi

Wenn ich das richtig verstehe kann mein Anliegen mit HtmlElement.click() nicht gelöst werden, da der Mausklick nur simulert wied wenn

wenn was? Hier fehlt der Rest des Satzes.

Zitat von langi

Ich wollte damit nur zeigen, dass es kein Button und keine Checkbox ist.

Das ist nicht schlimm. Man kann das Klick-Event auf allen HtmlElementen auslösen und auch abfangen.

Zitat von langi

Wie kann ich denn am besten eruieren, welcher Klickhandler verantwortlich ist?

Das machst du am Besten über die Browser Entwicklerwerkzeuge.

in Chrome hier auf der Seite sieht das zB so aus:

html-seminar.de/woltlab/attachment/2750/
Wenn du auf den Link klickst, landest du in deinem Handler.

Tip:

Bei minifiziertem Code gibt es meist einen Button, der de-minifiziert,

bei Chrome ist der links unten in der Ecke des Sources Tabs.

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

Mit dem HTML Schnipsel kann ich nichts anfangen. Was soll mir das zeigen?

Zitat von langi

Da die js-Files sehr umfangreich und kompimiert sind, konnte ich nicht eruieren wie und wo ein KIickereignis verarbeitet wird.

Das Versteh' ich nicht. Was hat der Umfang mit der Übersichtlichkeit zu? Oder hast du deinen Code minifiziert?

Einen Klick, kannst du mit HtmlElement.click() simulieren, Aber muss es wirklich ein simulierter Klick sein?

Normalerweise wir ein Klick von einem Klickhandler verarbeitet. Das ist eine Funktion, die du einfach beim Start deines Programs aufgerufen kannst.

Ich denke mal dir fehlt das Modul ts-node.
Sieh' mal hier: https://stackoverflow.com/ques…d-module-ts-node-register

Also Ich kann alle Bilder laden.

Was meinst du mit "nicht funktionieren"? Sieht das bei dir so aus?:

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

Dann ist der Source Pfad falsch.

Tip:

Ich empfehle dir dringend Dateinamen ohne Sonderzeichen und Leerstellen zu verwenden.

Zitat von Lupus_III

Die Klasse panel und das Tag <p> wird nicht angesprochen.

Wie meinst du das über CSS?

Doch werden sie:

div.panel {
/* ... */
}

viyoguha

div.panel {
    font-size: 2rem;
}

Das klappt doch.

Ich verstehe dein Problem nicht so richtig.

Zitat von viyoguha

Jedoch kann ich die Schriftgröße des Textes im ausgeklappten Zustand nicht ändern.

Bei welcher Gelegeheit und wieso möchtest die Schriftgröße ändern?

Zitat von viyoguha

Beim Thema funktioniert es.

Welches Thema ist hier gemeint?

Bitte benutze für das Einfügen von Code die entsprechende Editorfunktion. (am Besten noch mit dem Korrekten Sprachtyp) dann kann man das Beispiel besser betrachten und auch kopieren.

ich bin neugierig: Wo hast du denn die Eigenschaften float: top und float: bottom her?

Oder hast du dir selber "zusammengereimt"?

Zitat von NickSchnick99

Ich arbeite noch nicht so lange mit CSS...wie sähe denn eine Alternative aus?

iFrames haben nichts mit dem Styling (CSS) zu tun. Sie sind Strukturelemente (HTML).

Eine Alternative wären normale HTML Elemente ohne iFrame.

Zu deiner ursprünglichen Frage:

Da gibt es viele Möglichkeiten.

Schau dir auf jeden Fall Flexbox an.

Du kannst das aber auch zB so umsetzen (Das ist aber nicht so robust wie Flexbox):

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.Oben {
    height: 200px;
}

.Unten {
    height: calc(100% - 200px);
}

Außerdem hast du noch einige Fehler in deinem HTML, validier das mal.

Also ich würde das nicht über If-Else steuern, sondern über CSS Klassen.

1. Zuerst würde ich zwei CSS Klassen vorbereiten. Eine hidden und eine visible.

2. Allen versteckten Elementen würde ich die Klasse hidden geben.

3. Beim Klick auf einen Button würde ich mir das Element mit der klasse visible schnappen und bei dem die Klasse visible mit der Klasse hidden austauschen.

Danach würde ich bei dem Element, dass sichtbar sein soll, die Klasse hidden mit der Klasse visible austauschen.

Ich hoffe das hilft dir.

Hallo lagraf,

Ich verstehe. Wenn du die Klasse store-item--in-cart trotzdem verwenden möchtest, könntest du ihr auch Mediaqueries verpassen.

Du kannst das aber natürlich ja so machen, wie du es jetzt machst.

Grüße

Kannst du da mal einen Screenshot von posten?

Und zusätzlich noch den Codeausschnitt (mit Styles) posten. Sonst wird das eine ziemliche Raterei.

https://www.html-forum.de/threads/9044/

Zitat von Jens_M

ich wollte eigentlich einen Bildwechsel mit hover auslösen.

Das Meine ich ja. Wie soll das denn konkret aussehen?

Einen Bildwechsel kann man auf viele verschiedene Arten Realisieren:

• Die Einfachste hat Sempervivum in seinem Post skizziert. Ein einfaches austauschen der Hintergrundbilder.
  Du schreibst allerdings, dass du gerne einen "Fade" von 500ms hättest. Dann ist ein einfaches Austauschen der Bilder nicht das was du willst.
• Etwas komplizierter wäre dann, dass du zwei Elemente (Das Original und ein Pseudoelement) übereinander platzierst, und das obere beim Hover aus- oder einblendest (über opacity, wie du es dir schon gedacht hast.) Wenn du das mit einer Transition versiehst, hast du deinen Fade.
  So einen Fade könnte man auch noch anders hinbekommen:
  • Du könntest auch den Hintergrund als SVG laden und dann per style die Farbe ändern.
  • Eine Weitere Möglichkeit wäre die Farbänderung deines Backgrounds mit CSS-Filtern zu implementieren. Dazu müsste man schauen, ob deine Ziel-Browser das unterstützen.

Man könnte aber auch einen ganz anderen Übergang implementieren, zB einen indem man den 2.Hintergrund von einer Seite aus "reinschiebt".

Es gibt also viele Wege, die dich zum Ziel bringen und wir können dir erst wirklich helfen, wenn wir wissen, wie der Übergang aussehen soll.

Hallo lagraf,

Freut mich, wenn ich dir helfen konnte.

Zitat von lagraf

[...] der Warenkorb ist nicht immer an der gleichen Stelle, da er abhängig von der Browserwidth mehr oder weniger weit vom Rand weg ist.

Ist denn der Warenkorb in der Mitte der Seite mit margin:auto plaziert, oder ist er nur rechts, anstatt links? Wenn das so ist, kannst du die Eigenschaft left durch die Eigenschaft right austauschen und du könntest wieder statische Werte verwenden.

Die Werte müsstest du dann natürlich anpassen.

Grüße

Andreas