Div verbergen probleem

woensdag 19 oktober 2011 10:43

Acties:

0 Henk 'm!

Topicstarter

Voor mijn website heb ik op de homepage enkele nieuwsberichten, nu na een tijdje zullen er heel wat nieuwsberichten opstaan en wordt de lijst veel te lang. Ik wil graag ook alle oude nieuwsberichten kunnen behouden en tonen aan de bezoeker indien ze op een link klikken. Dit wil ik doen d.m.v. een javascriptje dat de div css eigenschap verandert van "none" naar "block".

Dit is mijn js code:
[code=js]
function toggle (a,oud) {

var div = document.getElementById (oud);

if (div.style.display == "none") {
div.style.display = "block";
a.innerHTML = "hide div";
}

else {
div.style.display = "none";
a.innerHTML = "show div";
}
}
[/code=]

HTML:

<a href="#" onclick="toggle(this,'oud');return false">show div</a>
<div id="oud">
      <p>content<p>
</div>

In de css file heb ik de div oud de eigenschap display: none; meegegeven.

Als ik dit dan test in de browser dan werkt dit niet naar behoren, de div is wel niet zichtbaar in het begin. Als ik dan vervolgens op de link klik om de verborgen div weer te geven dan gebeurt er niks.

Kan iemand mij helpen? Alvast bedankt!

woensdag 19 oktober 2011 10:53

Acties:

0 Henk 'm!

Naranya

HTML:

<html>
<head>
<script>
function toggle (a,oud) {
    var div = document.getElementById (oud); 
    if (div.style.display == "none") { 
        div.style.display = "block"; 
        a.innerHTML = "hide div"; 
    } 
    else { 
        div.style.display = "none"; 
        a.innerHTML = "show div"; 
    } 
}
</script>
</head>
<body>
<a href="#" onclick="toggle(this,'oud');return false">show div</a> 
<div id="oud"> 
      <p>content<p> 
</div>
</body>
</html>

Werkt gewoon in mijn browser (Chrome)...

woensdag 19 oktober 2011 10:59

Acties:

0 Henk 'm!

glennvho

Topicstarter

Ik heb het zojuist ook even getest zoals het hierboven staat en dit werkt inderdaad goed. Maar als ik het dus probeer in mijn site dan werkt het voor geen meter.

Kan dit misschien liggen aan het feit dat ik de js code in een appart bestand gezet heb? Ook mijn css code staat in een apart bestand btw. Die heb ik dan gewoon als volgt gelinkt in de head van mijn html document:

HTML:

1 2	<link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/scripts.js"></script>

woensdag 19 oktober 2011 11:24

Acties:

0 Henk 'm!

StephanVierkant

Wellicht niet helemaal je vraag, maar heb je al naar bijvoorbeeld jQuery gekeken?

woensdag 19 oktober 2011 11:28

Acties:

0 Henk 'm!

Naranya

Welke browser gebruik je? Krijg je foutmeldingen? Valideer je output eens.

Stephan4kant schreef op woensdag 19 oktober 2011 @ 11:24:
Wellicht niet helemaal je vraag, maar heb je al naar bijvoorbeeld jQuery gekeken?

Beetje overkill om heel de jQuery lib te gebruiken om alleen een paar divjes in en uit te klappen.

woensdag 19 oktober 2011 11:33

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Stephan4kant schreef op woensdag 19 oktober 2011 @ 11:24:
Wellicht niet helemaal je vraag, maar heb je al naar bijvoorbeeld jQuery gekeken?

Meer "helemaal niet je vraag" en "kanon op een mug". Hier is geen complete library voor nodig, zoals in heel veel gevallen.

Anyone who gets in between me and my morning coffee should be insecure.

woensdag 19 oktober 2011 11:38

Acties:

0 Henk 'm!

jopitan

It's just a fact

Als je dan toch jquery gebruikt

HTML:

