basic.symbol : Sprungmarke auf gleicher Seite

[manhartm]

Ich möchte die Navigation auf einer längeren Seite verbessern und dazu basic.symbol einsetzen. Ein Beispielcode sieht wie folgt aus:

{% extends "base.html" %}

{% block sidebar %}
{% include 'main_menu.html' %}
{% endblock %}

{% block content %}

  {{ basic.symbol('','','Jump 1','','','','','#jump1') }}
  
  {{ basic.symbol('','','Jump 2','','','','','#jump2') }}

  <a href="#jump1">Jump 1 (html)</a>

  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>

  <p id="jump1">Text 1</p>

  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>

  <p id="jump2">Text 2</p>

{% endblock %}

Wenn ich auf eines der basic.symbol oder auf den Hyperlink <a></a> klicke, passiert nichts. Die Seite verschiebt sich nicht zur Sprungmarke.

Wenn ich direkt im Hyperlink am Ende die Sprungmarke manuell eintrage und mit Enter bestätige, wird die Seite verschoben.

http://<ip>/smartvisu/index.php?page=test#jump2

Was mache ich falsch ?

Nachtrag: Ich teste auf der aktuellen Develop-Version auf einem Testsystem.

[AndreK]

Hi manhartm,

bei der Visu-Seite des Indego plugins hatte schuma (an der Stelle noch mal Danke für die Unterstützung) das so gelöst :

<a href="#jumpakku">{{ basic.print('', 'indego.visu.battery_load', '%') }}</a>

Die Sprungmarke sieht dort so aus :

<div id="jumpakku" class="set-3" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">

am Ende der Sprungmarke ist dann noch ein Sprung zum "Top"

<div class="ui-li-aside" align="right">{{ basic.symbol('', '', '', 'jquery_carat-u.svg', '', '', '', '#jumptop', '') }}</div>

Im "Top" war das wie folgt definiert :

<div id="jumptop" class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">

Funktioniert so immer noch :-)

Viele Grüße

Andre

P.S.: Ich hoffeich schaffe es am WE die neue Version des Plugins zu testen

[manhartm]

Der Schlüssel lag nicht in diesen Sprungmarken, sondern in einer zusätzlichen Java-Routine. Ich musste zusätzlich im Verzeichnis "/var/www/html/smartvisu/pages/<mypages>/js" in einer js-Datei diese Routine ablegen:

$(document).on('click', 'a[href^="#jump"]', function(e) {
  // target element id
  var id = $(this).attr('href');
  // target element
  var $id = $(id);
  if ($id.length === 0) {
      return;
  }
  // prevent standard hash navigation (avoid blinking in IE)
  e.preventDefault();
  // top position relative to the document
  var pos = $id.offset().top-100;
  // animated top scrolling
  $('body, html').animate({scrollTop: pos});
});

Damit funktioniert nun das Springen zu den Sprungmarken mit Hilfe meiner Beispielseite oben ohne Anpassung.

[AndreK]

Uups,

wie geschrieben, das hatte schuma gelöst - da ging wohl ein Teil an mir vorbei - oder ist schon zu lange her 😊

Schön wenn´s denn dann funktioniert.

[wvhn]

Normale html-Sprungmarken funktionieren in jQuery mobile nicht, weil Sprungmarken im multipage Modus für die Seitensteuerung benötigt werden, Die „offizielle“ Lösung für das Problem wurde in smartVISU v3.2 eingeführt. Siehe den Punkt „Fundamentals“ in der inline Doku.

Anchor Links in html Code

Links with normal html anchors will not work in smartVISU. Therefore, an alternative anchor representation is provided. Just append "&anchor=myAnchor" to the page URI in a link instead of "#myAnchor". This can be used with link and target on the same page as well as across pages.

Ein Beispiel ist dort auch angegeben.

Gruß
Wolfram

[manhartm]

Danke für den Hinweis. Ich habe mein Beispiel entsprechend angepasst:

{% extends "base.html" %}

{% block sidebar %}
{% include 'main_menu.html' %}
{% endblock %}

{% block content %}

  <a href="index.php?page=test&anchor=jump1">Jump 1 (html)</a>
  
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>

  <div id="jump1">
  <p>Text 1</p>

  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  </div>

  <div id="jump2">
  <p>Text 2</p>
  </div>
  
{% endblock %}

