Help with Div Tag.

[learnerasp]

Hi there,

I have a div tag and working fine till yesterday. Just now I found out a problem which has to be rectified quickly.

I have a div tag. When time out is approaching then we need to pop up the message using div tag. Everything is working fine.

But on the page, where is the div tag is created, at the run time, it is showing the empty space.
How can I remove the empty space (div tag is invisible) on the page.
When I have used style="position: absolute;" the div tag is not shown when the user scrolls down the browser.
So with the help of ppl in this forum, I hv changed to style="position: fixed;"

The same code is working in the other page (it is not showing empty space). But on another page it is showing empty space. The div code is same all through out. I am not able to make out why the same code is working differently on different pages.

The code I have used is:
Div Tage Code:

<div onload="blurAll();"  id="userMessage" style="position: fixed; background-color:ButtonFace; z-index: 1; display: block; top: 307px; left: 304px; 
                            visibility:hidden; border: 3px solid blue; width: 383px;">  
       <table style="width: 388px; height: auto; background-color:Blue;"> 
       <thead align="left" title="Registration - Warning">
                <tr>
                    <td style="color:White;">Registration - Warning
                    </td>
                </tr>
       </thead>
       </table>                                               
       <table style="width: 388px; height: auto; background-color:ButtonFace;"> 
             <tr> <td><img src="triangle.jpg"id="img"  alt="warning" /></td>
         <td>
           You are inactive for sometime. Your session will expire in 5 min.<br />
           Do you wish to extend?
         </td>
         </tr>                           
          <tr><td></td><td align="center">
          <asp:Button CssClass="groupButton" ID="btnStillHere" OnClientClick="doRefresh()" Text="OK"  runat="server" Width="60px" />
          <input type="button" class="groupButton" id="btnDoNothing" onclick="hideUserMessage()"  value= "Cancel" runat="server" />
          </td> </tr> 
          </table>
        </div>

Java Script used to show and hide message.
Some code is in .net. where I call the javascript function.

<script language="javascript" type="text/javascript">        
function doRefresh()
{
    javascript:__doPostBack(''); 
 }
 function donothing()
 {
 
 }
 //window.location.href=window.location.href; } 
 function doRedirect()
 { 
 setObjectVisibility("userMessage","hidden");    
 setObjectVisibility("exitMessage","visible");
// setTimeout(1000);
 //window.location.href='loginPage.aspx'; 
 } 
 function RedirectPage()
 {
    window.location.href='loginPage.aspx'; 
 }               
 function getStyleObject(objectId) 
 {
        // checkW3C DOM, then MSIE 4, then NN 4. 
        if(document.getElementById && document.getElementById(objectId)) 
              return document.getElementById(objectId).style;
         else if (document.all && document.all(objectId))
               return document.all(objectId).style;
         else if (document.layers && document.layers[objectId]) 
               return document.layers[objectId];
         else             	            
            return false;                    
}       
function setObjectVisibility(objectId, newVisibility) 
{
  var styleObject = getStyleObject(objectId);
  if (styleObject)             
  {	            
    styleObject.visibility = newVisibility;	 
    return true;            
  }             
  else             	            
    return false;                    
}        
function showUserMessage() 
{
      setObjectVisibility("userMessage","visible");  
      window.focus=false;     
}
function hideUserMessage()        
{
       setObjectVisibility("userMessage","hidden");        
}

function blurAll()
{
    alert("blur");
    window.blur();
}

 </script>

pls help me. Its quite urgent.
Thanks a lot in advance.
Regards

[Airshow]

Learnerasp,

Style your div with position:absolute; display:none; then show/hide it in javascript with: divObj.display = 'block'; divObj.display = 'none'; where divObj is the DOM reference to the div in question (use eg. document.getElementById(id) to discover it).

Airshow

[Luckychap]

Learnerasp,

Style your div with position:absolute; display:none; then show/hide it in javascript with: divObj.display = 'block'; divObj.display = 'none'; where divObj is the DOM reference to the div in question (use eg. document.getElementById(id) to discover it).

Airshow

Correction: divObj.style.display = 'block'; divObj.style.display = 'none';

[Airshow]

Thanks Lucky, I posted that in a real hurry yesterday when I should have been out the door and on my way to <yuk>work</yuk>.

Airshow

[learnerasp]

Hi Airshow and Lucky,
Thanks a lot for your help.
But unfortunately, my problem is still there.
The div tag is still show at the top of the page at run time where i hv placed it.
When I have used to example it is shown and hidden but not at the center of the browser.
The part where I am lost is that the same code is working in the previous page. In this page, I have only a gridview extra.
Can you pls help me out. Its rather very urgent :(
This has to go to production by monday night and I hv two days left and trying hard to work on it.
Thanks so much for your help and time
Thanks a lot in advance
Regards

[Airshow]

Learnerasp,

Having re-read your original post, I can only suggest a strategy:

• Remove all displayed content from your page. Test.
• Replace content a piece at a time. Test.

If the popup message is working on other pages then I guess it's some interaction between it and the gridview (duplicate id?).

By the way, I don't recommend relying on position:fixed . I understand it's not supported by IE6 - probably some 15% of internet users (including me much of the time). I would use old fashioned clientX, clientY in javascript to drive the div to screen center.

Alternatively ....

Open a window ( var foo = window.open(....); ) . To populate it with your message set the message in the popup's query string (eg. popup.php?m=this%20is%20my%20message ) and build the html server-side (assuming php, use $_POST).

This is reasonably trivial and will buy you time. Deliver the div at release 1.1.

Use these functions to unsure an unclosed popup window comes to the front:

function queryWin(w){ return !(w===null||w.closed||typeof w=="undefined"); }
function focusWin(w){ if(w.blur){ w.focus(); } }
function openPopup(pageURL){
	if(!pageURL) { return false; }
	if(queryWin(wPopup)) { return true; }
	else {
		var ff  = "width=650,height=550,left=150,top=10,scrollbars=no,resizable";//Adjust according to what you want
		wPopup = window.open(pageURL, "wPopup", ff);
		return true;
	}
}

openPopup(pageURL) opens a new window or brings a previously opened window to the front, loaded/reloded with pageURL.

Good luck.

Airshow

[Airshow]

.... (assuming php, use $_POST).

"$_POST" should read "$_GET".

Use these functions to unsure an unclosed popup window comes to the front:

"unsure" should read "ensure"