Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Collapse isuue

  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Collapse isuue

    I have a little question about collapse issue i'm having.
    I have this code that allows me to collapse and expand elemnts, but i can't find how to make it collapsed when the page loads.
    I think it's about return true /false.
    Code:
    <script type="text/javascript">
    function switchMenu(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'none' ) {
    el.style.display = 'none';
    }
    else {
    el.style.display = '';
    }
    }
    </script>
    
    <a href="#" onclick="switchMenu('collapse')>Click to collapse</a>
    <div id="collapse">
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    </div>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body onload="switchMenu('collapse');">
    <script type="text/javascript">
    function switchMenu(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'none' ) {
    el.style.display = 'none';
    }
    else {
    el.style.display = '';
    }
    }
    </script>
    
    <a href="#" onclick="switchMenu('collapse');">Click to collapse</a>
    <div id="collapse">
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks vwphillips for that . i have also just figure it up now, the onload really
    does the work but it happends after the page loads of course, and you can see it collapse while page loading, isn't there any other way of doing it, maybe force it to happend before page loadin, or what ever ?

  • #4
    Regular Coder
    Join Date
    Nov 2003
    Location
    Vancouver Island Canada
    Posts
    139
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body >
    <script type="text/javascript">
    function switchMenu(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'none' ) {
    el.style.display = 'none';
    }
    else {
    el.style.display = '';
    }
    }
    </script>
    
    <a href="#" onclick="switchMenu('collapse');">Click to collapse</a>
    <div id="collapse" style="position:relative;display:none;" >
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New Coder
    Join Date
    May 2006
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the css hint phillips never thought about it
    And thanks glenmac for the guides.

  • #7
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    lol i am doing exscaly the same thing and i regestered to this forum for help like 30 secs ago thats realy helpful thanks every 1!...but i've just being trying it out and mine is a hide and show... but when u hide you cant show because it's css style tells it not to show

    it is this:
    Code:
    <script type="text/javascript">
    if (document.getElementById) { // include all feature tests needed
                                                          // for your DOM script
        document.write('<style type="text/css">#prefs {display:none;}</style>');
        window.onload = hideprefs;
    }
    
    function showprefs() {
        document.getElementById("prefs").style.display = "none";
    }
    
    </script>
    
    <script type='text/javascript'>
    <!--
    // Hide Logo System
    // created by Black Hawk Admin
    // 2006
    function hideplus1()
    {
    document.getElementById('splus1').style.display = "none"
    }
    function showplus1()
    {
    document.getElementById('splus1').style.display = ""
    }
    function showmin1()
    {
    document.getElementById('smin1').style.display = ""
    }
    function hidemin1()
    {
    document.getElementById('smin1').style.display = "none"
    }
    function hidenews()
    {
    document.getElementById('news').style.display = "none"
    }
    function backnews()
    {
    document.getElementById('news').style.display = ""
    }
     
    //-->
    </script>
    
    
    <script type='text/javascript'>
    function showprefs()
    {
    document.getElementById('prefs').style.display = ""
    }
    function hideprefs()
    {
    document.getElementById('prefs').style.display = "none"
    }
    function text1hide()
    {
    document.getElementById('text').style.display = "none"
    }
    function text1show()
    {
    document.getElementById('text').style.display = ""
    }
    function text2hide()
    {
    document.getElementById('text2').style.display = "none"
    }
    function text2show()
    {
    document.getElementById('text2').style.display = ""
    }
    </script>
    <center><a href='javascript:showprefs(); text1hide(); text2show()'><span id='text'><b>Show Prefs</span></b></a>
    <a href='javascript:hideprefs(); text2hide(); text1show()'><span id='text2'><b>Hide Prefs</span></b></a>
    <table id='prefs'>
    <tr><td>
    <b>News: </b><a href='javascript:hidenews(); hidemin1(); showplus1();'><img src='http://3.friends.aus.cc/html/sys-img/minus.gif' id='smin1' '></A><a href='javascript:backnews(); hideplus1(); showmin1();'><img src='http://3.friends.aus.cc/html/sys-img/plus.gif' id='splus1' ; '></A>
    <br>
    
    <b>Banner: </b><a href='javascript:removeLogo(); removeimg(); backimg2();'><img src='http://3.friends.aus.cc/html/sys-img/minus.gif' id='img1'></A><a href='javascript:backLogo(); backimg(); removeimg2();'><img src='http://3.friends.aus.cc/html/sys-img/plus.gif' id='img2'></A>
    <br>
    
    <b>Stats: </b><a href='javascript:hidestats(); hidemin(); showplus();'><img src='http://3.friends.aus.cc/html/sys-img/minus.gif' id='smin'></A><a href='javascript:backstats(); hideplus(); showmin();'><img src='http://3.friends.aus.cc/html/sys-img/plus.gif' id='splus'></A>
    
    
    </td></tr></table>
    </center>
    (parts of the script is missing there but it dosent matter.) what happens is it loads hides the text and it cant show it... can any 1 help?
    Last edited by geo877; 06-04-2006 at 08:46 PM.

  • #8
    New Coder
    Join Date
    May 2006
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah something's going wrong when you put it into the <style> tags i think you need to use behavior attribute.

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    your codes a mess with typos

    what are your trying to achieve?
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    my script works fine if u paste
    Code:
    <script type='text/javascript'>
    <!--
    // Hide Logo System
    // created by Black Hawk Admin
    // 2006
    function hideplus1()
    {
    document.getElementById('splus1').style.display = "none"
    }
    function showplus1()
    {
    document.getElementById('splus1').style.display = ""
    }
    function showmin1()
    {
    document.getElementById('smin1').style.display = ""
    }
    function hidemin1()
    {
    document.getElementById('smin1').style.display = "none"
    }
    function hidenews()
    {
    document.getElementById('news').style.display = "none"
    }
    function backnews()
    {
    document.getElementById('news').style.display = ""
    }
     
    //-->
    </script>
    
    
    <script type='text/javascript'>
    function showprefs()
    {
    document.getElementById('prefs').style.display = ""
    }
    function hideprefs()
    {
    document.getElementById('prefs').style.display = "none"
    }
    function text1hide()
    {
    document.getElementById('text').style.display = "none"
    }
    function text1show()
    {
    document.getElementById('text').style.display = ""
    }
    function text2hide()
    {
    document.getElementById('text2').style.display = "none"
    }
    function text2show()
    {
    document.getElementById('text2').style.display = ""
    }
    </script>
    <center><a href='javascript:showprefs(); text1hide(); text2show()'><span id='text'><b>Show Prefs</span></b></a>
    <a href='javascript:hideprefs(); text2hide(); text1show()'><span id='text2'><b>Hide Prefs</span></b></a>
    <table id='prefs'>
    <tr><td>
    <b>News: </b><a href='javascript:hidenews(); hidemin1(); showplus1();'><img src='http://3.friends.aus.cc/html/sys-img/minus.gif' id='smin1' '></A><a href='javascript:backnews(); hideplus1(); showmin1();'><img src='http://3.friends.aus.cc/html/sys-img/plus.gif' id='splus1' ; '></A>
    <br>
    
    <b>Banner: </b><a href='javascript:removeLogo(); removeimg(); backimg2();'><img src='http://3.friends.aus.cc/html/sys-img/minus.gif' id='img1'></A><a href='javascript:backLogo(); backimg(); removeimg2();'><img src='http://3.friends.aus.cc/html/sys-img/plus.gif' id='img2'></A>
    <br>
    
    <b>Stats: </b><a href='javascript:hidestats(); hidemin(); showplus();'><img src='http://3.friends.aus.cc/html/sys-img/minus.gif' id='smin'></A><a href='javascript:backstats(); hideplus(); showmin();'><img src='http://3.friends.aus.cc/html/sys-img/plus.gif' id='splus'></A>
    
    
    </td></tr></table>
    </center>
    into THIS TEST BED u can see my problem, im trying to get it to hide the other option (hide prefs) befor you can see it, a dhtml rollover replacing onmouse enter with onclick can do half and change the image, but i need it to change the link properties (sorry i cant spell!) so it has a differnt java link.

    e.g.

    show button > onclick-> do javascript hide obj and dhtml change show button to hide button-> hide button > onclick->... but i cant do that, how would i do it (at the moment it runs hide the hide button lol but that dosnt work when the page loads because it show both and evern when u use a onload run hide button "HIDE PREFS" it still shows for a while untill the page fully loads)

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    my script works fine if u paste
    whats this then


    us.gif' id='smin1' '></A><a href
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #12
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ??? whats wrong with i that bit?

  • #13
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nm i have fixed my problem with the display...only 1 problem left

    this 1
    Code:
    a dhtml rollover replacing onmouse enter with onclick can do half and change the image, but i need it to change the link properties (sorry i cant spell!) so it has a differnt java link.
    
    e.g. 
    
    show button > onclick-> do javascript hide obj and dhtml change show button to hide button-> hide button > onclick->... but i cant do that, how would i do it (at the moment it runs hide the hide button lol but that dosnt work when the page loads because it show both and evern when u use a onload run hide button "HIDE PREFS" it still shows for a while untill the page fully loads)

  • #14
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i have a solouting anyway... nm

  • #15
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    please be more specific

    have you a problem or a solution?


    If a problem please be more specific
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •