Verweis zu einem Anker innerhalb einer anderen Datei

[monaco]

hallo zusammen,

ich hoffe ihr könnt mir weiterhelfen.

Folgende Situation. Ich habe eine Seite unsere-leistung.html. Hier sind sechs Links, welche auf eine weitere Seite (leistungen-im-detail.html) verlinken sollen, aber zu dem entsprechenden Abschnitt

Ich habe diese wie folgt gelöst:
Mit Hilfe des #: leistungen-im-detail.html#analyse-der-basissituation

Nur wenn ich dies mit dem zweiten Link mache:

<a class="ce_text col-md-4 contentbox block" href="{{link_url::7}}#analyse-der-basissituation" title="Analyse der Basissituation">
<div>
<h3>Analyse der Basissituation</h3>
<p>Wir hinten, hinter den Wortbergen</p>
<p class="more">
<img width="18" height="18" alt="Produktlotsen" src="files/content/grafiken/kreuz.gif"> mehr
</p>
</div>
</a> 

Funktioniert der Sprung nicht.

Kann mir da jemand einen Tipp geben?

[Spooky]

Auf der Seite http://pl.dyntec.de/index.php/leistungen-im-detail.html gibt es kein Element mit der ID "entwicklung-von-produktstrategien", daher kann auch nirgends hin gesprungen werden.

[monaco]

Ok. Ich habe das ganze ganze etwas umgestellt: hier der neue Link:

Leider funktioniert der Sprung zum jeweiligen Textabschnitt immer noch nicht. Die ID61 und ID62 ist die ID, des entsprechenden Textabschnitts.

Aber so funktioniert es leider nicht. Kann mir jemand sagen, wo mein Fehler liegt?

[Samson1964]

Ich sehe keine Sprungziele:

<a name="61"></a> 

Woher soll der Browser wissen, wo er hin soll.

[monaco]

Ich habe es wie folgt definiert:

<a class="ce_text col-md-4 contentbox block" href="{{link_url::12}}#61" title="Analyse der Basissituation">
<div>
<h3>Analyse der Basissituation</h3>
<p>Wir hinten, hinter den Wortbergen</p>
<p class="more">
<img width="18" height="18" alt="Produktlotsen" src="files/content/grafiken/kreuz.gif"> mehr
</p>
</div>
</a> 

Ich habe per #61 verlinkt. Das ist die ID61 des Textabschnittes.

[Samson1964]

So hätte ich es auch gemacht. Aber das Sprungziel (61) muß natürlich auch auf der Zielseite definiert werden.

[monaco]

Aber um dies zu definieren kann ich wohl nicht den Elementtyp Text nehmen, sondern muss auf den Elementyp HTML zurückgreifen. Oder geht das auch mit dem Elementtyp Text?

[Samson1964]

Okay, mit der Id geht es wohl auch: https://wiki.selfhtml.org/wiki/HTML/...terne_Verweise
Kannte ich so noch nicht. Ich benutze immer das name-Attribut, was in jedem Browser funktioniert.

[Andreas]

Schau dir den Quelltext an. Die Sprungmarke (Hash) sucht nach einem Element mit dieser ID.

<a href="seite.html#ziel"></a>

<div id="ziel"></div>

Wenn da nichts ist, kann auch nicht dahin gesprungen werden.

Edit: sorry, ich hatte die letzten 5 Antworten noch nicht gelesen.

@Samson1964: Das name-Attribute nimmt man schon lange nicht mehr.

[monaco]

Aber dann verstehe ich nicht warum es nicht funktioniert? Stehe irgendwie auf dem Schlauch...........

[Andreas]

Schau dir meine vorherige Antwort an.

[harley-rider]

Ich denke Du musst die "61" auch als Inserttag definieren, so wird sie als Text angesehen und Du hast ja keine Seite die 61 heisst.

[Andreas]

Nein, er muss einfach nachsehen, welchen Wert das ID-Attribut des Elements im FE hat, welches er anspringen möchte. Hat es noch kein ID-Attribut, dann muss er diese im BE vergeben bei CSS-ID/-Klasse.

