Beiträge von Sempervivum

Dein Vorhaben ist schon etwas komplex. Ich würde es mit Canvas und einer Bibliothek wie jCanvas machen, weil diese Drag&Drop unterstützt. Das Spielfeld könntest du leicht mit zwei verschachtelten Schleifen anlegen. Menü mit den Gebäuden ebenfalls anlegen. Dann mit Drag&Drop die Gebäude auf eine Kachel ziehen lassen.

Noch etwas komplexer würde es, wenn es in 3D sein soll. Auch dafür gibt es, glaube ich, Bibliotheken, aber ich habe keine Erfahrung damit.

Wenn Du auch noch keine Erfahrung hast, würde ich empfehlen, mit einer 2D-Version zu beginnen.

Dann zeige am besten mal ein Beispielbild oder eine Seite, wo die Bilder drauf sind.

Wenn man die Bildgröße an die Gegebenheiten im Web anpasst, habe ich keine Probleme: JPG, 800px an der längeren Kante, Komprimierung so, dass sich eine Dateigröße von 100 bis 200 kB ergibt. Damit gibt es keinen sichtbaren Qualitätsverlust.

Schwierig wird es, wenn man die beliebten fensterfüllenden Hintergrundbilder haben will, Dafür kenne ich auch kein Patentrezept.

Das Skript funktioniert, jedoch werden die Bilder nicht gefunden. Sie müssen im selben Verzeichnis liegen wie die HTML-Datei:

http://weibsbilder-design.de/hgfjhgjkhgfjkk…rv/wb-demo.html

Das Bild wird hier gesucht:

http://weibsbilder-design.de/hgfjhgjkhgfjkk…uvzrv/bild3.png

Edit: Da habe ich bei deinem ersten Posting nicht richtig hin gesehen: Die Bilder stehen im Verzeichnis img, d. h. das Array muss so aussehen:

var arrayofbooks = ["img/book1.png", "img/book2.png", "img/book3.png"];

BTW: Cooler Mousemove-Effekt.

Nein, ID des img-Elementes ist "book" und dem entsprechend book.src = ...

aber Variablenname des Arrays lautet "books" und dem entsprechend books[idx]

Vielleicht hätte ich sie anders benennen sollen:

<div class="tp-caption tp-resizeme rs-parallaxlevel-4" id="slide-699-layer-3" data-x="['left','left','center','center']" data-hoffset="['593','633','-110','-60']" data-y="['top','top','top','bottom']" data-voffset="['183','203','590','20']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="x:right;s:1500;e:Power3.easeOut;" data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;" data-start="2750" data-responsive_offset="on" style="z-index: 8;"><img id="idimgbook" src="img/book1.png" alt="" width="430" height="540" data-ww="['430px','430px','200px','170px']" data-hh="['540px','540px','251px','213px']" data-no-retina>
</div>
<script>
    var arrayofbooks = ["book1.png", "book2.png", "book3.png", "book4.png"]; // ggf. aendern/erweitern
    var idx = Math.floor(Math.random() * arrayofbooks.length);
    idimgbook.src = arrayofbooks[idx];
</script>

Versuche dieses:

<div class="tp-caption tp-resizeme rs-parallaxlevel-4" id="slide-699-layer-3" data-x="['left','left','center','center']" data-hoffset="['593','633','-110','-60']" data-y="['top','top','top','bottom']" data-voffset="['183','203','590','20']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="x:right;s:1500;e:Power3.easeOut;" data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;" data-start="2750" data-responsive_offset="on" style="z-index: 8;"><img id="book" src="img/book1.png" alt="" width="430" height="540" data-ww="['430px','430px','200px','170px']" data-hh="['540px','540px','251px','213px']" data-no-retina>
</div>
<script>
    var books = ["book1.png", "book2.png", "book3.png", "book4.png"]; // ggf. aendern/erweitern
    var idx = Math.floor(Math.random() * books.length);
    book.src = books[idx];
</script>

In dem Layercode habe ich dem Bild die ID "book" gegeben. Nicht getestet.

Zitat

Wie kann ich im mobilen Menü die Menüpunkte mit weissem Hintergrund alle gleich breit machen?

Die Breite hast Du ja schon gesetzt. Damit dies wirksam wird, musst Du noch display: inline-block hinzu fügen. Dadurch verändert sich das Layout leicht, aber das kannst Du dann sicher wieder anpassen.

Zu 2,: Im Moment werden die Blöcke in der Reihenfolge links, rechts, links, rechts, links, rechts, usw. angeordnet. Dann sehe ich die Möglichkeit, Flexlayout zu verwenden, damit der erste Block links auf die Höhe des rechten erweitert wird. Oder ein Zweispaltenlayout, dann werden die Blöcke allerdings anders angeordnet, erst linke Spalte von oben nach unten, dann rechte Spalte von oben nach unten. Zweispaltenlayout kannst Du mit mit colomn-count anlegen, siehe z. B . hier:

