Gossamer Forum
Home : Products : Gossamer Links : Development, Plugins and Globals :

Has anybody done a javascript drop down selection list for categories?

Quote Reply
Has anybody done a javascript drop down selection list for categories?
I'm just thinking that it would be great if somebody has the code already for something that does something like this:

In the top of the luna template, there is the search form elements, maybe over on the right would be a good place to see the following:
A drop down selection list that lists each category as well as how many links are available in that category. Something like

Choose a Category
Category One (35)
Subcategory One (4)
Subcategory Two (354)
Category Two (569)
Subcategory One (69)
Subcategory Two (500)
Category Three (14)


etc etc etc. When someone choose Category One (35) it takes them to the static page of category one in the links sql directory.

Anybody done this, if so would you mind sharing your javascript coding please.

I know that I can make a dhtml drop down selection menu and hard code in all the category links (I've already got one of those) but I'd really like it to be dynamic so that as I add categories, or remove them or reorder them, the javascript drop down selection list would reflect that.

Anybody, Bueller, Anybody?
Quote Reply
Re: [Westin] Has anybody done a javascript drop down selection list for categories? In reply to
Hi,

I hope you appreciate this - its taken me bloody ages to do ;)

First - you need 2 new globals:

load_sub_cats_menu
Code:
sub {

my $tbl = $DB->table('Category');
my $sth = $tbl->select( { FatherID => $_[0] } );

my @loop;
my $i = 0;
while (my $hit = $sth->fetchrow_hashref) {
$hit->{URL} = $CFG->{build_root_url} . "/" . $tbl->as_url( $hit->{Full_Name} ) . "/" . $CFG->{build_index};
push @loop, $hit;
}

return { load_sub_cats_menu_loop => \@loop }

}

make_top_nav_loop
Code:
sub {

my $tbl = $DB->table('Category');
my $sth = $tbl->select( { CatDepth => 0 } );

my @loop;
while (my $hit = $sth->fetchrow_hashref) {
$hit->{subcatcount} = $tbl->count( { FatherID => $hit->{ID} } ) || 0 ;
$hit->{URL} = $CFG->{build_root_url} . "/" . $tbl->as_url( $hit->{Full_Name} ) . "/" . $CFG->{build_index};
push @loop, $hit;
}

return { top_nav_menu => \@loop }
}

Then, upload the attached file (obviously decompress it =)) to the /static folder.

Then, in include_common_head.html, you need to add this at the end of it:

Code:
<link rel="stylesheet" type="text/css" href="<%config.build_static_url%>/chrometheme/chromestyle2.css" />
<script type="text/javascript" src="<%config.build_static_url%>/chromejs/chrome.js" ></script>

Then, finally in include_header.html, add the following (again, at the very bottom of the template):
Code:
<%make_top_nav_loop%>


<div class="chromestyle" id="chromemenu">
<ul>
<%loop top_nav_menu%>
<li><a href="<%URL%>" <%if subcatcount > 0%>rel="dropmenu<%row_num%>"<%endif%>><%Name%></a></li>
<%endloop%>
</ul>
</div>


<%loop top_nav_menu%>
<%load_sub_cats_menu($ID)%>
<%if load_sub_cats_menu_loop.length%>
<div id="dropmenu<%row_num%>" class="dropmenudiv">
<%loop load_sub_cats_menu_loop%>
<a href="<%URL%>"><%Name%></a>
<%endloop%>
</div>
<%endif%>
<%endloop%>


<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

I've tested that now, and it all seems to be working fine =)

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!

Last edited by:

Andy: May 12, 2009, 3:35 AM
Quote Reply
Re: [Andy] Has anybody done a javascript drop down selection list for categories? In reply to
Interesting approach. Not sure that it was what I was looking for but I tried it since you put the time into it.

Would work well if...
1. I had fewer categories. Having large amount of categories makes the list of categories stack and the background goes odd when there is more than one line of main categories (with my system, theres 3 lines of main categories).
2. The drop down subcategories didn't all point to dynamicdrive.com


Here's what it looks like when there are a lot of categories, you can also see what I was looking to create on the right side of the yellow search bar is a drop down selector (in javascript) that when moused over drops down all the list of categories. Unfortunately, it's done staticly so if I remove a category or rename or add I've got to go back into the javascript source and change it to accomodate it. I was hoping to get something like what I've got on the right side with the drop down selection of categories only also to add the number of links in each category of the list so that people know if theres any links to bother going to those categories or not. So it would say:
ARTICLES (1) (WHEN THERES 1 LINK IN THE ARTICLES CATEGORY)
AGGRO DECKS (4)
PAUPER DECKS (125)
etc etc etc


Last edited by:

