Verlinkung über eine Menüleiste zu einem Bereich mit Autoscroll von xdanielx, 25.01.2010 17:17

Verlinkung über eine Menüleiste zu einem Bereich mit Autoscroll

xdanielx 25.01.2010 17:17

javascript

Guten Tag

Wie schon in dem Titel versucht zu erklären will ich mit Hilfe einer Menüleiste die auf der linken Seite ist zu dem Bereich rechts davon Verlinken, dabei soll wenn sich der Text öffnet die Seitenanzeige direkt zu einem bestimmten Punkt springen. Dabei soll aber auch noch möglich sein das wenn man diesen bestimmten Punkt liest den darüberliegenden Punkt zu lesen.

Bisher habe ich es hinbekommen die Verlinkung in der Menüleiste so zu schreiben das sich immer der rechte Inhalt verändert.
Das ist die erste Spalte der Tabelle (in den Verlinungen)die man sofort sieht.
Nun aber wenn man über die 1 geht kommt ein Fenster mit den Unterpunkten 1.1, 1.2 und diese Unterpunkte sollen auf die richtige Textstelle verlinkt werden.
Soweit so gut hier der abgespickte Quelltext von der Hauptseite.html:

<html>
<head>
<title> Test </title>
<script type="text/JavaScript" >
function loaddata(ziel,divid)
{
if(window.XMLHttpRequest) //non IE
    {
        var xmlHttp = new XMLHttpRequest();
    }
    else if(window.ActiveXObject) // IE - own XMLHttpRequest Object
    {
        var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttp.open('POST', ziel, true);
    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttp.onreadystatechange = function()
    {
        if (xmlHttp.readyState != 4)
        {
            document.getElementById(divid).innerHTML = '*Lade*';
        }
        if (xmlHttp.readyState == 4)
        {
           document.getElementById(divid).innerHTML = xmlHttp.responseText;
        }
    }
    xmlHttp.send(ziel);
}
function test()
{
document.getElementById('Inhalt').innerHTML='Test';
}
</script>

#Inhalt {
width:82%;
padding:5px;
float:right;
margin-bottom:5px;
background:#ECDA8E;}
</style>

</head>
<body>
<div id="menu2">
<ul>
<ul>
<li><a href="#" onclick="loaddata('Dokument1.html','Inhalt')">1</a>
<ul>
<li><a href="#" onclick="loaddata('Dokument1#Unterpunkt1.html','Inhalt');">1.1</a></li>
<li><a href="#Unterpunkt2" onclick="loaddata('Dokument1#Unterpunkt1.html','Inhalt');!">1.2</a></li>
<li><a href="#Unterpunkt3" onclick="loaddata('Dokument1.html','Inhalt')">1.3</a></li>
</ul>
</ul>
</ul>
</li>
</div>
</div>
<div id="Inhalt">
Dies ist die Hauptseite
</body>
</html>

Und der Quelltext vom Dokument1.html lautet:

<html>
<head>
<title>Klärwerk Cloppenbug</title>
</head>
<body>
<center><h2>Test</h2></center><br>
<hr>
Hier ein bisschen Text
<hr>
<hr>
Vielen Dank an alle die Versuchen sich damit auseinanderzusetzten :-)
<hr>
<br><br><br><br><br><br><br><br><br><br><br><br>
<h4><a name="Unterpunkt1">Unterpunkt1</a></h4>
<hr>
Hier ein bisschen Text
<hr>
<hr>
Vielen Dank an alle die Versuchen sich damit auseinanderzusetzten :-)
<hr>
<h4> <a name="Unterpunkt2">Unterpunkt2</a></h4>
<hr>
Hier ein bisschen Text
<hr>
<hr>
Vielen Dank an alle die Versuchen sich damit auseinanderzusetzten :-)
<hr>
<h4><a name= "Unterpunkt3">Unterpunkt3</h4></a>
<hr>
Hier ein bisschen Text
<hr>
<hr>
Vielen Dank an alle die Versuchen sich damit auseinanderzusetzten :-)
<hr>
</body>
</div>
</body>
</html>

So ich hab mich schonmal informiert wie man es auf einer einzelnen Seite macht, also mit Anker. Ist schon im Dokument1.html eingebaut und auch versucht es in der Hauptseite.html einzubauen.
Wie zu sehen ist hab ich auf der Hauptseite bei den Unterpunkten versuche gemacht. Dabei ist der Link bei 1.3 besonders verspechend, denn wenn man die Seite "Dokument1" über den Link "1" öffnet und dann den link "1.3" öffnet springt er an die richtige Stelle.
Das Problem ist nun das dies ein Umweg ist. Man soll direkt über den Link"1.3" zu dem Unterpunkt 1.3 kommen.

