Help Finding a sample code

Discussion in 'Web Design & Coding' started by gmagnuson, Jul 30, 2003.

  1. gmagnuson

    gmagnuson Guest

    Does anyone know where there is a sample code (I am guessing Javascript) that does this: In the middle of a webpage you have a "topic" and you click on that link (or Plus or minus arrow) and it will show the text instantaly. I think I recall MSDN using some of this for the definitions--The help file in Windows XP using something like it also. So you click on the topic and all the sub text "revels its self instantaly. I hope I described it right. Thanks!
     
  2. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    MSDN uses normal links. If you click the box (It's not a plus or minus arrow, just a box with a dot example) it loads a new link, no javascripts here. I know of another site that uses this feature, Spammers Paradise, they have a feature called 'Fast Reply Box'. It is closed by default, but if you click the Fast Reply button, it opens instantly, and yes this uses Javascript code. How this works, I am not sure, but you can take a look in the source. You may have to register first to view the box.
     
  3. gmagnuson

    gmagnuson Guest

    That is what I need, now to figure out how to code it. Is there a piece of sample code that is already done somewhere that I can just reconfigure to suit my needs? The only difference is I would like it to just be text I.E.

    This is what they see as the main menu
    They will see a few lines like this
    ......when clicked the text will pop down like this and
    ......show under it. When clicked again it will go back
    ......to normal.


    Get the idea?

    Here is the javascript code it uses:

    javascript:ShowHide('qr_open','qr_closed')

    But that does not help me with my website coding needs.
     
  4. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    ShowHide function
    Code:
    function ShowHide(id1, id2) {
    	  if (id1 != '') expMenu(id1);
    	  if (id2 != '') expMenu(id2);
    	}
    expMenu function
    Code:
    function expMenu(id) {
    	  var itm = null;
    	  if (document.getElementById) {
    		itm = document.getElementById(id);
    	  } else if (document.all){
    		itm = document.all[id];
    	  } else if (document.layers){
    		itm = document.layers[id];
    	  }
    	
    	  if (!itm) {
    	   // do nothing
    	  }
    	  else if (itm.style) {
    		if (itm.style.display == "none") { itm.style.display = ""; }
    		else { itm.style.display = "none"; }
    	  }
    	  else { itm.visibility = "show"; }
    	}
    This is the complete (?) javascript code for the Show/Hide any text. I don't have the time to examine it (because I will be out of town for a few days) and explain it how it works, but I am sure there are plenty of other people around who are willing to explain it to you
     
  5. gmagnuson

    gmagnuson Guest


    Thanks for the code! Could someone explain to me how it works and how I put it into a html document? It looks to be different than other code I have delt with. Thanks!
     
  6. gmagnuson

    gmagnuson Guest

    I could not get that code to work, but I found some other, but could not get it to work it keeps giving me an error Line: 20, Char:1 Error: 'document.all.div2.style'is null or not an object'

    Here is the code:

    <html>

    <head>

    <script language="javascript">
    <!--
    var state = 'none';

    function showhide(layer_ref) {

    if (state == 'block') {
    state = 'none';
    }
    else {
    state = 'block';
    }
    if (document.all) { //IS IE 4 or 5 (or 6 beta)
    eval ("document.all." + layer_ref + ".style.display = state");
    }
    if (document.layers) { //IS NETSCAPE 4 or below
    document.layers[layer_ref].display = state;
    }
    if (document.getElementById &&!document.all) {
    hza = document.getElementById(layer_ref);
    hza.style.display = state;
    }
    }
    //-->
    </script>



    </head>

    <body>

    <p><a href="#" onclick="showhide('div1');">Article 1 - Membership</a></p>

    <p><a href="#" onclick="showhide('div2');">Article 2 - Meetings of Members</a></p>

    <p><a href="#" onclick="showhide('div3');">Article 3 - Board of Directors</a></p>

    <p><a href="#" onclick="showhide('div4');">Article 4 - </a></p>

    <p><a href="#" onclick="showhide('div5');">Article 5 - </a></p>

    <p><a href="#" onclick="showhide('div6');">Article 6 - </a></p>

    <p><a href="#" onclick="showhide('div7');">Article 7 - </a></p>

    <p><a href="#" onclick="showhide('div8');">Exhibit A - </a></p>


    <div id="div1" style="display: none;">Content 1</div>

    <div id="div2" style="display: none;">Content 2</div>

    <div id="div2" style="display: none;">Content 3</div>

    <div id="div2" style="display: none;">Content 4</div>

    <div id="div2" style="display: none;">Content 5</div>

    <div id="div2" style="display: none;">Content 6</div>

    <div id="div2" style="display: none;">Content 7</div>

    <div id="div2" style="display: none;">Content 8</div>




    </body>

    </html>
     
  7. gonaads

    gonaads Beware the G-Man Political User Folding Team

    GMeagle86, If you want to find or understand how certain Java Scripts function and maybe also find one that does what you want.

    Try here...

    http://javascript.internet.com/
     
  8. gmagnuson

    gmagnuson Guest

    I looked there, but they did not have anything that was related to what I was looking for. But it is a good place for code samples. I will keep it in mind.
     
  9. gonaads

    gonaads Beware the G-Man Political User Folding Team

    Try this...


    <--------------------copy--------------------->

    <html>

    <head>
    This is a test
    </head>

    <script LANGUAGE="JavaScript" type="text/javascript">
    <!--
    var state = 'none';

    function showhide(layer_ref) {

    if (state == 'block') {
    state = 'none';
    }
    else {
    state = 'block';
    }
    if (document.all) { //IS IE 4 or 5 (or 6 beta)
    eval ("document.all." + layer_ref + ".style.display = state");
    }
    if (document.layers) { //IS NETSCAPE 4 or below
    document.layers[layer_ref].display = state;
    }
    if (document.getElementById &&!document.all) {
    hza = document.getElementById(layer_ref);
    hza.style.display = state;
    }
    }
    //-->
    </script>


    <body>

    <p><a href="#" onclick="showhide('div1');">Article 1 - Membership</a></p>

    <p><a href="#" onclick="showhide('div2');">Article 2 - Meetings of Members</a></p>

    <p><a href="#" onclick="showhide('div3');">Article 3 - Board of Directors</a></p>

    <p><a href="#" onclick="showhide('div4');">Article 4 - </a></p>

    <p><a href="#" onclick="showhide('div5');">Article 5 - </a></p>

    <p><a href="#" onclick="showhide('div6');">Article 6 - </a></p>

    <p><a href="#" onclick="showhide('div7');">Article 7 - </a></p>

    <p><a href="#" onclick="showhide('div8');">Exhibit A - </a></p>


    <div id="div1" style="display: none;">Content 1</div>

    <div id="div2" style="display: none;">Content 2</div>

    <div id="div3" style="display: none;">Content 3</div>

    <div id="div4" style="display: none;">Content 4</div>

    <div id="div5" style="display: none;">Content 5</div>

    <div id="div6" style="display: none;">Content 6</div>

    <div id="div7" style="display: none;">Content 7</div>

    <div id="div8" style="display: none;">Content 8</div>




    </body>

    </html>

    <--------------------copy--------------------->

    It works in Mozilla, Firebird and IE 6, but not with Opera 6.1.
     
  10. gmagnuson

    gmagnuson Guest

    Cool! Thank you so much!!!!!!