Beiträge von Sundream

    Hallo ihr,


    ich habe ein Problem bei der Übergabe von Daten eines Kontaktformulars.

    Es wird plötzlich Absender nicht mehr richtig weitergegeben (Email kommt von postmaster@was auch immer)

    Allgemein wird nur die Telefonnummer weitergegeben. Nachricht, Name, etc. fehlen.

    Ich hätte gerne in der Email etwas stehen wie "Der Datenschutz wurde akzeptiert.", wenn die Checkbox ausgewählt ist.

    Zusätzlich wäre es super cool, wenn da dann stehen würde:

    Name: Hans Fritze

    Telefon: 0123456

    Nachricht: bla bla

    Checkbox: Die Datenschutzerklärung wurde akzeptiert.


    Ich hab mir mal wieder meinen Code selbst zusammen gebastelt, weil ich kein PHP kann... und komme einfach nicht weiter.


    HTML:


    PHP:


    Ich hoffe ihr könnt mir weiterhelfen, vielen Dank schonmal!!


    Liebe Grüße


    Sun

    Ah Basti das Beispiel ist super danke !! Ich brauchs nur andersrum :P Also wenn ein bestimmtes Element nicht mehr sichtbar ist, dann muss die nav sichtbar sein :) und eben dann immer am oberen bildschirmrand fixed...

    Was müsste man da ändern? :)


    Sticky heißt für mich eigentlich, dass sobald ich an der navigation vorbei scrolle die Navigation am oberen bildschirmrand sich festsetzt und ab dann immer im vieport sichtbar ist.

    Hallo ihr ,


    ich wechsle gerade Bilder per :hover und background-image. Code:

    Code
    1. div.img-oben-neu {background: url(Bilder/Nutzung.jpg);background-size: cover;background-repeat: no-repeat;}
    2. div.img-oben-neu:hover {background: url(Bilder/Nutzung2.jpg);background-size: cover;background-repeat: no-repeat; }


    Das funktioniert soweit gut und ist auch responsive.

    Jetzt hätte ich aber eigentlich gerne noch ne transition mit .4s

    background-images kann man aber keine transition zuweisen... Gibts da vielleicht irgendeine andere Lösung. Hab mich jetzt durchs Internet gewühlt und nichts brauchbares gefunden..

    Ich hab gelesen, dass man das eine Bild relative positionieren kann und eins drüber legt mit position:absolute und dann mit der opacity spielt, der man ja auch ne transition zuweisen kann.

    Aber dann ist es ziemlich kompliziert das ganze responsiv zu bekommen (finde ich).


    Danke schonmal.


    Sun

    Hallo ihr,


    ich habe folgenden Code:


    HTML:

    und dazu folgendes css:



    Wenn ich jetzt möchte, dass die Navigation erst sticky wird, wenn ein bestimmtes Element (in diesem Fall das div) aus dem Bild scrollt, was muss ich dann ändern?

    Ich weiß ich könnte jetzt im script sagen okay, das div ist 500px hoch, mach das bitte ab 500px. Aber was, wenn ich sage width:100%; height:auto;? dann ist die Höhe ja immer wieder unterschiedlich... Brauch da quasi ein responsive workaround :)


    Danke schonmal!


    Liebe Grüße


    Sun

    Ich hab gerade mal geschaut, bei mir scrollt es nur in Mozilla Firefox und da funktioniert es auch nicht..

    In Microsoft Edge und auch Chrome funktioniert es, dass er bis zum Ende der Seite geht, aber da springt er dahin und scrollt nicht...

    Liegt scheinbar daran, dass einige Browser das überhaupt nicht unterstützen...


    Gibt es da ne andere Lösung, dass immer zu den geklickten Navigationspunkten gescrollt wird, die in allen Browsern funktioniert?

    Also wenn ich das in einer mobilen Ansicht anschaue z.B. für Iphone oder so, dann hört es bei mir im Mozilla auf zu scrollen sobald sich die Navigation schließt und scrollt eben nicht bis nach unten.... Bei der Desktopansicht funktionierts, das ja, aber da is ja auch die mobile Navigation nicht sichtbar....

    Hier hab ich den Code mal so verändert wie ich das meine: https://codepen.io/anon/pen/BXWbZO (Hoffe der hat das jetzt gespeichert)

    Wenn ich die CSS- Eigenschaften für html und body entferne kommt er im mobile Bereich wenn ich auf services klicke bis ganz nach unten. Wenn ich aber das mit dem scroll-behavior drin hab, hört er sofort auf zu scrollen, wenn die nav dann zu is (er scrollt also nichtmal ne sekunde oder so) und bleibt irgendwo mittendrin stehen.

    Das würde ich verhindern wollen, weiß aber nicht wie.

    Also du hast mich schon richtig verstanden, nur bei mir hatte es irgendwie nicht funktioniert...

    Habe es jetzt trotzdem nochmal getestet und jetzt funktioniert es... keine Ahnung warum..


    Jetzt habe ich aber ein neues Problem. Die Navigation scrollt nur so lange zu dem Punkt wo sie hin soll, solange die Navigation geöffnet ist. Das heißt sie fängt an zu scrollen und bricht dann ab, weil sich die Navigation schließt. Dadurch funktioniert sie dann natürlich nicht mehr richtig.

    Ist das ein normales Verhalten oder muss irgendwo ein Fehler sein? Oder gibt es etwas womit man das umgehen kann?


    In deinem Code funktionierts (hab der Navigation kurz mal id-Ziele gegeben), aber meine html/body haben noch die css-Eigenschaft: scroll-behavior: smooth;

    Hallo ihr,


    ich habe für eine responsive Navigation folgenden Code verwendet:

    https://codepen.io/bradfrost/pen/sHvaz

    Den Code habe ich für eine Onepage verwendet. Das heißt meine Navigationspunkte sind Anker auf der Website. Wenn ich jetzt darauf Klicke bleibt die mobile Navigation offen und stört. Wäre super, wenn sie sich wenn ich eins der li Elemente anklicke wieder schließt. Ich weiß nur leider nicht was ich beim Js ändern muss, damit das so funktioniert.


    Kann mir bitte jemand weiterhelfen?


    Danke!


    Liebe Grüße


    Sun

    Das hat aber doch nichts mit JavaScript zu tun.


    Das hier ist entscheidend:

    Code
    1. .carousel-cell {
    2. width: 50%; /* half-width */
    3. line-height: 160px;
    4. margin-right: 10px;
    5. }

    Hallo Bandit,


    du hattest Recht. Man kann die Änderungen einfach da vornehmen. Problem: Wenn man es nur mit dem Firefox-Inspektor probiert setzt er es irgendwie nicht richtig um. Deshalb dachte ich man muss ins Javascript eingreifen.

    Wenn man aber den Code ändert und speichert setzt er das einwandfrei um.


    Danke!

    Ich glaube es steht hier drin:


    aber ich versteh den Code leider nicht...

    Die Seite ist noch nicht online, aber das ist hier: https://jsfiddle.net/ConnorsFan/vm9nn5e0/5/ auch so.

    Im Feld unten bei der Vorschau ist der Code (wenn man ihn mit dem Inspektor untersucht) dann verändert.



    Links unter Ressources findet man die JS und CSS Dateien...

    https://ajax.googleapis.com/aj…query/2.1.1/jquery.min.js

    https://unpkg.com/flickity@2.2.1/dist/flickity.min.css

    https://unpkg.com/flickity@2.2.1/dist/flickity.pkgd.min.js

    Hallo,


    danke für die Antwort.

    Am einfachsten wäre es (meiner Meinung nach) den Wert "left" für das Dokument zu ändern.


    Code
    1. Element {
    2. position: absolute;
    3. left: -50.96%;
    4. }

    Im HTML hat aber carousel-cell keinen style="" Zusatz, weswegen ich davon ausgehe, dass das Javascript das bestimmt. Vorallem auch, weil der Wert immer wieder anders ist (Je nach Bildschirmgröße).


    Meine Frage ist also. Wo steht, welchen Wert left für .carousel-cell bekommt?

    Mein HTML sieht so aus:

    Code
    1. <div class="carousel" data-flickity='{ "wrapAround": true }'>
    2. <div class="carousel-cell"><img src="Bilder/Testimonial1.png" class="Slideshow-img-Testimonial"></div>
    3. <div class="carousel-cell">2</div>
    4. <div class="carousel-cell">3</div>
    5. </div>

    Wenn ich es mit dem Webinspektor von Mozilla anschaue so:


    Code
    1. <div class="carousel flickity-enabled is-draggable" data-flickity="{ &quot;wrapAround&quot;: true }" tabindex="0">
    2. <div class="flickity-viewport" style="height: 160px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translateX(25%);"><div class="carousel-cell is-selected" style="position: absolute; left: 0%;">
    3. <img src="Bilder/Testimonial1.png" class="Slideshow-img-Testimonial">
    4. </div>
    5. <div class="carousel-cell" style="position: absolute; left: 50.52%;" aria-hidden="true">2</div>
    6. <div class="carousel-cell" style="position: absolute; left: -50.52%;" aria-hidden="true">3</div>
    7. </div></div><button class="flickity-button flickity-prev-next-button previous" type="button" aria-label="Previous"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow"></path></svg></button><button class="flickity-button flickity-prev-next-button next" type="button" aria-label="Next"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button><ol class="flickity-page-dots"><li class="dot is-selected" aria-label="Page dot 1" aria-current="step"></li><li class="dot" aria-label="Page dot 2"></li><li class="dot" aria-label="Page dot 3"></li></ol></div>

    Eigentlich will ich wissen, wo das ganze CSS Zeug plötzlich her kommt und wie ich das beeinflussen kann.

    Hallo ihr,


    ich habe ein Problem mit einer Änderung an einem Javascriptcode. Da ich JS eigentlich überhaupt nicht kann, bin ich etwas ratlos.

    Ich habe eine Slideshow nach dem Prinzip auf folgender Website erstellt:

    https://jsfiddle.net/ConnorsFan/vm9nn5e0/5/


    Der JS Code ist folgender: https://unpkg.com/flickity@2.2.1/dist/flickity.pkgd.min.js

    Meine Frage ist nun: Wie kann ich die Abstände zwischen den im Beispiel roten und grünen Elementen ändern? Ich finde das einfach nicht...UND wie kann ich die Höhe des Elements ändern?

    Vielen Dank!


    LG


    Sun

    Habe die Lösung in einem anderen Forum gefunden:

    Die Reihenfolge hat nicht gepasst. Der JS Code wurde vor dem HTML geladen. <script>-Tag ans Ende vor dem </body>, Problem gelöst

    Ich vermute mal der Hund ist hier begraben:

    Ich versteh nur leider zu wenig von JavaScript...


    HTML sieht so aus:

    CSS:


    Hallo ihr,


    ich habe (wie der Titel schon sagt) ein Problem mit meiner Slideshow.

    Ich habe mich nach dem Code auf dieser Website gerichtet: https://www.w3schools.com/howto/howto_js_slideshow.asp


    Wenn ich alles einbaue funktioniert die Slideshow zwar, aber erst, wenn ich das erste Mal auf einen der Pfeile geklickt habe.


    Vor dem ersten Anklicken:



    Nach dem ersten Anklicken (Hab das Bild bisschen unkenntlich gemacht, aber im Prinzip sieht man, dass es eigentlich funktioniert):




    Ich möchte gerne, dass alles standardmäßig so angezeigt wird wie auf Bild zwei...


    Kann mir jemand helfen?

    Danke schonmal. Code ist wie gesagt im Link oben.


    LG