Shoutbox

Javascript spoiler tag help (solved + added final code) - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: Javascript spoiler tag help (solved + added final code) (/showthread.php?tid=56365)
Javascript spoiler tag help (solved + added final code) by Ezra on 03-01-2006 at 08:06 PM

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 :P

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?
RE: Javascript spoiler tag help by matty on 03-01-2006 at 08:08 PM

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';
      }
   }
RE: Javascript spoiler tag help by wj on 03-01-2006 at 08:09 PM

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 ;-)
RE: Javascript spoiler tag help by Ezra on 03-01-2006 at 08:13 PM

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

RE: Javascript spoiler tag help by wj on 03-01-2006 at 08:15 PM

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....
RE: Javascript spoiler tag help by WDZ on 03-01-2006 at 08:22 PM

I recently had some trouble with code like this... :dodgy:

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";
}
RE: Javascript spoiler tag help by Ezra on 03-01-2006 at 08:25 PM

I edited Matty's code a bit and I got it working :)

EDITED MY WHOLE POST AGAIN, SORRY :P

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>
RE: Javascript spoiler tag help by matty on 03-01-2006 at 09:49 PM

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>
RE: Javascript spoiler tag help by wj on 03-01-2006 at 10:06 PM

Bah, It was that darn = vs. == , I thought JS didnt use == in comparative logic.... Daft JS....

PHP and Ajax :-P

RE: Javascript spoiler tag help by ShawnZ on 03-01-2006 at 10:18 PM

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';
  }
}
}
RE: Javascript spoiler tag help by Ezra on 03-01-2006 at 10:42 PM

Changed to classes

I'm now using this:

code:
<script>
   function hide(id){
      document.getElementById(id).style.display = 'none';
   }   
   function show(id){
      document.getElementById(id).style.display = '';
   }
   function spoilerhide(){
      for (i=0;i<document.getElementsByTagName('div').length;i++) {
         if (document.getElementsByTagName('div')[i].class == 'spoiler') {
            document.getElementsByTagName('div')[i].style.color = '#000000';
         }
      }
   }
   function spoilershow(){
      for (i=0;i<document.getElementsByTagName('div').length;i++) {
         if (document.getElementsByTagName('div')[i].class == 'spoiler') {
            document.getElementsByTagName('div')[i].style.color = '#FF0000';
         }
      }
   }
</script>
<div id="div1">
    <input type="button" onClick="hide('div1'); show('div2'); spoilershow();" value="Laat spoilers zien">
</div>
<div id="div2" style="display:none;">
    <input type="button" onClick="show('div1'); hide('div2'); spoilerhide();" value="Verberg spoilers">
</div>

But it still doesn't work, and with
code:
if (document.getElementsByTagName('div')[i].class = 'spoiler')
instead of
code:
if (document.getElementsByTagName('div')[i].class == 'spoiler')

It makes all div's white and black :S
RE: Javascript spoiler tag help by Plik on 03-01-2006 at 10:55 PM

you could use this function to get the elements background:

code:
function getBgColor(){
    var node = document.getElementById("spanOne");
    var style = document.defaultView.getComputedStyle(node, '').getPropertyValue("background-color");
    while(style == "transparent"){
        if(node.parentNode != document){
            node = node.parentNode;
            style = document.defaultView.getComputedStyle(node, '').getPropertyValue("background-color");
        }
        else{
            style = "rgb(255, 255, 255)";
        }
    }
    return style;
}

Its basically loops through the elements parents nodes, until it finds one that isn't transparent and returns the background color.

so for example you could use:
code:
var nodes, defaultColor;