<html> 
<head> 
<script> 
$(function () {
    $('#toggle_div').click(function() {
        if($('#oud').css('display') == "none") {
            $('#oud').css('display', 'block');
            $(this).html('hide div');
        } else {
            $('#oud').css('display', 'none');
            $(this).html('show div');
        }
    }
});
</script> 
</head> 
<body> 
<a href="#" id="toggle_div">show div</a>  
<div id="oud">  
      <p>content<p>  
</div> 
</body> 
</html>

woensdag 19 oktober 2011 11:39

Acties:

0 Henk 'm!

arie_papa

Running on Ubuntu

Kijk eens met bijv firebug of de css + script netjes geladen wordt.

edit:
Noscript toevallig aanstaan? In eerste instantie wordt idd de show div getoont + content.
Pas als ik noscript toesta om het script te laden werkt het fatsoenlijk.

[ Voor 57% gewijzigd door arie_papa op 19-10-2011 11:42 ]

Statistieken zijn als bikini's: wat ze tonen is erg suggestief, wat ze niet tonen is essentieel

woensdag 19 oktober 2011 11:48

Acties:

0 Henk 'm!

Mas-ih

glennvho schreef op woensdag 19 oktober 2011 @ 10:59:
Ik heb het zojuist ook even getest zoals het hierboven staat en dit werkt inderdaad goed. Maar als ik het dus probeer in mijn site dan werkt het voor geen meter.

Kan dit misschien liggen aan het feit dat ik de js code in een appart bestand gezet heb? Ook mijn css code staat in een apart bestand btw. Die heb ik dan gewoon als volgt gelinkt in de head van mijn html document:
HTML:
1
2
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/scripts.js"></script>

Roep je de setup(); functie in je html wel op? voeg dit eens toe net voor je </body> tag.

HTML:

1	<script type="text/javascript">setup();</script>

woensdag 19 oktober 2011 11:55

Acties:

0 Henk 'm!

jopitan

It's just a fact

Kun je de js/scripts.js eens posten?

woensdag 19 oktober 2011 11:59

Acties:

0 Henk 'm!

glennvho

Topicstarter

Dit is de inhoud van mijn scripts.js bestand.

[code=js]
function toggle (a,oud) {

var div = document.getElementById (oud);

if (div.style.display == "none") {
div.style.display = "block";
a.innerHTML = "hide div";
}

else {
div.style.display = "none";
a.innerHTML = "show div";
}
}
[/code=]

Als ik mijn site valideer zijn er geen problemen met javascript en ook in firebug zie ik dat alles mooi geladen wordt...

woensdag 19 oktober 2011 12:02

Acties:

0 Henk 'm!

Naranya

Zet eens ergens een uitgeklede testcase online.

woensdag 19 oktober 2011 12:07

Acties:

0 Henk 'm!

glennvho

Topicstarter

Naranya schreef op woensdag 19 oktober 2011 @ 12:02:
Zet eens ergens een uitgeklede testcase online.

Heb even alles geupload, het is dus volledig mijn index pagina waarbij alles werkt met uizondering dan het javascript gedeelte...

Link: *snip* Dat is géén testcase maar een complete site

[ Voor 11% gewijzigd door RobIII op 19-10-2011 14:28 ]

woensdag 19 oktober 2011 12:16

Acties:

0 Henk 'm!

Naranya

Om een of andere reden zet hij je <a> element op display: none..
Probeer je funtie 'toggle' eens te renamen naar iets anders, kan goed zijn dat prototype framework toggle al afgevangen heeft.

woensdag 19 oktober 2011 17:35

Acties:

0 Henk 'm!

glennvho

Topicstarter

Naranya schreef op woensdag 19 oktober 2011 @ 12:16:
Om een of andere reden zet hij je <a> element op display: none..
Probeer je funtie 'toggle' eens te renamen naar iets anders, kan goed zijn dat prototype framework toggle al afgevangen heeft.

Heb de naam even veranderd naar iets anders en werkt nog steeds niet, de link wordt nog steeds verborgen jammer genoeg. Zijn er soms andere en betere codes of manieren om te realiseren wat ik wil doen?

woensdag 19 oktober 2011 18:33

Acties:

0 Henk 'm!

jopitan

It's just a fact

HTML:

1	var div = document.getElementById (oud);

naar

HTML:

1	var div = document.getElementById(oud);

Het is maar net hoe de server het oppakt.

[ Voor 14% gewijzigd door jopitan op 19-10-2011 18:33 ]

woensdag 19 oktober 2011 19:48

Acties:

0 Henk 'm!

glennvho

Topicstarter

Oké nu wordt
het nog raarder :d Ik heb naar de suggesties die hier gedaan werden enkele aanpassingen gedaan. Nu werkt het wel maar niet zoals ik het zou willen. Als ik op de pagina ben dan klik ik dus op de link en dan springt hij terug naar boven, als ik dan zonder te refreshen nog eens klik op de link dan toont hij de div wel!

Mijn scripts.js bestand:

JavaScript:

function tonen(a,oud) {
    
    var div = document.getElementById(oud);
    
    if (div.style.display=="none") {
        div.style.display="block";
    }
    
    else {
        div.style.display="none";
    }
}

Mijn html:

HTML:

<a href="#" onclick="tonen(this,'oud')">show div</a>
<div id="oud">
      <p>content<p>
</div>

De css voor de div:

Cascading Stylesheet:

#oud {
    width: 400px;
    background-color: #a9bde1;
    border: 0px solid;
    padding: 10px;
    border-radius: 20px;
    display: none;
}

Zou ik dit eigenlijk ook niet kunnen verwezenlijken met onclick in mijn script.js bestand zelf te gerbuiken op de een of andere manier? Dan bedoel ik dus dat ik enkel de link heb in de html en dan gewoon in js zeg bij klikken die eigenschap in css veranderen.

woensdag 19 oktober 2011 19:48

Acties:

0 Henk 'm!

NetForce1

(inspiratie == 0) -> true

De style-property van een element bevat de local style, niet wat je in een globale style opgeeft. Dit werkt wel:

JavaScript:

function toggle (a,oud) { 
     
    var div = document.getElementById (oud); 
     
    if (div.style.display != "block") { 
        div.style.display = "block"; 
        a.innerHTML = "hide div"; 
    } 
     
    else { 
        div.style.display = "none"; 
        a.innerHTML = "show div"; 
    } 
}

testcase: http://jsfiddle.net/ukWJ7/1/

[ Voor 4% gewijzigd door NetForce1 op 19-10-2011 19:50 ]

De wereld ligt aan je voeten. Je moet alleen diep genoeg willen bukken...
"Wie geen fouten maakt maakt meestal niets!"

woensdag 19 oktober 2011 19:52

Acties:

0 Henk 'm!

Bartjezz

Verwijder de geschiedenis en cookies eens, daar heb ik ook weleens problemen met met webdesign...

woensdag 19 oktober 2011 19:52

Acties:

0 Henk 'm!

alex3305

offtopic:
Let er wel op dat ook al zijn berichten 'verborgen', dus 'display: none' als eigenschap hebben, ze wél (!) worden ingeladen en naar de user wordt gestuurd. Met andere woorden, over één jaar stuur je nog berichten van nu door. Misschien moet je eens kijken naar een (aangepaste) paginator icm ajax.

Bartjezz schreef op woensdag 19 oktober 2011 @ 19:52:
Verwijder de geschiedenis en cookies eens, daar heb ik ook weleens problemen met met webdesign...

Hetzelfde als lokaal testen (dus zonder webserver). Daar willen browsers icm scripting weleens moeilijk over doen. Met jQuery kon je bijv. geen Ajax requests doen. Wanneer je dan (bijv.) Apache gebruikt werkt alles perfect.

[ Voor 41% gewijzigd door alex3305 op 19-10-2011 19:53 ]

woensdag 19 oktober 2011 20:06

Acties:

0 Henk 'm!

glennvho

Topicstarter

@NetForce1: Hartelijk bedankt! Nu werkt het wel zoals het zou horen. Alleen nog een vraagje/probleempje. Als ik nu op die link klik toont hij de div onmiddellijk maar springt de browser terug helemaal naar het begin van de pagina, hoe kan ik ervoor zorgen dat hij gewoon op dezelfde positie blijft als er geklikt wordt?

@alex3305: dat is inderdaad niet de bedoeling en ben van plan om te oude berichten gewoon te verwijderen (of om te beginnen in commentaar te te zetten in de code zodat het niet meer getoond wordt).

woensdag 19 oktober 2011 20:11

Acties:

0 Henk 'm!

NetForce1

(inspiratie == 0) -> true

glennvho schreef op woensdag 19 oktober 2011 @ 20:06:
@NetForce1: Hartelijk bedankt! Nu werkt het wel zoals het zou horen. Alleen nog een vraagje/probleempje. Als ik nu op die link klik toont hij de div onmiddellijk maar springt de browser terug helemaal naar het begin van de pagina, hoe kan ik ervoor zorgen dat hij gewoon op dezelfde positie blijft als er geklikt wordt?

Dat kan ik niet reproduceren, heb je daar een testcase van?

De wereld ligt aan je voeten. Je moet alleen diep genoeg willen bukken...
"Wie geen fouten maakt maakt meestal niets!"

woensdag 19 oktober 2011 20:12

Acties:

0 Henk 'm!

BasieP

lees dit eens:
http://stackoverflow.com/...-links-or-javascriptvoid0

This message was sent on 100% recyclable electrons.

woensdag 19 oktober 2011 20:16

Acties:

0 Henk 'm!

glennvho

Topicstarter

NetForce1 schreef op woensdag 19 oktober 2011 @ 20:11:
[...]

Dat kan ik niet reproduceren, heb je daar een testcase van?

Heb het even allemaal terug geupload, weet eigenlijk niet zo goed wat jullie bedoelen met een testcase?

BasieP schreef op woensdag 19 oktober 2011 @ 20:12:
lees dit eens:
http://stackoverflow.com/...-links-or-javascriptvoid0

Thx, heb nu "javascript:void(0)" gebruikt i.p.v. het #-teken en werkt goed.

[ Voor 34% gewijzigd door glennvho op 19-10-2011 20:20 ]

woensdag 19 oktober 2011 20:35

Acties:

0 Henk 'm!

NetForce1

(inspiratie == 0) -> true

glennvho schreef op woensdag 19 oktober 2011 @ 20:16:
[...]
Heb het even allemaal terug geupload, weet eigenlijk niet zo goed wat jullie bedoelen met een testcase?

Een testcase is een zover mogelijk uitgeklede weergave van je probleem. Als je nl. zoveel mogelijk overbodige zaken (overbodig voor het probleem) weglaat is het veel makkelijker debuggen.
Dat kun je op je eigen webserver doen, maar JSFiddle is ook een erg handige tool daarvoor.

De wereld ligt aan je voeten. Je moet alleen diep genoeg willen bukken...
"Wie geen fouten maakt maakt meestal niets!"

woensdag 19 oktober 2011 22:24

Acties:

0 Henk 'm!

glennvho

Topicstarter

Nu heb ik dus een nieuw probleem. Alles werkt goed zolang ik dus maar 1 div probeer te verbergen. Maar zodra ik een 2de div ook dezelfde id geef om hem te verbergen en weer te geven dan toont hij enkel de div die onder de link staat... Moet ik dan al mijn te verbergen divs een aparte id geven om dit te verwezenlijken? Lijkt mij eerder dat ik iets in de js code zou kunnen aanpassen hiervoor?

woensdag 19 oktober 2011 22:36

Acties:

0 Henk 'm!

BasieP

glennvho schreef op woensdag 19 oktober 2011 @ 22:24:
Nu heb ik dus een nieuw probleem. Alles werkt goed zolang ik dus maar 1 div probeer te verbergen. Maar zodra ik een 2de div ook dezelfde id geef om hem te verbergen en weer te geven dan toont hij enkel de div die onder de link staat... Moet ik dan al mijn te verbergen divs een aparte id geven om dit te verwezenlijken? Lijkt mij eerder dat ik iets in de js code zou kunnen aanpassen hiervoor?

lol

hetzelfde id? dat is basic html...
ID staat voor identifier..
http://www.w3schools.com/tags/att_standard_id.asp

[ Voor 6% gewijzigd door BasieP op 19-10-2011 22:37 ]

This message was sent on 100% recyclable electrons.

woensdag 19 oktober 2011 22:40

Acties:

0 Henk 'm!

glennvho

Topicstarter

Dan werk ik waarschijnlijk beter met classes?

woensdag 19 oktober 2011 22:44

Acties:

0 Henk 'm!

Emgeebee

glennvho schreef op woensdag 19 oktober 2011 @ 22:40:
Dan werk ik waarschijnlijk beter met classes?

Dan moet je GetElementByClass eens proberen.

woensdag 19 oktober 2011 22:50

Acties:

0 Henk 'm!

Gtoniser

Als je alle oude content in 1x wilt laten zien kun je beter 1 grote div eromheenzetten (zgn wrapper) en die dan het id 'oud' meegeven.
Als je meerdere oude divs hebt met meerdere links dan kun je voor iedere div een ander id en in de link dus ook een ander id zetten.
je kunt ze allemaal dezelfde classnaam geven en daar op filteren, maar dan laat je ze alsnog allemaal in 1x zien

Dus bv

HTML:

<div id="oud">
<div class="oudecontent">
<p>oud 1</p>
</div>
<div class="oudecontent">
<p>oud 2</p>
</div>
</div>

Je kunt dan met css de oudecontent divjes apart stylen.

woensdag 19 oktober 2011 22:51

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Javascript

glennvho schreef op woensdag 19 oktober 2011 @ 20:16:
[...]
Thx, heb nu "javascript:void(0)" gebruikt i.p.v. het #-teken en werkt goed.

Werkt misschien goed maar is niet de beste oplossing: als iets geen link is gebruik dan gewoon geen <a>

Intentionally left blank

woensdag 19 oktober 2011 22:54

Acties:

0 Henk 'm!

glennvho

Topicstarter

@Gtoniser: had zelf ook al zitten denken om het dan zo te doen en lijkt mij ook de beste oplossing

@crisp: wat kan ik dan wel beter gebruiken hiervoor?

woensdag 19 oktober 2011 23:05

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Javascript

glennvho schreef op woensdag 19 oktober 2011 @ 22:54:
[...]
@crisp: wat kan ik dan wel beter gebruiken hiervoor?

Het beste is natuurlijk als je wel kan linken naar een pagina die zonder javascript de betreffende content kan laten zien; dan kan je wel een anchor gebruiken en dit doen:

HTML:

1	<a href="allenieuwsberichten.html" onclick="toggle(this,'oud');return false">laat alle nieuwsbreichten zien</a>

de 'return false' zorgt er wel voor dat de href niet wordt uitgevoerd in browsers die wel javascriptondersteuning hebben.

Intentionally left blank

Onderwerpen