Duplicate an AlgoZone AJAX Menu Bar

Hi Experts,

I desperately need to duplicate a menu bar which is located at the top of my product results, I need this to appear at the bottom of the results so my customers can navigate when they browse to the bottom of the page.

URL = www.agift4him.com

The site is a CRE Loaded PRO deployment with an AlgoZone template. The menu bar houses the sort by, layout styles and product navigation features. It is populated via AJAX.

The task seems simple however, I can't get the menu to show up.

Please find attached all relevant files - your help is very much appreciated!

NOTES:

The menu bar is found in the pl.view.js file (line 1) and is contained in a javascript function.

The HTML for the menu bar is generated in the new_products.php file (line 62) within the <div id="pl_menu"></div> element.

The menu bar is called in to the new_products.php page from the pl.core.js. (from around line 42?)

I added the <div id="pl_menu2"></div> element into the new_products.php page (line 62) and the $("#pl_menu2").html(showPLmenu()); in pl.core.js file (line 47) to test but with no luck.

Thank you!
FILEs.zip
LVL 4
wilson1000Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sushiguruCommented:
I can see a couple of problems initially:

Line 1 is repeated in line 14
lines 17 and 19 are repeated in 18 and 20.

The GA javascript is missing a couple of brackets - add }); in a line just above </script> (line 12)

Try this and let me know how you get on.

sg.
<!-- RCI [BOM] -global-asynchronous : includes/runtime/global/GA_global_asynchronous.php -->

<!-- Google Analytics RCI start -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12986285-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
</script>
<!-- Google Analytics RCI end -->
<!-- RCI [EOM] -global-asynchronous : includes/runtime/global/GA_global_asynchronous.php -->
<!-- warnings //-->
<!-- warning_eof //-->
<!-- RCI [BOM] -mainpage-top : includes/runtime/mainpage/login_mainpage_top.php -->
<!-- RCI [EOM] -mainpage-top : includes/runtime/mainpage/login_mainpage_top.php -->
<!-- RCI [BOM] -mainpage-top : includes/runtime/mainpage/sss_mainpage_top.php -->
<!-- RCI [EOM] -mainpage-top : includes/runtime/mainpage/sss_mainpage_top.php -->
<!-- header //-->

Open in new window

0
wilson1000Author Commented:
Thank you, so much! I moved home today so will test this asap

Kind regards

Damien
0
sushiguruCommented:
Sorry; just realised that all the duplicate lines are just comments to show code blocks; just ignore that one - my bad.

The javascript is definitely throwing an error though - fix that first and retest.

Cheers,
sg
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

wilson1000Author Commented:
Hi, I want to thank you for your patients with this.

The server my site is hosted on has had an attack and is unavailable at the moment - please bear with me!

Thanks and kind regards

Damien
0
wilson1000Author Commented:
@sushiguru : I've made that amendment so thank you for that - well spotted btw

What should I do next?
0
sushiguruCommented:
OK - I think I see the problem.  Change line 61-62 of new_products.php to the line below.  Your second menu was within the products dev, and so being overwritten by the products content when it's loaded!

Try and let me know,
sg.
$list_box_contents[0][] = array(
     'align' => 'center',
     'text' => '<div id="pl_container">
                   <div id="pl_menu"></div>
                   <div id="pl_content">
                      <div id="pl_loading"><img src="'.DIR_WS_TEMPLATE_IMAGES.'pl_images/ajax_loader2.gif" border="0" alt="Loading"></div>
                   </div>
                   <div id="pl_menu2"></div>
                </div>'
      );

Open in new window

0
wilson1000Author Commented:
Hi Sushiguru - the menu is now showing on the site, thank you.

The issue now is that the buttons on the second menu aren't working. Do you have any idea why?

Thanks again!

0
sushiguruCommented:
I can't see the menu on your site; have you updated the public site at: http://www.agift4him.com/ ?

sg
0
wilson1000Author Commented:
Ah, if you click on "new gift ideas" you'll see it
0
wilson1000Author Commented:
Hi,

Is there anymore I can do with this or should I be asking a different question??

Thank you
0
sushiguruCommented:
Sorry - been away for a long weekend.  Let me look again and see what the issue is...

sg.
0
sushiguruCommented:
OK - found the problem.  In js/pl.core.js there is a function:
setPLmenuData = function(){
}
In this function the listeners are setup for the menu bar functions.  These are setup on the id's of the menu clickable areas.  Now, since you have two menus, you no longer have unique id's on your page, so only one menu is actually calling the functions.

In order to have the same functionality for your second menu, it's going to have to be unique and distinct from the first, and you're going to have to duplicate the javascript for the second menu, calling the menu elements something slightly different (the menu is generated in pl.view.js).

A quicker alternative would be to fix the height and overflow of your products div, so that your bottom menu is in a fixed location.

The best solution would be to remove the listeners to the menu elements, and create them as individual functions that could be reused on an onclick event, rather than tying them to a unique id.

Without being able to access your code directly, I'm afraid you'll have to play with the javascript yourself.

cheers,
sg
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
wilson1000Author Commented:
This is extremely helpful sg and what I consider a resolve for this particular question.
I will post files for help actioning what you have suggested in another post with a similar name to this post.
"Duplicate an AlgoZone AJAX Menu Bar  2"
Thank you once more for highlighting the issue.
0
sushiguruCommented:
Thanks; glad to help, and I hope you get your second menu working!

sg.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.