Results 1 to 3 of 3

Thread: DD/Overlapping Content

  1. #1
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DD/Overlapping Content

    1) Script Title: DD Overlapping Content

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

    3) Describe problem:
    This is a great piece of code, I however seem to have a problem, I have been trying to use this script to generate overlapping content, When I put it on an empty the page the location of the overlapping content appears ok, but when I put it in my page with divs that define page layout the overlapping content appears in an unexpected area, see this url http://mail.utuagencies.com/drop.php Is there something I need to do for the drop down to appear where I expect it?

    Forgive me I am poor in using javascript.

    gmbiggie

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    first you have duplicate ID names 'wrapper'

    but try this

    Code:
     <div id="header" style="position: relative; height: 50px; border: solid 1px red;"></div>
      <div id="wrapper" style="position:relative; top: 5px; height: 580px; border: solid 2px green; padding: 5px;">
       <div id="leftCol" style="position: absolute; height: 565px; padding: 5px; left: 5px; width: 200px; border: solid 1px grey; top: 5px; padding: 5px">
       </div>
       <div id="rightCol" style="position: absolute; padding: 5px; left:220px; width: 600px;">
        <div id="_wrapper">
         <div id="prod_1">
          <div class="_Image">
            Image Location<br><a href="" id="searchlink24" rel="subcontent24">more Values</a>
         </div>
         <div class="_Data">
          <div class="_Title">Title & Values</div>
        </div>
    </div><!-- close  div -->
    </div> <!-- close wrapper--></div>
    	</div>
    </div>
    <div id="footer" style="position: relative; height: 50px; top: 10px; border: solid 1px blue;"></div>
          <div id="subcontent24" style="position:absolute; visibility: hidden; border: 1px solid orange; background-color: white; width: 200px; padding: 8px;">
           <ul>
            <li>value 2</li>
            <li>Value 3</li>
            <li>Value 4</li>
           </ul>
          </div>
    	<script type="text/javascript">
    //Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
    	dropdowncontent.init("searchlink24", "left-bottom", 400, "mouseover")
    </script>
    with the note un nested
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    @vwphillips

    Thanks for the observation, I have put an underscore before the second wrapper. I am still having a problem with the position of the values I dropdown.

    I found another tool that works great on javascriptkit.com and when I put it into the page it worked fine

    http://www.javascriptkit.com/script/script2/jScale/

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
  •