| Javascript spoiler tag help (solved + added final code) |
| Author: |
Message: |
Ezra
Veteran Member
Forgiveness is between them and God
Posts: 1960
Reputation: 31
37 /  / 
Joined: Mar 2003
|
O.P.  Javascript spoiler tag help (solved + added final code)
Ok, i'm trying to make some kind of spoiler tag for my blog. I can only use javascript.
I thougt I'd use a div with the class spoiler and then a link to make these classes visible or invisible.
Only problem I can't get it working 
What I have now is this:
css:
code:
.spoiler{
visibility:hidden;
}
javascript:
code:
function spoiler(){
'if(document.getElementById(spoiler).style.display = 'hide'){
document.getElementById(spoiler).style.display = 'block';
'else{
'document.getelementbyid(spoiler).style.display = 'hide';
}
}
html link:
code:
<a href="#" onClick="spoiler()">Spoilers (on/off)</a>
Oh, and I want it easy cause I have almost no experience with javascript 
Can please somone help me?
This post was edited on 03-02-2006 at 12:04 AM by Ezra.
|
|
| 03-01-2006 08:06 PM |
|
 |
matty
Scripting Guru
Posts: 8336
Reputation: 109
39 / / 
Joined: Dec 2002
Status: Away
|
RE: Javascript spoiler tag help
display = 'none'
and display = ''. Those will work fine.
quote:
Originally posted by Ezra
function spoiler(){
'if(document.getElementById(spoiler).style.display = 'hide'){
document.getElementById(spoiler).style.display = 'block';
'else{
'document.getelementbyid(spoiler).style.display = 'hide';
}
}
should be
code:
function spoiler(){
if(document.getElementById('spoiler').style.display == 'none'){
document.getElementById('spoiler').style.display = '';
else{
document.getElementById('spoiler').style.display = 'none';
}
}
 Attachment: new 1.html (419 bytes)
This file has been downloaded 204 time(s).
This post was edited on 03-01-2006 at 08:15 PM by matty.
|
|
| 03-01-2006 08:08 PM |
|
|
wj
Former Admin
I aim to misbehave.
Posts: 2224
Reputation: 52
39 / – / 
Joined: Mar 2002
|
RE: Javascript spoiler tag help
quote:
Originally posted by Ezra
'if(document.getElementById(spoiler).style.display = 'hide'){
Doesnt the ' in front of the if and else coment those lines?
Also, I think you need to use #spoilers not .spoilers
The #name works with ID's, the .name is for sub-classes.
I could be wrong, I'm no JS master  "A towel is about the most massively useful
thing an interstellar hitchhiker can have." |
|
| 03-01-2006 08:09 PM |
|
|
Ezra
Veteran Member
Forgiveness is between them and God
Posts: 1960
Reputation: 31
37 / /
Joined: Mar 2003
|
O.P. RE: Javascript spoiler tag help
yeah, I forgot to uncomment those lines I was just testing something, updated my old post
I'm trying Matty's code in that attachment
This post was edited on 03-01-2006 at 08:15 PM by Ezra.
|
|
| 03-01-2006 08:13 PM |
|
|
wj
Former Admin
I aim to misbehave.
Posts: 2224
Reputation: 52
39 / – /
Joined: Mar 2002
|
RE: Javascript spoiler tag help
code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
#spoiler
{
visibility: hidden;
}
</style>
<script language="javascript">
function spoiler(){
if(document.getElementById('spoiler').style.visibility = 'hidden'){
document.getElementById('spoiler').style.visibility = 'visible';
} else {
document.getelementbyid('spoiler').style.visibility = 'hidden';
}
}
</script>
</HEAD>
<BODY>
<a href="javascript:spoiler();">Spoilers (on/off)</a>
<div id="spoiler">
Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing
</div>
</BODY>
</HTML>
That half works, It starts out hidden, but it doesnt re-hide....
This post was edited on 03-01-2006 at 08:15 PM by wj.
"A towel is about the most massively useful
thing an interstellar hitchhiker can have." |
|
| 03-01-2006 08:15 PM |
|
|
WDZ
Former Admin
Posts: 7106
Reputation: 107
– / /
Joined: Mar 2002
|
RE: Javascript spoiler tag help
I recently had some trouble with code like this... 
style.display (or style.visibility) might actually be undefined or an empty string, so I ended up using code like this...
code:
if(typeof(wdzElement.style.display) == "undefined" || wdzElement.style.display == "none" || wdzElement.style.display == "") {
wdzElement.style.display = "block";
} else {
wdzElement.style.display = "none";
}
|
|
| 03-01-2006 08:22 PM |
|
|
Ezra
Veteran Member
Forgiveness is between them and God
Posts: 1960
Reputation: 31
37 / /
Joined: Mar 2003
|
O.P. RE: Javascript spoiler tag help
I edited Matty's code a bit and I got it working
EDITED MY WHOLE POST AGAIN, SORRY
Now I used colors instead of visibility, black when hidden en white when showing.
But Only the first div shows up now, not the second and the third on that page 
This is the code I used:
css:
code:
#spoiler{
color: #000000;
font-size:8pt;
}
javascript:
code:
<script>
function hide(id){
document.getElementById(id).style.display = 'none';
}
function show(id){
document.getElementById(id).style.display = '';
}
function spoilerhide(id){
document.getElementById(id).style.color = '#000000';
}
function spoilershow(id){
document.getElementById(id).style.color = '#FFFFFF';
}
</script>
<div id="div1">
<input type="button" onClick="hide('div1'); show('div2'); spoilershow('spoiler');" value="Laat spoilers zien">
</div>
<div id="div2" style="display:none;">
<input type="button" onClick="show('div1'); hide('div2'); spoilerhide('spoiler');" value="Verberg spoilers">
</div>
This post was edited on 03-01-2006 at 09:03 PM by Ezra.
|
|
| 03-01-2006 08:25 PM |
|
|
matty
Scripting Guru
Posts: 8336
Reputation: 109
39 / /
Joined: Dec 2002
Status: Away
|
RE: Javascript spoiler tag help
quote:
Originally posted by wj
That half works, It starts out hidden, but it doesnt re-hide....
It wont rehide because of this line
quote:
Originally posted by wj
document.getelementbyid('spoiler').style.visibility = 'hidden';
Javascript is case sensitive. I fixed the code and this works.
code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
function hideshow(){
if(document.getElementById('spoiler').style.display == 'none'){
document.getElementById('spoiler').style.display = '';
} else {
document.getElementById('spoiler').style.display = 'none';
}
}
</script>
</HEAD>
<BODY>
<a href="#" OnClick="hideshow()">Spoilers (on/off)</a>
<div id="spoiler" style="display:none;">
Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing
</div>
</BODY>
</HTML>
|
|
| 03-01-2006 09:49 PM |
|
|
wj
Former Admin
I aim to misbehave.
Posts: 2224
Reputation: 52
39 / – /
Joined: Mar 2002
|
RE: Javascript spoiler tag help
Bah, It was that darn = vs. == , I thought JS didnt use == in comparative logic.... Daft JS....
PHP and Ajax "A towel is about the most massively useful
thing an interstellar hitchhiker can have." |
|
| 03-01-2006 10:06 PM |
|
|
ShawnZ
Veteran Member
Posts: 3146
Reputation: 43
32 / /
Joined: Jan 2003
|
RE: Javascript spoiler tag help
quote:
Originally posted by Ezra
But Only the first div shows up now, not the second and the third on that page
because you should be using .spoiler, not #spoiler. IDs cant be repeated anywhere on a page.
for (i=0;i<document.getElementsByTagName('div').length;i++) {
if (document.getElementsByTagName('div')[i].class='spoiler') {
if(document.getElementsByTagName('div')[i].style.display == 'none') {
document.getElementsByTagName('div')[i].style.display = '';
} else {
document.getElementById('spoiler').style.display = 'none';
}
}
}
This post was edited on 03-01-2006 at 10:18 PM by ShawnZ.
Spoiler: the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
the game.
|
|
| 03-01-2006 10:18 PM |
|
|
|
Pages: (3):
« First
[ 1 ]
2
3
»
Last »
|
|
|
![[Image: 1-0.png]](http://tsdme.nl/yass/image/1-0.png)
