setting position dynamically

Question

I want to have the popup and then hiding and showing of this.This is completed and then I have made the label dynamic and with that label the popup is showing but now my main problem is this to set the popup with the screen as when the screen get moved the popup will see the size of screen and it adjust according up/down. I have tried out with finding of offsetHeight, offsetWidth of popup but it is not working properly. please help if you have any idea.I am providing the code so that you can understand my problem.

       public static native void hello()
        /*-{

                 var id=Math.floor((Math.random()*100)+1); 
                 var label=$doc.createElement("Label");
                var labelText = $doc.createTextNode("CLICK ME :: "+id);
                label.id=id;

               label.appendChild(labelText);

               body.appendChild(label);     

              var popup=$doc.createElement("div");
              var popuptext=$doc.createTextNode(".....");
              popup.className="pop";

              popup.appendChild(popuptext);

                     var hideDelayTimer=null;
                     var hideDelay=100;

        label.addEventListener("mouseover",function(e)
                     {      


                 if(hideDelayTimer)
                 clearTimeout(hideDelayTimer);
                 label.appendChild(popup);
                 var position= popup.offsetTop;
                 var width=popup.offsetWidth;
                 var width1=label.offsetWidth;
                 var position1=label.offsetHeight;
                 var position2=label.offsetTop;
                 var positionpop=popup.offsetHeight;

                 height=position-positionpop;

                 if(height<=0||height<positionpop)
                 {
                     alert("no change");
                 }

                 else
                 {   
                       hehe=height-80;
                       alert(hehe);
                      if(height>0 && height>=positionpop)
                      { 
                        popup.setAttribute("style","top:"+hehe+"px");
                        alert("bye");
                      }
                 }

          });

         label.addEventListener("mouseout",function()
           {

                  hideDelayTimer=setTimeout(function()
                 {
                      label.removeChild(popup);

                 },hideDelay);

           });   
    }-*/;

This is my css code.

         .pop
    {
        border:1px solid black ;
        width:500px;
        height:140px;
       background-color: #d1d4d5;
       position:absolute;
       z-index: 1;
       cursor:pointer;
    }       

Answer 1

There is one problem in your code. You can't refer body directly in GWT JSNI. For more info have a look at Writing Native JavaScript Methods in GWT

Use

$doc.body.appendChild(label);

instead of

body.appendChild(label);

---

--EDIT--

Sample code:

label.addEventListener("mouseover", function(e) {

    if (hideDelayTimer)
        clearTimeout(hideDelayTimer);
    label.appendChild(popup);

    var labelHeight = label.offsetHeight;
    var labelTop = label.offsetTop;
    var windowHeight = $wnd.innerHeight;
    var popupHeight = popup.offsetHeight;

    if (labelTop + labelHeight + popupHeight > windowHeight) {
        popup.setAttribute("style", "top:" + (labelTop - popupHeight)
                + "px");
    }

});