Drop down/Overlapping Content div shifts when page is centered and browser is resized

[newyorker2]

1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...lapcontent.htm

3) Describe problem: Hi guys, i have a weird problem with the beatiful Drop down/ Overlapping Content script.

please see my test page here
http://72.44.80.146/~wat/overlap/test.html


click on the email tool button

while the dropped content is visible, try to resize your browser window.
as you can see the dropped content div shifts and it looks bad.

the problem is i think with the page centering, because if i remove the

 
<div align="center">

from line 10, dropped content div doesn't shift.

unfortunately i need the page centered. is there any way for me to keep the page centered and the dropped content div not shifting when resizing the browser window?

thank you, i appreciate your help.
frank

[ddadmin]

I don't see any shifting of the Drop Down DIV in IE7 and FF3.x actually. As long as the DIV carries the required position:absolute CSS attribute, there shouldn't be an issue.

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

[newyorker2]

thanks for checking out my problem

please try again to reproduce the issue.
i was testing something.

http://72.44.80.146/~wat/overlap/test.html



*DD credit is in the js file, and now in the html.

[newyorker2]

to be more clear I created 2 instances:


page centered: (with the issue)
http://72.44.80.146/~wat/overlap/test.html

while the dropped content is visible, try to resize your browser window.
as you can see the dropped content div shifts and it looks bad.

----

page not centered (no issue)
http://72.44.80.146/~wat/overlap/test_nocenter.html


basically i want the page centered, and when the browser window is resized i want the button and div aligned.

thank you fr your time

[newyorker2]

i tried to add something like this to the js but didn't work.
i am sure there must be an easier fix.

testing:function(activeobj, subobj, e){
  this.hide(activeobj, subobj, e)
  this.show(anchorobj, subobj, e)
 },

 hidediv:function(subobjid){
  document.getElementById(subobjid).style.visibility="hidden"
 },

 ajaxconnect:function(pageurl, divId){
  var page_request = false
  var bustcacheparameter=""
  if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
   page_request = new XMLHttpRequest()
  else if (window.ActiveXObject){ // if IE6 or below
   try {
   page_request = new ActiveXObject("Msxml2.XMLHTTP")
   }
   catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
   }
  }
  else
   return false
  document.getElementById(divId).innerHTML=this.ajaxloadingmsg //Display "fetching page message"
  page_request.onreadystatechange=function(){dropdowncontent.loadpage(page_request, divId)}
  if (this.ajaxbustcache) //if bust caching of external page
   bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
  page_request.open('GET', pageurl+bustcacheparameter, true)
  page_request.send(null)
 },

 loadpage:function(page_request, divId){
  if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
   document.getElementById(divId).innerHTML=page_request.responseText
  }
 },
 init:function(anchorid, pos, glidetime, revealbehavior){
  var anchorobj=document.getElementById(anchorid)
  var subobj=document.getElementById(anchorobj.getAttribute("rel"))
  var subobjsource=anchorobj.getAttribute("rev")
  if (subobjsource!=null && subobjsource!="")
   this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
  subobj.dropposition=pos.split("-")
  subobj.glidetime=glidetime || 1000
  subobj.style.left=subobj.style.top=0
  if (typeof revealbehavior=="undefined" || revealbehavior=="mouseover"){
   anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
   anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e)}
   if (this.disableanchorlink) anchorobj.onclick=function(){return false}
  }
  else
  {
   anchorobj.onclick=function(e){dropdowncontent.show(this, subobj, e); return false}

[newyorker2]

i was able to fix it.

i can post the fix if anyone else is having the same problem.

[manGod]

1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...lapcontent.htm

Hello, newyorker2...
I realize it's been several months since you fixed your issue, but I've only recently implemented the script and am having the same problem with the DIV shifting when the browser is resized (the further to the right the browser is opened, the further to the right the DIV appears). It does it in FF, IE and Safari.

Could you please post and explain your fix?
Thanks!