HTML Anker in Smartvisu

[aschwith]

Nabend zusammen,

nutzt einer von Euch einen Anker (Einsprungstelle) in der smartVisu? Ist ja eigentlich trivial, funktioniert aber bei mir nicht.

Ziel: Ich will oben einen Link bzw. Button einführen, der mich direkt auf eine Raumseite führt und zu dem entsprechenden Widget nach unten scrollt.

Dazu habe ich folgenden Anker/Einsprungstelle mit ID=ankertest erzeugt:

<div class="block">
<div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false">
<h3 id="[COLOR=#c0392b]ankertest[/COLOR]">Temperatur</h3>
</div>
</div>
</div>

Der Browser spring auch zu der Stelle wenn ich manuell folgenden Adresse in die Adresszeile eingebe:
http://IP/smartvisu/index.php?page=f...lway#ankertest

Der Link befindet sich noch auf der selben Raumseite und sieht folgendermaßen aus:

<a href="[COLOR=#e74c3c]#ankertest[/COLOR]">Link</a>

Beim Klicken darauf, passiert leider nichts. Hat jemand ein ähnliches Konstrukt am laufen bzw. hat eine Idee, warum das Beispiel in der smartVisu Umgebung nicht funktioniert?

Danke und viele Grüße

[wvhn]

Hi Alex,

das ist in jQuery mobile leider nicht vorgesehen. Siehe hier.
Mit einem 'data-ajax = "false" ' im Link geht es tatsächlich, aber dann wird die betreffende Seite wie eine externe Seite neu geladen, was je nach Komplexität der Seite ungünstig hinsichtlich Performance sein kann. (jQuery mobile behält alle besuchten Seiten im Speicher und kann deshalb recht schnell umschalten).

Gruß
Wolfram

[aschwith]

Hallo Wolfram,

danke für die Info. Mit 'data-ajax = "false" geht es tatsächlich, der reload ohne Caching dauert dann in der Tat ziemlich lange. Ok, aber Prinzip verstanden.

Viele Grüße
Alex

[wvhn]

Der Vollständigkeit halber hier noch eine andere Lösung. Sie registriert einen Event-Handler für Anchor-Links, die mit der entsprechenden Klasse definiert werden. Es wäre einen Versuch wert, den JavaScript Code als z.B. „anchorlink.js“ einfach in den Ordner ./dropins zu legen. Von dort wird er automatisch importiert.

Gruß
Wolfram

[aschwith]

Zwei Erkenntnisse:

a) Bei der Methode mit data-ajax="false" springt er auf die Richtige Seite zum definierten Anker um ca. 1 Sekunde danach aber wieder oben auf die Seite zu springen. Meine Vermutung: Irgendwas triggert trotzdem noch einen PageReload.

b) Die andere Lösung klingt auch interessant. Habe ich gleich ausprobiert, mein Testlink sieht folgerndermaßen aus:

<a id="menu-robot-shortcut" class="anchor-link" href="index.php?page=first.settings#anker_robot">
<img class="icon icon0" src="{{ icon0 }}scene_robo_vac_cleaner.svg" alt="config" /></a>

Allerdings schmeißt Firefox noch einen Fehler:

Uncaught TypeError: ui.toPage[0] is undefined
    <anonymous> http://IP/smartvisuD/lib/base/base.js:1772

    jQuery 19


    <anonymous> http://IP/smartvisuD/dropins/anchorlink.js:16

    jQuery 9


    <anonymous> IP/smartvisuD/dropins/anchorlink.js:3

    jQuery 8

Interessanter Weise kommt der erste Fehler aus der base.js. Hier scheint noch ein von der anchorlink.js unabhängiger Fehler zu sein:

/**
* stop series subscriptions and trigger 'exit' method in all widgets on current page
* before new page is being loaded. Trigger only if page is different (not just a return to same page)
*/
$(document).on('pagecontainerbeforetransition', function(event,ui) {
if (ui.prevPage!= undefined && ui.toPage[0].id != ui.prevPage[0].id) {


...

Der zweite Fehler kommt aus der anchorlink.js an folgender Stelle:

// Find the page it is contained into (or it is itself)
page = $(hash).closest('div[data-role="page"]').get(0);

Dieser Aufruf scheint nicht zu funktionieren. Das Ergebnis page ist laut debugger "undefined" und damit ungültig.

[wvhn]

jQuery mobile ist ziemlich abweisend, was Hashes in Links betrifft, sofern sie nicht als externe Links behandelt werden.
Deshalb habe ich mal etwas gebastelt - hmm "gefrickelt" wäre der bessere Ausdruck.

Wenn man in der ./pages/base/root.html den Eventhandler für "pagecontainershow" wie folgt erweitert (die ersten drei Zeilen sind schon vorhanden):

// Activate the info field in top right corner
$(document).on('pagecontainershow', function () {
    notify.display();
    var calledAnchor = null;
    var searchAnchor = location.search.indexOf('anchor');
    if (searchAnchor > 0) {
        calledAnchor = '#'+location.search.substring(searchAnchor+7);
        var anchorTimeout = window.setTimeout(function() { $.mobile.silentScroll($(calledAnchor).offset().top); },  1 * 1000 );
    }
});

und dann die Links wie folgt aufbaut:

<a href ="index.php?page=versuche&anchor=mylink">Linktext</a>

dann funktionieren die Links mit Ankern. Der Timeout ist allerdings eine Notlösung, weil ich (noch?) keinen passenden Event gefunden habe, der das Scrollen direkt auslösen kann. Deshalb denke ich auch, dass ich den Code nicht ins Release aufnehmen werde.
Man müsste allerdings aus dem Code wieder eine "anchor.js" im ./dropins Ordner machen können (ohne die notify-Zeile).

Gruß
Wolfram

[aschwith]

Hallo Wolfram,

funktioniert astrein. Danke für die Hilfe!

Gruß
Alex

[wvhn]

Mit dem richtigen Event funzt es auch ohne den Timeout. So habe ich die Funktion jetzt in den develop branch übernommen:

// scroll to anchor after page is called w/ anchor link e.g  href="index.php?page=myPage&anchor=myAnchor" 
$(document).on('pagecontainerchange', function () {
	var searchAnchor = location.search.indexOf('anchor');
	if (searchAnchor > 0) {
		$.mobile.silentScroll($('#'+location.search.substring(searchAnchor+7)).offset().top);
	}
});

Integration in die Doku kommt noch.

Gruß
Wolfram

[aschwith]

Hallo Wolfram,

super. Habe Deine neue Version gerade getestet. Funktioniert sehr gut. Danke Dir für die Aufnahme ins Repo!

VG
Alex