javascript navigation

Status
Niet open voor verdere reacties.
B

bertyhell

Nieuwe gebruiker
Lid geworden
8 aug 2008
Berichten
4
ok ik heb deze pagina
staat ook online op dit adres:
http://berty.110mb.com/ikbv2/test5.html

maar het navigeren werkt niet
ook als ik
http://berty.110mb.com/ikbv2/test5.html?toonzaal
ingeef kom ik niet op pagina 2 terecht

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test dynamic navigation</title>
 
 
 
 
 
 
<script type="text/javascript">
 
window.onload = function() {
 
 
var url = location.href.split("?");
document.write(url[1]);
if(url[1])
{
 
	if (url[1]=="home")
	{
		document.write("  eerste if is voldaan");
		nav1()
 
	}
	else if(url[1]=="toonzaal")
	{
		document.write("  tweede if is voldaan");
		nav2()
	}
}
 
 
};
 
 
 
function nav1()
{
	document.write("  iframe 1 voldaan");
	document.getElementById('frame').innerHTML = "<iframe src="home.html" class="iframe" scrolling="no"></iframe>";
}
function nav2()
{
	document.write("  iframe 2 voldaan");
	document.getElementById('frame').innerHTML = "<iframe src="toonzaal.html" class="iframe" scrolling="no"></iframe>";
}
 
</script>
 
<style type="text/css">
 
.button1
{
	background-color: #666666;
	height: 30px;
	width: 80px;
	left: 0px;
	top: 30px;
	text-align: center;
	margin: 10px;
	position: absolute;
}
 
.button2
{
	background-color: #666666;
	height: 30px;
	width: 80px;
	left: 90px;
	top: 30px;
	text-align: center;
	margin: 10px;
	position: absolute;
}
 
#page1
{
	position: absolute;
	height: 300px;
	width: 500px;
	left: 0px;
	top: 70px;	
	margin: 10px;
	visibility: visible;
}
 
#page2
{
	position: absolute;
	height: 300px;
	width: 500px;
	left: 0px;
	top: 70px;
	margin: 10px;
	visibility: hidden;	
}
 
.iframe
{
	height: 500px;
	width: 700px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	position: absolute;
	left: 10px;
	top: 90px;
}
 
</style>
 
</head>
 
<body>
<div onclick="nav1()" class='button1'>button1</div> 
<div onclick="nav2()" class='button2'>button2</div>
 
<div id="frame">
<iframe src="home.html" class="iframe" scrolling="no"></iframe>
</div>
 
</body>
</html>



er klopt iets niet
want de regel:
javascript code
Code: 
document.write(url[1]);
wordt niet uitgeschreven
 
Laatst bewerkt:
bertyhell zei:
ik heb het aangepast
werk nog niet
Klik om te vergroten...

Euh, aangezien dit je eerste post is op helpmij, snap ik dit niet helemaal...
Alsof er al een voorgeschiedenis aan vast hoort te zitten...

Cotje

Welkom op Helpmij trouwens :D
 
oeps
mijn fout
ik had dit op een ander forum geplaatst maar daar kreeg ik geen antwoord :)

nu zou het beter moeten zijn :D

mvg

bert
 
Oplossing (aanpassingen in het rood):

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test dynamic navigation</title>


[COLOR="Red"]</head>[/COLOR]

<style type="text/css">

.button1
{
	background-color: #666666;
	height: 30px;
	width: 80px;
	left: 0px;
	top: 30px;
	text-align: center;
	margin: 10px;
	position: absolute;
}

.button2
{
	background-color: #666666;
	height: 30px;
	width: 80px;
	left: 90px;
	top: 30px;
	text-align: center;
	margin: 10px;
	position: absolute;
}

#page1
{
	position: absolute;
	height: 300px;
	width: 500px;
	left: 0px;
	top: 70px;	
	margin: 10px;
	visibility: visible;
}

#page2
{
	position: absolute;
	height: 300px;
	width: 500px;
	left: 0px;
	top: 70px;
	margin: 10px;
	visibility: hidden;	
}

.iframe
{
	height: 500px;
	width: 700px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	position: absolute;
	left: 10px;
	top: 90px;
}

</style>

<script type="text/javascript">

window.onload = function() {

 
var url = location.href.split("?");

if(url[1])
{
	
	if (url[1]=="home")
	{
		nav1()

	}
	else if(url[1]=="toonzaal")
	{
		nav2()
	}
}


[COLOR="red"]}[/COLOR]


function nav1()
{
 	[COLOR="Red"]document.getElementById('frame').src = "home.html";[/COLOR]}
function nav2()
{
	[COLOR="red"]document.getElementById('frame').src = "toonzaal.html";[/COLOR]
}

</script>





<body>
<div onclick="nav1()" class='button1'>button1</div> 
<div onclick="nav2()" class='button2'>button2</div>

[COLOR="red"]<div>[/COLOR]
<iframe [COLOR="red"]id="frame" [/COLOR]src="home.html" class='iframe' scrolling="no"></iframe>
</div>

</body>
</html>

Uitleg:

Als je je style sheet en javascript code zo in een html document zitten, dan mogen ze niet in het head gedeelte zitten. Heb dus je </head> verplaatst.

Tevens hoefd er geen ; na een sluithaakje ( = } ) van een functie in javascript, deze dus verwijderd.

Dan het ingewikkelder stuk. De ID heb ik verplaatst van de DIV naar het iframe, in het iframe wil je namelijk een aanpassing gaan maken

Voor:
Code: 
<div id="frame">
<iframe src="home.html" class="iframe" scrolling="no"></iframe>
</div>
Na:
Code: 
<div>
<iframe id="frame" src="home.html" class='iframe' scrolling="no"></iframe>
</div>

Tevens in de javascriptfunctie deze regel:
Code: 
document.getElementById('frame').innerHTML = "<iframe src="toonzaal.html" class="iframe" scrolling="no"></iframe>";
vervangen voor deze:
Code: 
document.getElementById('frame').src = "toonzaal.html";


Toen werkte het.

Cotje
 
fantastisch !!!!
hartelijk bedankt
ik versta het helemaal

nogmaals bedankt :)

ok dat werkt nu
maar als ik nu unieke url's wil
vb: als je op button 2 klikt moet de url veranderen in:
http://berty.110mb.com/ikbv2/test5.html?toonzaal

is dit mogelijk
(
en mss zonder de pagina te herladen
ik heb wat zitten zoeken op internet maar blijkbaar is dit niet mogelijk zonder de pagina te herlanden
zoals op dit forum
http://www.webdeveloper.com/forum/showthread.php?t=139022
jammer genoeg is de oplossingspagina niet meer beschikbaar :(
)
hoe doe ik het?
 
Laatst bewerkt:
Waarom gebruik je niet gewoon

window.location('URL');

Dit is relatief gemakkelijk en werkt altijd:p

greetz
Bjorn
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan