nicht angemeldet
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>