Rails spinoffs - Feb 2007 - NEWBIE-Ish : How do I nicely shrink AND fade out a bunch of DIVs?

Hi.

I have a history page which has each date when work was done wrapped
in a div with a class of HIST_DIV.

With no styling or JS, the whole list is displayed and all is well.

With CSS, the date is highlighted and the content is slightly offset (looks OK).

With JS, I add an <img> tag inside the div with a plus.png/minus.png
sort of affair.

I then add a onclick observer to deal with any part of the div being
clicked to act as a toggle (show history/hide history sort of thing).

What I would like to do is instead of snapping on/off, I want to fade
out AND shrink when the user clicks a ''minus'' icon and to fade
in and
grow when the user clicks a ''plus'' icon.

The effects need to work at the same time.

Also, when the page starts up, I would like them all HIST_DIVs to hide
except the top 3.

I''ve got all of this working EXCEPT the simultaneous fade in/out.

I have a loaded for history.js which is dependent upon prototype.js
1.5.0 and scripaculous 1.7.0, so you can assume that these are loaded.

Here is my code ...

===========history.js==========function ToggleHIST_DIV_DATA(m_Param)
  {
  if (!(obj_Toggle = Event.element(m_Param)))
    {
    var obj_Toggle = $(m_Param);
    }
  // Don''t process anchors as we want them to work as normal.
  if (''A'' !== obj_Toggle.tagName)
    {
    // If we aren''t know the HIST_DIV, then find it.
    if (''HIST_DIV'' !== obj_Toggle.className)
      {
      // Get the parent whose ClassName is ''HIST_DIV''.
      obj_Toggle = obj_Toggle.up(''.HIST_DIV'');
      }
    // Get the HIST_DIV_DATA
    obj_HIST_DIV_DATA
$A(obj_Toggle.getElementsByClassName(''HIST_DIV_DATA'')).first();
    // Toggle the Plus/Minus images and the HIST_DIV_DATA
    var obj_Img =
$A(obj_Toggle.getElementsByTagName(''img'')).first();
    if (''Minus'' === obj_Img.className)
      {
      obj_Img.className = ''Plus'';
      obj_Img.src = ''/global/images/plus.png'';
      obj_HIST_DIV_DATA.hide();
      }
    else
      {
      obj_Img.className = ''Minus'';
      obj_Img.src = ''/global/images/minus.png'';
      obj_HIST_DIV_DATA.show();
      }
    }
  }

function InitialiseHistory()
  {
  var i_Hidden = 0;
  $A(document.getElementsByClassName(''HIST_DIV'',
$(''History''))).each
    (
    function(obj_HistoryNode)
      {
      // Find the H3 tag.
      var obj_H3 =
$A(obj_HistoryNode.getElementsByTagName(''h3'')).first();

      // Add the button
      var obj_Img = document.createElement(''img'');
      obj_Img.alt = ''Toggle history for '' + obj_H3.innerHTML;
      obj_HistoryNode.insertBefore(obj_Img, obj_H3);

      ToggleHIST_DIV_DATA(obj_HistoryNode);
      if (++i_Hidden > 3)
        {
        ToggleHIST_DIV_DATA(obj_HistoryNode);
        }

      // Attach the event handler;
      Event.observe(obj_HistoryNode, ''click'',
ToggleHIST_DIV_DATA);
      }
    );
  }

Event.observe(window, ''load'', InitialiseHistory);
===========history.js==========
An example of the actual history html code ...

===========example history html==========<div id="History">
  <h2>History</h2>
  <div class="HIST_DIV">
    <h3 class="side">Monday, 26 February 2007</h3>
    <div class="HIST_DIV_DATA">
      <h4 class="side">New rules</h4><br />
      <b>BTCEUROPE : DARFEUILLE</b> : <b>Vehicle User Sort
2</b> - Can
now contain ''REFACTURER/RECHARGE''. See <a
href="#BTCEUROPE_DARFEUILLE_CH_USER2">here</a>.<br />
      <b>CONTRACTS : SALVESEN UK</b> : <b>Validation
Matrix</b> -
Amended to handle shortened values (20 characters maximum). See <a
href="#CONTRACTS_SALVESEN_UK_MATRIX">here</a>.<br />
      <b>CONTRACTS : SALVESEN UK</b> : <b>Validation
Matrix</b> - Can
now contains ''FOOD &amp; CONSUMER'' /
''784'' / ''KNOTTINGLY''. See <a
href="#CONTRACTS_SALVESEN_UK_MATRIX">here</a>.<br />
      <b>CONTRACTS : UPS</b> : <b>Validation Matrix</b>
- ''UPS002'' /
''SOUTH EAST'' matrix amended to handle shortened values (20
characters
maximum). See <a href="#CONTRACTS_UPS_5">here</a>.<br
/>
    </div>
  </div>
  <div class="HIST_DIV">
    <h3 class="side">Thursday, 22 February 2007</h3>
    <div class="HIST_DIV_DATA">
      <h4 class="side">Application changes</h4><br
/>
      The <a href="/index.php?Action=1.3">Filtered Data Entry
Validation</a> option, now includes the facility to filter by Service
Provider.<br />
      The Data Entry Validation report always includes the links
rather than when just called from the <a
href="/index.php?Action=1.3">Filtered Data Entry
Validation</a>
option.
    </div>
  </div>
  <div class="HIST_DIV">
    <h3 class="side">Tuesday, 13 February 2007</h3>
    <div class="HIST_DIV_DATA">
      <h4 class="side">Application change</h4><br />
      If this report is run via the <a
href="/index.php?Action=1.3">Filtered Data Entry
Validation</a>
option, you will be able to choose different users and / or contracts
to filter by. Once the filter has been chosen it remains active until
you return to a Sales Operations menu, allowing you to run multiple
reports one after the other.
    </div>
  </div>
</div>
===========example history html==========
All suggestions would be appreciated.

Regards,

Richard Quadling.

-- 
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---