?
Solved

Duplicate an AlgoZone AJAX Menu Bar

Posted on 2010-03-29
14
Medium Priority
?
422 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:wilson1000
  • 7
  • 7
14 Comments
 
LVL 3

Expert Comment

by:sushiguru
ID: 29074133
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
 
LVL 4

Author Comment

by:wilson1000
ID: 29135822
Thank you, so much! I moved home today so will test this asap

Kind regards

Damien
0
 
LVL 3

Expert Comment

by:sushiguru
ID: 29173109
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 new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 4

Author Comment

by:wilson1000
ID: 29575358
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
 
LVL 4

Author Comment

by:wilson1000
ID: 30041288
@sushiguru : I've made that amendment so thank you for that - well spotted btw

What should I do next?
0
 
LVL 3

Expert Comment

by:sushiguru
ID: 30098346
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
 
LVL 4

Author Comment

by:wilson1000
ID: 30118395
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
 
LVL 3

Expert Comment

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

sg
0
 
LVL 4

Author Comment

by:wilson1000
ID: 30124345
Ah, if you click on "new gift ideas" you'll see it
0
 
LVL 4

Author Comment

by:wilson1000
ID: 30514836
Hi,

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

Thank you
0
 
LVL 3

Expert Comment

by:sushiguru
ID: 30605497
Sorry - been away for a long weekend.  Let me look again and see what the issue is...

sg.
0
 
LVL 3

Accepted Solution

by:
sushiguru earned 2000 total points
ID: 30606356
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
 
LVL 4

Author Comment

by:wilson1000
ID: 30612113
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
 
LVL 3

Expert Comment

by:sushiguru
ID: 30614798
Thanks; glad to help, and I hope you get your second menu working!

sg.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This holiday season, we’re giving away the gift of knowledge—tech knowledge, that is. Keep reading to see what hacks, tips, and trends we have wrapped and waiting for you under the tree.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question