Die basic.symbol sind mal für den Moment entfernt. Die JS-Datei von oben habe ich auch gelöscht. Dieses Beispiel funktioniert bei mir aber nicht. Wenn ich auf den Link klicke, dann sieht man eine Art Flackern (neuer Bildaufbau), aber es schiebt nichts. Getestet habe ich mit dem aktuellen Firefox und Chrome auf einem Win10-Rechner. Der Browser zeigt aber einen Rollbalken rechts und ich kann die Seite von Hand schieben. Auch wenn ich die Zwischenblöcke deutlich länger mache, passiert nichts.

[wvhn]

Ich kann das Problem nachstellen. Wenn man den Link zu einem Anchor auf der aktuellen Seite betätigt, wird der Offset des Elements nicht berechnet bzw. ist 0. Dann scrollt die Seite zu 0 hin - also ganz nach oben, wenn sie dort nicht schon ist. Sobald man einen Reload der Seite macht, wird der Offset von da an immer richtig berechnet. Allerdings muss man die Seite für jeden internen Link jeweils nach dem ersten Betätigen neu laden. Seitenübergreifend funktioniert die Methode von Anfang an ohne Reload.

Eine Ursache habe ich bisher nicht gefunden. Auch ältere Versionen von smartVISU zeigen dieses Verhalten (zumindest mit den heutigen Browsern). Ich muss das weiter untersuchen.

Gruß
Wolfram

[wvhn]

Moin manhartm

für das Problem der Sprungmarke auf der aktuellen Seite habe ich jetzt auch eine Lösung. Mit folgendem Code in der visu.js funktioniert die oben beschriebene "anchor"-Methode in meinen Tests:

	$(document).on('click', 'a[href*="&anchor="]', function (event) {	
		var anchorPos = event.target.href.indexOf('&anchor');
		var anchor = event.target.href.substring(anchorPos+8);
		var target = event.target.href.substring(0, anchorPos);
		if (location.href.indexOf(target) == 0){
			event.preventDefault();
			$.mobile.silentScroll($('#'+ anchor).offset().top);
			//DEBUG: console.log('samepage link clicked: '+ anchor)
		}
	});

Kannst Du das mal testen? Vorteil der Lösung ist, dass man seitenintern und seitenübergreifend weiter die gleiche Methode verwenden kann.

Gruß
Wolfram

[manhartm]

Hallo Wolfram,

es funktioniert mit "<a href="index.php?page=test&anchor=jump1">Jump 1 (html)</a>", aber nicht mit "basic.symbol". Bei "basic.symbol" wird die Seite kurz weiss und bleibt oben, wenn sie wieder aufgebaut ist.

Gruss

Matthias

[wvhn]

Moin Matthias,

$(document).on('click', 'a[href*="&anchor="]', function (event) {
    if (event.target.href !== undefined)
        var targetURI = event.target.href;
    else
        targetURI = $(event.target).parents('a.ui-link').first()[0].href;

    var anchorPos = targetURI.indexOf('&anchor');
    var anchor = targetURI.substring(anchorPos+8);
    var target = targetURI.substring(0, anchorPos);

    if (location.href.indexOf(target) == 0){
        event.preventDefault();
        $.mobile.silentScroll($('#'+ anchor).offset().top);
        //DEBUG: console.log('samepage link clicked: '+ anchor)
    }
});

sollte es jetzt aber endlich sein. Beim basic.symbol saß das event.target auf dem untergeordneten <span>. Das ist jetzt abgefangen und im Test lief es mit beiden Varianten:

{{ basic.symbol('','','Jump 1','','','','','index.php?page=raum_versuche3&anchor=jump1') }}
oder
<a href="index.php?page=raum_versuche3&anchor=jump1">{{ basic.symbol('','','Jump 1') }}</a>

Gruß
Wolfram

[manhartm]

Die Seite wird mit "basic.symbol" gerollt, aber irgendwie etwas zu weit. Beispiel:

  <hr>
  <div id="jump1"></div>
  
  <!-- Abschnitt "Diagnose" -->
  
  <table border="1" style="border-collapse:collapse">
    <tr>
      <td></td>
      <td align=center>Turm 1</td>
      <td align=center>Turm 2</td>
    </tr>

Wenn ich zu diesem Anker springe, sieht es so aus:

shng1.png

Es müsste aber so sein:

shng2.png

Wenn ich zurück zum Anfang der Seite springe (Anker direkt nach {% block content %}), bleibt immer noch ein Teil der Seite oben verborgen.

[wvhn]

Moin Matthias,