[monaco]

Danke Andreas. Ich habe nun eine ID definiert. Aber der Sprung funktioniert leider so noch nicht. Es soll schon an die entsprechende Überschrift gesprungen werden.

[monaco]

Wie löst ihr das das fest positionierte Bereiche den Linkanker überdecken?

[Andreas]

Letztens hatte ich mal smoothscroll von MooTools (aus dem More-Paket) aufgesetzt und da mit einem Offset den Abstand korrigiert.

[monaco]

Letztens hatte ich mal smoothscroll von MooTools (aus dem More-Paket) aufgesetzt und da mit einem Offset den Abstand korrigiert.

Ich habe mal folgendes Script im Einsatz:

<script>
$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') [&][&] location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top-800
          }, 1000);
          return false;
        }
      }
    });
  });
</script> 

Und habe bei top -800 definiert. Leider funktioniert auch dies nicht wie gewünscht. Kannst du mir da einen Tipp geben, damit der fest positionierte Bereich nicht den Linkanker überdeckt...

[Andreas]

Scheint doch zu funktionieren, mehr oder weniger, du solltest nur noch diese JS-errors beseitigen.

Den Header kannst du mit z-index ja leicht unter den Content bringen, aber das ist doch bestimmt nicht das, was du willst, sonst würde er ja nicht fixed da oben sitzen.

[monaco]

Scheint doch zu funktionieren, mehr oder weniger, du solltest nur noch diese JS-errors beseitigen.

Den Header kannst du mit z-index ja leicht unter den Content bringen, aber das ist doch bestimmt nicht das, was du willst, sonst würde er ja nicht fixed da oben sitzen.

Na ja leider nicht Andreas. Die Überschrift wird ja vom header verdeckt. Was kann ich tun, dass eben die Überschrift (z.B. Analyse der Basissituation) unter dem header erscheint?

JS-errors? Wo siehst du das?

[Andreas]

JS-errors? Wo siehst du das?

Da wo man JS-Fehler halt sieht - in der Konsole von z.B. Firebug, Dev-Tools o.ä.

[bizon]

Hallo,

vorab: Wo schon Contao-Urgesteine am Helfen sind, braucht es normalerweise nicht die Hilfe eines Contao-Fans. Jetzt lese ich diesen Thread aber schon eine Weile mit und habe das Gefühl, dass etwas in die falsche Richtung läuft und versuche mal einen Denkanstoss zu geben.

Ursache der nicht passenden Anker, eigentlich des kompletten #container-Inhaltes ist die fixe Positionierung des Headers. Eben durch dieses position:fixed; wird der Header komplett aus dem Fluß der Html-Elemente gerissen, was zur Folge hat, dass das nachfolgende Element, das ist in diesem Fall der #container, nun ganz oben am Seitenrand beginnt und der obere Teil vom fixen Header verdeckt wird. Das erzeugt nun den Versatz beim Content und somit auch bei den Ankern.

Gib also dem #container ein padding-top in mindestens der Höhe des Headers und alles sollte wieder passen. Evtl. Javascript-Offset-Lösungen sind damit nicht mehr erforderlich.

[Spooky]

Man könnte das auch mit CSS lösen, ist aber etwas unschön (und kann nicht überall angewandt werden). Prinzipiell muss man ja nur dafür sorgen, dass der Inhalt des Elementes, zu dem man springt, erst x Pixel später anfängt. zB margin-top:-100px; padding-top:100px;

[Andreas]

Gib also dem #container ein padding-top in mindestens der Höhe des Headers und alles sollte wieder passen. Evtl. Javascript-Offset-Lösungen sind damit nicht mehr erforderlich.

Nein, das stimmt so nicht. Wenn der Browser einen Anker (Ziel) anspringt, dann scrollt er bis das Ziel ganz oben ist. Das fixe Element, welches dort liegt, wird dabei nicht berücksichtigt. Wenn, dann müsstest du jedem Ziel ein Padding oben geben, aber dann hättest du zwischen diesen Elementen überall 200px Abstand.