Westin: May 12, 2009, 2:44 AM
Quote Reply
Re: [Westin] Has anybody done a javascript drop down selection list for categories? In reply to
Whoops, that was a template issue (I've updated the above), but the change is:


<a href="http://www.dynamicdrive.com/"><%Name%></a>

..to;

<a href="<%URL%>"><%Name%></a>

(dynamic drive is where I got the base-script from)

Re your first point - what exactly were you trying to do then? I can see the issue, but not sure how you thought you'd be able to get away with a drop-down menu?

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] Has anybody done a javascript drop down selection list for categories? In reply to
I was wanting to make a menu like you see in my image only make it be dynamic, and have it list the amount of links in each of the categories that is listed in the drop down selection list.

The one that I show in my image is static, so I have to change it when I change categories, add categories, delete categories etc, was thinking it would be great if something like that existed and was dynamic. And a bonus would be if it could also be dynamic so that it shows how many links are in each category at the end of the category name to place something like (#) where # is the amount of links in that category. Kind of what is on the home page now, where it lists how many links are in each category, take all of that on the home page and stuff it into a drop down list like what I've shown or a basic html form selection list (I've seen those where a person selects a name in a drop down selection list and they get taken to a page associated with the name in the list).

Last edited by:

Westin: May 12, 2009, 3:44 AM
Quote Reply
Re: [Westin] Has anybody done a javascript drop down selection list for categories? In reply to
LOL, you could have told me that before :P

From having a look at your site, I see you have:

..so could probably do that with ULTRAGlobals:
Code:
<%Plugins::ULTRAGlobals::Get_Root_Categories()%>
<%loop root_cat_loop%>
appendSTMI("false","<%Name%> (<%Number_of_Links%> links)","left","middle","","","-1","-1","0","normal","transparent","transparent","","1","-1","-1","blank.gif","blank.gif","-1","-1","0","","<%URL%>/","_self","Arial","8pt","#5d5b66","normal","normal","none","Arial","8pt","#5d5b66","normal","normal","none","0","solid","#d6d6ce","#d6d6ce","#d6d6ce","#d6d6ce","#d6d6ce","#d6d6ce","#d6d6ce","#d6d6ce","<%URL%>","","","tiled","tiled");
<%endloop%>

Untested , as I don't have the scripts you're using to do it - but should work fine.

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Westin] Has anybody done a javascript drop down selection list for categories? In reply to
An easier to understand example of what I mean, would be if you took the category selection list on the add.cgi or modify.cgi pages and made it so that it showed how many links were in each category at the end of the name of the category.

Take that list, and place it in the search bar on all pages, now when someone selects a category from that list, it would take them to the associated category page.
Quote Reply
Re: [Andy] Has anybody done a javascript drop down selection list for categories? In reply to
Andy wrote:
LOL, you could have told me that before :P

Yeah I didn't actually have that menu put together yet when I started this thread else would have been easier to explain it with a picture (what with a pic being worth 10,000 of my words)

I'll give it a try and see what I come up with with your suggestion of the ULTRAGlobals.

Thanks,

Oh, Im sure someone else is going to find the menu you did quite useful for their site so I know it wont go to waste.
Quote Reply
Re: [Westin] Has anybody done a javascript drop down selection list for categories? In reply to
Ah, thats a piece of cake (if I'm understanding you)

Code:
<%Plugins::ULTRAGlobals::Get_Root_Categories()%>
<select size="1" name="GotoURL" onchange="window.location.href= this.value;">
<option>-- select ---</option>
<%loop root_cat_loop%>
<option value="<%URL%>"><%Name%></option>
<%endloop%>
</select>

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!

Last edited by:

Andy: May 12, 2009, 4:03 AM
Quote Reply
Re: [Westin] Has anybody done a javascript drop down selection list for categories? In reply to
Quote:
Oh, Im sure someone else is going to find the menu you did quite useful for their site so I know it wont go to waste.

I hope so LOL (I may use it on one of my sites in the future, but not got any need for it just yet =))

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] Has anybody done a javascript drop down selection list for categories? In reply to
Yup that was what I was looking for other than inplace of Google it would say Articles (2) for the Articles Category if the Articles category had 2 links in it.

What do I replace Google with to get it to dynamically list the actual category names? It appears to have the urls right, but all the selection list shows only google as the names of each item in the list (like 30 of them)

I'm going to guess (laugh) and say I should put <%Name%> (<%Number_of_Links%> links) in place of the word Google.

Last edited by:

Westin: May 12, 2009, 3:57 AM
Quote Reply
Re: [Westin] Has anybody done a javascript drop down selection list for categories? In reply to
Yup that was exactly what I was originally looking for.

Thanks Andy,
Quote Reply
Re: [Westin] Has anybody done a javascript drop down selection list for categories? In reply to
Quote:
I'm going to guess (laugh) and say I should put <%Name%> (<%Number_of_Links%> links) in place of the word Google.

heheh yeah, that was me testing in frontpage, before I did the code for ya (wanted to make sure the JS code was gonna work =))

I've updated that code, in case anyone else wants to do the same.

Glad thats what you were after - we got there in the end Laugh

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!