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 18
  1. #1
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts

    collapsible panel

    do you know a collapsible panel (div display : block/none) which keeps its state even when the page is refreshed ?

    thank you

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You'll need to edit the cookie.

    Eg:

    Code:
    function foo() {
      if (document.cookie.indexOf('state=1') >= 0) 
        document.getElementById('thediv').style.display = 'none'
      else 
        document.getElementById('thediv').style.display = 'block';
    }
    
    onload = foo;
    And then:
    Code:
    <a href="#" onclick="document.cookie='state=1'; foo()">Collapse Div</a>
    (untested, should work but I'm a little tired at the moment, probably buggy)
    Last edited by me'; 09-28-2003 at 09:19 PM.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I'm using DOM during loading. Err... I'll have to rethink.

    edit: rethought

    You could handle onfocus instead of onload, but that isn't exactly neat and there's no guarentees that it'll work... apart from that you could deliberately use the code I already posted and handle onerror, but that's twisted, contorted, errorful and hard to program.

    Err... The only other way I can think of is asking the viewer to click a link once the page is viewed, and that's not exactly great either.
    Last edited by me'; 09-28-2003 at 09:28 PM.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    save the display state in a cookie as you hide or show them. Have different cookie name for each panel. Then when you load the page, document.write the panel using the cookie value as the display property

    <script>
    var display1 = //get cookie for panel1
    //set default value if no cookie

    document.write('<div id="panel1" style="display:' + display1 + "></div>');

    var display2 = //get cookie for panel2
    //set default value if no cookie

    document.write('<div id="panel2" style="display:' + display2 + "></div>');

    </script>

  • #5
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts

    not really

    it is not really working


    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>CollExp</title>
    <script language="javascript">
    function foo(id) {
    if (document.cookie.indexOf(id + '=Collapse') >= 0)
    document.getElementById(id).style.display = 'none';
    else
    document.getElementById(id).style.display = 'block';
    }
    //onload = foo(id);
    </script>
    </head>
    <body>
    <form id="MainForm">
    <a href="#" onclick="document.cookie='Div1=Collapse'; foo('Div1')">write : Collapse (or Expand) Div1</a>
    <div id ="Div1" style="display:block;">Div1 content</div>
    <br />
    <a href="#" onclick="document.cookie='Div2=Collapse'; foo('Div2')">write : Collapse (or Expand) Div2</a>
    <div id ="Div2" style="display:block;">Div2 content</div>
    </form>
    </body>
    </html>



    I get an error if I use : onload = foo(id);

    and it doesn't keep the state, I cannot, as says glenngv, write the full div because in my DIV I have server controls, like a searchbox

    and how to inverse the state ? : if cookie = collapse then write link=invert and set the cookie to invert .... and the contrary ....

    thanks for helping
    Last edited by angiras; 09-29-2003 at 07:45 AM.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    // The Cookie Jar
    ////// Standard functions for Setting, Getting, and Deleting Cookies
    ////// john@xcentrixlc.com
    
    // To set a cookie pass in the name, value, and persist type
    // SetCookie("name", "value", 1) set the persist type to 1 to store your cookie
    // or to 0 to last for this browser session only.  By default the storage time is for one year.
    // You can add another argument to hold the length of time you want to store the cookie:
    // SetCookie("name", "value",1,15768000000) would store the cookie for 6 months.
    // the time is calcutaled in miliseconds so for one month of milliseconds you calculate:
    // 31 * 24 * 60 * 60 * 1000=2678400000
    // To get or delete a cookie simply pass in the name of the cookie you want to effect
    // GetCookie("name")  DeleteCookie("name")
    // if you ask for a cookie that does not exist it will return null.
    
    function getCookieVal(offset) {
      endstr = document.cookie.indexOf (";", offset)
      if(endstr == -1) endstr = document.cookie.length
      return unescape(document.cookie.substring(offset, endstr))
    }
    
    function GetCookie(name) {
      arg = name + "="
      alen = arg.length
      clen = document.cookie.length
      var i = 0
      while (i < clen) {
        j = i + alen
        if(document.cookie.substring(i, j) == arg) return getCookieVal(j)
        i = document.cookie.indexOf(" ", i) + 1
        if(i == 0) break
      }
      return null
    }
    
    function SetCookie (name, value, per, exp) {
      cstr = name + "=" + escape(value) + ";"
      if(per){
        addtime=(exp>0) ? exp : 31536000000
        expdate = new Date()
        expdate.setTime(expdate.getTime() + addtime)
        expdate = expdate.toGMTString()
       cstr+=" expires=" + expdate
      }
      document.cookie = cstr
    }
    
    function DeleteCookie(name) {
      exp = new Date()
      exp.setTime (exp.getTime() - 1)
      cval = GetCookie(name)
      if(cval != null)
      document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()
    }
    
    function expandCollapse(id){
      var div = document.getElementById(id);
      if (div.style.display=='none'){
        div.style.display='block';
        SetCookie(id,'block');
      }
      else {
        div.style.display='none';
        SetCookie(id,'none');
      }
    }
    
    function setDisplay(div,disp){
      if (disp!=null) div.style.display=disp;
    }
    
    function setState(){
      var div;
      var i=1;
      while (div=document.getElementById('Div'+(i++))) {
         setDisplay(div,GetCookie(div.id));
      }
    }
    </script>
    </head>
    <body onload="setState()">
    <p>
    <a href="#" onclick="expandCollapse('Div1')">Expand/Collapse</a>
    <div id ="Div1" style="display:block;">Div1 content</div>
    </p>
    <p>
    <a href="#" onclick="expandCollapse('Div2')">Expand/Collapse</a>
    <div id ="Div2" style="display:block;">Div2 content</div>
    </p>
    <p>
    <a href="#" onclick="expandCollapse('Div3')">Expand/Collapse</a>
    <div id ="Div3" style="display:block;">Div3 content</div>
    </p>
    </body>
    </html>
    you can use your own cookie script if you have one.

  • #7
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts

    GREAT !

    genial !!!

    and just a very very small detail :-)) ?

    how can you write the contrary of the state ?

    I mean :
    if it is expand then write collapse
    if it is collapse write expand

    or any image with + and - which show the contrary of the state

    thanks again

    if you need any help for .NET coding just ask !!!

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I have told you how to do it, haven't I?

    expand / collapse

  • #9
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ...

    oups ! sorry !

    thanks again

  • #10
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts

    InnerText for Mozilla/Netscape

    This time it works but it seems that mozilla doesn't recognize innerText , it works for IE and OPera

    your function

    function expandCollapse(id,img, sp){
    var div = document.getElementById(id);
    if (div.style.display=='none'){
    div.style.display='block';
    SetCookie(id,'block');
    document.images[img].src='cmdCollapse.gif';
    document.getElementById(sp).innerText = 'Collapse';
    }
    else {
    div.style.display='none';
    SetCookie(id,'none');
    document.images[img].src='cmdExpand.gif';
    document.getElementById(sp).innerText = 'Expand';
    }
    }

    and any line :

    <a href="#" onclick="expandCollapse('Div1','Img1','sp1')"><img src="cmdCollapse.gif" id="Img1" alt="" /><span id="sp1">Collapse</span></a>
    <div id ="Div1" style="display:block;">Div1 content</div>


    thank you

  • #11
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts

    <body onload="setState()">

    is there anyway to avoid : <body onload="setState()">


    I am building Dynamicly my pages and I must do a property specialy the body tag

    thank you

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    innerText only works with IE, use innerHTML instead.

    window.onload = setState;

  • #13
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts

    it works

    all works now ! thank you !

  • #14
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts

    images state

    I don't get it I loose the state of the images, if I refresh the page the boxes are ok but the images come back to the original values



    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    <style type="text/css">
    a{text-decoration:none; color:#000099;}
    img{border:0px;margin-right:4px;margin-left:4px}
    .Boxes
    {border:1px solid #000099;height:auto;width:100px;margin:4px;background-color:tan;}
    .Content
    {height:100px;width:100px;overflow:auto;background-color:ivory;padding:2px;}
    </style>
    <script type="text/javascript">

    // The Cookie Jar
    ////// Standard functions for Setting, Getting, and Deleting Cookies
    ////// john@xcentrixlc.com

    // To set a cookie pass in the name, value, and persist type
    // SetCookie("name", "value", 1) set the persist type to 1 to store your cookie
    // or to 0 to last for this browser session only. By default the storage time is for one year.
    // You can add another argument to hold the length of time you want to store the cookie:
    // SetCookie("name", "value",1,15768000000) would store the cookie for 6 months.
    // the time is calcutaled in miliseconds so for one month of milliseconds you calculate:
    // 31 * 24 * 60 * 60 * 1000=2678400000
    // To get or delete a cookie simply pass in the name of the cookie you want to effect
    // GetCookie("name") DeleteCookie("name")
    // if you ask for a cookie that does not exist it will return null.

    function getCookieVal(offset) {
    endstr = document.cookie.indexOf (";", offset)
    if(endstr == -1) endstr = document.cookie.length
    return unescape(document.cookie.substring(offset, endstr))
    }

    function GetCookie(name) {
    arg = name + "="
    alen = arg.length
    clen = document.cookie.length
    var i = 0
    while (i < clen) {
    j = i + alen
    if(document.cookie.substring(i, j) == arg) return getCookieVal(j)
    i = document.cookie.indexOf(" ", i) + 1
    if(i == 0) break
    }
    return null
    }

    function SetCookie (name, value, per, exp) {
    cstr = name + "=" + escape(value) + ";"
    if(per){
    addtime=(exp>0) ? exp : 31536000000
    expdate = new Date()
    expdate.setTime(expdate.getTime() + addtime)
    expdate = expdate.toGMTString()
    cstr+=" expires=" + expdate
    }
    document.cookie = cstr
    }

    function DeleteCookie(name) {
    exp = new Date()
    exp.setTime (exp.getTime() - 1)
    cval = GetCookie(name)
    if(cval != null)
    document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()
    }

    function expandCollapse(id,img){
    var div = document.getElementById(id);
    if (div.style.display=='none'){
    div.style.display='block';
    document.images[img].src='cmdCollapse.gif';
    SetCookie(id,'block');
    }
    else {
    div.style.display='none';
    document.images[img].src='cmdExpand.gif';
    SetCookie(id,'none');
    }
    }

    function setDisplay(div,disp){
    if (disp!=null) div.style.display=disp;
    }

    function setState(){
    var div;
    var i=1;
    while (div=document.getElementById('Div'+(i++))) {
    setDisplay(div,GetCookie(div.id));
    }
    while (div=document.getElementById('Img'+(i++))) {
    setDisplay(div,GetCookie(div.id));
    }
    }

    window.onload = setState;
    </script>
    </head>
    <body >

    <a href="#" onclick="expandCollapse('Div1','Img1')"><img src="cmdCollapse.gif" id="Img1" alt="" /><span>DIV 1 title</span></a>
    <div id ="Div1" style="display:block;" class="Content">Div1 content<br />blah<br />blah<br />blah<br />blah<br />blah<br />blah<br /></div>


    <br /><br />

    <a href="#" onclick="expandCollapse('Div2','Img2')"><img src="cmdExpand.gif" id="Img2" alt="" /><span >DIV 2 title</span></a>
    <div id ="Div2" style="display:none;" class="Content">Div2 content<br />blah<br />blah<br />blah<br />blah<br />blah<br />blah<br />
    </div>


    </body>
    </html>

    thanks for helping

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    function setDisplay(div,disp,img){
      if (disp!=null) {
        div.style.display=disp; 
        document.images[img].src=(disp=='none')?'cmdExpand.gif':'cmdCollapse.gif';
      }
    }
    
    function setState(){
      var div;
      var i=1;
      while (div=document.getElementById('Div'+i)) {
        setDisplay(div,GetCookie(div.id),'Img'+i);
        i++;
      }
    }


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