function spoiler(){
    if(!nodes){//If nodes is undefined then this is the first time so set up the defaults and nodes
        nodes = document.evaluate("//*[@class='spoiler']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);//Use XPath to get all the nodes with the class 'spoiler'
        defaultColor = document.defaultView.getComputedStyle(nodes.snapshotItem(0), '').getPropertyValue("color");//Use the color of the first one as the default value
        }
    for(var i=0;i<nodes.snapshotLength;i++){//Loop through the nodes
        var node = nodes.snapshotItem(i);//Make life easy
        var color = document.defaultView.getComputedStyle(node, '').getPropertyValue("color");//Get the nodes color
        if(color == defaultColor){//If its the default color, hide it
            node.style.color = getBgColor(node);//With our cool func
        }
        else{
            node.style.color = defaultColor;//Otherwise set it back to the default color
        }
    }
}
and
code:
<a href="#" onClick="spoiler()">Spoilers (on/off)</a>

and that should work, the only limitation is it doesn't support different colors (but if they are all one class why should they be a different color :P)
Oh and you have to call the spoiler function to hide the text at the start :P

Just say if you need help :P and don't forget to include the getBgColor func in your script :P

Ignore all of that, as it won't work in IE :dodgy:

* Plik has been coding to many userscripts :P
RE: Javascript spoiler tag help by Ezra on 03-01-2006 at 11:01 PM

Thanks for that code, but that's waaay to much :P

The way I got it now is nice, but I can't get it to convert the color of my <div class="spoiler"></div>

When I use Id I can only set one div and with classes I still can't get it to work, so if you have a simple way to set the text color of all <div class="spoiler"></div> that will be great :)

RE: Javascript spoiler tag help by Plik on 03-01-2006 at 11:06 PM

quote:
Originally posted by Ezra
When I use Id I can only set one div and with classes I still can't get it to work, so if you have a simple way to set the text color of all <div class="spoiler"></div> that will be great
The only way would be to either use XPath (like my code) or DOM to loop through all the nodes with that class name. Unless you used js to modify the style rules *-) *has a go

I've added some syntax highlighting to my code so maybe it'll make more sense :P
RE: Javascript spoiler tag help by Ezra on 03-01-2006 at 11:08 PM

Well Shaunz suggested this or something like it but I can't get it to work:

code:
function spoilershow(){
      for (i=0;i<document.getElementsByTagName('div').length;i++) {
         if (document.getElementsByTagName('div')[i].class == 'spoiler') {
            document.getElementsByTagName('div')[i].style.color = '#FF0000';
         }
      }
   }
RE: Javascript spoiler tag help by Plik on 03-01-2006 at 11:13 PM

That should work :-/

and then to hide the spoilers again, you would just use the same code but set the colour to whatever the colour was when it was hidden

RE: Javascript spoiler tag help by Ezra on 03-01-2006 at 11:16 PM

I did that, but nothing happends :S

RE: Javascript spoiler tag help by Plik on 03-01-2006 at 11:20 PM

quote:
Originally posted by Ezra
I did that, but nothing happends :S
Did you make it a different function? (e.g. spoilerhide)
Then did you make it toggle between calling the show hide functions?

Edit: Solved it on msn.

Its .className not .class :P
RE: Javascript spoiler tag help by Ezra on 03-02-2006 at 12:03 AM

With a LOT of help from everybody here I got it working.

For everybody that's interested here's the code:

Works in IE, FF and Opera (Y)
css:

code:
.spoiler{
   color: #000000;
}

javascript:
code:
<script>
   function hide(id){
      document.getElementById(id).style.display = 'none';
   }   
   function show(id){
      document.getElementById(id).style.display = '';
   }
   function spoilerhide(){
      for (i=0;i<document.getElementsByTagName('div').length;i++) {
         if (document.getElementsByTagName('div')[i].className == 'spoiler') {
            document.getElementsByTagName('div')[i].style.color = '#000000';
         }
      }
   }
   function spoilershow(){
      for (i=0;i<document.getElementsByTagName('div').length;i++) {
         if (document.getElementsByTagName('div')[i].className == 'spoiler') {
            document.getElementsByTagName('div')[i].style.color = '#FFFFFF';
         }
      }
   }
</script>

HTML:
code:
<div id="div1">
    <input type="button" onClick="hide('div1'); show('div2'); spoilershow();" value="Show Spoilers">
</div>
<div id="div2" style="display:none;">
    <input type="button" onClick="show('div1'); hide('div2'); spoilerhide();" value="Hide spoilers">
</div>

Thanks everybody who helped :D
RE: Javascript spoiler tag help (solved + added final code) by ShawnZ on 03-02-2006 at 12:31 AM

BTW:

function getElementsByClassName(checkClassName) {
r = new array(document.elements.length);
for (i=0;i<document.elements.length;i++) {
if (document.elements[i].className == checkClassName) {
r[] = document.elements[i]
}
}
return r;
}

getElementsByClassName('spoiler') == an array of all the page elements with the class name spoiler, afaik

RE: Javascript spoiler tag help (solved + added final code) by -dt- on 03-02-2006 at 02:54 AM

quote:
Originally posted by ShawnZ
BTW:

function getElementsByClassName(checkClassName) {
r = new array(document.elements.length);
for (i=0;i<document.getElementsByTagName('div').length;i++) {
if (document.elements[i].className == checkClassName) {
r[] = document.elements[i]
}
}
return r;
}

getElementsByClassName('spoiler') == an array of all the page elements with the class name spoiler, afaik
What happens if it has more than one class? :refuck: