sieht jemand was ich falsch mache?
Ich denke schon: Du benutzt json_encode, zum Dekodieren des Strings musst Du jedoch json_decode verwenden. Dieses funktioniert:
$json = file_get_contents('https://api.mojang.com/user/profiles/e9013c2fda01425fa48b516f55e94386/names');
$data = json_decode($json);
echo $data[0]->name;Ich denke mal, in der Mathematik ist das nicht normal, wohl aber in der Computerei: Die Größe einer Zahl ist nach oben begrenzt, wie man hier nachlesen kann:
https://entwickler.de/online/javascr…ber-191081.html
Für Ganzzahl-Werte bedeutet dies, dass eine gesicherte Darstellung bis 15 Ziffern möglich ist
Ich hatte jetzt versucht einfach die Bezeichnungen dots, more u.s.w. in dots1, more1 u.s.w. zu ändern und dies entsprechend in der .js Datei auch einfügen. Damit ich quasi zwei unterschiedliche Befehle habe.
Das ist häufig der erste Ansatz, aber auch der schlechteste, weil man dann auch bei jedem neuen Textblock das CSS und das Javascript erweitern muss. Besser ist es, statt der IDs Klassen zu verwenden. Ich habe mal das letzte Fiddle hergenommen und entspr. umgeändert:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>More/Less</title>
<style>
.shortText.small {
-webkit-mask-image: -webkit-gradient(linear, left top,
left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
.shortText span.more {
display: inline;
}
.shortText.small span.more {
display: none;
}
.shortText:not(.small) span.dots {
display: none;
}
</style>
</head>
<body>
<h2>Read More Read Less Button</h2>
<p class="shortText small">Text 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
nulla
et dictum
interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula
venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros
non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="moreless-btn">Read more</button>
<p class="shortText small">Text 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
nulla
et dictum
interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula
venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros
non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="moreless-btn">Read more</button>
<p class="shortText small">Text 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
nulla
et dictum
interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula
venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros
non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="moreless-btn">Read more</button>
<script>
function moreless() {
var shorttxt = this.previousElementSibling;
shorttxt.classList.toggle("small");
if (shorttxt.classList.contains("small")) {
this.textContent = "Read more";
} else {
this.textContent = "Read less";
}
}
var btns = document.querySelectorAll(".moreless-btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', moreless);;
}
</script>
</body>
</html>Mit toLocaleString bist Du schon auf dem richtigen Weg. So funktioniert es:
$(document).ready(function () {
var num = 0;
var resultOutptut = $('.calc-result');
$('.calc-input').keyup(function () {
num = $('#shares').val() * 0.0357;
resultOutptut.text(num.toLocaleString('de-DE'));
});
});Schau mal, ob dir $.parseHTML hilft, damit kannst Du das Dokument parsen und dann ganz normal auf das DOM zugreifen.
Da habe ich eine Weile gebraucht, um durchzusteigen, aber ich hoffe, dass ich jetzt eine Lösung habe, indem ich das Verfahren mit der Sortierung überarbeitet habe: Die Listenelemente bekommen einen Index als ID. Entsprechend wird dann aus dem Array der tmp-Dateien die richtige ausgewählt und verschoben. Ich habe es nicht sehr intensiv getestet, aber ich hoffe, dass es funktioniert:
<script>
function dateiauswahl(evt) {
var dateien = evt.target.files; // FileList object
var imgs = [], names = []; counter = 0, nrimgs = dateien.length, binchar = 97;
// Auslesen der gespeicherten Dateien durch Schleife
for (let i = 0; i < dateien.length; i++) {
let f = dateien[i];
names[i] = f.name;
// nur Bild-Dateien
if (!f.type.match('image.*')) {
nrimgs--;
continue;
}
let reader = new FileReader();
reader.onload = function (e) {
console.log("loaded " + i)
imgs[i] = e.target.result;
counter++;
if (counter == nrimgs) {
// erzeuge Thumbnails.
for (var j = 0; j < imgs.length; j++) {
var img = document.createElement('img');
img.className = 'bild';
img.src = imgs[j];
img.title = names[j];
var li = document.createElement('li');
li.appendChild(img);
// das Listenelement bekommt einen fortlaufenden Index als ID
li.id = j;
var sortable = document.getElementById("sortable");
sortable.appendChild(li);
}
$(function () {
$('#sortable').sortable({
update: function (event, ui) {
var productOrder = $(this).sortable('toArray').toString();
console.log(productOrder);
$('input[name="newsort"]').val(productOrder);
}
});
});
}
};
// Bilder als Data URL auslesen.
reader.readAsDataURL(f);
};
}
// Auf neue Auswahl reagieren und gegebenenfalls Funktion dateiauswahl neu ausführen.
document.getElementById('files').addEventListener('change', dateiauswahl, false);
</script><?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
var_dump($_FILES);
var_dump($_POST);
if (!empty($_FILES)) {
$upload = "./upload/";
$counter = count($_FILES['files']['tmp_name']);
$sourcePath[] = $_FILES['files']['tmp_name']; // Storing source path of the file in a variable
$targetPath[] = $_FILES['files']['name']; // Target path where file is to be stored
$name = $_POST['name'];
$sortArray = explode(",", $_POST['newsort'] ?? "");
mkdir("./upload/" . $name, 0700);
mkdir("./upload/" . $name . "/tmp/", 0700);
$bilder_verzeichnis = $upload . $name . "/";
$tmp_verzeichnis = $upload . $name . "/tmp/";
// Größe der ausgegebenen Bilder
$XL_groesse = 600;
$L_groesse = 175;
$M_groesse = 45;
// Bilder werden in tmp-Ordner geladen
for ($a = 0; $a < $counter; $a++) {
$up_name = $name . chr($a + 97) . ".jpg";
if (!empty($sortArray)) {
$idx = $sortArray[$a];
} else {
$idx = $a;
}
$tmpFile = $_FILES['files']['tmp_name'][$idx];
if ($tmpFile != "") {
$newFilePath = $upload . $name . "/tmp/";
//Upload der Datei in den Ordner
if (move_uploaded_file($tmpFile, $newFilePath . $up_name)) {
}
}
}
// Bilder aus tmp-Verzeichnis lesen
if (is_dir($bilder_verzeichnis)) { // existiert das Verzeichnis?
$files = scandir($tmp_verzeichnis); // Dateinamen in Array einfügen
$files = array_splice($files, 2); // Entfernt die ersten beiden Einträge . und ..
$files_count = count($files);
}
// tmp-Verzeichnis auslesen
if (is_dir($bilder_verzeichnis)) { // existiert das Verzeichnis?
$org_files = scandir($tmp_verzeichnis); // Dateinamen in Array einfügen
$org_files = array_splice($org_files, 2); // Entfernt die ersten beiden Einträge . und ..
}
// Bildgröße erstellen
foreach ($org_files as $tmp_files) {
$XL_name = 'XL_' . str_replace("tmp_", "", $tmp_files);
$L_name = 'L_' . str_replace("tmp_", "", $tmp_files);
$M_name = 'M_' . str_replace("tmp_", "", $tmp_files);
$XL_size = GetImageSize($tmp_verzeichnis . $tmp_files);
if ($XL_size[1] > 500) {
$breite = $XL_size[0];
$hoehe = $XL_size[1];
if ($XL_size[2] == 2) {
// Erstellen XL_Bilder
$neueBreite = intval($breite * $XL_groesse / $hoehe);
$altesBild = ImageCreateFromJPEG($newFilePath . $tmp_files);
$neuesBild = imagecreatetruecolor($neueBreite, $XL_groesse);
ImageCopyResized($neuesBild, $altesBild, 0, 0, 0, 0, $neueBreite, $XL_groesse, $breite, $hoehe);
ImageJPEG($neuesBild, $bilder_verzeichnis . $XL_name);
ImageDestroy($neuesBild);
ImageDestroy($altesBild);
// Erstellen L_Bilder
$neueBreite = intval($breite * $L_groesse / $hoehe);
$altesBild = ImageCreateFromJPEG($newFilePath . $tmp_files);
$neuesBild = imagecreatetruecolor($neueBreite, $L_groesse);
ImageCopyResized($neuesBild, $altesBild, 0, 0, 0, 0, $neueBreite, $L_groesse, $breite, $hoehe);
ImageJPEG($neuesBild, $bilder_verzeichnis . $L_name);
ImageDestroy($neuesBild);
ImageDestroy($altesBild);
// Erstellen M_Bilder
$neueBreite = intval($breite * $M_groesse / $hoehe);
$altesBild = ImageCreateFromJPEG($newFilePath . $tmp_files);
$neuesBild = imagecreatetruecolor($neueBreite, $M_groesse);
ImageCopyResized($neuesBild, $altesBild, 0, 0, 0, 0, $neueBreite, $M_groesse, $breite, $hoehe);
ImageJPEG($neuesBild, $bilder_verzeichnis . $M_name);
ImageDestroy($neuesBild);
ImageDestroy($altesBild);
}
}
unlink($tmp_verzeichnis . $tmp_files);
}
rmdir($tmp_verzeichnis);
}Gute Wahl, das scheint das gleiche wie Tooltipster zu sein. Wäre nicht sehr sinnvoll gewesen, hier das Rad neu zu erfinden.
Nee einfache Lösung wäre das man opacity in z-index ändert.
Wenn ich das richtig sehe, ist z-index nicht animierbar.
Das ist ja blöd, dass das jetzt nicht mehr funktioniert. Ich vermute, dass es mit der Vergabe der IDs zusammen hängt. Werde es mir mal ansehen. Welches Sortable ist das, das von jQuery-UI?
Ja, es wird immer der Link des letzten Bildes geöffnet. Das liegt daran, dass sie übereinander liegen und das letzte Bild oben. Auch wenn es durchsichtig ist, wirkt trotzdem der Klick darauf.
basti1012 Klick mal auf das erste Bild ...
Du wirst hier mit einer Eigenschaft solcher Slideshows in reinem CSS konfrontiert, dass sie sich relativ schwer ändern und erweitern lassen.
Als nächstes erwarte ich die Frage "Wie kann ich mehr Bilder zu dieser Slideshow hinzu fügen?" 
Siehe auch hier:
Meine Antwort auf die Frage, wie es am einfachsten geht, lautet daher: Verwende ein ausgereiftes Javascript wie Cycle2, damit ist es eine Kleinigkeit:
http://jquery.malsup.com/cycle2/demo/non-image.php
<div class="cycle-slideshow" data-cycle-slides="> a">
<a href="link1.html"><img src="images/a.jpg"></a>
<a href="link2.html"><img src="images/b.jpg"></a>
<a href="link3.html"><img src="images/c.jpg"></a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>Edit: Basti: "Ick bin all hier" ...
Lege das gesamte Arrangement mit den Bildern und Texten in einen zusätzlichen Container. Dann kannst Du diesen und den neuen rechten mit
body {display:flex;} nebeneinander anordnen.
der dann in der Höhe über die anderen container geht
Das funktioniert dann automatisch weil align-items: stretch; Default ist.
Ein befreundeter Webmaster verwendet dafür Tooltipster, dieses Plugin legt abhängig von der Mausposition die Lage des Tooltip intelligent fest, so dass es immer sichtbar ist.
Der Grund für das Verhalten ist, dass der Filereader für die Erzeugung der Vorschaubilder asynchron arbeitet, dadurch kann die Reihenfolge verfälscht werden. Dieses sollte das Problem lösen:
<input type="file" id="files" multiple>Choose files
<div id="sortable"></div>
<script>
function dateiauswahl(evt) {
var dateien = evt.target.files; // FileList object
var imgs = [], names = []; counter = 0, nrimgs = dateien.length, binchar = 97;
// Auslesen der gespeicherten Dateien durch Schleife
for (let i = 0; i < dateien.length; i++) {
let f = dateien[i];
names[i] = f.name;
// nur Bild-Dateien
if (!f.type.match('image.*')) {
nrimgs--;
continue;
}
let reader = new FileReader();
reader.onload = function (e) {
console.log("loaded " + i)
imgs[i] = e.target.result;
counter++;
if (counter == nrimgs) {
// erzeuge Thumbnails.
for (var j = 0; j < imgs.length; j++) {
var img = document.createElement('img');
img.className = 'bild';
img.src = imgs[j];
img.title = names[j];
var li = document.createElement('li');
li.appendChild(img);
li.id = String.fromCharCode(97 + j);
counter++;
var sortable = document.getElementById("sortable");
sortable.appendChild(li);
binchar++;
}
}
};
// Bilder als Data URL auslesen.
reader.readAsDataURL(f);
};
}
// Auf neue Auswahl reagieren und gegebenenfalls Funktion dateiauswahl neu ausführen.
document.getElementById('files').addEventListener('change', dateiauswahl, false);
</script>Der Footer ist doch unten in Bastis Beispiel?
Den Header würde ich so gestalten, dann sind die Socialitems rechts:
Versuche, ob dies das ist, was Du dir vorstellst:
<select id="dynselect" size="1">
<option>Zeile1</option>
<option>Zeile2</option>
<option>Zeile3</option>
<option>Zeile4</option>
<option>Zeile5</option>
<option>Zeile6</option>
<option>Zeile7</option>
<option>Zeile8</option>
<option>Zeile9</option>
<option>Zeile10</option>
<option>Zeile11</option>
<option>Zeile13</option>
<option>Zeile14</option>
<option>Zeile15</option>
<option>Zeile16</option>
<option>Zeile17</option>
<option>Zeile18</option>
<option>Zeile19</option>
<option>Zeile20</option>
<option>Zeile21</option>
<option>Zeile22</option>
<option>Zeile23</option>
<option>Zeile24</option>
<option>Zeile25</option>
<option>Zeile26</option>
</select>
<script>
document.getElementById("dynselect").addEventListener("mousedown", function () {
this.size = "10";
});
var opts = document.querySelectorAll("#dynselect option");
for (var i = 0; i < opts.length; i++) {
opts[i].addEventListener("mousedown", function () {
document.getElementById("dynselect").size = "1";
event.stopPropagation();
});
}
</script>Da hast Du dir dummerweise wieder eine CSS-Lösung ausgesucht, die umständlich zu erweitern ist. Wenn es nicht anders ginge, würde ich es dir ja umändern aber prüfe zunächst, ob Du dich mit einer Javascript-Lösung anfreunden kannst.
Was heißt denn "es geht nicht"? Wird nur ein Bild angezeigt oder werden alle auf einmal angezeigt oder gar keins?
Ich hatte es mit dem HTML aus deinem ersten Posting getestet; dieses <div id="gallery"> darf nicht verändert werden. Am besten wäre es, wenn Du es online hättest, damit man es sich ansehen kann. Ist sicher nur eine Kleinigkeit.
Ach so, das alte CSS musst Du löschen, jedenfalls soweit es die Slideshow betrifft, vor allem das position:absolute; bewirkt, dass alle Bilder übereinander liegen und nur das oberste sichtbar ist.
Es gibt dafür zahlreiche fertige Skripte, die ich normaler Weise gern empfehle, aber wenn Du keine Übergangseffekte willst, dann versuche dies:
<script>
var idx = 0;
var slides = document.querySelectorAll("#gallery figure");
function slideIt() {
for (var i = 0; i < slides.length; i++) {
if (idx == i) slides[i].style.display = "inline-block";
else slides[i].style.display = "none";
}
if (idx < slides.length - 2) idx++;
else idx = 0;
}
slideIt();
setInterval(slideIt, 3000);
</script>Hinter dem HTML einfügen, am besten vor dem schließenden </body>