[JavaScript/CSS] 1 box voor meerdere menu's

[anoniem]

Mensen, [b:25c467b5d3]Het idee:[/b:25c467b5d3] Ik heb een pagina met daarop 5 menu-items, wanneer ik op zo'n menu-item klik opent er een scherm (in dezelfde pagina over de navigatie) waarin dan de tekst/plaatjes over het desbetreffende onderwerp moet komen te staan. [b:25c467b5d3]De uitvoering:[/b:25c467b5d3][code:1:25c467b5d3]// In de link: onclick="document.getElementById('content').style.display='block'" // Het scherm: <div id="content"> <a href="javascript:void(null)" onclick="document.getElementById('content').style.display = 'none'">Content scherm sluiten</a> </div> // De css code: div#content { position: absolute; border: 1px solid #000; top: 78px; left: 50%; margin-left: -400px; width: 800px; height: 350px; background-color: #fff; filter: alpha(opacity=85); display: none; }[/code:1:25c467b5d3] [b:25c467b5d3]Het probleem:[/b:25c467b5d3] Ik krijg het niet voor elkaar om per link een waarde mee te geven (zodat het scherm 'weet' welke tekst/plaatjes erin moeten komen) zonder daarvoor 5x een div scherm aan te maken met dezelfde css code. [b:25c467b5d3]De bedoeling:[/b:25c467b5d3] Ik wil een waarde meegeven naar de <div> toe ([i:25c467b5d3]bijv. menu="1"[/i:25c467b5d3]) om op die manier de tekst uit de database te halen o.i.d. [b:25c467b5d3]Het voorbeeld:[/b:25c467b5d3] [code:1:25c467b5d3]<div id="content"> <?php if(menu == '1') { print "hallo"; } ?> <a href="javascript:void(null)" onclick="document.getElementById('content').style.display = 'none'">Content scherm sluiten</a></div>[/code:1:25c467b5d3] iemand die me hier ff mee kan helpen ?

[anoniem]

1. Gebruik naast de foute filer: alpha(opacity); ook de meer standard compliant -moz-opacity, -khtml-opacity en opacity. Te gebruiken als opacity:.85 bijvoorbeeld. Dit wordt namelijk de CSS3 property en niet iets raars van IE windows (-khtml- is voor Safari, -moz- is voor Mozilla, zonder prefix is W3C) 2. Zet nooit in je CSS display:none als het met JavaScript weer zichtbaar gemaakt moet worden. 3. Gebruik links zoals: <a href="#iets" onclick="blaat('iets');"/> 4. Zet binnen div#content 5 divs. Schakel de display uit met JS. bijvoorbeeld met de volgende onload functie: [code:1:33843d1983]function hideDivs(){ document.getElementById('content').style.display = "none"; document.getElementById('content').getElementById('item').style.display = "none"; /* etc. */ }[/code:1:33843d1983] 5. Gebruik zo'n functie voor de links: [code:1:33843d1983]function ShowDiv(div-id){ document.getElementById('content').style.display = "block"; document.getElementById('content').getElementById(div-id).style.display = "block"; }[/code:1:33843d1983] 6. Javascript netjes extern. De links laten verwijzen naar de div id's, zodat het ook bruikbaar is zonder JavaScript.

[anoniem]

zeer nuttige info, heel erg bedankt. Alleen punt 4 kom ik niet helemaal uit, hoe zet ik binnen die div#content 5 div's ?

[anoniem]

[quote:6a35220ce5="xanuex"]zeer nuttige info, heel erg bedankt.[/quote:6a35220ce5]Ik had een goede bui :P[quote:6a35220ce5="xanuex"]Alleen punt 4 kom ik niet helemaal uit, hoe zet ik binnen die div#content 5 div's ?[/quote:6a35220ce5][code:1:6a35220ce5]<div id="content"> <!-- div#content zorgt voor positionerning, overige divs zorgen voor inhoud --> <div id="home">Home</div> <div id="onderwerp-2">Onderwerp 2</div> <div id="onderwerp-3">Onderwerp 3</div> <div id="onderwerp-4">Onderwerp 4</div> <div id="contact">Contact</div> </div>[/code:1:6a35220ce5]

[anoniem]

