Category boxes links

This has been reported by a user, I have checked and what he says is true.

Set up category boxes.

At the top level where all main categories appear in boxes and subcategories are linked underneath inside the box if you click on a subcategory you jump to the subcategory and if you click elsewhere in the box you jump to the parent category.
This is expected behaviour

…if you right click on a subcategory and select “open link in a new tab” on the browser popup menu it works as expected with the original tab remaining in place and the subcategory opens in a new tab. So far, so good.

But if you use the Ctrl+Click or Cmd+Click as the standard browser shortcut for Right Click Open in a new tab something weird happens.
The subcategory correctly opens in a new tab, but the original tab jumps to the parent category.

I think what is happening here is that the box div has a JQuery action associated with <div ... data-url="link to main category"> and the links to the subcategories are conventional <a> links.
Right click is fully handled by the browser and works
Ctrl+Click is trapped by the browser to open link in a new tab but the basic left click is still passed to JQuery to handle.

A similar thing happens if you try it in a category box shown in a category.

Is this fixable?


I’ve tried to fix this before by simply making that main category link a normal link

…but we didn’t end up going through with that change because nested anchor tags aren’t valid HTML and cause issues in some browsers.

There is a different technique I’ll try though, it’s described here in detail: Nested Links Without Nesting Links — Sara Soueidan – Freelance-Front-End UI/UX Developer

That fix involves putting an empty link to the parent category within the box, then expanding that link to fit the entire box. Any sublinks would then be in a layer on top of that link, instead of nested within.


That’s quite a clever trick. Sara says:

Personally I think that for a category box this would probably be ok. If a user wanted to select and copy anything it would most likely be the category title and/or description and both would be available by clicking the box and viewing the category (especially if the Category Banners component was in play)


ok, seems like it will work well… updated here


This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.