Oder möchtest du an Stelle eines Bildes während des Ladens ein div anzeigen? Dann brauchst Du nur das Bild durch dieses div zu ersetzen.
Beiträge von Sempervivum
-
-
Weiß nicht genau, wie Du das meinst. AFAIK hat ein div kein Load-Event. Sinn machen würde das nur, wenn Elemente drin sind, die eines haben und dann müsste man die überwachen und entspr. für das div die Aktionen veranlassen, die man haben will.
-
-
Kein Problem, dann musst Du das wrapping wieder einschalten und die Breite auf 33.3% setzen:
Code
Alles anzeigen#galerie { width: 100%; margin: 0 auto; text-align: center; display: flex; flex-flow: row wrap; justify-content: space-around; margin: 0; } #galerie a { flex-basis: 33.3%; flex-grow: 0; flex-shrink: 1; } #galerie a img { max-width: 100%; height: auto; } -
Nachdem ich die Erzeugung von formData entspr. dem Muster bei selfhtml geändert habe, funktioniert es:
Code
Alles anzeigen<form method="post" action="javascript:AjaxUpload();" enctype="multipart/form-data"> <input type="file" name="file" id="file" /> <input type="submit" name="submit" /> </form> <script> function AjaxUpload() { if (FormData && typeof FormData === "function") { //var file = document.getElementById("file"); //var data = new FormData(file), var data = new FormData(document.querySelector('form')), xhr = new XMLHttpRequest(); xhr.open("POST", "uploaddorty.php"); xhr.addEventListener('load', function (event) { if (xhr.status >= 200 && xhr.status < 300) { console.log(xhr.responseText); } else { console.warn(xhr.statusText, xhr.responseText); } }); xhr.send(data); } } </script>https://wiki.selfhtml.org/wiki/JavaScrip…avaScript-Datei
Den Eventlistener braucht man nicht unbedingt; ich habe ihn zu Testzwecken eingebaut.
-
Das liegt daran, dass Du "flex-flow: row wrap" gesetzt hast, dadurch erfolgt ein Zeilenumbruch, wenn die Breite die des Browserfensters überschreitet. Änderst Du das auf "nowrap", sind die Bilder nebeneinander, aber wenn die Breite zu groß ist, wird die Scrollbar eingeschaltet. Um das zu vermeiden, kann man die Bilder responsiv machen durch flex-grow und flex-shrink für die a-Elemente.
Code
Alles anzeigen<article id="galerie"> <a href="#"><img src="http://lorempixel.com/output/cats-q-c-300-200-7.jpg" alt="hdimage"></a> <a href="#"><img src="http://lorempixel.com/output/cats-q-c-300-200-7.jpg" alt="hdimage"></a> <a href="#"><img src="http://lorempixel.com/output/cats-q-c-300-200-7.jpg" alt="hdimage"></a> </article> <style> #galerie { width: 100%; margin: 0 auto; text-align: center; display: flex; flex-flow: row nowrap; justify-content: space-around; margin: 0; } #galerie a { flex-grow: 0; flex-shrink: 1; } #galerie a img { width: 100%; height: auto; } </style> -
Das kann man entweder mit absoluter Positionierung oder mit negativem Margin machen, etwa so:
-
Die Funktion add() habe ich in der Doku nicht gefunden, dafür jedoch die Funktion file(). Wenn ich dabei die Option binary auf true setze und dieses:
http://www.henryalgus.com/reading-binary…ng-jquery-ajax/
anwende, komme ich zu diesem Code:
Code
Alles anzeigen<script src="js/jszip.min.js"></script> <script type="text/javascript" src="//stuk.github.io/jszip-utils/dist/jszip-utils.js"></script> <script type="text/javascript" src="js/fileSaver.js"></script> </head> <body> <button id="blob" class="btn btn-primary">click to download</button> <script> jQuery("#blob").on("click", function () { //var promise = $.get("test.pdf"); //zip.file("test.pdf", promise, {binary: true}); var xhr = new XMLHttpRequest(); xhr.open('GET', 'test.pdf', true); xhr.responseType = 'blob'; xhr.onload = function (e) { if (this.status == 200) { // get binary data as a response var blob = this.response; var zip = new JSZip(); zip.file("test.pdf", blob, { binary: true }); zip.generateAsync({ type: "blob" }).then(function (blob) { // 1) generate the zip file saveAs(blob, "test.zip"); // 2) trigger the download }, function (err) { jQuery("#blob").text(err); }); } }; xhr.send(); }); </script> -
Meinst Du diese Anordnung, die man hier im Forum links von einem Posting sieht, mit Profilbild und Benutzername?
-
Zitat
Das Problem ist wenn ich daneben eine Section machen möchte (Zur hauptseite) dann verschiebt es sich auf den Article.
Das Problem hat man immer bei fixierten Elementen. Du musst bei der Section daneben z. B. ein margin von der Breite des fixierten Elementes anbringen, um sie nach rechts zu verschieben. Oder eine Lösung ohne Fixierung verwenden, wie sie MrMurphy hier für eine vertikale Anordnung demonstriert hat:
http://boratb.bplaced.net/index55.html -
Habe ich jetzt nicht getestet, aber der Fehler liegt sehr wahrscheinlich in Zeile 14:
Codevar Tu=((OverallRadius*(1+Bar))*0.97);Liest man Bar aus einem input-Feld aus, handelt es sich um einen String. In dem Fall werden beim "+"-Operator zwei Strings zusammen gefügt:
"1" + "1.7" ergibt "11.7" statt 2.7. Abhilfe, indem "Bar" in Float umgewandelt wird:
Codevar Tu=((OverallRadius*(1+parseFloat(Bar)))*0.97); -
Zwei Fehler:
CodeonBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.Bar.value)"Es fehlt der vierte Parameter und beim dritten ist das ".Bar" zu viel.
So muss der Aufruf lauten:
CodeonClick="CalculateCircumference(document.Rad.Diameter.value, document.Rad.Profile.value, document.Rad.Width.value, document.Rad.Bar.value)" -
In Posting #3 stehen in den Zeilen 37, 47, 57, 93 noch Aufrufe von CalculateCircumference ohne den Parameter "Bar".
-
Jetzt hast Du nur einen der Aufrufe erweitert. ?
-
In der Definition deiner Funktion CalculateCircumference() definierst Du zwar den Parameter "Bar" aber in den Aufrufen versorgst Du ihn nicht, sondern nur drei Parameter.
-
Ich habe es herunter geladen und versucht, es anzupasssen, aber bin leider nicht zum Ziel gekommen. Wenn ich versuche, das Menü zu verschieben, wird es nicht mehr richtig angezeigt.
Was ist denn dieses "fusion"? Template? CMS? Editor?
-
Ich habe sie am Anfang meiner Berufstätigkeit in den 80-ern kennen gelernt. Sind ebenso wie Struktogrammeditoren in der Versenkung verschwunden. Vermutlich weil jeder, der einiger Maßen abstrakt denken kann, einen Programmcode mit Kontrollstrukturen auch so lesen und schreiben kann.
-
Ist das Problem noch aktuell?
-
Zitat
Solltest du oder wer anders noch einen ratschlag oder tipp haben immer raus da mit
Da will ich dich beim Wort nehmen: Missbrauchen von Tabellen für Layout-Zwecke ist nicht mehr zeitgemäß. Eine gute Alternative ist das Flexlayout. Um es zu demonstrieren, habe ich mal eine Karte darauf umgestellt:
Code
Alles anzeigen<style> .card_overlay { display: flex; height: 100vh; width: 100vw; align-items: center; justify-content: center; background-color: black; } .card_content { display: inline-flex; flex-direction: column; position: relative; } .card_case { background-image: url(http://file2.npage.de/014720/85/bilder/case.png); width: 299px; height: 435px; display: inline-flex; align-items: center; justify-content: center; } .txtwhite { color: white; } .card_icons { display: flex; justify-content: space-around; padding-bottom: 5px; } .card_icons div { display: inline-flex; align-items: center; } .card_icons div span { margin-left: 5px; } .switch_card { position: absolute; top: calc(50% - 25px); width: 100%; display: flex; justify-content: space-between; } </style> <div class="card_overlay" id="fade"> <div class="card_content" id="card1"> <div class="card_icons"> <div> <img height="17" src="http://file2.npage.de/014720/85/bilder/stapel.png" width="24" /> <span class="txtwhite">1/20</span> </div> <div> <img height="17" src="http://file2.npage.de/014720/85/bilder/ex.png" width="14" /> <span class="txtwhite">0/2</span> </div> <div> <img src="http://file2.npage.de/014720/85/bilder/ur.png" /> </div> </div> <div class="card_case"> <img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png" /> </div> <div class="switch_card"> <a data-toshow="card2" href="javascript:void(0)" unselectable="off"> <img src="http://file2.npage.de/014720/85/bilder/links2a.gif" /> </a> <a data-toshow="card2" href="javascript:void(0)"> <img src="http://file2.npage.de/014720/85/bilder/rechts2a.gif" /> </a> </div> <div class="back_to"> <a class="back" href="javascript:void(0)" unselectable="off"> <img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /> </a> </div> </div> </div>Ich habe, soweit es ging, auf absolute Maßangaben verzichtet. Ausnahme: Das .card_case, wo ich die Maße absolut angeben musste, damit sie dem Hintergrundbild entsprechen. Alternativen wäre eher noch schlechter gewesen. Durch relative Maße und selbst anpassende Container wird dir u. U. die Arbeit erleichtert, wenn Du weitere Elemente hinzu fügst. Du schriebst ja, dass das der Fall sein wird.
Möglicherweise könnte man noch die a-Tag weg rationalisieren und die Clickhandler direkt auf die Grafiken registrieren.
-
Doch, natürlich ist das umsetzbar. Dazu würde ich empfehlen, die Suchfelder in die Tabelle zu integrieren, so wie in dem Beispiel bei Datatables. Dann den Index der Spalte ermittlen, so wie z. B. hier beschrieben:
https://stackoverflow.com/questions/7882…umber-in-jquery
Wenn Du die Suchfelder lieber unabhängig lassen willst, empfehle ich, den Spaltenindex als data-Attribut zu definieren. Dann kannst Du zunächst über die Zeilen iterieren und dann mit eq(idx) das richtige td-Element adressieren.