Ob Spookys Lösung funktioniert wäre auszuprobieren. Meiner Meinung nach muss man dort dem Browser mitteilen, dass er das Ziel nicht bis ganz oben holen soll, sondern bei 200px von oben stoppen soll.

[Andreas]

@Spooky: Habe das gerade ausprobiert - funktioniert leider nicht.
Sorry, funktioniert doch, hatte den falschen Elementen die Werte gegeben. Also direkt auf die SECTIONs, welche auch die IDs haben, das geht. Coole Lösung.

.leistungen-im-detail section {
  margin-top: -200px;
  padding-top: 200px;
} 

[monaco]

Vielen lieben Dank euch allen für eure Hilfe. Das ist die Lösung


Was ich auch noch zusätzlich definiert habe, ist hier einen blank-container der hier ja keinen Inhalt hat und verwendet wird weil der header gefixt wird.

<div>
<div style="display:block; width:1520px; height:200px; float:none;"></div>
</div> 

Ich denke das ist unschön.

@Spooky du hast noch auch noch einen elegante Lösung angesprochen. Wie könnte man das Springen noch lösen und zugleich das verdenken des Ankers vermeiden?

[Andreas]

Ja, habe ich gesehen, den kannste wohl rausschmeißen, brauchst nur einem von den Hauptcontainern oben Padding 200px zu geben.

[monaco]

Hätte da nochmal eine Frage bezüglich des Ankers und Verlinkung.

Wenn ich von den einzelnen Links (Analyse der Ausgangssituation etc.)
auf die nächste Seite springe, dann soll der entsprechende Navigationspunkt (weisser circle) auch entsprechende gehighlighted werden.


Hat da jemand einen Tipp für mich?

[monaco]

Vielleicht ist es an dieser Stelle auch technisch nicht möglich........Wenn aber dennoch für mich jemand eine Lösung hat, wäre ich euch sehr dankbar.

[mlweb]

Wenn ich ehrlich bin ist es mir nicht mal gelungen zu verstehen was Du meinst.
Ich sehe links bei jedem Anklicken unter unsere Leistungen weisse Punkte, die da für mich etwas unmotiviert im Raum liegen.

[monaco]

Wenn ich ehrlich bin ist es mir nicht mal gelungen zu verstehen was Du meinst.
Ich sehe links bei jedem Anklicken unter unsere Leistungen weisse Punkte, die da für mich etwas unmotiviert im Raum liegen.

Ok, ich versuche es nochmal zu erklären. Wenn man beispielsweise auf den Link Analyse der Ausgangsituation klickt, wird auf die nächste Seite verlinkt und gleichzeitig soll dann der erste Navigationpunkt (weisser Punkt) gehighlighted werden.

[mlweb]

So ganz ins Unreine und als Idee:

• die Pseudoklasse target in Verbindung mit nth-of-type bzw. nth-of-child könnten hier interessant sein für die Gestaltung
• alternativ könnte man dem jeweiligen Punkt in Abhängigkeit vom Anker dynamisch mit javascript eine entsprechende Klasse zuweisen und gestalten

Mangels guter javascript-Kenntnisse wäre der erste Punkt, mein erster Versuch das Problem zu lösen.

[Andreas]

@mlweb: Ich befürchte die Pseudoklasse target wird nicht funktionieren, da diese Listenpunkte (Navigation ohne Text!) ja nicht die Targets sind.

@monaco: Du solltest dich mit JS beschäftigen, da du überhaupt keinen Ansatz zu haben scheinst. Einfachen fertigen Code posten, ohne dass du ihn verstehst, finde ich nicht so gut.

Du musst, wenn du auf die Seite kommst mit JS den Hash untersuchen. Wenn du den einmal hast, kannst du anhand dessen entsprechende Elemente auf der Seite ansprechen.

Je nachdem, was du da benutzt, evtl. ein Plugin, bietet dieses Plugin auch solche Möglichkeiten. Sowie man z.B. beim Akkordeon beim Aufruf der Seite einen ganz bestimmten Punkt aufklappen kann.

