What happened to the Messenger Plus! forums on msghelp.net?
Shoutbox » MsgHelp Archive » Skype & Technology » Tech Talk » Javascript spoiler tag help (solved + added final code)

Pages: (3): « First « 1 [ 2 ] 3 » Last »
Javascript spoiler tag help (solved + added final code)
Author: Message:
Ezra
Veteran Member
*****

Avatar
Forgiveness is between them and God

Posts: 1960
Reputation: 31
37 / Male / Flag
Joined: Mar 2003
O.P. RE: Javascript spoiler tag help
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
[Image: 1-0.png]
             
03-01-2006 10:42 PM
Profile PM Web Find Quote Report
Plik
Veteran Member
*****

Avatar

Posts: 1489
Reputation: 46
35 / Male / –
Joined: Jun 2004
RE: Javascript spoiler tag help
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

This post was edited on 03-01-2006 at 11:32 PM by Plik.
03-01-2006 10:55 PM
Profile PM Find Quote Report
Ezra
Veteran Member
*****

Avatar
Forgiveness is between them and God

Posts: 1960
Reputation: 31
37 / Male / Flag
Joined: Mar 2003
O.P. RE: Javascript spoiler tag help
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 :)
[Image: 1-0.png]
             
03-01-2006 11:01 PM
Profile PM Web Find Quote Report
Plik
Veteran Member
*****

Avatar

Posts: 1489
Reputation: 46
35 / Male / –
Joined: Jun 2004
RE: Javascript spoiler tag help
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
03-01-2006 11:06 PM
Profile PM Find Quote Report
Ezra
Veteran Member
*****

Avatar
Forgiveness is between them and God

Posts: 1960
Reputation: 31
37 / Male / Flag
Joined: Mar 2003
O.P. RE: Javascript spoiler tag help
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';
         }
      }
   }
[Image: 1-0.png]
             
03-01-2006 11:08 PM
Profile PM Web Find Quote Report
Plik
Veteran Member
*****

Avatar

Posts: 1489
Reputation: 46
35 / Male / –
Joined: Jun 2004
RE: Javascript spoiler tag help
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
03-01-2006 11:13 PM
Profile PM Find Quote Report
Ezra
Veteran Member
*****

Avatar
Forgiveness is between them and God

Posts: 1960
Reputation: 31
37 / Male / Flag
Joined: Mar 2003
O.P. RE: Javascript spoiler tag help
I did that, but nothing happends :S
[Image: 1-0.png]
             
03-01-2006 11:16 PM
Profile PM Web Find Quote Report
Plik
Veteran Member
*****

Avatar

Posts: 1489
Reputation: 46
35 / Male / –
Joined: Jun 2004
RE: Javascript spoiler tag help
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

This post was edited on 03-02-2006 at 12:01 AM by Plik.
03-01-2006 11:20 PM
Profile PM Find Quote Report
Ezra
Veteran Member
*****

Avatar
Forgiveness is between them and God

Posts: 1960
Reputation: 31
37 / Male / Flag
Joined: Mar 2003
O.P. RE: Javascript spoiler tag help
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
[Image: 1-0.png]
             
03-02-2006 12:03 AM
Profile PM Web Find Quote Report
ShawnZ
Veteran Member
*****

Avatar

Posts: 3146
Reputation: 43
32 / Male / Flag
Joined: Jan 2003
RE: Javascript spoiler tag help (solved + added final code)
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

This post was edited on 03-02-2006 at 03:03 AM 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-02-2006 12:31 AM
Profile PM Web Find Quote Report
Pages: (3): « First « 1 [ 2 ] 3 » Last »
« Next Oldest Return to Top Next Newest »


Threaded Mode | Linear Mode
View a Printable Version
Send this Thread to a Friend
Subscribe | Add to Favorites
Rate This Thread:

Forum Jump:

Forum Rules:
You cannot post new threads
You cannot post replies
You cannot post attachments
You can edit your posts
HTML is Off
myCode is On
Smilies are On
[img] Code is On