Results 1 to 10 of 10

Thread: Please help with Switch Menu

  1. #1
    Join Date
    Nov 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Please help with Switch Menu

    1) Script Title:
    Switch menu script

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

    3) Describe problem:
    When I click the button that makes the sub-menu appear, I prevent the content under the sub-menu from shifting down by using position:absolute in the sub-menu styles but if I resize the screen, the sub-menu moves around.

    How can I prevent the content from shifting down while also keeping the sub-menu in the same position?

    <style type="text/css">

    .menutitle{
    cursor:hand;
    margin: 2 0 5 4;
    background-color:#D4D0C8;
    color:#000000;
    width:130px;
    height: 17px;
    text-align:center;
    font-weight:bold;
    font-size: 8pt;
    border: 1px solid #000000;
    font-family: arial, verdana, helvetica, sans;
    }

    .submenu{
    margin-bottom: 0.5em;
    position:absolute;
    }

    </style>

    <script type="text/javascript">

    /***********************************************
    * Switch Menu script- by Martial B of http://getElementById.com/
    * Modified by Dynamic Drive for format & NS4/IE4 compatibility
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    if (document.getElementById){ //DynamicDrive.com change
    document.write('<style type="text/css">\n')
    document.write('.submenu{display: none;}\n')
    document.write('</style>\n')
    }

    function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
    if(el.style.display != "block"){ //DynamicDrive.com change
    for (var i=0; i<ar.length; i++){
    if (ar[i].className=="submenu") //DynamicDrive.com change
    ar[i].style.display = "none";
    }
    el.style.display = "block";
    }else{
    el.style.display = "none";
    }
    }
    }

    </script>

    </head>
    <body marginwidth=0 marginheight=0 topmargin="4">

    <table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" height="100%" bordercolor="#000080">
    <tr><td>

    <div align="center">
    <table cellpadding="0" width="796" border="1">
    <tr style="padding-top:0px;">
    <td height="418" valign="top">

    <div id="masterdiv">

    <table border="0" cellpadding="0" style="border-collapse: collapse">
    <tr>
    <td width="140" valign="top">

    <div class="menutitle" onclick="SwitchMenu('sub1')">Button 1</div>
    <span class="submenu" id="sub1">
    - <a href="new.htm">What's New</a><br>
    - <a href="hot.htm">What's hot</a><br>
    - <a href="revised.htm">Revised Scripts</a><br>
    - <a href="morezone/">More Zone</a>
    </span>

    </td>
    <td width="140" valign="top">

    <div class="menutitle" onclick="SwitchMenu('sub2')">Button 2</div>
    <span class="submenu" id="sub2">
    - <a href="notice.htm">Usage Terms</a><br>
    - <a href="faqs.htm">DHTML FAQs</a><br>
    - <a href="help.htm">Scripts FAQs</a>
    </span>

    </td>
    </tr>
    </table>

    </div>

    <div style="padding-top:45px;" align="center">

    <table border="1" width="95%" bordercolor="#808080" cellpadding="0" style="border-collapse: collapse">
    <tr class="regtext"><td><b>123123123</b></td></tr>
    <tr class="regtext"><td height="10"></td></tr>
    <tr class="boldtext"><td style="padding-left:5px;" height="20">123123123</td></tr>
    <tr class="boldtext"><td style="padding-left:5px;" height="20">123123123</td></tr>
    <tr class="boldtext"><td style="padding-left:5px;" height="20">123123123</td></tr>
    </table>

    </div>

    </td>
    </tr>
    </table>
    </div>

    </body>
    </html>

  2. #2
    Join Date
    Jul 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

  3. #3
    Join Date
    Nov 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for your suggestion but I do not want to use the other script. i would really appreciate help with the question that I asked.

  4. #4
    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

    Don't be so stubborn, if another script will do the job, use it. Also, please do not double post.
    - John
    ________________________

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

  5. #5
    Join Date
    Nov 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    > Don't be so stubborn...

    With all due respect, what kind of response is that? The name of this forum is Dynamic Drive scripts help.

    Why not just respond with "Hey, if you can't figure it out yourself, don't use it!"

    Also, sorry about the double-posting but was hoping for a better response.

  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

    Well, forget about the 'don't be so stubborn' part then. The real help was contained in this part of my post:

    if another script will do the job, use it
    - John
    ________________________

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

  7. #7
    Join Date
    Jan 2005
    Location
    Seattle
    Posts
    53
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    shouldn't using:

    onresize="location.reload()"

    do the trick?

  8. #8
    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

    Quote Originally Posted by speedracer
    shouldn't using:

    onresize="location.reload()"

    do the trick?
    That won't work in FF. Also, if you are having a problem with your layout so extreme that it requires the above to fix it, you need to redesign your layout. However, generally whatever was 'put right' when the page originally loaded, can be 'put right' again onresize, it just takes a little thought to see what needs to be measured and what needs to be adjusted according to that measurement's value, a full page reload is rarely needed. Still, if one can avoid messing with the onresize event by using a different but similar script, that is the way to go.
    - John
    ________________________

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

  9. #9
    Join Date
    Jan 2005
    Location
    Seattle
    Posts
    53
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1
    That won't work in FF.

    good point. but the code above shouldn't have the problem described in FF. onresize should be a quick fix for IE.

  10. #10
    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

    Quote Originally Posted by speedracer
    good point. but the code above shouldn't have the problem described in FF. onresize should be a quick fix for IE.
    Absolute positioning used to arbitrarily place items on a page in reference to the window's edges will often cause items to appear in unexpected places when any browser is resized, especially if left, top and/or values of dimensions of other elements on the page are in percentage units. In the case of element sizes, this is even likely with absolute positioning in relation to an element. Absolute positioning (outside a suitable container) is in relation to the browser window. To avoid this, its use should generally be limited to within relatively positioned elements of fixed dimensions.
    - John
    ________________________

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

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
  •