Beiträge von Sempervivum

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>

Zitat

habe kleine frage zwischen durch

Code

1. var aa = blabla
2. for(a=0;a<=aa.lenght;a++;)
3. var test =aa.bla bla[a].innerHTML;
4. alert(test)
5. }

so wird mir der alert ja öffters angezeigt.

ich möchte aber den letzten haben,also das ende von lenght.

Deinen Code verstehe ich nicht vollständig, aber das letzte Element in einem Array bekommst Du so:

var arr = ["a", "b", "c", "d"];
alert (arr[arr.length - 1]);

Dies müsste alles leisten, was Du haben willst:

https://datatables.net/examples/basic_init/scroll_y.html

Scrollbar, fester Kopf, sortierbar.

Zitat

habe die zeile zwar zum stehen bekommen ,aber dann hat sich sich der tabellenbreite nicht angepasst ( weil tabelle mal breiter ist und mal nicht )..

dann habe ich die tabellenbreite ausgelesen und wollte das dann über css bzw über id dann die breite der kopfzeile anpassen,was komischerweisse nicht geklappt hat ...

Hat dabei das Sortieren noch funktioniert? Wenn ja, empfehle ich, diesen Versuch weiter zu führen. Es sollte möglich sein, mit Javascript die Breite des Kopfes anzupassen. Poste doch mal diese Lösung.

Könnte dann so aussehen:

<style>
        #pdfviewer {
            display: inline-block;
        }

        #toolbar {
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            #toolbar img, #toolbar input {
                margin: 0 10px;
            }
    </style>
    <div id="pdfviewer">
        <div id="toolbar">
            <img id="nextbtn" src="images/buttondown.png" />
            <img id="prevbtn" src="images/buttonup.png" />
            Seite&nbsp;<span id="pagedisp"></span>
            <input id="pageinput" />
            <img id="savebtn" src="images/buttondownload.png" />
        </div>
    </div>
    <script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
    <script src="js/download.js"></script>
    <script>
        var oReq = new XMLHttpRequest();
        oReq.open("GET", "testmultipage.pdf", true);
        oReq.responseType = "arraybuffer";

        oReq.onload = function (oEvent) {
            PDFJS.getDocument({ data: oReq.response }).then(function getPdfHelloWorld(pdf) {
                var pageCount = pdf.pdfInfo.numPages;
                function renderPage(pageNr) {
                    var canvas = document.createElement("canvas");
                    pdfviewer.appendChild(canvas);
                    canvas.id = "page-" + pageNr;
                    pdf.getPage(pageNr).then(function getPageHelloWorld(page) {
                        var scale = 1.0;
                        var viewport = page.getViewport(scale);
                        // Prepare canvas using PDF page dimensions.
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        // Render PDF page into canvas context.
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        page.render(renderContext);
                    });
                }
                function displayPage() {
                    var cv = document.querySelectorAll("#pdfviewer canvas");
                    for (var i = 0; i < cv.length; i++) {
                        if (cv[i].id == "page-" + pageNr) cv[i].style.display = "block";
                        else cv[i].style.display = "none";
                    }
                    pagedisp.innerHTML = pageNr + "/" + pageCount;
                    pageinput.value = pageNr;
                }
                for (var pageNr = 1; pageNr <= pageCount; pageNr++) {
                    renderPage(pageNr);
                }
                var pageNr = 1;
                displayPage();
                nextbtn.addEventListener("click", function () {
                    if (pageNr < pageCount) {
                        pageNr++;
                        displayPage();
                    }
                });
                prevbtn.addEventListener("click", function () {
                    if (pageNr > 1) {
                        pageNr--;
                        displayPage();
                    }
                });
                pageinput.addEventListener("change", function () {
                    pageNr = parseInt(this.value);
                    displayPage();
                });
                savebtn.addEventListener("click", function () {
                    download(oReq.response, "testdownload.pdf");
                });
            });
        }
        oReq.send(null);
    </script>