[quote:eb5c1a2885]Ik had een goede bui :P [/quote:eb5c1a2885] altijd gunstig :lol: Er zit een klein foutje in deze functie [code:1:eb5c1a2885]function ShowDiv(div-id){ <-- document.getElementById('content').style.display = "block"; document.getElementById('content').getElementById(div-id).style.display = "block"; }[/code:1:eb5c1a2885] hij heeft aan dat hij een ')' wil hebben op de function regel. wanneer ik div-id weg haal werkt het wel maar die heb je wel nodig als variabele zijnde toch?

[anoniem]

[code:1:1ea7b17ed8]function showDiv(identifier){ document.getElementById('content').style.display = "block"; document.getElementById('content').getElementById(identifier).style.display = "block"; }[/code:1:1ea7b17ed8]

[anoniem]

2. Zet nooit in je CSS display:none als het met JavaScript weer zichtbaar gemaakt moet worden. het scherm staat nu bij het openen van de pagina standaard open, waar/hoe moet ik nu aangeven dat dit scherm bij openen niet zichtbaar is ?

[anoniem]

Daarvoor gebruik je de functie hideDivs(). Die roep je zo aan:[code:1:38bed04c11]window.onload = function(){ hideDivs(); }[/code:1:38bed04c11]Online voorbeeld?

[anoniem]

tips altijd welkom het werkt nog niet echt lekker met het aanroepen van de functies, ik krijg binnen het content scherm alle tussenliggende div's ook te zien. - waar moet ik die onload plaatsen?

[anoniem]

[code:1:9bc39d989d]function showDiv(identifier){ document.getElementById('content').style.display = "block"; document.getElementById('content').getElementById(identifier).style.display = "block"; } function hideDivs() { document.getElementById('content').style.display = "none"; document.getElementById('content').getElementById('biografie').style.display = "none"; document.getElementById('content').getElementById('schoolwerk').style.display = "none"; document.getElementById('content').getElementById('links').style.display = "none"; document.getElementById('content').getElementById('privewerk').style.display = "none"; document.getElementById('content').getElementById('contact').style.display = "none"; } window.onload = function(){ hideDivs(); }[/code:1:9bc39d989d]Opslaan als functions.js en zo er naartoe linken:[code:1:9bc39d989d]<script type="text/javascript" src="functions.js"></script>[/code:1:9bc39d989d]Die div sluiten moet natuurlijk binnen elke afzonderlijke div. div#content zorgt alleen voor het positioneren. showDiv roep je ongeveer zo aan:[code:1:9bc39d989d]<a href="#contact" onclick="showDiv('contact');"/>[/code:1:9bc39d989d]k? Die tabel is natuurlijk gruwelijk slecht gedaan en alles gaat zo traag als de pest. Gebruik liever zoiets: http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ en een lijstje samen met wat CSS (position:absolute; op de li elementen). Veel simpeler lijkt me.

[anoniem]

Die tabel is natuurlijk gruwelijk slecht gedaan en alles gaat zo traag als de pest lol :lol: Je website was ik vanmiddag ook al tegengekomen, daar ga ik zeker wat mee doen, dat zal wel lukken. Heb je nog een ongelovelijk goed idee om het gruwelijke tabel probleem op te lossen ??? ;) Ik was al bezig met een preload om de zooi wat 'sneller' op het scherm te laten komen. wat het script betreft ontzettend bedankt, dit had ik niet zelf zo snel uit kunnen vinden. Krijg op dit moment alleen nog aangegeven dat er een fout in de pagina zit, alleen word er niet vermeld waar (error on page), ik vermoed dat het bij het aanroepen van de linkjes is (onclick), want dat is hetgeen wat niet werkt.

[anoniem]

[quote:cdd857497d="xanuex"]Heb je nog een ongelovelijk goed idee om het gruwelijke tabel probleem op te lossen ??? ;)[/quote:cdd857497d][code:1:cdd857497d]<ul> <li/> <li/> <li/> <!-- enz. --> </ul>[/code:1:cdd857497d]Binnen de 'li' elenten de links, positioneren, wat achtergrond plaatjes, eventueel een paar <span/>'tjes en klaar. Jij roept aan: "ShowDiv", de functie is "showDiv" (die functienaam wordt altijd zo gebruikt in JS, dus eerst lowercase en dan bij de twee uppercase, dus je kunt het best je pagina aanpassen. Even voor je directory structuur. CSS != Scripts e.d.