die Scrollposition ist noch abhängig von der Höhe der Menüzeile am oberen Rand. Dafür habe ich jetzt einen Offset für den Seitenanfang eingebaut:

    /** workaround for same-page link anchors in smartVISU v3.2 - v3.4 */
	// detect same-page link target and scroll to anchor e.g  href="index.php?page=myPage&anchor=myAnchor"
	$(document).on('click', 'a[href*="&anchor="]', function (event) {	
		if (event.target.href !== undefined)
			var targetURI = event.target.href;
		else 
			targetURI = $(event.target).parents('a.ui-link').first()[0].href;
				
		var anchorPos = targetURI.indexOf('&anchor');
		var anchor = targetURI.substring(anchorPos+8);
		var target = targetURI.substring(0, anchorPos);
		var targetOffset = 64;

		if (location.href.indexOf(target) == 0){
			event.preventDefault();
			$.mobile.silentScroll($('#'+ anchor).offset().top - targetOffset);
			//DEBUG: console.log('samepage link clicked: '+ anchor)
		}
	});

Der Offset 64 ist im Moment noch fest, weil ich beim Testen gesehen habe, dass der berechnete Offset bei frisch gestarteter Visu fehlerhaft ist und erst nach einem Reload passt. Daran arbeite ich noch.

Ich habe den Code zusätzlich als workaround gekennzeichnet, damit man beim nächsten update daran erinnert wird, den Abschmitt wieder aus der visu.js zu löschen.

Gruß
Wolfram

[manhartm]

Leider klappt es bei mir immer noch nicht. So sieht es aus, wenn ich zu jump1 springe:

shng1.png

Erwarten würde ich:

shng2.png

Die Zeilen "Text 1" und "1" sind nicht sichtbar. Jetzt sehe ich auch keinen Unterschied mehr zwischen Sprung HTML oder basic.symbol.

Ich habe meinen Test-Code etwas erweitert, damit man das Springen besser beobachten kann:

{% extends "base.html" %}

{% block sidebar %}
{% include 'main_menu.html' %}
{% endblock %}

{% block content %}

  <div id="jumpback"></div>

  {{ basic.symbol('','','Jump 1','control_arrow_down.svg','','','','index.php?page=test&anchor=jump1', '', 'btn-micro') }}
  {{ basic.symbol('','','Jump 2','control_arrow_down.svg','','','','index.php?page=test&anchor=jump2', '', 'btn-micro') }}

  <a href="index.php?page=test&anchor=jump1">Jump 1</a>
  <a href="index.php?page=test&anchor=jump2">Jump 2</a><br>
  
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
  <p>13</p>
  <p>14</p>
  <p>15</p>
  <p>16</p>
  <p>17</p>
  <p>18</p>

  <div id="jump1"></div>
  <p>Text 1</p>

  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
  <p>13</p>
  <p>14</p>
  <p>15</p>
  <p>16</p>
  <p>17</p>
  <p>18</p>

  <a href="index.php?page=test&anchor=jumpback">Jump back</a>
  {{ basic.symbol('','','Jump back','control_arrow_up.svg','','','','index.php?page=test&anchor=jumpback', '', 'btn-micro') }}<br>

  <div id="jump2"></div>
  <p>Text 2</p>

  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
  <p>13</p>
  <p>14</p>
  <p>15</p>
  <p>16</p>
  <p>17</p>
  <p>18</p>

  <a href="index.php?page=test&anchor=jumpback">Jump back</a>
  {{ basic.symbol('','','Jump back','control_arrow_up.svg','','','','index.php?page=test&anchor=jumpback', '', 'btn-micro') }}<br>
  
{% endblock %}

[wvhn]

Hmm.

Den Unterschied zwischen Sprung HTML und basic.symbol habe ich bei mir nicht gesehen. Den sollte es nach meinem Verständnis nicht geben.

Gib mal auf der Browser-Konsole nacheinander folgendes ein und poste die Ergebnisse:

$('.ui-content').offset().top
$('#jumpback').offset().top
$('#jump1').offset().top

Mit

$.mobile.silentScroll(nnnn)

kannst Du von der Konsole aus auch manuell scrollen (nnnn ist die Position). Erwarten würde ich, dass Du genau an jump1 rauskommst, wenn Du als nnnn die Differenz zwischen den Positionen von #jump1 und .ui-content eingibst.

Gruß
Wolfram

[manhartm]

Ich habe folgendes erhalten:

$('.ui-content').offset().top
64

$('#jumpback').offset().top
80

$('#jump1').offset().top
792.4000244140625
​

Ich habe dann mit dem Scrollen etwas herumgespielt:

$.mobile.silentScroll(0)  => Seite steht ganz oben, Links und basic.symbol voll sichtbar
$.mobile.silentScroll(792)  => entspricht falscher Position in meinem letzten Post
$.mobile.silentScroll(728)  => das wäre so ca. die richtige Position (792-64)