Web Analytics Made Easy -
StatCounter Picture bullets on collapsed lists - CodingForum

Announcement

Collapse
No announcement yet.

Picture bullets on collapsed lists

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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; Jul 6, 2002, 08:57 AM.

  • #2
    Anyone?

    Comment


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

      Comment


      • #4
        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.

        Comment


        • #5
          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; Jul 6, 2002, 02: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"

          Comment

          Working...
          X