Submenu opens, as long as no whitespace is in the Category name about zeynepjs HOT 9 CLOSED

The problem is that zeynep uses the link name, e.g. data-submenu="Best sellers" and id="#Best sellers". The last one doesn't work because it's an invalid ID that is used here: https://github.com/hsynlms/zeynepjs/blob/master/src/zeynep.js#L31

A solution could be to use name.replace(/[# .,>~*+\[\]="()'&%$:]*/, '') to replace all characters which are not allowed or have a special meaning in IDs and selectors (https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute)

from zeynepjs.

@hsynlms Will you fix the code? Because the link texts you use can always contain spaces which will result in invalid IDs.

from zeynepjs.

Hi @alpin3rocker

Thank you!

Could you please give an example or screenshot or video or reproduceable demo project zip file, please? So I can help you faster.

from zeynepjs.

I also noticed this lovely little problem.

F.e.:
Label = Main categories, breaks the navigation on mobile.
Renaming: Label = Maincategories, and it works like a charm.

from zeynepjs.

It seems your case is resolved that way @alpin3rocker

Thank you @aimeos , as you said it's not valid to use space characters in the ID attribute of an HTML element.

So I am gonna close the case.

from zeynepjs.

@aimeos this case is not related to the plugin. What you are suggesting is to tolerate invalid ID attribute usages.

Instead, the spaces need to be removed or replaced with another character in the HTML file before getting rendered. This is a valid and permanent solution. Replacing or removing characters is easy to do in any template rendering engine.

from zeynepjs.

Happy there is a valid and permanent solution.
At least I do not have to ask my friend to move away from "Tuna Mahallesi" and stop him from selling products containing more than only one word :)

from zeynepjs.

@ivanbilj you do not need to remove whitespaces from the visible sub-category name. Just remove or replace the whitespaces in data-submenu and in data-submenu-close and in id attributes to make it work. Those attributes' values need to match.

https://github.com/hsynlms/zeynepjs/blob/master/examples/multi-menu.html#L52

https://github.com/hsynlms/zeynepjs/blob/master/examples/multi-menu.html#L54

Example:

...
...
<a href="#" data-submenu="tunaMahallesi">Tuna Mahallesi</a>    <!-- attention: data-submenu="tunaMahallesi" -->

<div id="tunaMahallesi" class="submenu">                       <!-- attention: id="tunaMahallesi" -->
  <div class="submenu-header">
    <a href="#" data-submenu-close="tunaMahallesi">Menu</a>    <!-- attention: data-submenu-close="tunaMahallesi" -->
  </div>

  <label>Tuna Mahallesi</label>                                <!-- attention: no need to modify the visible name  -->

  ...
  ...
</div>
...
...

Hope that's clear enough.

from zeynepjs.

Thank you very much for the clarification, really appreciate it!!

from zeynepjs.