using Control.tabs for prototype.js in Rails

I've been trying to use http://livepipe.net/control/tabs

to get some javascript tabs up and running on my rails up.

I'm really just trying to figure out how to install this... and I don't see how I'm running into any issues at all.

Here are the steps I've taken:

1. put tabs.js in my scripts folder
2. made sure the layout is including all javascript files
3. then I copied in the code for example 1, as well as the CSS from the page's style sheet.

I don't get an error, but it just doesn't work. Both tabs are displayed...

Any ideas?

Updated with the code from my view:

<%= javascript_include_tag :all %>

(this includes:

<script src="/javascripts/prototype.js?1268618965" type="text/javascript"></script>
<script src="/javascripts/effects.js?1268618965" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1268618965" type="text/javascript"></script>
<script src="/javascripts/controls.js?1268618965" type="text/javascript"></script>
<script src="/javascripts/application.js?1268618965" type="text/javascript"></script>

<script src="/javascripts/swfobject.js?1268618965" type="text/javascript"></script>
<script src="/javascripts/tabs.js?1272670452" type="text/javascript"></script>

)

I then have (in the header):

<script>
        document.observe('dom:loaded',function(){

    //example 1
    new Control.Tabs('tabs_example_one');

</script>

Then I have the CSS:

#main ul.subsection_tabs {
border-bottom:1px solid #CCCCCC;
clear:both;
height:20px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 0 5px;
padding:0;
}
#main ul.subsection_tabs li.tab {
float:left;
margin-right:7px;
text-align:center;
}
#main ul.subsection_tabs li.tab a {
background-color:#FFFFFF;
color:#666666;
display:block;
height:20px;
padding:0 6px;
width:80px;
}
#main ul.subsection_tabs li.tab a:hover {
color:#666666;
}
#main ul.subsection_tabs li.tab a.active {
background-color:#DDDDDD;
}
#main ul.subsection_tabs li.source_code {
float:right;
}

Then I have the HTML:

&开发者_开发百科lt;div id="main">
 <!-- example 1 -->  
    <ul id="tabs_example_one" class="subsection_tabs">
        <li class="tab"><a href="#one">One</a></li>
        <li class="tab"><a href="#two">Two</a></li>
    </ul>
    <div id="one"><p>This is the simplest example of a set of tabs.</p></div>
    <div id="two"><p>Note that the styling for the tabs is done with CSS, not the Control.Tabs script.</p></div>
</div>

Am I missing something?

---

Did you include it after including prototype?

<%= javascript_include_tag "prototype" %>
<%= javascript_include_tag "tabs" %>

Paste your layouts view code. Your question is vague.

Edit: Don't you think that your script tag is incomplete?

<script>
        document.observe('dom:loaded',function(){

    //example 1
    new Control.Tabs('tabs_example_one');

</script>

You need to add a }); after initializing the tab.

i.e.

<script>
  document.observe('dom:loaded',function(){
    new Control.Tabs('tabs_example_one');
  });
</script>

Even if that doesn't work then you can try this:

<script>
  document.observe('dom:loaded',function(){
    new Control.Tabs('tabs_example_one',{ linkSelector: 'div#main div'});
  });
</script>

---

I ended up including the files directly from the demo and that did the trick..

---

From tab.js head

/**
 * @author Ryan Johnson 
 * @copyright 2008 PersonalGrid Corporation >
 * @package LivePipe UI
 * @license MIT
 * @url http://livepipe.net/control/tabs
 * @require prototype.js, livepipe.js
 */

Requires prototype.js and livepipe.js

---

I had exactly the same issue. You only need to include the following javascript files:

1. Include prototype.js, then
2. Include livepine.js, and tabs.js from here

In this exact order.

For example:

<script src="prototype.js" type="text/javascript"></script>
<script src="livepipe.js" type="text/javascript"></script>
<script src="tabs.js" type="text/javascript"></script>

I found out this works exactly like the demo.