Javascript dentro iframe

[Mtk-kun]

Salve a tutti genti, ho un problema che mi sta facendo impazzire, ho il seguente codice html per far scorrere contenuti a slider

<div id="wrapper">
  
  <div id="datacontent">
    <ul class="navigation">
      <li><a href="#voce1">voce 1</a></li>
      <li><a href="#voce2">voce 8</a></li>
      <li><a href="#voce3">voce 3</a></li>
      <li><a href="#voce4">voce 4</a></li>
      <li><a href="#voce5">voce 5</a></li>
      <li><a href="#voce6">voce 6</a></li>
    </ul>
    <div class="panels">
      <div id="voce1" class="panel">
        <h2>voce 1</h2>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id feugiat libero. Suspendisse potenti. Phasellus vel mauris eu felis eleifend feugiat. Curabitur placerat ipsum ut nisi fringilla id venenatis tellus gravida. Ut sagittis quam in quam iaculis at dictum orci consectetur. Nam ornare purus et ante varius quis congue eros porttitor. Fusce vitae sollicitudin massa. Morbi elementum lacinia est sit amet gravida. Aliquam mollis elit non metus lacinia egestas. Etiam a sollicitudin nunc. Quisque non laoreet nisl.</p>
      </div>
      <div id="voce2" class="panel">
        <h2>voce 2</h2>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id feugiat libero. Suspendisse potenti. Phasellus vel mauris eu felis eleifend feugiat. Curabitur placerat ipsum ut nisi fringilla id venenatis tellus gravida. Ut sagittis quam in quam iaculis at dictum orci consectetur. Nam ornare purus et ante varius quis congue eros porttitor. Fusce vitae sollicitudin massa. Morbi elementum lacinia est sit amet gravida. Aliquam mollis elit non metus lacinia egestas. Etiam a sollicitudin nunc. Quisque non laoreet nisl.</p>
      </div>
      <div id="voce3" class="panel">
        <h2>voce 3</h2>
        <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id feugiat libero. Suspendisse potenti. Phasellus vel mauris eu felis eleifend feugiat. Curabitur placerat ipsum ut nisi fringilla id venenatis tellus gravida. Ut sagittis quam in quam iaculis at dictum orci consectetur. Nam ornare purus et ante varius quis congue eros porttitor. Fusce vitae sollicitudin massa. Morbi elementum lacinia est sit amet gravida. Aliquam mollis elit non metus lacinia egestas. Etiam a sollicitudin nunc. Quisque non laoreet nisl..</p>
      </div>
      <div id="voce4" class="panel">
        <h2>voce 4</h2>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id feugiat libero. Suspendisse potenti. Phasellus vel mauris eu felis eleifend feugiat. Curabitur placerat ipsum ut nisi fringilla id venenatis tellus gravida. Ut sagittis quam in quam iaculis at dictum orci consectetur. Nam ornare purus et ante varius quis congue eros porttitor. Fusce vitae sollicitudin massa. Morbi elementum lacinia est sit amet gravida. Aliquam mollis elit non metus lacinia egestas. Etiam a sollicitudin nunc. Quisque non laoreet nisl..</p>
      </div>
      <div id="voce5" class="panel">
        <h2>voce 5</h2>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id feugiat libero. Suspendisse potenti. Phasellus vel mauris eu felis eleifend feugiat. Curabitur placerat ipsum ut nisi fringilla id venenatis tellus gravida. Ut sagittis quam in quam iaculis at dictum orci consectetur. Nam ornare purus et ante varius quis congue eros porttitor. Fusce vitae sollicitudin massa. Morbi elementum lacinia est sit amet gravida. Aliquam mollis elit non metus lacinia egestas. Etiam a sollicitudin nunc. Quisque non laoreet nisl.</p>
      </div>
      <div id="voce6" class="panel">
        <h2>voce 6</h2>
        <p>
Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
  
</div>

che utilizza il seguente codice per far scorrere i contenuti

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
   
  $('.navigation').each(function () {
    var $links = $(this).find('a'),
      panelIds = $links.map(function() { return this.hash; }).get().join(","),
      $panels = $(panelIds),
      $panelwrapper = $panels.filter(':first').parent(),
      delay = 500,
      heightOffset = 40; // we could add margin-top + margin-bottom + padding-top + padding-bottom of $panelwrapper
      
    $panels.hide();
    
    $links.click(function () {
      var link = this, 
        $link = $(this);
      
      // ignore if already visible
      if ($link.is('.selected')) {
        return false;
      }
      
      $links.removeClass('selected');
      $link.addClass('selected');
      
      document.title = $link.text();
              
      if ($.support.opacity) {
        $panels.stop().animate({opacity: 0 }, delay);
      }
      
      $panelwrapper.stop().animate({
        height: 0
      }, delay, function () {
        var height = $panels.hide().filter(link.hash).css('opacity', 1).show().height() + heightOffset;
        
        $panelwrapper.animate({
          height: height
        }, delay);
      });
    });
    
    $links.filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();
  });
</script>

quando lo uso in una normale pagina html funziona alla stragrande, ma quando lo uso per far vedere questa pagina dentro un iframe il coice funziona male, ovvero il primo contenuto non viene visualizzato, se si clicca sul secondo tutto torna a funzionare alla grande, in poche parole dentro un iframe non si visualizza il primo pannello di slide, ho provato a risolvere utilizzando sul primo pannello la voce

style="display:block;"

ma si visualizza solo il titolo, ho poi provato a modificare

heightOffset = 40

e portatlo a 100, il testo si visualizza, ma rimane una pozione bianca al fondo che non deve esserci, quindi vi chiedo, sapreste aiutarmi a far visualizzare il testo sin da subito e far funzionare lo script correttamente?

Grazie mille per l'aiuto