Marco
2007-Dec-27 14:48 UTC
"Accordion feature" for Scriptaculuos- Quick Question about usage
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
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
-~----------~----~----~----~------~----~------~--~---
chris at zeus
2007-Dec-27 15:50 UTC
Re: "Accordion feature" for Scriptaculuos- Quick Question about usage
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 <marcot...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 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 -~----------~----~----~----~------~----~------~--~---
Antonio CS
2007-Dec-27 16:55 UTC
Re: "Accordion feature" for Scriptaculuos- Quick Question about usage
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 <chris-IPdWn+TdYYTuufBYgWm87A@public.gmane.org> 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 <marcot...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 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 -~----------~----~----~----~------~----~------~--~---