Ich bin auch immer noch der Meinung, dass man JS-Fehler und HTML-Fehler zuerst beseitigen sollte. Das ermöglicht den Hilfegebenden ein Debuggen der Seite.

[mlweb]

Ich mußte erst mal wieder selbst testen, aber ich meine dass das im Prinzip mit target funktioniert.
Hier einmal ein stark vereinfachtes Beispiel http://test.ml.webseiten.cc/test_target.html

Nachtrag: Beispiel noch etwas verfeinert. Bei seinem Aufbau müßte man nur die Reihenfolge im Code ändern, was aber problemlos machbar sein dürfte.

[Andreas]

Da haste aber ganz schön getrickst Target kann man bestimmt mal gebrauchen, aber ich denke dafür würde ich das nicht einsetzen. Ist ja auch eigentlich dafür gedacht das Zielelement zu formatieren und nicht, dich dann noch von diesem ausgehend durch den DOM zu hangeln.

Gib den Listenpunkten mal die Ziele, dann geht das z.B. schon nicht mehr.

<li>    
  <a href="#test1">1</a>
</li>
...

[mlweb]

Es war mehr der Ehrgeiz das ohne javascript zu lösen und natürlich weitestgehend zugeschnitten auf seine Seite.
Wobei target nicht nur für das gestalten des Zielelement verwendet wird. Es gibt auch etliche Lösungen mit target für mobile Navigationen im Netz.
Aber Du hast insofern Recht dass der Selektor schon mächtig lang und damit performancetechnisch sicher nicht optimal ist.
Das Auslesen des Hash in der URL mit javascript habe ich auch schon gemacht. Grundsätzlich fallen mir Lösungen mit javascript aber deutlich schwerer.
Wenn ich irgendwo im Netz für mein Problem ein halbwegs passendes Beispiel finde, dann kann ich mich durchbeißen und im Allgemeinen auch Anpassungen vornehmen. Aber im Gegensatz zu css fehlt mir da häufig die erste zündende Idee.

Gib den Listenpunkten mal die Ziele, dann geht das z.B. schon nicht mehr.

<li>    
  <a href="#test1">1</a>
</li>
...

Das funktioniert. Habe die Beispielseite gerade angepasst.

[Andreas]

Das funktioniert. Habe die Beispielseite gerade angepasst.

Tatsächlich, ich hatte das gestern temporär mit den Entwickler-Tools genau so umgesetzt und es ging nicht. Wahrscheinlich wird es am Ende allerdings doch daran scheitern, dass die Navigation nicht per CSS ausgehend von den Inhalts-Containern angesprochen werden kann.

[mlweb]

Das stimmt auf jeden Fall. Habe ich gestern noch gar nicht drüber nachgedacht. Sollte sich ja auch beim Scrollen anpassen.
Dafür gibt es glaub ich nur javascript-Lösungen.

[mlweb]

@Andreas
Ich sehe in Deiner Signatur immer mootools. Ich hatte mich auf Grund der Tatsache dass Contao früher standardmäßig nur mootools drin hatte, angefangen damit zu beschäftigen. Jetzt bin ich mir nicht mehr sicher. Die Auswahl an jquery Lösungen erscheint mir deutlich größer und auch solche schönen Slider wie der von rocksolid basieren auf jquery. Mischen mag ich aus Perfomancegründen ungern.
Vielleicht kannst Du mal etwas über die Vor- und Nachteile sagen, gerade auch im Bezug auf Contao. Gern auch per PM.

[Andreas]

offtopic:

Ich mache es einfach mal hier anstatt in einer PM.

Die vielleicht beste Gegenüberstellung gab's bereits 2009 und ist von Aaron Newton von Clientcide http://www.jqueryvsmootools.com/.

Im BE von Contao ist nach wie vor nur MooTools aktiv.

