search

davatron5000 / FitText.js

A jQuery plugin for inflating web type
http://fittextjs.com
6.75k stars 1.39k forks source link

Bug in combination with fullPage.js #168

Closed digitalmdma closed 6 years ago

digitalmdma commented 6 years ago

I found out that only the first 2 slides in a onepager with fullPage.js (https://github.com/alvarotrigo/fullPage.js) working with FitText.js. Is there a workaround or a fix? I can provide a live website if you want.

charliewilco commented 6 years ago

can you provide a reduced test case?

digitalmdma commented 6 years ago

Hi charlespeters, yes I can. Providing it as soon as I can. Thanks for your quick response.

digitalmdma commented 6 years ago

Here my reduced test project. I duplikated page / slide 2 for you so you can see that the current page 3 is not working.

test.zip

digitalmdma commented 6 years ago

Hi, is there any feedback or workaround for this problem yet?

davatron5000 commented 6 years ago

Ideally we like to see your reduced test case in a editable/forkable item like CodePen or JSBin, not an entire project folder. The minimum amount of code that demonstrates the problem you're having. That way we can help dig in without setting up a 20MB project locally.

I think I've figured out your problem. You're repeating IDs like id="fittext5". In valid HTML, IDs are unique and cannot be repeated. If you select $("#foo"), JavaScript will only match the first one it finds. This is why the first occurence is working but the other ones are not.

If you switch these to classes class="fixtext5" then you should be in good shape. 🤗