[anoniem]

[quote:f0169f8057]Binnen de 'li' elenten de links, positioneren, wat achtergrond plaatjes, eventueel een paar <span/>'tjes en klaar. [/quote:f0169f8057] gaan we ook is mee aan de slag, kijken of dat lukt [quote:f0169f8057]Even voor je directory structuur. CSS != Scripts e.d.[/quote:f0169f8057] jij let ook overal op he :lol: heb hem bij stylesheets gezet zou je nog een laatste blik kunnen werpen, daarna moet ik er zelf maar aan geloven, genoeg hulp gehad dacht ik zelf :P ik heb die showDiv veranderd, maar heb nog steeds een onbekende error die ik niet kan achterhalen. Wanneer het scherm tevoorschijn komt komen ook alle divs binnen de content op het scherm terwijl het juist de bedoeling is dat ze per menu-item getoont worden.

[anoniem]

div#content haal je weg. div#content vervang je in je style sheet voor: div#biografie,div#links,div#shoolwerk enz. Achter opacity een ; anders werkt het niet ;). edit extra uitleg: op die manier heb je daar dus geen last van, je zult je JS'je ook even aan moeten passen natuurlijk, maar niet al teveel

[anoniem]

dan heb ik dus 5 verschillende divs in mijn stylesheet staan met allemaal dezelfde specificaties, kan dat niet efficienter :-? en div#content moet blijvenstaan voor de positionering toch ??

[anoniem]

div#content heb je dan niet meer nodig. Ik denk dat het probleem is dat de display property inherit is volgens de CSS specificatie waardoor je je JS file nog groter zou moeten maken. Lijkt me beter om dan 5 keer hetzelfde op die divs te zetten.

[anoniem]

Ten eerste kan je JavaScript het beste debuggen met Mozilla, die heeft een uitgebreide JavaScript Console met duidelijke foutmeldingen en bijbehorende regelnummers. Wat betreft je CSS:[code:1:00c07d031f]div#biografie, div#schoolwerk, div#links, div#privewerk, div#contact { position: absolute; border: 1px solid #000; top: 78px; left: 50%; margin-left: -400px; width: 800px; height: 350px; background-color: #fff; filter: alpha(opacity=85); opacity:.85; -moz-opacity:.85; -khtml-opacity:.85; }[/code:1:00c07d031f] - Bas

[anoniem]

[quote:6e7fedb848="termin8or"]1. Gebruik naast de foute filer: alpha(opacity); ook de meer standard compliant -moz-opacity, -khtml-opacity en opacity. Te gebruiken als opacity:.85 bijvoorbeeld. Dit wordt namelijk de CSS3 property en niet iets raars van IE windows (-khtml- is voor Safari, -moz- is voor Mozilla, zonder prefix is W3C) [/quote:6e7fedb848] Hoezo "meer standards complaint"? -moz-bla of -khtml-bla is net zo min standards compliant als filter:alpha(). En daardoor net zo fout, imho. Dat het w3c gekozen heeft voor de opacity variant voor hun css3 specs staat daar natuurlijk los van. En laten we nu overigens niet doen alsof alles wat MS verzint per definitie iets is voor het rariteitenkabinet, er zijn ook genoeg voorstellen van hen in de drafts van het w3c terechtgekomen.

[anoniem]

Fout. Aangezien het nog geen recommendation is moet er een prefix gebruikt worden aangezien de specificatie nog gewijzigd kan worden. Dit staat ergens vastgelegd. MS maakt er zelf ook gebruik van in Office. MS heeft in dit geval eigen verzonnen properties 'uitgevonden' zonder prefix maar gewoon direct de property 'filter' waardoor deze eigenlijk onbruikbaar wordt voor het gebruik in specificaties mochten die 'filter' nodig hebben voor iets (anders). (Voorbeeld: IE gebruikt sinds IE5.5 geloof ik overflow-x, vervolgens kan het W3C hier bijna niks meer aan veranderen, omdat het al zo'n lange tijd bestaat zonder prefix: [url]http://www.w3.org/TR/2002/WD-css3-ui-20020802/#overflow-x[/url])

[anoniem]

Desalnietemin is -moz-bla of -khtml-bla net zo min standards compliant als filter:alpha(), dus ik ben het zeker met Annie eens. - Bas