PDA

View Full Version : Tabs Menu (mouseover) wont work in when absolutely positioned?



stoker
02-10-2007, 05:17 PM
1) Script Title:
Tabs Menu (mouseover)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/tabmouseover.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

jscheuer1
02-10-2007, 05:58 PM
Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), 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:


<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:


<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:
<script>
<!--and
//-->
</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:


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:


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

stoker
02-10-2007, 06:18 PM
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

jscheuer1
02-10-2007, 09:11 PM
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.

stoker
02-11-2007, 12:08 PM
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

jscheuer1
02-11-2007, 03:11 PM
OK, you can put the call to the external script back into the head if you change this:


/////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:


/////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:


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

to:


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

stoker
02-11-2007, 03:30 PM
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

stoker
02-11-2007, 04:52 PM
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

jscheuer1
02-11-2007, 06:03 PM
Add the resetit onmouseout:


<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>