Results 1 to 9 of 9

Thread: Tabs Menu (mouseover) wont work in when absolutely positioned?

  1. #1
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Tabs Menu (mouseover) wont work in when absolutely positioned?

    1) Script Title:
    Tabs Menu (mouseover)

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

    3) Describe problem:
    Hi Guys,
    I am having a problem with getting the above script to work. I am guessing that it has something to do with the fact that the container the nav is in is using absolute positioning to place all the elements. I tried using z-index as i thought this would fix it, but no matter what i do, when its in the main containing div it wont work.

    I tested it in the content div and it works fine, so its only in the top absolute div.

    I have posted the site here:
    http://flameofafrica.com/base/nav-test.html

    Any ideas would be very much appreciated!!!!

    Thanks,
    Chris

  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

    Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.


    Your problem appears to be that in addition to making the script external, you have placed it in the wrong spot on the page (from my guidelines, see bold):

    Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:

    HTML Code:
    <script src="some.js" type="text/javascript"></script>
    Common problems arise when:

    1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:

    HTML Code:
    <script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>
    2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:
    Code:
    <script>
    <!--
    and
    Code:
    //-->
    </script>
    and any of their many variations from the beginning and end of the external file.

    3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

    4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:

    Code:
    http://www.somedomain.com/images/button.gif
    
    http://www.somedomain.com/~mysitename/index.html
    5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

    A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

    One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex:

    HTML Code:
    <script src="some.js" type="text/javascript">
    /***********************************************
    * IFrame SSI script II-  Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    * Visit DynamicDrive.com for hundreds of original DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    </script>
    Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters without which the script won't function.
    - John
    ________________________

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

  3. #3
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    Thanks for taking the time to reply!

    In response to your comments:
    1.) Credits not intact
    I have not modified the credits at all and they are still exactly the same as on the scripts page. I did not realise though, that the credits should appear with the js link too. I will ammend the link to include the credits now

    2.) JS in an external file
    I specifically did that because i was told by our SEO guru that we should avoid have js directly in the sites page, but rather link to an external file. I tested it first inside the page and it still did not work, so i dont think that is what is causing the problem. I have double checked the reference to the scripts location and it is in the js folder.

    3.) Inappropriately combining two or more scripts into one external file
    The js file only has the code from the script example and i have removed the <script> references.

    Thanks again for helping out
    Cheers,
    Chris

  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

    The script is in the right location on the server, its call is in the wrong location on the page, it has to be after the element(s) it references. Or, put more simply:

    3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.
    - John
    ________________________

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

  5. #5
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    I have placed the javascript reference to below the describe div (as on the demo) and still no joy. Do you think it could have something to do with the elements inside the containing div being absolutely positioned? I tested it with the js inline, exactly like the demo and it still didnt work. I then placed all the code in the content div and it then worked.. Prob is it has to be at the top as its part of the main navigation..
    Thanks again,
    Chris

  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

    OK, you can put the call to the external script back into the head if you change this:

    Code:
    /////No need to edit beyond here
    
    var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""
    to:

    Code:
    /////No need to edit beyond here
    var menuobj;
    function navInitFunction(){menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""
    }
    if ( typeof window.addEventListener != "undefined" )
        window.addEventListener( "load", navInitFunction, false );
    else if ( typeof window.attachEvent != "undefined" )
        window.attachEvent( "onload", navInitFunction );
    else {
        if ( window.onload != null ) {
            var oldOnload = window.onload;
            window.onload = function ( e ) {
                oldOnload( e );
                navInitFunction();
            };
        }
        else
            window.onload = navInitFunction;
    }
    You are right about positioning and z-index also being a factor change:

    Code:
    <div id="describe" style="background-color:#D55901;width:577px;height:92px; z-index:1000" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>
    to:

    Code:
    <div id="describe" style="position:relative;top:40px;left:175px;background-color:transparent;width:577px;height:92px; z-index:1000" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>
    There will be other adjustments to be made but, that should get you on your way.
    - John
    ________________________

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

  7. #7
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John you are an absolute legend! Whoopeeee, it looks like i'll be on track to impress the client tomorrow morning after all!!!!

    Thanks sooo much for your help with this :0)

    Cheers,
    Chris

  8. #8
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    Sorry to bug you again.. I have one more question, which i am really hoping you can offer some guidance on

    I have the script up and running and its working like a charm. There is only one slight thing that i am trying to get working, but not having much luck with.

    I have the script uploaded here: http://www.flameofafrica.com/base/nav-test.html

    You will notice that when you hover over the first three menu items, the script works as it should, but when you mouse off the top level menu item, it reverts back to the off state. What i am wanting to do is keep the selected menu item active until you either mouse off the nav area, or mouse onto another menu item.

    Then, on the last 2 menu items - if you mouse off the active menu items onto one of the 2 that don't have sub divs then they should take focus (revert to the placeholder background image).

    I hope this makes sense :0)

    Cheers,
    Chris

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

    Add the resetit onmouseout:

    Code:
        <div id="topnav_menu">
          <ul  id="menulist_root" class="mainlevel">
            <li id="menuitem_1"><a href="#" class="mainlevel" id="menulink_1" onMouseover="showit(0)" onMouseout="resetit(event)">Destinations</a></li>
            <li id="menuitem_2"><a href="#" class="mainlevel" id="menulink_2" onMouseover="showit(1)" onMouseout="resetit(event)">Safaris</a></li>
            <li id="menuitem_3"><a href="#" class="mainlevel" id="menulink_3" onMouseover="showit(2)" onMouseout="resetit(event)">Packages</a></li>
            <li id="menuitem_4"><a href="#" class="mainlevel" id="menulink_4">Trip Advisor</a></li>
            <li id="menuitem_5"><a href="#" class="mainlevel" id="menulink_5">Africa Blog</a></li>
          </ul>
        </div>
    - 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
  •