anoniem Geplaatst: 1 november 2003 Delen Geplaatst: 1 november 2003 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 ? Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 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. Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 zeer nuttige info, heel erg bedankt. Alleen punt 4 kom ik niet helemaal uit, hoe zet ik binnen die div#content 5 div's ? Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 [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] Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 [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? Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 [code:1:1ea7b17ed8]function showDiv(identifier){ document.getElementById('content').style.display = "block"; document.getElementById('content').getElementById(identifier).style.display = "block"; }[/code:1:1ea7b17ed8] Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 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 ? Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 Daarvoor gebruik je de functie hideDivs(). Die roep je zo aan:[code:1:38bed04c11]window.onload = function(){ hideDivs(); }[/code:1:38bed04c11]Online voorbeeld? Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 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? Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 [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. Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 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. Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 [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. Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 [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. Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 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 Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 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 ?? Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 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. Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 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 Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 [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. Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 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]) Quote Link naar reactie
anoniem Geplaatst: 1 november 2003 Auteur Delen Geplaatst: 1 november 2003 Desalnietemin is -moz-bla of -khtml-bla net zo min standards compliant als filter:alpha(), dus ik ben het zeker met Annie eens. - Bas Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen