• RSS 0.91
  • RSS 1.0
  • RSS 2.0
  • ATOM 0.3
  • OPML

Howto (expandable-content) - using php

 description 

This is a step-by-step howto based on "Flooble's Expandable Content script".
It is mainly a copy & past of the resulting script to show you how you are able to use such a code for your own moslate.
(This means that I did not create any of the used JavaScript)

 part 1 - create/choose your category 

To create any moslate you have to have a category available... if you don't have any you may create one by choosing (Menu):
Components -> Moslates -> Moslate Categories
There you can use the "New" button (this is actually a list provided by the Joomla/Mambo administration core).

 part 2 - create moslate 

1) First you may navigate to the main list by choosing (Menu):
Components -> Moslates -> Manage Moslates
2) Click on "New"
3) Choose the category you might just created
4) Enter a name, e.g. "expandable-content"
5) Enter the template-code:
  1. $isCollapsed = (isset($collapsed) && ($collapsed == "true"));
  2. $counterVarName = "expandable-content-counter";
  3. $counter = (isset($GLOBALS[$counterVarName]) ? $GLOBALS[$counterVarName] : 0);
  4. $GLOBALS[$counterVarName] = $counter+1;
  5. $id = 'exp'.$counter;
  6. $divStyles = ($isCollapsed ? 'display:none;' : '');
  7. $linkText = ($isCollapsed ? '+' : '−');
  8. if ($counter == 0) {
  9. // this is the first one, include header
  10. echo "<!-- flooble Expandable Content header start -->
  11. <script language=\"javascript\" type=\"text/javascript\">
  12. // Expandable content script from flooble.com.
  13. // For more information please visit:
  14. //   http://www.flooble.com/scripts/expand.php
  15. // Copyright 2002 Animus Pactum Consulting Inc.
  16. //----------------------------------------------
  17. var ie4 = false; if(document.all) { ie4 = true; }
  18. function getObject(id) {
  19. if (ie4) { return document.all[id]; }
  20. else { return document.getElementById(id); } }
  21. function toggle(link, divId) {
  22. var lText = link.innerHTML; var d = getObject(divId);
  23. if (lText == '+') { link.innerHTML = '&#8722;'; d.style.display = 'block'; }
  24. else { link.innerHTML = '+'; d.style.display = 'none'; } }
  25. </script>
  26. <!-- flooble Expandable Content header end   -->";
  27. }
  28. echo '<!-- flooble Expandable Content box start -->
  29. <div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; ">
  30. <table border="0" cellspacing="0" cellpadding="2" width="100%"
  31. style="background: #000000; color: #FFFFFF; ">
  32. <tr><td>'.$title.'</td><td align="right">
  33. [<a title="show/hide" id="'.$id.'_link"
  34. href="javascript:void(0);"
  35. onclick="toggle(this, \''.$id.'\');"
  36. style="text-decoration: none; color: #FFFFFF; ">'.$linkText.'</a>]
  37. </td></tr></table>
  38. <div id="'.$id.'"
  39. style="padding: 3px;'.$divStyles.'">'.$data.'</div>
  40. </div><noscript><a href="http://www.flooble.com/scripts/expand.php">this expanable
  41. content box is made using a free javascript from flooble</a>
  42. | <a href="http://www.blackjack-primer.com">Blackjack Tutorial</a>
  43. </noscript>
  44. <!-- flooble Expandable Content box end  -->';
6) Make the "Parameters" tab visible
7) Change "Mode" to "Eval as PHP"

 part 3 - template-code explained (skip this part if you don't care) 

  1. $isCollapsed = (isset($collapsed) && ($collapsed == "true"));
Prepare the php variable "$isCollapsed ", it will be true if the collapsed parameter equals "true" (see 3rd box).

  1. $counterVarName = "expandable-content-counter";
  2. $counter = (isset($GLOBALS[$counterVarName]) ? $GLOBALS[$counterVarName] : 0);
  3. $GLOBALS[$counterVarName] = $counter+1;
First set the name for our global variable (we use a long name to avoid conflicting with other global variables).
The resulting counter (starting at 0) we will use for the id of each box and to determine whether we have to include a static header.
Eventually increment the global variable.

  1. $id = 'exp'.$counter;
Here we define the id we want to use to identify the div we will use later.

  1. $divStyles = ($isCollapsed ? 'display:none;' : '');
  2. $linkText = ($isCollapsed ? '+' : '&#8722;');
Define extra style definition and the text of the link - depending on the initial collapse-state.

  1. if ($counter == 0) {
  2. // this is the first one, include header
  3. echo "<!-- flooble Expandable Content header start -->
  4. <script language=\"javascript\" type=\"text/javascript\">
  5. // Expandable content script from flooble.com.
  6. // For more information please visit:
  7. //   http://www.flooble.com/scripts/expand.php
  8. // Copyright 2002 Animus Pactum Consulting Inc.
  9. //----------------------------------------------
  10. var ie4 = false; if(document.all) { ie4 = true; }
  11. function getObject(id) {
  12. if (ie4) { return document.all[id]; }
  13. else { return document.getElementById(id); } }
  14. function toggle(link, divId) {
  15. var lText = link.innerHTML; var d = getObject(divId);
  16. if (lText == '+') { link.innerHTML = '&#8722;'; d.style.display = 'block'; }
  17. else { link.innerHTML = '+'; d.style.display = 'none'; } }
  18. </script>
  19. <!-- flooble Expandable Content header end   -->";
  20. }
If this is the first box we have to include a static header which is used by all boxes... this is unchanged beside the escaped quotes.

  1. echo '<!-- flooble Expandable Content box start -->
  2. <div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; ">
  3. <table border="0" cellspacing="0" cellpadding="2" width="100%"
  4. style="background: #000000; color: #FFFFFF; ">
  5. <tr><td>'.$title.'</td><td align="right">
  6. [<a title="show/hide" id="'.$id.'_link"
  7. href="javascript:void(0);"
  8. onclick="toggle(this, \''.$id.'\');"
  9. style="text-decoration: none; color: #FFFFFF; ">'.$linkText.'</a>]
  10. </td></tr></table>
  11. <div id="'.$id.'"
  12. style="padding: 3px;'.$divStyles.'">'.$data.'</div>
  13. </div><noscript><a href="http://www.flooble.com/scripts/expand.php">this expanable
  14. content box is made using a free javascript from flooble</a>
  15. | <a href="http://www.blackjack-primer.com">Blackjack Tutorial</a>
  16. </noscript>
  17. <!-- flooble Expandable Content box end  -->';
Eventually output the code for the box. Here we use previously defined variables like $id, $divStyles and $linkText. In addition we use $data for the content (this is the default variable name ) and $title which is a moslate parameter (you can use any other name if you want).

 part 4 - create/edit your content 

Enter for example:
  1. {moslate}
  2. {expandable-content title="box title 1"}
  3. box content 1
  4. {/expandable-content}
  5. <br/>
  6.  
  7. {expandable-content title="box title 2"}
  8. box content 2
  9. {/expandable-content}
  10. <br/>
  11.  
  12. {expandable-content title="box title 3" collapsed="true"}
  13. box content 3
  14. {/expandable-content}
  15. {/moslate}

 part 5 - result 

box title 1 []
box content 1

box title 2 []
box content 2

box title 3 [+]