You still need to have the javascript in the <head> portion of your
page.
for example
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="src/scriptaculous.js" type="text/javascript"></script>
<script src="src/accordion.js" type="text/javascript"></script>
On Dec 27, 8:48 am, Marco <[EMAIL PROTECTED]> wrote:
> Ciao everyone- I am new at this!!! ---- what are the procedures in
> putting this on your website. I uploaded Scriptaculous and using Serif
> Webplus for construction of the site. When I insert a html box into
> the website where does all this go? I tried putting it all in the body
> and then part of it in the head (the java) but it doesn't work as it
> just shows each box but does not utilize the accordion effect
>
> HTML:
>
> <style>
> #accordion {
> border: 1px solid #1F669B;
> width: 600px;
> height: 310px;
> font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
> font-size: 11px;}
>
> h3 {
> font-size: 12px;
> padding: 4px 6px 4px 6px;
> margin: 0;
> border-style: solid none solid none;
> border-top-color: #BDC7E7;
> border-bottom-color: #182052;
> border-width: 1px 0px 1px 0px;
> color:#fff;
> background-color: #63699C;
> cursor:pointer;}
>
> #visible {
> color:#CED7EF;
> background-color: #63699C;}
>
> #panel1, #panel2, #panel3, #panel4 {
> margin: 0;
> padding-bottom: 0;
> border: none;}
>
> .panel_body {
> height:199px;}
>
> </style>
> </head>
> <body>
> <div id="accordion">
>
> <div id="panel1">
> <h3 id="visible" onClick="accordion(this)">Panel 1</h3>
> <div id="panel1-body" class="panel_body">
> <div>
> This is the contents of this panel.
> </div>
> </div>
> </div>
> <div id="panel2">
> <h3 onClick="accordion(this)">Panel 2</h3>
> <div id="panel2-body" class="panel_body">
> <div>
> This is the contents of this panel.
> </div>
> </div>
> </div>
> <div id="panel3">
> <h3 onClick="accordion(this)">Panel 3</h3>
> <div id="panel3-body" class="panel_body">
> <div>
> This is the contents of this panel.
> </div>
> </div>
> </div>
> <div id="panel4">
> <h3 onClick="accordion(this)">Panel 4</h3>
> <div id="panel4-body" class="panel_body">
> <div>
> This is the contents of this panel.
> </div>
> </div>
> </div>
>
> </div>
>
> Javascript:
>
> function accordion(el) {
> if ($('visible') == el) {
> return;
> }
> if ($('visible')) {
> var eldown = el.parentNode.id+'-body';
> var elup = $('visible').parentNode.id+'-body';
> new Effect.Parallel(
> [
> new Effect.SlideUp(elup),
> new Effect.SlideDown(eldown)
> ], {
> duration: 0.1
> });
> $('visible').id = '';
> }
> el.id = 'visible';
>
> }
>
> function init() {
>
> // hide all elements apart from the one with id visible
> var acc = document.getElementById('accordion');
> var apanels = acc.getElementsByTagName('div');
> for (i = 0; i < apanels.length; i++) {
> if (apanels[i].className == 'panel_body') {
> apanels[i].style.display = 'none';
> }
> }
> var avis = document.getElementById('visible').parentNode.id+'-
> body';
> document.getElementById(avis).style.display = 'block';}
>
> function addEvent(elm, evType, fn, useCapture) {
> elm["on"+evType]=fn;return;
>
> }
>
> addEvent(window, "load", init);
--~--~---------~--~----~------------~-------~--~----~
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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
