Search code examples
javascriptruby-on-railsprototypejs

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:

<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?

Solution

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