Anylink CSS Menu Demo 1 - Javascript Conflict

[mickmackusa]

1) Script Title: AnyLink CSS Menu v2.3

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

3) Describe problem: I am successfully running this Dropmenu on all of my http://www.powerpinochle.com pages, except for two of my pages that have some custom javascript/ajax that I created myself. The error is presented by the dropmenu instantly vanishing when I mouseout of the dropmenu anchor. Is anyone else experiencing this? Is this a conflict with my javascript variables/functions and the jquery scripts? I wouldn't know where to start debugging this as I am not proficient in jquery.

I am running this on top of MyBB software, which is where the other codes come from.

To replicate the error, mouseover the Basics link in the navmenu, then try to mouse to one of the three options in the list.

The two pages require login, but they are here:
1. MeldTraining
2. MeldTest


Head Section: MeldTrainingHEAD.txt
Head Section: MeldTestHEAD.txt

TIA
mickmackusa

[jscheuer1]

Do you mean we have to log on to see the problem? If not, it's fine in Chrome, so which browser(s) are giving you the problem? If so, how about setting up a guest account for us to test in?

In any case, anylink doesn't use jQuery or any other script library. So if it's a conflict with jQuery, it's an odd one.

More likely some unseen element is covering the menu.

[mickmackusa]

If you do not login, the page is auto-redirected to the registration page.
Going to:
http://www.powerpinochle.com/forum/meldtest.php
Redirects to:
http://www.powerpinochle.com/forum/member.php?action=register
Which works properly.

I am experiencing this error, while using Firefox.
Yup, no jquery, sorry to mention that.

I am going to temporarily provide new pages that don't redirect non-members.
http://www.powerpinochle.com/forum/meldtrainingDebug.php
http://www.powerpinochle.com/forum/meldtestDebug.php


As I mentioned before, other pages do not have this issue.

[jscheuer1]

Ah the wonders of PHP . . . I don't know why it's happening (includes probably) but there are three of these in the served source code of the page:

<link rel="stylesheet" type="text/css" href="http://www.powerpinochle.com/css/anylinkcssmenu.css" />
<script type="text/javascript" src="http://www.powerpinochle.com/js/anylinkcssmenu.js">
/***********************************************
* AnyLink CSS Menu script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/
</script>
<script type="text/javascript">
//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")
</script>

Other code is repeated as well I believe. I didn't look into that part too deeply. You need to look at the template for the page for it's includes/requires or otherwise imported content, and any includes/requires or otherwise imported content on them, as well as any code on the template(s)/imported content for the page to see where all that repetition is coming from.

To see the problem hit ctrl-U (view source) and ctrl-F (find) and count the number of:

anylinkcssmenu.init("anchorclass")

there are. There are three. On the working pages, only one.

Note: I only checked meldtrainingDebug.php, the other is probably similar though.

Once you fix this:

The browser cache may need to be cleared and/or the page refreshed to see changes.

And the server cache might need to be flushed as well at points during the process to see if you're making any progress on the served source code. You can always periodically check that using the browser's "View Source" again.

[mickmackusa]

I have solved the replication of code.
I was echoing $headerinclude which is what all the other pages use (successfully) AND rewriting the lines in the two faulty pages. I simply deleted the extra lines on the faulty pages.

The dropmenu works when I do not echo $headerinclude inside the <head>, however I obviously can't use this as a solution because $headerinclude includes other vital bits.

I've cleared the cache -- error persists.
I've tried on Firefox and Chrome -- error persists.

$headerinclude & dropmenu still works on all other pages.
meldtrainingDebug & meldtestDebug dropmenus are still vanishing.

This is going to be one of those tiny syntax things that will cause me to smack my forehead when it is discovered.

Any other suggestions?

[jscheuer1]

I find it hard to believe that you cannot control what appears in the served source code of the pages. That's just a sloppy use of PHP. If you cannot figure out why it's being included multiple times, try changing include to include_once:

http://www.php.net/manual/en/function.include-once.php

If all else fails, javascript code can be added to prevent multiple inits. Anywhere you have this:

<link rel="stylesheet" type="text/css" href="http://www.powerpinochle.com/css/anylinkcssmenu.css" />
<script type="text/javascript" src="http://www.powerpinochle.com/js/anylinkcssmenu.js">
/***********************************************
* AnyLink CSS Menu script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/
</script>
<script type="text/javascript">
//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")
</script>

Make it like so:

<script type="text/javascript">
/***********************************************
* AnyLink CSS Menu script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/
if(typeof anylinkcssmenu === 'undefined'){
	document.write('<link rel="stylesheet" type="text/css" href="http://www.powerpinochle.com/css/anylinkcssmenu.css" />\n' +
	'<script type="text/javascript" src="http://www.powerpinochle.com/js/anylinkcssmenu.js"><\/script>\n');
}
</script>
<script type="text/javascript">
//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of anchor links (that contain a sub menu)
if(!anylinkcssmenu.anchorclass){
	anylinkcssmenu.init("anchorclass");
	anylinkcssmenu.anchorclass = true;
}
</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

And the server cache may need to be cleared as well.

[mickmackusa]

Found the head-slapping part of my code.
I was still echoing $headerinclude, just not were I suspected.
You mentioned 3 occurrences (2 extras), but I only removed the one in the <head> as I didn't see the other.
The 3rd was in the <body>.
Definitely all my fault.
I removed it and all is well now.

Thanks!
Solved.