Hello everyone,
I’m trying to give an individual position to a div inside of each CMS item.
My goal is to have this working:
Each orange dot (over the background image) is related to an element of the list. The idea is to animate it on hover of a list item.
I hope all this makes sense
Any help is very welcome
V.
Here is my public share link: LINK
(how to access public share link)
Hi @Victor_M, I don’t think this is possible without some custom code.
You’ll have to find a way to uniquely identify each dot and use custom css to style the dots’ positions.
Yep, that’s what I thought.
Will need help on this one…
I could manually create a div with an embed HTML element and associate “coordinates” with custom CSS.
But doing so, I can’t add content inside this div from the designer:
Result:
I guess I have to “push” a unique combo class to a div created with the designer.
I have no clue how to do that.
Hi @Victor_M, do you mean you can’t add the hover effect from the designer?
Correct
In the shared project, hovering the class .list-item should animate the class .dot-“slug”
Which is a basic interaction. Unfortunately, I can’t refer to the CMS item’s slug from the interaction panel.
Thanks a lot for your time Denny
Got it. Looks like you need to use some jQuery for this. Let me try to give you some idea how it may look like.
You need to make sure the slug is derived from the title for code below to work.
// Grab the list item
var listitem = $('.list-item') // You need to change this to the class you are using.
var slug = '';
listitem.hover( function() {
slug = convertToSlug(listitem.text());
$('.dot-' + slug).css('transform', 'scale(2)'); // This should scale the dot.
},
function() {
slug = convertToSlug(listitem.text()); // This will get the slug version of the title
$('.dot-' + slug).css('transform', 'scale(1)'); // This should reverse the scale.
}
);
function convertToSlug(Text)
{
return Text
.toLowerCase()
.replace(/ /g,'-')
.replace(/[^\w-]+/g,'')
;
}Doesn’t seem to work, I must have done something wrong.
Did I put the “slug” correctly?
And a big WOW for being so prompt. Thanks again!
No worries! Can you share the read-only link & published link so I can help with troubleshooting?
Hey @Victor_M, this should get you 90% there. I’m sure theres a way to shorten the code and better animation. I have marked where you can edit the animation/function.
var listitem = $('.list-item') // You need to change this to the class you are using.
var slug = '';
listitem.hover( function() {
slug = convertToSlug($(this).children('.heading').text());
$('.dot-' + slug).css('transform', 'scale(2)'); // Custom function here
},
function() {
slug = convertToSlug($(this).children('.heading').text()); // This will get the slug version of the title
$('.dot-' + slug).css('transform', 'scale(1)'); // Custom function here
);
function convertToSlug(Text)
{
return Text
.toLowerCase()
.replace(/ /g,'-')
.replace(/[^\w-]+/g,'')
;
}Thanks again @dennyhartanto, I’ll try to manage the animation myself.
Meanwhile, I tried your new code, no reaction while hovering the list-item…
Can you try moving the script from HTML Embed to the section of Home Settings?
Also updated the code, missing 1 }
var listitem = $('.list-item') // You need to change this to the class you are using.
var slug = '';
listitem.hover( function() {
slug = convertToSlug($(this).children('.heading').text());
$('.dot-' + slug).css('transform', 'scale(2)'); // Custom function here
},
function() {
slug = convertToSlug($(this).children('.heading').text()); // This will get the slug version of the title
$('.dot-' + slug).css('transform', 'scale(1)'); // Custom function here
}
);
function convertToSlug(Text)
{
return Text
.toLowerCase()
.replace(/ /g,'-')
.replace(/[^\w-]+/g,'')
;
}Can’t put the ‘slug’ from there… (seems logic)
Dont worry, you don’t need the slug at all for the code to work.
Just did, no change 
It’s working on my end!
My mistake, I put it in head section instead of before /body
IT WORKS ! 
Thank you so much @dennyhartanto
Nice! You’re welcome!