Beiträge von Sempervivum

Habe zwar keine Ahnung von Angular, aber ich schlage vor, den Index als Hash zu übergeben und im Javascript auszuwerten. Dies funktioniert bei mir:

angular.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:

var dasbild = location.hash.replace("#","");

Diese Variable kannst Du dann bei der Initialisierung von pannellum verwenden:

"panorama": dasbild,

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:

pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "V0040005.jpg",
    "autoLoad": true,
    "autoRotate": -2,
    "compass": true,
    "northOffset": 247.5
});

Zitat

Was 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.

Zitat

Ist 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.

Zitat

ist 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.

Zitat

Mein 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:

https://sheetjs.com

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.

https://stackoverflow.com/questions/6393…n-a-using-html5

form: OMG, braucht man auf keinen Fall

a-Tag: unbedingt, ohne geht es nicht, wenn es ohne Javascript sein soll.

<a href="http://deinlinkziel.de"><button>Klick!</button></a>

Zitat

Body muss man eine ID zuweisen, in meinem Fall war das body1.

Geht auch ohne: document.querySelector("body")

Dieses scheint zumindest für Text zu funktionieren:

https://stackoverflow.com/questions/4855…with-all-styles

Mit meinem Posting #11 wollte ich vor allem auf den Ansatz mit der Simulation von Strg+a Strg+c hinaus, was laut dem Zitat bei Stackoverflow keinen Erfolg verspricht.

Zitat

wie man strag + a zusammen klicken kann mit click() oder anders

Das wird hier besprochen:

https://stackoverflow.com/questions/3242…ext-input-field

Zitat

The .trigger() function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events.

There is a plug-in for this though called jquery-simulate to handle this. That being said the tab key changing focus is actually a default action in the web browser. Firing a browsers native event does not mean it will do it's default action, as the documentation for KeyboardEvents mentions:

Note that manually firing an event does not generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.