https://css-tricks.com/almanac/properties/c/columns/

Zu 1.: Gib der section.subright ein vertical-align: top, dann sollte es funktionieren. Den Grund für diesen Effekt habe ich noch nicht richtig verstanden, es hängt damit zusammen, dass der Defaultwert für vertical-align baseline ist. Vielleicht kann MrMurphy es erklären.

Im Prinzip könntest Du dein Problem mit dem Javascript-Befehl eval lösen, aber viele sagen "eval ist evil" und ich stimme dem zu und mag es nicht besonders.

Stattdessen empfehle ich, die Struktur deiner Daten umzustellen (Du schreibst ja, dass Du sie selber über VBA erstellst), so dass Du einen einfachen Direktzugriff hast:

var data = {
    Rel01067: { Relation: 'A101', Ort: 'Dresden-01067', Tor: '72', Abfahrt: '2:00'},
    Rel01069: { Relation: 'A101', Ort: 'Dresden-01069', Tor: '72', Abfahrt: '2:00'},
    Rel01097: { Relation: 'A101', Ort: 'Dresden-01097', Tor: '72', Abfahrt: '2:00'},
    // usw.
    Rel01108: { Relation: 'A101', Ort: 'DD-Weixdorf', Tor: '72', Abfahrt: '2:00'}
}

Zugriff ist dann sehr einfach:

var key = document.getElementById('suchRelation').value;
item = data[key];

Kommt mir bekannt vor, hast Du das noch irgend wo anders gepostet?
Ich empehle, von dem Submit der Formulare wegzugehen und statt dessen Ajax zu verwenden, dann wird nichts neu geladen und die Seite bleibt, wie sie ist, einschl. Formulareingaben, Javascriptvariablen etc.

Das ist diese Slideshow:
https://tympanus.net/codrops/2014/0…em-transitions/

Leider fehlt dort eine Schritt-für-Schritt-Anleitung, man muss sich den Aufbau aus den Demos herleiten.
Aber wir können es ja mal versuchen. Bevor wir anfangen: Eine gute Voraussetzung wäre, wenn Du die Seite online stellen könntest, wenn etwas nicht funktioniert.

Verstehe. Bei mir ist es umgekehrt. Ich habe beruflich mit C angefangen und da lag mir Javascript am nächsten.

Respekt! Ich hatte mich gewundert, denn es ist ja nicht ganz trivial und ich hätte gedacht, wenn Du so etwas entwickeln kannst, müsstest Du auch dieses Problem lösen können.

Das Umschalten der Navigation wird an den Hamburger-Button gebunden durch diesen Code:

document.getElementById('hamburger-button');
button.addEventListener('click', toggleNav);

und ist daher nur bei Klick auf diesen wirksam.
Mein Code bewirkt, dass auch bei Klick auf die Links das Menü getoggelt wird.
Ob das zu jedem Menü dazu gehört, kann ich nicht sagen. Es hängt davon ab, wie man es haben will.


BTW: Hast Du dieses Menü selbst entwickelt?

Wenn Du dieses zum Javascript hinzu fügst, funktioniert es:

document.querySelectorAll("nav li a").forEach(function (ele) {            ele.addEventListener("click", openNav)        });

Meinst Du dieses?

<a href="Webshop_Hauptseite.html"><img src="Logo.png" style="width: 100px; height: 50px;">
</a>

Zitat

bei mir ist die Verlinkung, wenn ich es im Browser teste immer über dem Bild und ganz an der linken Seite! Ich weiß nicht wie man das behebt!

Das ist genau das, was dieser Code bewirkt. Was möchtest Du den statt dessen erreichen? Dass die Verlinkung auf dem ganzen umgebenden div liegt? Dann musst Du das a-Tag außen herum legen:

<a href="Webshop_Hauptseite.html"><div class="blauesdiv"><img src="Logo.png" style="width: 100px; height: 50px;">
</div></a>

BTW: Ich empfehle, auf absolute Positionierung zu verzichten. Meistens macht sie mehr Probleme als sie löst, vor allem, wenn die Seite responsiv sein soll

Hallo TheCrazyMen,
hast Du dir mein Fiddle nicht angesehen? Ich bin der Meinung, dass es genau das tut, was Du brauchst!

So würde es gehen:
https://jsfiddle.net/Sempervivum/k06avc4p/4/

Mal gespannt, ob jemand eine einfachere Lösung einfällt.

Ich verstehe dich so, dass das Seitenverhältnis des Rechtecks gleich bleibt, egal wie man das Fenster ändert. Soweit ich weiß, geht das nur mit Javascript, weil man mit CSS nur sehr eingeschränkt Berechnungen durchführen kann.