Jump to content
Search Community

SplitText in Sticky Header

ilovemypixels test
Moderator Tag

Recommended Posts

Hi there,

 

I am having a problem with splitText that I have been trying to debug for years, as I could never seem to replicate the issue. I only discovered today, that the issue occurs when my banner ads are loaded inside a sticky header. When the banners are loaded inside an iframe, and that iframe is inside a sticky header then the text does not split properly, as you can see in the images attached it all comes out on one line and the breaks are not respected.

On another page this banner is not inside the header, and it loads fine even if the page has been scrolled down so the banner is not visible. 

This problem only occurs inside this header. The javascript loads as the banner animates, but split text is not able to do its thing. As you can see in the DOM structure, splittext has not made the divs it needs to.

 

Any ideas?

Thanks in advance

Will

bug_frame_1.jpg

bug_frame_2.jpg

Link to comment
Share on other sites

Hey iloveaphextwin and thanks for posting. 

 

12 minutes ago, iloveaphextwin said:

When the banners are loaded inside an iframe, and that iframe is inside a sticky header then the text does not split properly

That's a very particular scenario.

 

A quick test posted below attempting to recreate the situation didn't put all of the text on the same line. Can you please try to recreate the error in a CodePen?

See the Pen oNXXWWe by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

3 minutes ago, iloveaphextwin said:

I don't see the ad on this page. 

 

But the more minimal the demo the better (and the more quickly you'll get an issue fixed if there is one). Making us wade through not only the site's code but also a complex ad's code is kind of a pain. So if you're able to recreate it more minimally, please do so :) 

Link to comment
Share on other sites

14 minutes ago, iloveaphextwin said:

I managed to isolate the issue!!!

Good work!

 

14 minutes ago, iloveaphextwin said:

If the banner ad loads inside a DIV, and that div has display:none; set, then the text does not split.
Maybe there is nothing that can be done about this??

SplitText needs to be ran once the elements are in their exact positions that they should be when they should be split. So yes, them not being displayed at all is an issue :) 

 

You can work around it by waiting to split until they are on the screen:

See the Pen eYNNXRE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

This is one reason why we recommend using visibility over display to hide elements in most cases. Here's the basic setup for that.

See the Pen wvaaOra?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

1 minute ago, iloveaphextwin said:

I can't think of a way to wait until the content is visible or detect when this happens?

I don't understand. As shown, as long as you're able to run a function, you're able to wait until the content is visible. I show that in the first demo in my last post.

 

Ads are loaded in iframes. So you have access to the load/ready event of the iframe and it's no different than a regular webpage.

 

3 minutes ago, iloveaphextwin said:

I think we have to not use splitText in banners :(

This is most definitely not true. People use SplitText in banners all the time.

Link to comment
Share on other sites

1 minute ago, iloveaphextwin said:

I need to as you say get the load event on the iframe. Not sure currently if I can do this.

You should be able to. If you set up your ad in a logical flow (with styles and HTML followed by the JS), that should even be the default. The issue is that you aren't changing the display before calling SplitText, as I show in the first demo. Here's the same thing with no button:

See the Pen YzXXMqP?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Thank you.
 

That is indeed an intriguing solution. I didn't realise display:none would change the width our of containing wrapper, but it does so this should work.
 

I find the whole thing a bit nuts, but I guess web technologies are nuts. I will run an interval that checks the width of the wrapper and only starts the ad once it's visible. I also appreciate the fact your solution does not use jQuery! thanks.

 

I will update Greensock in our ads. I also updated our membership, noticed it had expired.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...