Ich hoffe ich habe das Problem gut genug beschrieben um die nötige Antwort zu erhalten. Ich weiß zum Teil wird es ein durcheinander im Quelltext sein da ich auch nicht so gut bin.
Ich bedanke mich schonmal für jede Hilfe

Beitrag melden

– Informationen zu den Bewertungsregeln

Verlinkung über eine Menüleiste zu einem Bereich mit Autoscroll
ChrisB 25.01.2010 18:26

javascript
+1 Informationen zu den Bewertungsregeln
Hi,

Wie schon in dem Titel versucht zu erklären will ich mit Hilfe einer Menüleiste die auf der linken Seite ist zu dem Bereich rechts davon Verlinken, dabei soll wenn sich der Text öffnet die Seitenanzeige direkt zu einem bestimmten Punkt springen. Dabei soll aber auch noch möglich sein das wenn man diesen bestimmten Punkt liest den darüberliegenden Punkt zu lesen.

Da kann meine Phantasie mit deiner Vorstellungskraft leider nicht mithalten.

Soweit so gut hier der abgespickte Quelltext von der Hauptseite.html:

Was hat denn bspw. XMLHttpRequest damit zu tun?

Selbst wenn du damit was nachladen willst - lässt sich das in einem abgespeckten Beispiel auch statisch umsetzen. Und das erlaubt mehr Konzentration auf's Wesentliche.

MfG ChrisB

--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
Beitrag melden

