Beiträge von Sempervivum

Zitat

https://codepen.io/valentingalmand/pen/MYMZZK

Ich sehe, das ist SCSS. Das musst Du kompilieren, z. B. hier:

http://beautifytools.com/scss-compiler.php

Zitat

Du meinst die URL von meiner Website, oder?

http://www.blickpunkt-grafikdesign.de

Ich bin ja dumm, die hattest Du ja längst gepostet.

Der Fehler liegt hier:

<button type="submit" id="button"></button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script>
      $(function() {
      $( "#button" ).click(function() {
      $( "#button" ).addClass( "onclic", 250, validate);
      });
     function validate() {
      setTimeout(function() {
      $( "#button" ).removeClass( "onclic" );
      $( "#button" ).addClass( "validate", 450, callback);
      }, 2250 );
      }
      function callback() {
      setTimeout(function() {
        $( "#button" ).removeClass( "validate" );
      }, 1250 );
    }
  });
      </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <!-- loeschen -->
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script>

Ganz unten ziehst Du jQuery zum zweiten Mal ein. Dabei wird alles, was von jQuery-UI umgeändert oder hinzugefügt wurde, wieder gelöscht. Lösche diese Zeile.

Zitat

Von mehr als einem Parameter bei der Funktion addClass() ist mir nichts bekannt

Dabei hatte ich mich auf die Doku von jQuery verlassen.

jQuery-UI kennt jedoch diese Parameter:

http://api.jqueryui.com/addclass/

Wie ich sehe, hast Du jQuery-UI auch eingebunden. Dann muss es einen anderen Grund haben, wenn es nicht funktioniert. Hast Du es online und kannst die URL posten?

Zitat

ich hatte den code von codepen.io

Ah ja, kannst Du mal die URL posten?

Wenn ich dich richtig verstehe:

• soll der Button zu rotieren beginnen, wenn man ihn drückt durch Hinzufügen der Klasse "onclic"
• soll der Button einen Haken anzeigen durch Austausch dieser Klasse gegen "validate" wenn die Antwort vom Server kommt
• soll der Haken nach Ablauf einer Verzögerungszeit wieder verschwinden durch Löschen der Klasser "validate"

Zwei Einwände:

• Von mehr als einem Parameter bei der Funktion addClass() ist mir nichts bekannt: https://api.jquery.com/addclass/
• Ich erwarte, dass bei diesem kurzen Skript die Antwort vom Server sehr schnell kommen wird, so dass der rotierende Button nur ganz kurz aufblitzen wird

Oder möchtest Du alles zeitgesteuert machen, d. h. beim Drücken beginnt er zu rotieren, nach Ablauf einer Zeit zeigt er den Haken, nach Ablauf einer weiteren Zeit verschwindet der Haken wieder?

Zitat

Kann man das auch noch so einfach ändern, dass die Felder wieder leer sind?

Auch das ist kein Problem mit der Funktion reset():

<script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function(output) { 
                $("#response").html(output);
                $("form")[0].reset();
            }); 
        }); 
    </script>

Das ist überhaupt kein Problem. Mit dem jQuery-Plugin Ajaxform kannst Du mit wenigen Zeilen Javascript das Formular über Ajax abschicken und die Antwort auf der ursprüngliche Seite sichtbar machen:

http://malsup.com/jquery/form/

Würde dann so aussehen:

<section class="contact" id="contact">
<div id="response"></div>
<h3>KONTAKT</h3>
<form method="post" action="kontaktformular.php">
<input type="text" name="von" placeholder="Name" class="name"/><br />
<br />
<input type="text" name="mail" placeholder="E-Mail" class="mail"/><br />
<br />
<textarea name="nachricht" placeholder="Nachricht"></textarea>
<br />
<button type="submit" id="button"></button>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function(output) { 
                $("#response").html(output); 
            }); 
        }); 
    </script>

Gern geschehen! Wie ich sehe, funktioniert es jetzt.

Du hast hier den Thread von Redland gekapert. Mache lieber einen neuen auf mit deinen Fragen.

Das benutzt jQuery-UI, das musst Du dann zusätzlich einbinden:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

mootools ist wieder ein anderes Framework. Wird aber kaum noch benutzt.

Du musst jQuery einbinden, um solche Skripts zu verwenden. Siehe z. B. hier:

https://www.html-seminar.de/jquery-tutorial.htm

Zitat

es scheint noch nicht ganz zu funktionieren.

