Kann mir nicht vorstellen, dass es daran liegt. Selber hatte ich das Problem, dass mein Browser nicht neu lädt, wenn ich den Hash in der Adresszeile ändere und Enter drücke. Musste den Reload-Button betätigen.
Beiträge von Sempervivum
-
-
Nein, die zwei Zeilen brauchen keine Library. Ich hatte es getestet und bei mir funktioniert es, auch wenn ich die page_id hinzu füge. Hast Du es online, damit man es sich in Aktion ansehen kann?
-
Habe zwar keine Ahnung von Angular, aber ich schlage vor, den Index als Hash zu übergeben und im Javascript auszuwerten. Dies funktioniert bei mir:
Code
Alles anzeigenangular.module("myApp", []). controller("MyCtrl", function ($scope) { $scope.dataSet = [ { index: 0, buildname: "daiopoiust", ship: "jjjj", tier: "oij", secg: "hoi", difficult: "joijoi", m1: "m1", m2: "m2", m3: "m3", m4: "m4", ob1: "ob1", ob2: "ob2", ob3: "ob3", ob4: "ob4", description: "jjjjjjjjjj" }, { index: 1, buildname: "da oij", ship: "hh", tier: "ooo", secg: "sec", difficult: "ho", m1: "m1", m2: "m2", m3: "joijn", m4: "m4", ob1: "dre", ob2: "ob2", ob3: "ob3", ob4: "ob4", description: "jjjjjj" } ], $scope.current = $scope.dataSet[0], $scope.next = function () { var i = $scope.getIndex($scope.current.index, 1); $scope.current = $scope.dataSet[i]; }, $scope.previous = function () { var i = $scope.getIndex($scope.current.index, -1); $scope.current = $scope.dataSet[i]; }, $scope.getIndex = function (currentIndex, shift) { var len = $scope.dataSet.length; return (((currentIndex + shift) + len) % len) }; var idx = location.hash.replace("#", ""); if (idx) $scope.current = $scope.dataSet[idx]; });
Beim Aufruf der Seite dann ein #0 oder #1 usw. an die URL anhängen.
-
Auch das sollte mit classList.toggle gut zu machen sein. Mit Javascript die Klasse hinzufügen/löschen und mit CSS die Sichtbarkeit des zusätzlichen Divs steuern.
Es gibt auch eine sehr gute Bibliothek namens Tooltipster, die man vorteilhaft einsetzen kann. Vorteil dabei: Die Position des Tooltip wird intelligent fest gelegt, d. h. ist das Element am oberen Rand des Fensters, wird der Tooltipp darunter angezeigt, am unteren Rand anders herum, links und rechts analog.
-
Was mich betrifft, so hatte ich dich, Stef, so verstanden, dass Du es mit classList versucht hattest und dass es nicht funktioniert hatte. Deshalb hatte ich mich für diesen Versuch mit classList interessiert.
-
Zitat
Es soll quasi jedem Bild in der Liste automatisch ein Hyperlink zugefügt werden.
Ich verstehe das so, dass Du über die URL steuern willst, welches Bild angezeigt werden soll? Dann geht man i. allg. so vor, dass man den Parameter in einem Hash übergibt, etwas so:
http://beispiel.de/panoramen/panorama.html#bild1.jpg
Das kannst Du dann etwa so auswerten:
Diese Variable kannst Du dann bei der Initialisierung von pannellum verwenden:
Allerdings ist mir nicht richtig klar, was Du damit dann anfangen willst? Möglicher Weise kann man dein Vorhaben auch anders lösen.
-
Unter dem Link in #3 finde ich aber nicht den Code wieder, den Du zuletzt gepostet hast (auch nicht nach Ctrl+F5)?
-
Bei mir hat es mit relativem Pfad funktioniert.
Spuckt die Console etwas aus?
Liegt das Bild im selben Verzeichnis wie die HTML-Datei?
-
Du darfst als Panorama nur die URL des Bildes angeben, nicht ein img-Tag. Außerdem ist da eine schließende eckige Klammer zuviel. So wäre es richtig:
-
ZitatWas ich mir denken kann ist, dass es mit dem Javascript zusammenhängt. Aber eigentlich sollte es doch nicht sein ?
Deinen Code habe ich nicht analysiert, aber generell ist es so, dass CSS-Eigenschaften, die Du mit Javascript setzt, eine höhere Priorität haben als solche, die Du in einer CSS-Datei setzt. Vermutlich ist das die Erklärung für dein Problem.
Zitat -
-
Mit Angular habe ich mich bisher auch nicht beschäftigt. Wo verbirgt sich denn da das HTML für die Struktur aus deinem Eingangsposting, mit Title, Subtitle, den beiden Tabellen etc.?
-
Um das zu untersuchen, müsste man den Code sehen, am besten live über einen Link.
-
Zitat
binde diese in meinen HTML Code ein und kann dann mit einem AJAX Script alle Datensätze einlesen.
In den HTML-Code brauchst Du sie nicht einzubinden, sondern in einer getrennte Datei ablegen. Wenn Du dich auch über Ajax informierst, wirst Du sehen, dass Du damit eine Datei auf dem Server, u. a. auch im JSON-Format, einlesen kannst.
ZitatIst es dann noch möglich den mit AJAX importieren Datensatz zu formatieren?
Nein, das leistet Ajax nicht. Du bekommst eine JS-Struktur mit Arrays bzw. Objekten und musst diese in ein Struktur im DOM umwandeln. Das Formatieren geschieht dann mit CSS.
Zitatist es mit AJAX auch möglich mir nur einen Datensatz anzeigen zu lassen und mit einem "next" u. "previous" Button zwischen allen vorhandenen Datensätzen durchzuklicken?
Leider nein, auch dieses geht über das hinaus, was Du mit Ajax machen kannst. Solch eine Funktion musst Du mit Javascript realisieren.
-
Zitat
Macht es an der Stelle überhaupt sinn so etwas in eine Tabelle zu packen?
Die Frage ist berechtigt und es gibt gute Gründe, sie mit nein zu beantworten, denn eigentlich sind nur die beiden Strukturen mit M1, M2, ... sowie O1, O2, ... im semantischen Sinn jede für sich eine Tabelle.
ZitatMein Gedanke war es die Daten bequem in einer Datei zu hinterlegen und die Tabelle greift dann darauf zu und stellt diese grafisch dar.
Das ist sicher eine gute Idee, vor allem wenn sich die Daten häufig ändern. Dann brauchst Du nicht jedes Mal das ganze HTML umzuschreiben, sondern nur diese Datei zu ändern. Für das Format sehe ich zwei Möglichkeien:
- CSV - einfach, aber wenig geeignet, um komplexere Strukturen abzubilden
- JSON - kann beliebige Strukturen abbilden, aber die Syntax kann ungeübte Benutzer vor Probleme stellen
Die Datei kannst Du dann mit Ajax einlesen.
-
Du bist hier mit den Segnungen des undurchsichtigen float konfrontiert worden. Ich empfehle, ebenso wie Du es bei der Nav schon getan hast, das fortschrittliche Flexlayout zu verwenden. Mit justify-content:space-between kannst Du die beiden Element so anordnen wie Du es möchtest.
Dies wollte ich, einschl. Hinweis auf die HTML-Fehler, schon vor zwei Stunden posten, aber vergaß, auf "Absenden" zu drücken
-
Schau mal, ob sheetjs etwas für dich ist:
-
Googlesuche nach "tooltip on click" führt z. B. zu dieser Anleitung:
https://www.w3schools.com/howto/howto_js_popup.asp
Versuche, dieses auf deinen Anwendungsfall mit dem maussensitiven Bereich umzuändern.
Ein Problem sehe ich jedoch bei deinem Vorhaben: Du hast schon ein href-Attribut in dem area-Tag, das beim Klick auf eine neue Seite führt. Das widerspricht deiner Absicht, beim Klick den kleinen Kasten zu öffnen. Es geht ja nur eines von beiden.
-
Der Validator hat natürlich Recht, valide ist es nicht. Eine Lösung kann sein, das a-Element mit CSS als Button zu gestalten.
-
-
Zitat
Body muss man eine ID zuweisen, in meinem Fall war das body1.
Geht auch ohne: document.querySelector("body")