1

I am using YUI with Purecss and I noticed that my <li> elements with their id's get overwritten when creating dropdown menus.

They turn into something like: <li id="yui132343_3242342">

See this example: PureCSS Dropdown

How can I preserve my given id's?

My fiddle example: Fiddle Example YUI Dropdown

Paolo
  • 20,112
  • 21
  • 72
  • 113
zer02
  • 3,963
  • 4
  • 31
  • 66
  • Can you show us a working example from your own code? – Deryck Feb 08 '14 at 06:50
  • YUI coughs those IDs onto elements without an ID, but I've never seen it overwrite existing ones. A @Deryck says, post an example here or get an example working on jsfiddle and we can take a look – barnyr Feb 08 '14 at 11:29
  • Check out this fiddle and check the source code of mydropdown: http://jsfiddle.net/r3zLb/ all my id's get replaced by YUI. – zer02 Feb 08 '14 at 11:43

2 Answers2

1

Looking at the source of the plugin, it seems to treat your HTML pretty much as config and re-builds new DOM elements, so no extra attributes will be preserved. try adding data-foo="bar" to any node n your menu and it won't be present in the DOM of your menu.

You may need to look for a new plugin I'm afraid.

barnyr
  • 5,678
  • 21
  • 28
1

YUI does not overwrite your <li>'s id, it just adds a new one when the element doesn't have one. The library does this to cache the JS objects it creates for dealing with the DOM. If you set an id to those li by hand, YUI will preserve them.

juandopazo
  • 6,283
  • 2
  • 26
  • 29
  • YUI does overwrite every `id` when generating dropdown menu, see my fiddle code. http://jsfiddle.net/r3zLb/1/ – zer02 Feb 14 '14 at 18:34
  • 1
    Sorry. I haven't been checking SO and it isn't great at notifications. When you render a Widget there is a good chance of it rewriting your entire HTML structure. There are no guidelines there. Widgets are free to modify the DOM as they wish. My recommendation is not to use IDs in your CSS and to use the widget's API to get access to the nodes you need. – juandopazo Feb 27 '14 at 13:21