Das hätte ich erwähnen sollen: Du musst den zweiten Codeabschnitt, den auf coaching.html, an das Ende des body legen. Steht er im head, so sind die angesprochenen Elemente noch nicht definiert.

Zitat

Ausserdem wüsste ich gerne, ob ich in der selben Codezeile auch mehr als ein «item» ansprechen kann, da andere Navigationen auch Unternavigationen haben?

Du musst in den beiden Codezeilen immer genau ein item ansprechen und zwar das der betr. Unterseite. Bei coaching.html ist das .item-03. Bei kontakt.html, wo es ebenfalls Unterseiten gibt, musst Du .item-07 verwenden.

Zitat

ein Balken in der Breite mit dem man die Webseite verschieben kann

Ich gehe davon aus, dass Du damit die horizontale Scrollbar meinst. Der Grund dafür, dass sie auftaucht ist das CSS deines Formulars:

.contact {
    width: 100%;
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 10px;
    display: inline-block;
    margin-top: 0px;
}

CSS ist so definiert, das paddings und margins zu der Breite, die mit width angegeben wurde, addiert werden. D. h. die Breite deines Formulars ist "100% + 50px". Weil diese die Fensterbreite überschreitet, blendet der Browser die Scrollbar ein, damit der gesamt Inhalt zugänglich ist.

Abhilfe, indem Du bei der Definition der Breite die paddings subtrahierst:

width: calc(100% - 50px);

Zitat

ab einer horizontalen Auflösung von 640px verschwindet die Navigation Bar und ein Button erscheint, der bei einem Tippen oder Klick drauf ein Dropdown-Menü mit den Punkten der Navigation Bar öffnet.

Das ist ein gängiges und wohl begründetes Verhalten bei einem responsiven Layout und ich frage mich, warum Du es ändern willst?

Das ist im Javascript so ausprogrammiert, und zwar hier:

  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;    
  }

Hat das li-Element, in dem das geklickte a-Element liegt, ein Untermenü, wird die Funktion mit false verlassen. Das bewirkt, dass die Standardaktion des Klick, in diesem Fall das Ansteuern des Link, unterdrückt wird.

Abhilfe einfach, indem Du diesen Code durch "return true" ersetzt. Dann wirst Du aber mit einem weiteren Problem konfrontiert, denn dadurch, dass eine neue Seite geladen wird, ist das Untermenü wieder geschlossen. Abhilfe dafür: Auf der Seite coaching.html das Untermenü öffnen:

$(".item-03 > ul").slideDown("normal");
$(".item-03").addClass("active");

"dropdown menu click pure css", da findet man sehr vieles.

Mit den richtigen Suchbegriffen findet man Beispiele für so etwas leicht, z. B. dieses:

https://codepen.io/Tont/pen/hdsev

Javascript ist nicht unbedingt erforderlich.

Zitat

Mir erschliesst sich der Sinn nicht.

Der Sinn erschließt sich mir auch nicht. Ich habe nur den Wunsch von hunny-design umgesetzt. Wenn man möchte, dass dies nach einem erneuten Laden die Grundeinstellung sein soll, müsste man es in geeigneter Form speichern, z. b. im Localstorage.

Zitat

Dein eventListener macht doch genau das, was sowieso bei einer Auswahl erfolgt: Die Option ist selected

Nein, die Option ist zwar selektiert und die Pseudoklasse :selected ist gesetzt und selectedIndex verweist auf die selektierte Option, aber, wie ich schon geschrieben habe, folgt das Attribut "selected" dem nicht. Benutze den HTML-Inspektor, um dich davon zu überzeugen.

Man lernt nie aus: Ich hätte geschworen, dass die Eigenschaft selected dynamisch ist und mit wechselt, wenn man eine neue Option auswählt. Ist jedoch offenbar nicht der Fall, wenn ich meinem HTML-Inspektor glauben kann. Auf den zweiten Blick jedoch einleuchtend, denn ein Attribut ist etwas anderes als die Pseudoklasse :selected.

Dieses sollte jedoch funktionieren:

    <select id="sel1">
        <option value="opt1" selected>opt 1</option>
        <option value="opt2">opt 2</option>
        <option value="opt3">opt 3</option>
    </select>
    <script>
        sel1.addEventListener("change", function () {
            for (var i = 0; i < sel1.options.length; i++) {
                sel1.options[i].removeAttribute("selected");
            }
            sel1.options[sel1.selectedIndex].setAttribute("selected", "");
        })
    </script>