Beiträge von Sempervivum

Gute Nacht! Die nächste Frage kannst Du ja morgen stellen ...

Zitat

Genau das habe ich auch gesehen, dass es SCSS ist. Ich habe dann mit Dreamweaver eine neue SCSS Datei erstellt, den Code reinkopiert und als ich es gespeichert habe, kam eine Meldung das die Datei in CSS kompiliert wurde und ich hatte dann css und scss.

Tut mir Leid, ich hatte nicht damit gerechnet, dass Du dich mit SCSS auskennst. Ich selber nämlich so gut wie nicht.

Freut mich, dass es jetzt funktioniert.

Ja, Du kannst die Einzüge im Head lassen. Am besten auch die anderen dort hin bringen, dann ist es übersichtlicher.

Nein, ich meine auf der codepen-Seite das CSS. Das ist SCSS und muss kompiliert werden. Das habe ich mal gemacht und ein fiddle gemacht, daraus kannst Du das CSS kopieren:

http://jsfiddle.net/dtsLy10q/

Das codepen braucht noch eine Reihe mehr Einzüge, eine wahre Materialschlacht. Du musst dieses noch ergänzen:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.csss">

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.