Results 1 to 4 of 4

Thread: Overlapping Content Link

  1. #1
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Overlapping Content Link

    Overlapping Content Link
    http://www.dynamicdrive.com/dynamici...lapcontent.htm

    Hello, great script...just wanted to know how I can change the location of where the popup appears on the page. Perhaps in the center of the screen? Is this possible? If not, can I set an absolute px location instead?

    Thanks,
    Martin

  2. #2
    Join Date
    Feb 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Me too...

    I've been trying to figure this out as well. Specifically, I'd like to have the popup calculate the user's screen width/height and then center itself accordingly.

    Here is the offset function code from the script on dynamic drive:

    Code:
    function getposOffset(overlay, offsettype){
    var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
    var parentEl=overlay.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    function overlay(curobj, subobj){
    if (document.getElementById){
    var subobj=document.getElementById(subobj)
    subobj.style.left=getposOffset(curobj, "left")+"px"
    subobj.style.top=getposOffset(curobj, "top")+"px"
    subobj.style.display="block"
    return false
    }
    else
    return true
    }
    
    function overlayclose(subobj){
    document.getElementById(subobj).style.display="none"
    }
    I was trying to figure this out on my own by researching javascript offsets...and from what I understand, the offset is being calculated from where the offsetParent is....which is where the function is being called from (in this case, the link that opens the popup)? Though I read that offsetParent isn't supported in some browsers...or that they define it differently.

    The more I try to figure it out...the more of a headache I get.

    It would be awesome of someone could send an example of how I could go about making this centered....

    Thanks!

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

    Default

    Well, the whole point of the script was for the content to overlap the link that initiated it, so any position changes you made were relative to the link. Anyhow, below is the modified version of the original Content Overlay script that centers the content on the page instead:

    Code:
    <script type="text/javascript">
    
    /***********************************************
    * Center of Page Content link- &#169; Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for legal use.
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
    }
    
    function centerLay(box, type){
    var firefox=document.getElementById&&!document.all
    var posX=firefox? pageXOffset+window.innerWidth/2-box.offsetWidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-box.offsetWidth/2
    var posY=firefox? pageYOffset+window.innerHeight/2-box.offsetHeight/2 : ietruebody().scrollTop+ietruebody().clientHeight/2-box.offsetHeight/2
    if (type=="left")
    return posX
    else
    return posY
    }
    
    function overlay(curobj, subobj){
    if (document.getElementById){
    var subobj=document.getElementById(subobj)
    subobj.style.left=centerLay(subobj, "left")+"px"
    subobj.style.top=centerLay(subobj, "top")+"px"
    subobj.style.visibility="visible"
    return false
    }
    else
    return true
    }
    
    function overlayclose(subobj){
    document.getElementById(subobj).style.visibility="hidden"
    }
    
    </script>
    
    <body>
    
    <b><a href="search.htm" onClick="return overlay(this, 'subcontent')">Search DD</a></b><br />
    
    <!--Sub content to overlay link when clicked on. Do not remove outermost <div id="subcontent"> tag below. -->
    <DIV id="subcontent" style="position:absolute; visibility: hidden; top: 0">
    
    <div style="border: 9px solid orange; background-color: white; width: 300px; padding: 8px">
    <p><b>Search Dynamic Drive:</b></p>
    <form method="get" action="http://search.freefind.com/find.html" id="topform">
    <input type="HIDDEN" NAME="id" SIZE="-1" VALUE="6299074" />
    <input type="HIDDEN" NAME="pageid" SIZE="-1" VALUE="r" />
    <input type="HIDDEN" NAME="mode" SIZE="-1" VALUE="ALL" />
    <input type="HIDDEN" name="n" value="0">
    <input name="query" maxlength="255" style="width: 150px" id="topsearchbox" alt="Search" /> 
    <input value="Search" class="topformbutton" type="submit" />
    </form>
    <div align="right"><a href="#" onClick="overlayclose('subcontent'); return false">Close</a></div>
    </div>
    
    </DIV>
    
    <p><b><a href="search.htm" onClick="return overlay(this, 'subcontent2')">Another example</a></b><br /></p>
    
    <!--Sub content to overlay link when clicked on. Do not remove outermost <div id="subcontent2"> tag below. -->
    <DIV id="subcontent2" style="position:absolute; visibility: hidden; top: 0">
    
    <div style="border: 9px solid black; background-color: lightyellow; width: 400px; height: 400px; padding: 8px">
    Some content. Some content.
    <div align="right"><a href="#" onClick="overlayclose('subcontent2'); return false">Close</a></div>
    </div>
    
    </DIV>
    The installation instructions for this script is exactly the same as the original script as far as what goes in the HEAD, in the BODY, and how to designate the overlay content.

  4. #4
    Join Date
    Feb 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thats Fantastic! Thanks for the info. Maybe some of this can be added/linked to the page listing this script?

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
  •