Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

resolutie probleem

anton - 16/02/2009 18:07

Lid

hallo,
Ik heb met javascript een uitklap menutje gemaakt dat onmouseover uitklapt , nu zijn die menu's die uitgeklapt worden div's. Die div's zijn opgemaakt in css als volgt:

css code - Bekijk de code zonder highlighting - Klap code in

                #Div1 {
	position:absolute;
	left:440px;
	top:234px;
	width:201px;
	height:60px;
	z-index:1;
	border: 1px solid;
	border-color:#0C6;
	background-color:#333;
}
#Div2 {
	position:absolute;
	left:515px;
	top:234px;
	width:100px;
	height:40px;
	z-index:1;
	border: 1px solid;
	border-color:#0C6;
	background-color:#333;
}
#Div3 {
	position:absolute;
	left:405px;
	top:234px;
	width:175px;
	height:40px;
	z-index:1;
	border: 1px solid;
	border-color:#0C6;
	background-color:#333;
}

            
#Div1 {
	position:absolute;
	left:440px;
	top:234px;
	width:201px;
	height:60px;
	z-index:1;
	border: 1px solid;
	border-color:#0C6;
	background-color:#333;
}
#Div2 {
	position:absolute;
	left:515px;
	top:234px;
	width:100px;
	height:40px;
	z-index:1;
	border: 1px solid;
	border-color:#0C6;
	background-color:#333;
}
#Div3 {
	position:absolute;
	left:405px;
	top:234px;
	width:175px;
	height:40px;
	z-index:1;
	border: 1px solid;
	border-color:#0C6;
	background-color:#333;
}
 

en de divs staan helemaal in het begin van de pagina met hun inhoud , aangezien ze tog op de juiste plaats worden gezet door css.
die div's zijn als volgt:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<div id="Div1" style="visibility:hidden; display:none" onmouseover="dropDown('apDiv1')" onmouseout="pullAway('apDiv1')"><a href="?p=alg&c=nwe">Wachtwoord en E-mailadres</a><br /><a href="?p=alg&c=van">Voor- en Familienaam</a><br /><a href="?p=alg">Leeftijd</a></div>
    
    <div id="Div2" style="visibility:hidden; display:none" onmouseover="dropDown('apDiv2')" onmouseout="pullAway('apDiv2')"><a href="?p=NRPG&c=hob">Hobby's</a><br /><a href="?p=NRPG">Over mij</a></div>
    
    <div id="Div3" style="visibility:hidden; display:none" onmouseover="dropDown('apDiv3')" onmouseout="pullAway('apDiv3')"><a href="profiel_edit.php">Rijdersnaam</a><br /><a href="?c=ans">Avatar en Onderschrift</a></div>

<div id="Div1" style="visibility:hidden; display:none" onmouseover="dropDown('apDiv1')" onmouseout="pullAway('apDiv1')"><a href="?p=alg&c=nwe">Wachtwoord en E-mailadres</a><br /><a href="?p=alg&c=van">Voor- en Familienaam</a><br /><a href="?p=alg">Leeftijd</a></div>
 
    <div id="Div2" style="visibility:hidden; display:none" onmouseover="dropDown('apDiv2')" onmouseout="pullAway('apDiv2')"><a href="?p=NRPG&c=hob">Hobby's</a><br /><a href="?p=NRPG">Over mij</a></div>
 
    <div id="Div3" style="visibility:hidden; display:none" onmouseover="dropDown('apDiv3')" onmouseout="pullAway('apDiv3')"><a href="profiel_edit.php">Rijdersnaam</a><br /><a href="?c=ans">Avatar en Onderschrift</a></div>

En dan komt nu nog de javascript code:

javascript code - Bekijk de code zonder highlighting - Klap code in

                function dropDown(id){
	document.getElementById(id).style.visibility='visible'
	document.getElementById(id).style.display='block'
}
function pullAway(menuID){
		document.getElementById(menuID).style.display='none';
		document.getElementById(menuID).style.visibility='hidden';
}

            
function dropDown(id){
	document.getElementById(id).style.visibility='visible'
	document.getElementById(id).style.display='block'
}
function pullAway(menuID){
		document.getElementById(menuID).style.display='none';
		document.getElementById(menuID).style.visibility='hidden';
}
 

Het uitklappen en naar binnen trekken enzo werkt allemaal.
Het enige probleem is:
Ik maak mijn site op een reolutie van 1024x780 maar als ik die site bekijk op mn pc beneden met resolutie 1280x1024 , staan die uitklapmenuutjes op een totaal verkeerde plek...
heeft er iemand een idee hoe ik dit kan verhelpen?

Ik had al gedacht aan verschillende css bestanden te maken , en die dan te laten selecteren aan de hand van de reolutie van de gebruiker...het probleem is dat ik niet weet hoe ik dat te weten kom , welke resolutie dat de gebruiker heeft.
Dus misschien heeft iemand een andere , simpelere oplossing??

Alvast bedankt,
MVG
Anton Vandeghinste

3 antwoorden

Gesponsorde links

anton - 16/02/2009 18:13
Lid		moet ik dan de positie naar relative zetten??? wat is het verschil als je waarden opgeeft van left en top??? MVG Anton Vandeghinste

anton - 16/02/2009 18:20
Lid		uhm , nu niet meer , heb juist dat relative geprobeerd...maar nu gebeurd er het volgende: http://yaweonli...&c=age eerst bleef hij nog in de buurt van de links maar nu springt hij helemaal naar onderaan de pagina en doet hi jrare flikkeringen enzo MVG Anton Vandeghinste

anton - 16/02/2009 18:25
Lid		njah , je moet ingelogd zijn...uhm... oh wacht...ik heb nog wel een site , maar daar werkt het wel ... http://www.fdproductions.be in het menu , nadat je op engels geklikt hebt maar ik snap niet waarom het daar wel werkt en hier niet...

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten