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.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Picture bullets on collapsed lists

    <td width="80%" height="261" colspan="2">
    <ul dynamicoutline initcollapsed imagesrc="images/logo_bb.gif">
    <li>This is a simple list that I have created
    <ul>
    <li>it's initially collapsed</li>
    <li>and uses a picture bullet for the first item</li>
    <li>I want that bullet to change upon list expansion</li>
    </ul>
    </li>

    I didn't make an array because I only need 2 pictures. Also, no css has been used. Can this seemingly simple image swap be painlessly acomplished?

    thanks - checker

    Haven't heard from anyone yet - I know this can be done, found 2 examples on the web, but when I went to "view source" I couldn't make heads or tales out of it. HELP PLEASE!
    Last edited by Checker; 07-06-2002 at 01:57 PM.

  • #2
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone?

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When inserting that code into an HTML, it doesn't seem to work the way it should, at least not using the code you typed in, could you post a link to those sites you mentioned?

    Guardian

  • #4
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe my code isn't working right because I didn't post the whole thing. <shrug>

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>RL_BOS</title>
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta name="Microsoft Theme" content="none, default">
    <meta name="Microsoft Border" content="none, default">
    <script language="JavaScript" fptype="dynamicoutline">
    <!--
    function dynOutline() {}
    //-->
    </script>
    <script language="JavaScript1.2" fptype="dynamicoutline" src="outline.js">
    </script>
    <script language="JavaScript1.2" fptype="dynamicoutline" for="document" event="onreadystatechange()">
    <!--
    initOutline()
    //-->
    </script>
    </head>

    <body onclick="dynOutline()" language="Javascript1.2">

    <ul dynamicoutline initcollapsed imagesrc="images/DRI.png">
    <li>This is a simple list that I have created
    <ul>
    <li>it's initially collapsed</li>
    <li>and uses a picture bullet for the first item</li>
    <li>I want that bullet to change upon list expansion</li>
    </ul>
    </li>
    </ul>

    </body>

    The sites that I mentioned:

    http://www.themoorside.freeserve.co.....htm?demos.htm

    Scroll down to "visual functionality" and click on "Collapsible list areas for ease of content composition" The red up/down arrow changes when the list is expanded/collapsed.

    hope that helps, and if you couldn't already tell I know very little about js. just enough to get myself into these messes.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try this code - works with all DOM compliant browsers

    put this function in a js file of <SCRIPT> section in the HTML header
    Code:
    /********************************* 
     * Copyright (c) 2002, Vlad Krylov, All Rights Reserved.
     *********************************/
    function ElementCR(elmntID,iconID)
    {   elmnt=document.getElementById(elmntID);
        icon=document.getElementById(iconID);
        fn = icon.getAttribute('src');
        slash=( (fn.lastIndexOf('\\\')>fn.lastIndexOf('/')) ? 
                           fn.lastIndexOf('\\\'): fn.lastIndexOf('/')) + 1;
        fn = fn.substring(0,slash);
        if(elmnt.style.display=='block') 
          { elmnt.style.display='none';
             //replace plus.gif with your image of choice
             icon.setAttribute('src',fn + 'plus.gif');
             icon.setAttribute('alt','Expand');
          }
        else
          { elmnt.style.display='block';
             //replace minus.gif with your image of choice
             icon.setAttribute('src',fn + 'minus.gif');
             icon.setAttribute('alt','Collapse');
          }
        return;
    }
    HTML fragment:
    Code:
    <p>
      <a href="Javascript: ElementCR('ITEM1','ICON1')">
           <img src="plus.gif" alt="Expand" id="ICON1">
           Title text if any, can also go before the image tag
      </a>
    </p>
    <div id="ITEM1" style="display:none;">
    Insert whatever HTML you want to collapse/expand here
    </div>
    You can have a number of collapsed regions and you can nest them, just provide unique image and division IDs. You can easily modify the function to allow for different images with each collapsable reagion.

    Hope that helps.
    Last edited by Vladdy; 07-06-2002 at 07:40 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  

    Posting Permissions

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