Question

I tried making several jQuery content slider and carousel scripts, working with iframe, without success.

The iframe contains Google charts and are generated by a Ruby plugin ( google_visualr )… you can see what HTML is generated :

  <div class='carousel_charts'>
    <ul>
      <li id='bar_chart'>

        <script type='text/javascript'>
          google.load('visualization','1', {packages: ['corechart'], callback: function() {
            var data_table = new google.visualization.DataTable();data_table.addColumn('date', 'Date');data_table.addColumn('number', 'Refinery');data_table.addColumn('number', 'Locomotive');data_table.addColumn('number', 'Comf. Mexican Sofa');data_table.addColumn('number', 'Nesta');data_table.addRow([{v: new Date(2011, 10, 21)}, {v: 123}, {v: 3}, {v: 16}, {v: 12}]);data_table.addRow([{v: new Date(2011, 10, 22)}, {v: 130}, {v: 1}, {v: 9}, {v: 22}]);data_table.addRow([{v: new Date(2011, 10, 23)}, {v: 155}, {v: 2}, {v: 15}, {v: 8}]);data_table.addRow([{v: new Date(2011, 10, 24)}, {v: 118}, {v: 3}, {v: 3}, {v: 11}]);data_table.addRow([{v: new Date(2011, 10, 25)}, {v: 99}, {v: 2}, {v: 7}, {v: 11}]);data_table.addRow([{v: new Date(2011, 10, 26)}, {v: 58}, {v: 0}, {v: 1}, {v: 16}]);data_table.addRow([{v: new Date(2011, 10, 27)}, {v: 45}, {v: 0}, {v: 1}, {v: 5}]);
            var chart = new google.visualization.BarChart(document.getElementById('bar_chart'));
            chart.draw(data_table, {width: 860, height: 540, title: 'Ruby CMS Diffusion', vAxis: {title: 'Last week', titleTextStyle: {color: 'red'}}, oAxis: {title: 'RubyGems Downloads', titleTextStyle: {color: 'red'}}});
          }});
        </script>

      </li>
      <li id='geo_chart'>

        <script type='text/javascript'>
          google.load('visualization','1', {packages: ['geochart'], callback: function() {
            var data_table = new google.visualization.DataTable();data_table.addColumn('string', 'Country');data_table.addColumn('number', 'Popularity');data_table.addRow([{v: 'Germany'}, {v: 200}]);data_table.addRow([{v: 'United States'}, {v: 300}]);data_table.addRow([{v: 'Brazil'}, {v: 400}]);data_table.addRow([{v: 'Canada'}, {v: 500}]);data_table.addRow([{v: 'France'}, {v: 600}]);data_table.addRow([{v: 'RU'}, {v: 700}]);
            var chart = new google.visualization.GeoChart(document.getElementById('geo_chart'));
            chart.draw(data_table, {width: 860, height: 540});
          }});
        </script>
      </li>
      <li id='scatter_chart'>

        <script type='text/javascript'>
          google.load('visualization','1', {packages: ['corechart'], callback: function() {
            var data_table = new google.visualization.DataTable();data_table.addColumn('number', 'Age');data_table.addColumn('number', 'Weight');data_table.addRow([{v: 8}, {v: 12}]);data_table.addRow([{v: 4}, {v: 5.5}]);data_table.addRow([{v: 11}, {v: 14}]);data_table.addRow([{v: 4}, {v: 4.5}]);data_table.addRow([{v: 3}, {v: 3.5}]);data_table.addRow([{v: 6.5}, {v: 7}]);
            var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
            chart.draw(data_table, {width: 860, height: 540, title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none'});
          }});
        </script>
      </li>
    </ul>

  </div>

… here it is the same code seen from FireBug.

I want to slide the three google <script type='text/javascript'> injected into respective selectors <li id='bar_chart'> <li id='geo_chart'> <li id='scatter_chart'> ( see the previous code ).

I’m trying to use this jQuery carousel script to slide html iframe contents but it doesn’t works. The js is the following :

$(function(){
  // Looping carousel
  $("div.carousel_charts").carousel( { autoSlide: true, pagination: true } );
});

which is based on jquery.carousel.min.js. I’m currently using Rails-3.1.3 but pipelining works fine and this seems a more general js issue.

No idea of what’s wrong with that ( but I’m not a ‘frontend developer’ )

Any Idea ?

Answer 1

Luca,

From what i’ve seen after playing with the code you’ve passed in question, you can solve the issue by specifying some elements’ sizes with the CSS like this:

<style>
  #bar_chart, #geo_chart, #scatter_chart {
     height: 320px;
     width: 240px;
     display: block;
     float: left;
  }
  .carousel_charts ul {
     display: block;
     margin: 0;
     padding: 0;
  }
  .carousel-wrap {
     width: 240px;
  }
</style>

After applying above rules there is no need of specifying Google Chart size, so you can skip {width: 860; height: 540} from any chart.draw() call. Here is my result page code for your reference: http://pastebin.com/x0tpz1dq

Please note – chart sizes are changed for illustration purpose.