Jquery Ui - effect callback function

Jquery Ui - effect callback function

Hi,

I'm trying to use jquery ui effects but i'm not able to show the page once it is load with an jquery ui

here sample page: (clickable buttons are grafici and strumenti)

http://ugom.comuf.com/


I suppose I need to make an callback function but i'm not able make it

Regards

Ugo

  1. <!DOCTYPE html>
    <html lang="it">
     
      <head>
       
        <meta charset="utf-8" />
       
        <!-- Html 5 e CSS3 -->
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -->
       
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

        <title>Ugo Internet server - dati in diretta</title>
        <meta name="description" content="Sito internet di Ugo Merlini - dati storici"/>
        <meta name="author" content="Ugo Merlini"/>

        <meta name="viewport" content="width=device-width; initial-scale=1.0"/>

        <!-- Styles -->
       
        <link rel="stylesheet" type="text/css" href="../../../file_comuni/javascript/jquery_ui/css/jquery-ui.css"/>
        <link rel="stylesheet" type="text/css" href="../../../file_comuni/css/pagina_stazione_meteo_dati_in_diretta.css"/>
         
         
        <!-- Jquery javascript -->
     
        <script type="text/javascript" src="../../../file_comuni/javascript/jquery/jquery-1.8.2.js"></script>
       
        <!-- Jquery-ui javascript -->
       
        <script type="text/javascript" src="../../../file_comuni/javascript/jquery_ui/jquery-ui-1.9.1.js"></script>
       
        <script>
          $(function() {
            $( "#menu" ).menu();
          });
        </script>
         
        <script>
          $(document).ready(function() {
             
            $('a.button').button ({    });
           
          });
         
        </script>
          <script type="text/javascript">
     
    $(function() {
     $("#bouncebutton").click(function() {
     
      $("#iframe_dati_in_diretta").effect("slide", { direction: "right" }, 4000,  callback);
     });
     
     function callback() {
                setTimeout(function() {
                    $( "#iframe_dati_in_diretta" ).show();
                }, 1 );
            }; 
     
    });

    $(function() {
     $("#bouncebutton1").click(function() {
     
      $("#iframe_dati_in_diretta").effect("slide", { direction: "right" }, 1000,  callback);
     });
     
     function callback() {
                setTimeout(function() {
                    $( "#iframe_dati_in_diretta" ).removeAttr( "style" ).hide().fadeIn();
                }, 1000 );
            };
     
    });
     
    </script>
          
      </head>
     
      <body>
         
          <div id="box_dati_in_diretta">
             
             <nav id="nav_dati_in_diretta">   
            
               <ul id="menu" class="ui-widget-header">
                  
                   <li><a href="strumenti/index.html" target="iframe_b">????</a></li>
                   <li><a href="grafici/grafici.php" target="iframe_b">???</a></li>   
                      
             </ul>
           
              <ul id="toolbar" class="ui-widget-header ui-corner-all">
                  
                     <a href="strumenti/index.html" class="button" target="iframe_b" id="bouncebutton1">Strumenti</a>
                     <a href="grafici/grafici.php" class="button" target="iframe_b" id="bouncebutton">Grafici</a>   
                      
             </ul>
           
           </nav>
         
          <section id="section_dati_in_diretta">
        
            <iframe name="iframe_b" id="iframe_dati_in_diretta"></iframe>
       
          </section> 
         
        </div>
       
      </body>
     
    </html>