+1
Informationen zu den Bewertungsregeln
1. Verlinkung über eine Menüleiste zu einem Bereich mit Autoscroll
  
  xDanielx 27.01.2010 19:39
  
  javascript
  – Informationen zu den Bewertungsregeln
  Hi,
  
  Wie schon in dem Titel versucht zu erklären will ich mit Hilfe einer Menüleiste die auf der linken Seite ist zu dem Bereich rechts davon Verlinken, dabei soll wenn sich der Text öffnet die Seitenanzeige direkt zu einem bestimmten Punkt springen. Dabei soll aber auch noch möglich sein das wenn man diesen bestimmten Punkt liest den darüberliegenden Punkt zu lesen.
  
  Da kann meine Phantasie mit deiner Vorstellungskraft leider nicht mithalten.
  
  Dann hab ich´s wohl schlecht beschrieben.
  Oder kann es sein das du den Text am Ende übersehen hast?
  (naja soweit unten schaut man ja auch nicht nach)
  Aber daher hab ich ja auch die Dateien mitgegeben.
  
  Soweit so gut hier der abgespickte Quelltext von der Hauptseite.html:
  
  Was hat denn bspw. XMLHttpRequest damit zu tun?
  
  Ich weiß es nicht, das hab ich auch nur auf einer Internetseite gefunden.
  
  Selbst wenn du damit was nachladen willst - lässt sich das in einem abgespeckten Beispiel auch statisch umsetzen. Und das erlaubt mehr Konzentration auf's Wesentliche.
  
  Du hast recht das es mehr Konzetration aufs wesendliche ermöglicht aber es soll etwas werden was nicht unbedingt jeder hat.
  
  MfG ChrisB
  
  Naja egal ich hab meine Lösung gefunden. Außerdem hab ich in dem "Script"-Teil noch ein paar Kommentare gemacht um es eventuell verständlicher zu machen.
  Vielleicht braucht wer anders es noch.
  Hier der Quelltext:
  
  <html>
  
  <head>
  
  <script type="text/JavaScript" >
  function loaddata(ziel,divid) // Funktion zum Laden der ersten Spalte  ziel= die html datei die in der Mitte ausgegeben werden soll div =wo er es ausgeben soll
  {
  if(window.XMLHttpRequest) //non IE
      {
          var xmlHttp = new XMLHttpRequest();
      }
      else if(window.ActiveXObject) // IE - own XMLHttpRequest Object
      {
          var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
  
  xmlHttp.open('POST', ziel, true);
      xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xmlHttp.onreadystatechange = function()
      {
          if (xmlHttp.readyState != 4)
          {
              document.getElementById(divid).innerHTML = 'Ladevorgang';
          }
          if (xmlHttp.readyState == 4)
          {
             document.getElementById(divid).innerHTML = xmlHttp.responseText;
          }
      }
  
  xmlHttp.send(ziel);
  
  }
  
  function loaddataanker(ziel,divid,anker)     // Funktion zum Laden der ausklapbaren Spalte Definition "ziel,divid" wie oben , anker= der Anker in "ziel"
  {
  if(window.XMLHttpRequest) //non IE
      {
          var xmlHttp = new XMLHttpRequest();
      }
      else if(window.ActiveXObject) // IE - own XMLHttpRequest Object
      {
          var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
  
  xmlHttp.open('POST', ziel, true);
      xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xmlHttp.onreadystatechange = function()
      {
          if (xmlHttp.readyState != 4)
          {
              document.getElementById(divid).innerHTML = 'Ladevorgang';
  
  }
          if (xmlHttp.readyState == 4)
          {
             document.getElementById(divid).innerHTML = xmlHttp.responseText;
             window.location.hash =anker;
          }
      }
  
  xmlHttp.send(ziel);
  
  }
  
  </script>
  <style type="text/css">
  // Das Aussehen der Internetseite ( hier gesamt, Kopf, Inhalt und unten) die Menüleiste wird mit Menu2 definiert
  
  #gesamt {
  margin:0px auto;
  width:800px;
  padding:5px;
  border:1px solid #ddd;}
  
  #Kopf {
  padding:10px 5px;
  margin-bottom:5px;
  background:#transparent;}
  
  #Inhalt {
  width:82%;
  padding:5px;
  float:right;
  margin-bottom:5px;
  background:#transparent;}
  
  #Unten {
  clear:both;
  padding:5px;
  background:#transparent;}
  
  #menu2 {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  background:#transparent none repeat scroll 0 0;
  width:150px;
  float:left;
  }
  #menu2 ul {
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  }
  #menu2 a, #menu h2 {
  -x-system-font:none;
  border-color:#CCCCCC #888888 #555555 #BBBBBB;
  border-style:solid;
  border-width:1px;
  display:block;
  font-family:arial;
  font-size:11px;
  font-size-adjust:none;
  font-weight:bold;
  line-height:16px;
  margin:0;
  padding:2px 3px;
  }
  #menu2 h2 {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  background:#transparent none repeat scroll 0 0;
  color:#0561FA;
  text-transform:uppercase;
  }
  #menu2 a {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  background:#EFEFEF none repeat scroll 0 0;
  color:#000000;
  text-decoration:none;
  }
  #menu2 a:hover {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  background:#1A50B8 none repeat scroll 0 0;
  color:#E2D811;
  }
  #menu2 li {
  position:relative;
  }
  #menu2 ul ul ul {
  left:100%;
  position:absolute;
  top:0;
  width:100%;
  }
  div#menu2 ul ul ul, div#menu2 ul ul li:hover ul ul {
  display:none;
  }
  div#menu2 ul ul li:hover ul, div#menu2 ul ul ul li:hover ul {
  display:block;
  }
  
  body {
  background-image: url(hintergrund.jpg);
  }
  </style>
  
  <title>Test</title>
  
  </head>
  <body>
  
  <div id="Kopf">
  <img align= "right" src ="C - Cloppenburg_klein.jpg"  >
  <center><strong><h1>Klärwerk-Cloppenburg</h1></strong></center></p></div>
  <div id="menu2">
  <ul>
  
  <ul>
  
  <li><a href="#" onclick="loaddata('1.html','Inhalt');">Öffnen das Dokument 1 im Bereich "Inhalt"</a>
  
  <ul>
  <li><a href="javascript:loaddataanker('1_1.html','Inhalt','Unterpunkt1')" >Öffnen das Dokument 1 im Bereich "Inhalt" und zeige dirket den ersten Unterpunkt</a></li>
  <li><a href="javascript:loaddataanker('1_2.html','Inhalt','Unterpunkt1')"  >Öffnen das Dokument 1 im Bereich "Inhalt" und zeige dirket den zweiten Unterpunkt</a></li>
  
  </ul>
  
  </li>
  </ul>
  </ul>
  
  </div>
  <div id="Inhalt">
  
  Dies ist die Hauptseite
  </div>
  <div id="Unten">
  © by ...
  </div>
  
  </body>
  </html>
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

xdanielx: Verlinkung über eine Menüleiste zu einem Bereich mit Autoscroll