Maybe you should start with a tutorial for beginners on javascript before
trying out prototype and scriptaculus ;)
On Dec 27, 2007 3:50 PM, chris at zeus <[EMAIL PROTECTED]> wrote:
>
> 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:48am, 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
-~----------~----~----~----~------~----~------~--~---