JQuery ist populärer, da es bessere Öffentlichkeitsarbeit betrieben hat - und es somit dann auch (leider) viel mehr Plugins gibt, welche die jQuery Bibliothek erfordern.

Obwohl ich jetzt auch schon einige Zeit jQuery-Code schreibe, fällt mir MooTools immer noch leichter und auch leichter zu lesen. Es erscheint mir irgendwie logischer.

Das Handbuch von MooTools finde ich sehr gut, mal ein Beispiel http://mootools.net/core/docs/1.6.0/...#Element:clone

Mit dem Handbuch von jQuery habe ich so meine Probleme da was zu finden, weshalb ich da immer Google bemühe. https://api.jquery.com/clone/

Ich habe mir beide Handbücher mit eigenem CSS (Stylish) angepasst.

MooTools:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document regexp("http://mootools\\.net/.*/docs.*") {

.wrapper {
  margin: 0 auto 0 270px!important;
}
.docs .toc {
  position: fixed!important;
  left: 0!important;
  top: 0!important;
  height: 100vh!important;
  overflow-y: scroll!important;
  max-width: 266px!important;
  z-index: 101!important;
  background-color: #fff!important;
}
/*
.docs .toc .small {
  height: auto!important;
}
.docs .toc .small ul {
  display: block!important;
}
*/
.core .main .docs .toc a.top:active {
  color: #fff!important;
}
.main a {
  position: relative;
  z-index: 1;
}
.docs .content h1 a {
  border-top: 90px solid transparent;
}
.docs .content h2 a {
  border-top: 90px solid transparent;
  margin-top: -90px;
  z-index: auto;
}

} 

jQuery:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("api.jquery.com") {
#sidebar {
  background-color: rgba(255, 255, 255, 0.99);
  float: none !important;;
  left: 0;
  margin: 0 !important;;
  max-height: 100%;
  max-width: 2550px;
  overflow: auto;
  padding: 0 0 0 16px;
  position: fixed;
  top: 0;
  width: 255px !important;;
}
#sidebar li {
  padding: 0 0 0 16px;
}
  /* Aktive Menüpunkte hervorheben */
  #sidebar li.current-cat-parent,
  #sidebar li.current-cat {
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .5);
  }
  #sidebar .children li.current-cat {
    box-shadow: none;
  }
  #sidebar li.current-cat-parent > a {
    font-weight: bold !important;
  }
  #sidebar li.current-cat > a {
    background-color: #444 !important;
    color: #fff !important;
    text-shadow: none !important;
    margin-left: -5px !important;
    padding-left: 5px !important;
  }
  
} 

Am Ende ist ja beides JavaScript. Muss halt jeder für sich entscheiden, womit er besser programmieren kann, was mehr Spaß macht. Bei mir ist es MooTools.

Neben der Einfachheit, Lesbarkeit und Logik des Codes ist ganz besonders wichtig, dass eine Bibliothek dir abnimmt, für jeden Browser eine Extra-Lösung programmieren zu müssen, und ich denke das machen sie beide sehr gut.

Im FE versuche ich immer nur eine Bibliothek einzusetzen und da mir der Code der Mediabox mittlerweile nicht mehr gefällt (wird wohl nicht mehr weiterentwickelt), benutze ich die Colorbox und bin damit erstmal auf jQuery festgelegt. Sollte sich irgendwann eine coole MooTools-Lightbox auftun, werde ich wohl wieder auf MooTools wechseln.

Übrigens, wenn du JS programmierst, welches nicht von einer Bibliothek abhängig ist, also reines JS, dann nennt man das auch Vanilla-JS.

Wenn du ein wenig mit jQuery od. MooTools rumspielen möchtest, kannst du das z.B. direkt in der Konsole von Firebug. Elemente auswählen, irgendwas mit den Elementen machen...

Bitte keinen Thread hieraus starten, weil offtopic. Wenn gewünscht, dann besser einen neuen Thread aufmachen. Ich persönlich brauche solch einen Thread nicht.

[mlweb]

Danke die Antwort reicht mir schon.
Ist für mich schon sehr hilfreich.