Results 1 to 7 of 7

Thread: Overlapping Content Link

  1. #1
    Join Date
    Jul 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Overlapping Content Link

    Hi!
    I have a one question about that script.
    When i click on a link in the page, popup is apear at right side (how i wont),
    in that popup i have a link and when i click on that link, it need to open another popup.
    I was try but without success.

    you can look on: www.petar-zulj.iz.hr

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Part of your problem is that you have allowed your editor to insert line breaks in the HTML code where they do not belong. Either that, or you put them in there yourself. Anyways, the below page is a working example of a nested overlapping content link. Copy and paste it into notepad with word wrap turned off and save it as:

    demo.htm

    View it in the browser:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <base href="http://www.petar-zulj.iz.hr/" />
    <style type="text/css">
    <!--
    body {
    	background-color: #14285F;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 0.9em;
    	padding: 0px;
    	margin-top: 100px;
    	margin-right: 0px;
    	margin-bottom: 100px;
    	margin-left: 50px;
    }
    #mylink1 {
      text-indent:-100em;  /* image replacement Mike Rundle style */
      text-decoration:none;  /* potrebno da se skine underline */
      display:block;
      width:224px;
      height:46px;
      background: white url(http://www.petar-zulj.iz.hr/slike/01.gif) no-repeat;
    }
    #mylink1:hover {
    	background-image: url(http://www.petar-zulj.iz.hr/slike/02.gif);
    }
    #mylink1:active {
    	background-image: url(http://www.petar-zulj.iz.hr/slike/02.gif);
    }
    #subcontent2 {
    	margin-left: 240px;
    	margin-top: -30px;
    }
    
    -->
    </style>
    <script type="text/javascript">
    <!--
    
    
    
    /***********************************************
    * Overlapping 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 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"
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    //-->
    </script>
    </head>
    
    <body>
    
    <p><b><a href="search.htm" id="mylink1" 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; display:none">
    <div style="border: 9px solid black; background-color: lightyellow;width: 400px; height: 400px; padding: 8px">
      <b><a href="search.htm" onClick="return overlay(this, 'subcontent')">Search DD</a></b><br />
    
    
    <div align="right"><a href="#" onclick="overlayclose('subcontent2'); return false">Close</a></div>
    </div>
    </DIV>
    
    <!--Sub content to overlay link when clicked on. Do not remove outermost <div id="subcontent"> tag below. -->
    <DIV id="subcontent" style="position:absolute; display:none">
    
    <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>
    
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi jscheuer1.
    Thanks you so much for helping me about this, it works perfect.
    But i have another question. What if i have two links in that popup window one is Search DD another is Sarch DD2 and when
    i click on Search DD,it will open a new popup window like you show me, but i dont know when i have another link Search DD2 how to make
    to opent that link in a new window. (Search DD l Search DD2)

    I was try to put that Search DD2 in :
    HTML Code:
    <DIV id="subcontent2" style="position:absolute; display:none">
    <div style="border: 9px solid black; background-color: lightyellow;width: 400px; height: 400px; padding: 8px">
      <b><a href="search.htm" onClick="return overlay(this, 'subcontent')">Search DD</a>&nbsp;l<DIV id="subcontent2"....
    Search DD2</b><br /></a>....
    But it is not working
    Sorry if i bother you with this.
    Regards.

  4. #4
    Join Date
    Jul 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi!
    I just wont to say that im slove the problem.

  5. #5
    Join Date
    Jul 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi!

    jscheuer1 please i need your help, i have a problem with this overlapping script.

    In the code of that script there is a line of code: <div align="right"><a href="#" onClick="overlayclose('subcontent'); return false">Close</a></div> to close a window.

    I was tray but i dont know how to put a little roolover picture efect in it, and when somebody click on it that he can close that window.

    I put a one picture in the place where is word "Close" and run it in browser, it is working but then i got a border around that picture and dont know how to remove it.

    Regards.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    To remove a border from a linked image use the border="0" attribute in the image tag:

    HTML Code:
    <img src="whatever.gif" border="0">
    To add a simple rollover to any ordinary image:

    HTML Code:
    <img src="whatever.gif" border="0" onmouseover="this.src='someother.gif';" onmouseout="this.src='whatever.gif';">
    It would be a good idea to preload the rollover image in the head of the page like so (simple preload image routine):

    Code:
    <script type="text/javascript">
    var newI1=new Image();
    newI1.src='someother.gif';
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    jscheuer1 thank you for help me again.
    I was put what you was say and it is working ok.
    Thank you again.

    P.S. I will post a link to web page when i finish it.

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
  •