Panel wait : Progress Dialog : Ajax Layer JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Progress Dialog »

 

Panel wait




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.Panel</title>

<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<script type="text/javascript" src="./build/connection/connection.js" ></script>

<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css" />

<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />

<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>

<style>

#wait .bd {
  padding:10px 0;
  text-align:center;
}

#content {
  margin-top:50px;
  border:1px solid #CCC;
  background-color:white;
  width:400px;
  height:250px;
  margin-left:auto;
  margin-right:auto;
  padding:10px;
}
</style>

<script language="javascript">

  YAHOO.namespace("example.panel");


  function init() {
    YAHOO.example.panel.wait = 
        new YAHOO.widget.Panel("wait"
                width:"240px"
                  fixedcenter:true, 
                  underlay:"shadow"
                  close:false, 
                  draggable:false, 
                  modal:true, 
                  effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration:0.5
                  
                 );

    YAHOO.example.panel.wait.setHeader("Loading, please wait...");
    YAHOO.example.panel.wait.setBody("<img src="http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif"/>");

    YAHOO.example.panel.wait.render(document.body);

    var callback = {
      success : function(o) {
        document.getElementById("content").innerHTML = o.responseText;
        YAHOO.example.panel.wait.hide();
      },
      failure : function(o) {
        document.getElementById("content").innerHTML = "CONNECTION FAILED!";
        YAHOO.example.panel.wait.hide();
      }
    }

    YAHOO.example.panel.wait.show();

    var conn = YAHOO.util.Connect.asyncRequest("GET""php/somedata.php?r=" new Date().getTime(), callback);
  }

  YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>

<div id="content"></div>

</body>
</html>

           
       

Download : Download nav_yui.zip nav_yui.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Ajax Layer
» Progress Dialog