Active tabs in Twitter Bootstrap and Javascript Loading

Question

I'm using Twitter Bootstrap for tabbed content, but having a problem loading another javascript library. Essentially, javascript that allows for zooming on a map won't load unless the tab it is contained in is "active". I'm guessing it has something to do with it not being visible, or part of the DOM, but my understanding of DOM and javascript loading is pretty minimal.

The basic structure:

<div class="tab-content">
<div class="tab-pane" id="1">
     <script>....</script>
     <div id="zoom_container">
          <img src="..."/ id="bradley"> #the script alters this image
     </div>
</div>
<div class="tab-pane active" id="2">
     <script type="text/javascript">
       $('#second').ready(function($){
       $('#monde').smoothZoom({
        width:888,
        height:250                      
         })
        });
     </script>
     <div id="zoom_container2">
         <img src="..."/ id="monde"> #the script alters this image
     </div>
</div>

The code in the "tab-pane" that is "active" loads just fine, but when clicking the tab to the other panes, the image is not modified by the javascript. Any thoughts? Is it a consequence of how tabs load?

The only alternative I can think of is loading content with Ajax, but I kind of like the current setup, and would love to make this work.

Answer 1

Thanks for your help Chris, you gave me the strength to carry on. Think I solved it, though I'm betting there is still a simpler way. I did the following:

1) defined functions for each map / script:

function tour1Map(){
$('#bradley').smoothZoom({
    ...
    });
};

2) added the following scripts under each tab navigation link:

<a href="#tour1_pane" data-toggle="tab" id="tour1">Link Text</a>
<script>
    $("#tour1").click(function() {
        tour1Map();
    }); 
</script>

In this way, the script is carried out right when the tab containing the images is loaded. Still not sure if "display:none" is the culprit, but it works.