Streaming live at 10am (PST)

Add function as attribute

I have an issue I need to sort. In clients desing is slider but it has a slider text OUTSIDE of mask. I have tried lots of things, in Chrome Snippets code works but I can make it run on a site. I have set for each slide extra attribute title="value" (I can see that in browser) I have set next attribute function but I can’t see when elements are rendered in the browser. All I need is to display a value of title in a grabbed element.

This Is I’m trying to do but I can’t make it run on site.

const slider = document.querySelector("#top-slider");
const image = document.querySelectorAll(".top-slider__slide")
const imgArr = [...image];
const slideTextHolder = document.querySelector("#slide-title");

const activeSlide = imgArr.find(image => image["aria-hidden"] !== true);
 
function showTtitle(activeSlide){ 
    const slideText = activeSlide.getAttribute("title")
    slideTextHolder.innerHTML = slideText;
}

// slider.addEventListener('change',showTtitle(activeSlide) )

Code in Embed on top (below the body) is a different as I still can’t figure out how to make it work :frowning:

Can anyone help me out? What element to target to add event-listener and what type I have to listen? I have tried several but no luck. :frowning:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

bump. Anyone, please

Thanks

Hi folks, is here anybody who can help me, Im still on blank point?

50-th version and still no luck to at least to mirror value from slider

const images = document.querySelectorAll(".top-slider__slide")
const slideTextHolder = document.querySelector("#slide-title");

const dots = document.querySelectorAll(".w-slider-dot")
const dotsArr = [...dots]


function getText(){
    [...images].map(image=>{

 if(!image.hasAttribute("aria-hidden")){
slideTextHolder.innerHTML = image.lastElementChild.innerText

}

 if(!image.hasAttribute("aria-hidden")){
slideTextHolder.innerHTML = image.lastElementChild.innerText

}})}


for(dot of dotsArr){
       if(dot.classList.contains("w-active")){
        getText()       
    }
}

Ok I have solve it (partially) as still have an issue with functionallity. If someone can give mi an idea where to look.

Im getting text from slide BUT ONLY ON SECOND CLICK on dot. I will appreciate any help.

const images = document.querySelectorAll(".top-slider__slide");
const dots = document.querySelectorAll(".w-slider-dot");

const slideTextHolder = document.querySelector("#slide-title");


// GET TEXT
function getText(idx){
    [...images].filter((image, i)=>{
    if(idx === i){
         slideTextHolder.innerHTML = image.lastElementChild.innerText
    }
  })
}

// GET DOT INDEX AND RUN getText() 
function currentDot(){
    [...dots].forEach((dot, i)=>{
   
    if(dot.classList.contains("w-active")){
        const idx = i;
        getText(idx)
    }
   })
  }

// GET DOT AND ADD LISTENER
for(dot of dots){
 dot.addEventListener("click", currentDot)
} 

I have another Issue, when I place working code into page settings (BB) code doesn’t work even with DOMContentLoaded. This is my long-term problem I have issued in another post (with no answer) how embed actually works and where to put custom code without trying 3 different places. Again I’m lost as code works when created and tested in Chrome Snippets but doesn’t run on page it self. Anyone can help.

an embed component is nothing else than a div wrapping the html, css or javascript you put inside of it if I’m not mistaken. Embed will also render custom HTML + CSS whereas code inside custom code section (header or body) will not render until published. Embed won’t render scripts however, only HTMl and CSS.

hi @anthonysalamin Im tying to place code into page Settings before Body End as expected wrapped in script element. But it doesn’t work. Where I have to place custom JS code to make it work. Thanks

which script would you like to inject ?

this I have posted last. I was just checking if will work on page (as I have issue about placing custom JS because is still not clear to me how it works ) but no luck. I was thinking if I will wrap code in <script> it will work, I was wrong. That’s why I was asking if someone can share best practices for placing custom JS code.

try this, see if that works.

<script>
document.addEventListener("DOMContentLoaded", () => {
  const images = document.querySelectorAll(".top-slider__slide"),
    dots = document.querySelectorAll(".w-slider-dot"),
    slideTextHolder = document.querySelector("#slide-title");

  // GET TEXT
  function getText(idx) {
    Array.from(images).filter((image, i) => {
      if (idx === i) {
        slideTextHolder.innerHTML = image.lastElementChild.innerText;
      }
    });
  }

  // GET DOT AND ADD LISTENER
  Array.from(dots).forEach((dot) => {
    dot.addEventListener("click", () => {
      if (dot.classList.contains("w-active")) {
        const idx = i;
        getText(idx);
      } // end if
    }); // end click
  }); // end forEach
}); // end DOM loaded
</script>

I’m not sure why you were using the spread operator, it creates a new array. You can simply use Array.from() method when doing operation on arrays, unless you don’t want any mutation on the original array.

1 Like

I was wrapping code exactly like that but even with your code no luck

I really don’t know what else to do as in dev it works (not prefect as mentioned issue) but code runs

EDIT: I have now tried to place code (both versions) into PROJECT setting. Still hitting the wall

Any idea why either code doesn’t run on Webflow page? I have now spend time to try every place to figure if there is a way to make it run. No chance at all and my deadline is at Monday with lots things to doo even that is only responsiveness, but I need to sort this slider. Thank you @anthonysalamin for your time, and If someone will have some Idea I will be happy for any suggestion, I’m out of ideas how to make it work.

Thanks in advance

HI guys if someone will have time to look on this issue here is just a link to the page it self to be able to manipulate it from browser or even use posted code to try to figure out why code doesn’t run in webflow. I will send request to support If they can explain why is that.

I have created another working copy so this version will stay untouched for possible testing.

Thank you

What exactly it is you would like to achieve ? Would you like to get the active slide’s title and inject it somewhere else than in the slider module ? You can use MutationObserver method to observe the aria-hidden attribute change on each slide and inject it’s data-title into your target element accordingly.

@Stan shoot me an email at hello@anthonysalamin.ch if you need help implementing it.

Hi @anthonysalamin client request is to have a slider text over the slide shifted to the left as in image.
I have tried several different methods to get slide text out, store it and use it in element placed over slider (carousel).

But text is strictly clipped into slide. In my desperation I have also tried to use in slide background image and clip it with CSS. Bold I know but I had to try it. :slight_smile: Not luck there either. Thank you for your offer I will gladly use your help if you will have time.

Thank you

I’m totally stupid. I have made it only with slider itself playing with masks. I feel stupid and happy at the same time. This proves that good sleep after a loooong work marathon is good thing as my brain needs some break too. :partying_face: :sunglasses:

But I would like to solve it with JS. Just to understand and it will be a clean solution than this hack. :wink: