Archief - hoe spoiler op website krijgen?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
f

fiestaboyke

Legacy Member
Ik vraag me af hoe ik een spoiler in een website plaats? Als ik <spoiler> </spoiler> gebruik op mijn website dan zie ik gewoon de code ipv een spoiler ... Hoe komt dit? Ik gebruik dreamweaver 5 ...


Alvast bedankt.
Z

Zero Grav

Legacy Member
Lol, omdat de spoiler tag gewoon niet bestaat. Is gewoon een manier van opmaken waarbij de tekst dezelfde kleur heeft als de achtergrond waardoor die enkel zichtbaar wordt bij het selecteren. Bijvoorbeeld:

Code: 
<span style="color:#000;background:#000">Spoilertekst</span>
-

-BVR-

Legacy Member
Zero Grav zei:
Lol, omdat de spoiler tag gewoon niet bestaat. Is gewoon een manier van opmaken waarbij de tekst dezelfde kleur heeft als de achtergrond waardoor die enkel zichtbaar wordt bij het selecteren. Bijvoorbeeld:

Code: 
<span style="color:#000;background:#000">Spoilertekst</span>
Klik om te vergroten...

Beter lijkt me een span met een class, maar uiteraard is de CSS van Zero Grav het belangrijkste.
d

demon326

Legacy Member
Als het moet zoals 9lives;

Code: 
<div style="margin:20px; margin-top:5px"><div class="quotetitle"><strong>{L_SPOILER}</strong> <input type="button" value="{L_SHOW}" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = '{L_HIDE}'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '{L_SHOW}'; }" /></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>

Sorry voor de tokens, maar geen zin op de phpbb tokens eruit te filteren;)
-

-BVR-

Legacy Member
benny zei:
Als het moet zoals 9lives;

Code: 
<div style="margin:20px; margin-top:5px">
  <div class="quotetitle">
    <strong>{L_SPOILER}</strong>
    <input type="button" value="{L_SHOW}" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = '{L_HIDE}'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '{L_SHOW}'; }" /></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>

Sorry voor de tokens, maar geen zin op de phpbb tokens eruit te filteren;)
Klik om te vergroten...

Even beautifyen.

Code: 
<div style="margin:20px; margin-top:5px">
    <div class="quotetitle">
        <strong>{L_SPOILER}</strong>
        <input type="button" value="{L_SHOW}" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = '{L_HIDE}'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '{L_SHOW}'; }" />
    </div>
    <div class="quotecontent">
        <div style="display: none;">
            {TEXT}
        </div>
    </div>
</div>

:)
f

fiestaboyke

Legacy Member
BramVroy zei:
Even beautifyen.

Code: 
<div style="margin:20px; margin-top:5px">
    <div class="quotetitle">
        <strong>{L_SPOILER}</strong>
        <input type="button" value="{L_SHOW}" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = '{L_HIDE}'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '{L_SHOW}'; }" />
    </div>
    <div class="quotecontent">
        <div style="display: none;">
            {TEXT}
        </div>
    </div>
</div>

:)
Klik om te vergroten...

Waar juist zet ik deze code dan? :$
G

GigaPixels

Legacy Member
Hij bedoelt waar de code moet tussen de huidige code; in de head, body, of tussen welke div ..

keb geen idee wat een "spoiler" betekent in deze context, dus ik kan je al niet helpen.
Maar van wat ik lees is dat gwn text die niet zichbaar is vermits deze dezelfde kleur heeft als de bg. Dus plaats deze dan waar je hem nodig hebt .. tussen de juiste huidige divs.
Als je echt hulp nodig hebt, PM me dan u code wnt vaak zijn dat hier toch maar **** (vrije invulling mogelijk). :)
-

-BVR-

Legacy Member
GigaPixels zei:
Hij bedoelt waar de code moet tussen de huidige code; in de head, body, of tussen welke div ..

keb geen idee wat een "spoiler" betekent in deze context, dus ik kan je al niet helpen.
Maar van wat ik lees is dat gwn text die niet zichbaar is vermits deze dezelfde kleur heeft als de bg. Dus plaats deze dan waar je hem nodig hebt .. tussen de juiste huidige divs.
Als je echt hulp nodig hebt, PM me dan u code wnt vaak zijn dat hier toch maar **** (vrije invulling mogelijk). :)
Klik om te vergroten...

Zal't gaan ja!
Z

Zero Grav

Legacy Member
Allé, na een steek onder de gordel en alle onnozelheden aside kunnen we nu gewoon afwachten tot de threadstarter zélf aangeeft wat hij bedoelde.
Z

Zero Grav

Legacy Member
Dan moet ge gewoon demon326 zijn code gebruiken op de plaats waar ge wilt dat de spoiler verschijnt. Als ge twijfelt, probeer het dan uit en als het niet succesvol is kunt ge met een codevoorbeeld komen om naar de volgende stap te geraken.
U

UnD3RD0G

Legacy Member
het beste/Mooiste liijkt mij gewoon de jquery toggle() function?

$('.toonAntwoord').click(function() {
$('.antwoord').toggle('slow', function() {
});
});

<a href="#" class="toonAntwoord">Toon het antwoord</a>
<div class="antwoord">het verborgen antwoord zal worden getoond bij een klik, en verborgen worden bij een andere.</div>
K

KingOfWoods

Legacy Member
UnD3RD0G zei:
het beste/Mooiste liijkt mij gewoon de jquery toggle() function?

$('.toonAntwoord').click(function() {
$('.antwoord').toggle('slow', function() {
});
});

<a href="#" class="toonAntwoord">Toon het antwoord</a>
<div class="antwoord">het verborgen antwoord zal worden getoond bij een klik, en verborgen worden bij een andere.</div>
Klik om te vergroten...

Allemaal goed en wel, maar TS lijkt mij nu geen html gooroo te zijn. Als hij al moeilijkheden heeft met het weten waar die zogezegde "spoiler" tag moet komen, vrees ik voor Jquery.
-

-BVR-

Legacy Member
UnD3RD0G zei:
het beste/Mooiste liijkt mij gewoon de jquery toggle() function?

$('.toonAntwoord').click(function() {
$('.antwoord').toggle('slow', function() {
});
});

<a href="#" class="toonAntwoord">Toon het antwoord</a>
<div class="antwoord">het verborgen antwoord zal worden getoond bij een klik, en verborgen worden bij een andere.</div>
Klik om te vergroten...

Probleem is dan wel dat als er meerdere spoilers staan, deze allemaal geopend worden als je op één knop drukt. Met IDs werken gaat dan wel, maar dat is manueel dan wel wat werk.
U

UnD3RD0G

Legacy Member
BramVroy zei:
Probleem is dan wel dat als er meerdere spoilers staan, deze allemaal geopend worden als je op één knop drukt. Met IDs werken gaat dan wel, maar dat is manueel dan wel wat werk.
Klik om te vergroten...

Ik heb hier snel e syntax gezet, maar je kan perfect die selector een beetje aanpassen om bv naar de parent div te gaan, en daaronder de antwoord class te selecten, en dan is dat per instance, en niet allemaal. :)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan