Posted by matshep1 on September 4, 2009 at 9:36pm
Jump to:
| Project: | Jump |
| Version: | 6.x-2.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (duplicate) |
Issue Summary
Hi there,
I have a jump menu displaying a list of taxonomy terms. I have managed to get it to display like this:
books
-item1
-item2
cds
-music
--item1
--item2
etc
What I would like to do is set the background colour of the top taxonomy term e.g. books,cds to a different colour so they stand out in a long list. If I could place a class on the tag of each top taxonomy term I could do this.
Does anyone have any idea how I can insert a class in to these tags?
Thanks,
Matthew
Comments
#1
The above should read...
What I would like to do is set the background colour of the top taxonomy term e.g. books,cds to a different colour so they stand out in a long list. If I could place a class on option the tag of each top taxonomy term I could do this.
Does anyone have any idea how I can insert a class in to these option tags?
#2
How do I go about doing it like that like you did? Sorting in vocobulary as headers and terms as children to the vocobulary?
Country
-- City
-- City 2
-Country 2
-- City
-- City 2
#3
I actually face the same problem but I think it's currently not possible to distinguish the options. See http://api.drupal.org/api/drupal/developer--topics--forms_api_reference.... where the #options atrtibute of a select component only accepts either (1) arrays only containing values (used for both value and text) or (2) associative arrays where keys are values and values are the displayed texts.
So either you hack the form api, I guess, or you come up with some funky javascript/css:
$("#edit-jump-goto option:contains('- ')").css("color", "red");This line gets all options of the select with id 'edit-jump-goto' which contain the string '- ' [hence all child tags] and changes the font-color to red. So now you either make all options bold by default (css) and change the font-weight via the JS back to normal or you extend the JS line above to get all options NOT containing your specified indentation characters.
btw: I use jump for an additional taxonomy dropdown below the search block, so it's displayed on every page. Thus, I just inserted the above code line in page.tpl. Ah, and I used the 6.x-1.0 version, so there might be some differences in id tagging.
Best,
Paul
EDIT: @cryx: as for getting the indentation see http://drupal.org/node/315416
#4
@sin.star
Thank you, going to take a look. Late comment from me here :)
#5
Hi there,
I hacked the jump module. I tried to theme override it but for reasons unknown it wouldn't override the function. So here's the function I used to add an extra dash for each level down the taxonomy tree.
function jump_menu_get_taxo_options(&$options, $vid) {$tree = taxonomy_get_tree($vid);
foreach ($tree as $term) {
$new_path = str_replace('category/', '', drupal_get_path_alias(taxonomy_term_path($term)));
$options[$new_path] = str_repeat('-', $term->depth) . $term->name;
}
}
This portion of the code inserts the string '-' a certain number of times. In this case the number is the term depth.
str_repeat('-', $term->depth)I then use some jQuery to look at the select element with an id of edit-jump-goto option and apply different css styles depending on how many dashes it finds.
<script type="text/javascript">$(document).ready(function() {
$("select#edit-jump-goto option").each(function(){
matchOne = $(this).text().match("-");
matchTwo = $(this).text().match("--");
matchThree = $(this).text().match("---");
if (matchOne != "-") {
$(this).addClass("jumptop1");
}
else if (matchTwo == "--") {
$(this).css("margin-left", "10px");
}
else{
$(this).css("margin-left", "5px");
}
if (matchThree == "---") {
$(this).css("margin-left", "15px");
}
});
});
</script>
I only put the jump menu on my catalog pages so i put this script between this PHP conditional print code in my page.tpl.php. Looking at it now I probably should have used drupal_add_js().
<?phpif (arg(0)=='catalog') {
print '....'
} ?>
Good luck,
Mat :)
#6
Thank you very much Mat for sharing that. It might come in handy for me later on!
#7
Hey Mat,
for getting the indentation right I already posted a link above. Nevertheless, in your code you should consider not only adding dashes but also an additional space because otherwise taxonomy top level terms like "Bose-Einstein condensate" would match a single dash and get indentated though it shouldn't. So, I would advise to change the relevant line to (that's how I am doing it btw):
$options[$new_path] = str_repeat('-', $term->depth) . ' ' . $term->name;For the script part, this could possibly done using only three lines if the above change is applied (using the space as a marker):
$("#edit-jump-goto option:contains('- ')").css("margin-left", "5px");$("#edit-jump-goto option:contains('-- ')").css("margin-left", "10px");
$("#edit-jump-goto option:contains('--- ')").css("margin-left", "15px");
Best,
Paul
#8
Cheers...yes I am not at the efficient code stage yet :) Thanks for the guidance.
Mat
#9
This may get fixed once adding in hierarchical ordering of taxonomy in the 6.x-2.x branch. #315416: Show hierarchy in the taxonomy terms
I am marking this as duplicate since it is so intertwined with adding hierarchy to taxonomy.