Feature Request: Add and ID to an element

[nickdgreen]

The ability to add an ID to an element so that it can be individually targeted with #styleStyle from add on CSS

[arielk]

Why not using by CSS Classes?

[peepshow]

ID's are sometimes a required if you're trying to combine with another plugin, JS or WP. Also ID's are helpful if you want to add anchor tags. ID's are generally considered better for performance when referenced in JS too as they are unique selectors.

[arielk]

We know it. But we're really trying to find a way to do it in a way that will not create conflicts with duplicate ID.

Thanks for your feedback!

[pingram3541]

Duplicate ID's are likely not going to hurt anything (outside of js plugins or absolute positioning) as most browsers ignore that technically there is supposed to only be one by spec.

Many other builders already provide the ability to add id's without all hell breaking loose and it's not a complex thing to add in so maybe reconsider this request again. ID's have one very important thing for me, hierarchical superiority which means writing less of these:

!important

The spec of ID attributes being unique is not really that big of a problem is it?

[drawcard]

I just discovered how badly I need this feature, trying to implement vivus.js on some SVG's in my layout. Vivus explicitly uses ID's to identify SVG elements, in order to trigger the animations / callbacks.

Perhaps a simple validator could be written that continuously detects all custom ID's on the page, and warns the user if there's a conflict. Or maybe the ID customisation feature is a toggle for advanced users on the settings page.

I would also appreciate any reconsideration on this feature request :)

[pingram3541]

A simple js object could be used with validation to ensure no duplicates are ever entered.

Would love an example on how to add a custom control to a section. Inspecting the code it looks like it was designed to only allow for customizing or adding our own widgets but sections and columns are private and protected by design. No?

[nickdgreen]

I don't see the need for validation or duplicate checking the website designer/builder has to take some responsibility for the control of IDs and most designers/builders will use recognisable IDs pageOneSectionOne, pageOneSectionTwo etc. to me it's a gap in the product that can be filled without over thinking it.

[pingram3541]

I agree, duplicate id's are likely not going to cause any problems for anyone w/ exception of an occasional script error or broken anchor but the suggestion was based off the data already being present and a very low scope to push all id's to an array to check against.

Again, would love to see examples of how to add out own controls to sections and columns, not just extend existing ones.

[arielk]

Thanks to each of you on the comments and ideas, we'll add this option soon.

[pingram3541]

Thanks @arialk this will be most helpful and very much appreciated!

[drawcard]

Nice one @arielk - thanks for looking into it!

[arielk]

Things To Do:

• Move all element ID's in editor mode to classes
• Add CSS ID control in Advanced Tab in element base (Feature Request: Add and ID to an element #939)

[collindavis]

@arielk will custom IDs be supported for individual Tab items as well? This would be most helpful for auto-loading specific tabs on page load or via anchor tag links.

[arielk]

@collindavis Unfortunately we can not add this option, because we add auto item ID for each tab

[collindavis]

Perhaps a data-id attribute can be manually assigned instead? Or a secondary ID could still be considered for custom values? E.g. <li id="tab1 *mycustomid*"> or <li id="tab1" data-id="mycustomid">

…

On Mon, Jan 30, 2017 at 7:22 AM Ariel Klikstein ***@***.***> wrote: @collindavis <https://github.com/collindavis> Unfortunately we can not add this option, because we add auto item ID for each tab — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#939 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAt1yU_mF8la1yGwiNZPAIDUf-fZyiFnks5rXgAggaJpZM4K76Hn> .

[pingram3541]

Thank you =)

[magnums]

it's work for me. so try this.

1. adding the Heading widget or Text editor widget.
2. put html code like this: <p id="your-id"></p>
3. then you able to using jquery add or remove the value in that elements.
   Hope this help.