Shoutbox

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

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 )
Oh and you have to call the spoiler function to hide the text at the start

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

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

* Plik has been coding to many userscripts

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

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

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

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';
         }
      }
   }

---

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

I did that, but nothing happends

quote:

---

Originally posted by Ezra
I did that, but nothing happends

---

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

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

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