Results 1 to 7 of 7

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

  1. #1
    Join Date
    Jun 2008
    Posts
    40
    Thanks
    9
    Thanked 0 Times in 0 Posts

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

    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
    Code:
     
    <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

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    newyorker2 (03-05-2009)

  4. #3
    Join Date
    Jun 2008
    Posts
    40
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #4
    Join Date
    Jun 2008
    Posts
    40
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #5
    Join Date
    Jun 2008
    Posts
    40
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

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

    Code:
    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}

  7. #6
    Join Date
    Jun 2008
    Posts
    40
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    i was able to fix it.

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

  8. #7
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •