• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigieren per Js in einem riesigen Div

D

Danger-Maus

Neues Mitglied
Hallo zusammen,
ich versuche gerade eine Homepage zu basteln die nur aus einem HTML Dokument besteht. Im Body sollen verschiedenen <article>-Bereiche liegen, die jeweils einen Screenbereich darstellen. Ich hab die Navigation soweit im Griff, dass ich z.B. mit
function hnav(){
var test = document.getElementById("welt");
test.style.marginTop = "-1210px";
test.style.marginLeft = "-700px";
}

die gewünschten Positionen im Body ansteuern kann. Das Problem ist allerdings, dass das navigieren nur dann zuverlässig funktioniert, wenn Browserscrollbaleken und die Steuerungstasten des Nutzers deaktivieren sind (was ich sehr gerne vermeiden möchte).
Daher nun meine Fragen:
1. Kann ich irgendwie per Javascript die x- und y-Koordinaten des bodys verschieben, und wenn ja wie?
2. Falls nein, gibt es sonstige Möglichkeiten um dieses Problem mit javascript zu lösen?
3. Wenn ich schon die Scrolleiste des Browser und die Richtungstasten deaktivieren muss, wie sähe eine Javascript-Funktion aus mit der ich die aktuelle Position des divs #welt (oder am besten gleich des body) um z.B. 20px nach oben (oder links) verschieben kann?

Ich bin leider noch ziemlicher Anfänger, daher bitte ich um Entschuldigung wenn ich vielleicht nicht direkt alles bedacht habe.Vielen lieben Dank für jegliche Tipps schon mal im voraus.

Hier mal meine aktuell verwendeten css-Eigenschaften:

body{
width: 8550px;
height: 4550px;
position:absolute;
overflow-x: hidden;
overflow-y: hidden;
}

#welt{
width: 8550px;
height: 4550px;
background-image:url(koordinatenwelt.jpg);
background-repeat:no-repeat;
position:absolute;
z-index:2;
}
 
Danke werd ich mir auf jeden Fall mal ansehen. Ich hab nicht so wirklich viel Ahnung von Programmierung, da ich erst angefangen habe.
etwas gekürzter Quellcode lautet bisher
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Weltkugel2</title>
<script type='text/javascript' src='welt2.js'></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="welt2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="welt">
<div id="navi">
<ul>
<li><input type="button" id="anav" value="Ausgangskoordinaten" onClick="anav();"></li>
<li class="ml75"><input type="button" id="hnav" value="Humangeograf 2.0?" onClick="hnav();"></li>
<li class="ml25"><input type="button" id="lnav" value="Logbuch" onClick="lnav();" /></li>
<li class="ml50"><input type="button" id="rnav" value="Reiseberichte" onClick="rnav();" /></li>
<li class="ml100"><input type="button" id="snav" value="Sehenswürdigkeiten" onClick="snav();" /></li>
<li class="ml50"><input type="button" id="znav" value="Zielkoordinaten" onClick="znav();" /></li>
</ul>
<p class="mimpressum"><input type="button" id="inav" value="Impressum" onClick="inav();" /></p>
</div>
<div id="wrapper">
<div class="meer1"><h1>Meer 1</h1></div>
<div class="clear"></div>
<div class="meer2"><h1>Meer 2</h1></div>
<article id="ausgangskoordinaten">
<h1>Artikel 1</h1>
<section>
</section>
</article>
<div class="meer3"><h1>Meer 3</h1></div>
<div class="meer4"><h1>Meer 4</h1></div>
<article id="geograf">
<h1>Artikel 2</h1>
<section>
</section>
</article>
<div class="meer5"><h1>Meer 5</h1></div>
<article id="zielkoordinaten">
<h1>Artikel 3</h1>
<section>
</section>
</article>
<div class="meer2"><h1>Meer 2</h1></div>
<article id="reiseberichte">
<h1>Artikel 4</h1>
<section>
</section>
</article>
<div class="meer3"><h1>Meer 3</h1></div>
<div class="meer7"><h1>Meer 7</h1></div>
<article id="sehenswuerdigkeiten">
<h1>Artikel 5</h1>
<section>
</section>
</article>
<div class="meer4"><h1>Meer 4</h1></div>
<article id="logbuch">
<h1>Artikel 6</h1>
<h2 class="pl150">Lebenslauf</h2>
<section class="w400">
</section>
<aside>
</aside>
</article>
<div class="meer8"><h1>Meer 8</h1></div>
<div class="meer2"><h1>Meer 2</h1></div>
<article id="impressum">
<h1>Artikel 7</h1>

</article>
<div class="meer3"><h1>Meer 3</h1></div>
</div>
</div>
</body>
</html>

Für Javascript:
function init(){
navipos();
var startwelt =document.getElementById("welt");
startwelt.style.marginLeft = "0px";
startwelt.style.marginTop = "0px";
startwelt.style.marginTop = "-610px";
startwelt.style.marginLeft = "-3900px";
}

//http://www.meinelt-online.de/it/js/projekte/bewegen/anw_bewegen.htm
//document.getElementById("Identifikator").style.left=x+"px"
//document.getElementById("Identifikator").style.top=y+"px"

function navipos(){
var startnav = document.getElementById("navi");
startnav.style.left= "0px";
startnav.style.top= "0px";
}

function anav(){
var test = document.getElementById("welt");
test.style.marginTop = "-610px";
test.style.marginLeft = "-3900px";
}
function hnav(){
var test = document.getElementById("welt");
test.style.marginTop = "-1210px";
test.style.marginLeft = "-700px";
}
function lnav(){
var test = document.getElementById("welt");
test.style.marginTop = "-3010px";
test.style.marginLeft = "-700px";
}
function rnav(){

var test = document.getElementById("welt");
test.style.marginTop = "-1810px";
test.style.marginLeft = "-3900px";
}
function snav(){
var test = document.getElementById("welt");
test.style.marginTop = "-2410px";
test.style.marginLeft = "-6300px";
}
function znav(){
var test = document.getElementById("welt");
test.style.marginTop = "-1210px";
test.style.marginLeft = "-5650px";
}
function inav(){
var test = document.getElementById("welt");
test.style.marginTop = "-3610px";
test.style.marginLeft = "-3900px";
}

Die denke ich wesentlichen Css Eigenschaften:
body{
width: 8550px;
height: 4550px;
position:absolute;
overflow-x: hidden;
overflow-y: hidden;
}

#welt{
width: 8550px;
height: 4550px;
background-image:url(koordinatenwelt.jpg);
background-repeat:no-repeat;
position:absolute;
z-index:2;
}
#navi {
height: 600px;
width: 150px;
margin-top: 0px;
margin-left: 0px;
position: fixed;
z-index: 3;
}

Würde mich echt freuen wenn mir jemand weiterhelfen könnte.
 
Selbst wenn das der gekürzte Quellcode ist, beantwortet das nicht die Frage nach einem Link zur Seite, wie oben 2 mal geschrieben. Das wäre interessant um deine Frage zu beantworten.

Und verwende bitte Code-Tags wenn Du Quellcode im Forum zeigst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben