Class and ID list

This template allows you to get a quick list of element class names along with their ID.

This may help in debugging where you have a large project with a lot of class names and you may have reused a name by mistake.

As in this feature request:

The template has a DUMMY SCENE for demonstration which has some example elements with class names and ids.
And a CLASSLIST scene which is where when select it and Preview current Scene in Browser we can click the update button and it will display a scrollable list of sorted classes and their ids.

You can replace the first scene with your own scenes. And remove the CLASSLIST scene when your project is completed. (24.6 KB)

This is a second template. Which I think is easier to use.

It has two dummy scenes which you can replace as you will.

The usage of this one is you add a button to your scene ( you can make it a persistent symbol so that it shows up on all scenes.)

Add the On Mouse click action run javascript = classList() to the button. ( if it is a symbol then add the action while in symbol edit mode)

The button will toggle a class-id list display (scrollable )on and off on the current page.

The class-id list display is a div that is append and then removed using jquery (68.5 KB)


So I could not resist trying to be able to click on an item in the class list and highlighting the corresponding element.

This template does that :smile:

There is now an highlight link under each class. Clicking it will place a red outline around the element.

When you click a highlight link for an element that is not on the the current scene, the element is still highlighted .
You can navigate through the scenes to look for it.

Toggling the class list display off will remove all outlines.
Clicking another highlight link will remove all outlines and then outline the corresponding element. (59.1 KB)


That’s awesome Mark.

1 Like