Target multiple elements using a...

User 244626 Photo


Registered User
585 posts

Here is a way to target multiple elements using a common data-attribute and class named "togon" onmouseenter utilizing a jscript. (Thanks Eric and Inger !)

To edit the individual elements first apply your settings to your element(s) that has a unique class name,the class togon, and a id. Then duplicate the element, delete the togon class, and make your changes to the duplicated element. This gives you a visual on your changes. After you are finished, just delete the duplicated element. Now you have two settings stored in your original element. Preview and you will see the element settings when there is no mouse over object because togon has not been removed. When mouse enters object, togon is removed and you see your new settings. Since this is happening to any element tied to the attribute "data-tog" anything with that attribute and the element we target by id (element1id) is updated with the toggled css settings. If you need to make a quick change you can always just deselect the class togme on any of the elements that are targeted.

All elements you are targeting must have a id.
Attachments:
User 122279 Photo


Senior Advisor
11,274 posts

I'll try them out - all of them. Bit busy right now, though.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/


User 187934 Photo


Senior Advisor
18,051 posts

JS is awesome.:cool:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2699991 Photo


Registered User
1,697 posts

Twinstream wrote:
Here is a way to target multiple elements using a common data-attribute and class named "togon" onmouseenter utilizing a jscript. (Thanks Eric and Inger !)

To edit the individual elements first apply your settings to your element(s) that has a unique class name,the class togon, and a id. Then duplicate the element, delete the togon class, and make your changes to the duplicated element. This gives you a visual on your changes. After you are finished, just delete the duplicated element. Now you have two settings stored in your original element. Preview and you will see the element settings when there is no mouse over object because togon has not been removed. When mouse enters object, togon is removed and you see your new settings. Since this is happening to any element tied to the attribute "data-tog" anything with that attribute and the element we target by id (element1id) is updated with the toggled css settings. If you need to make a quick change you can always just deselect the class togme on any of the elements that are targeted.

All elements you are targeting must have a id.


Hi Twinstream
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.