Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ilovemypixels

SplitText in Sticky Header

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

I was trying to hide the website so I don't get in trouble, but the URL is visible on the image so I may as well post the link.

 

https://smallbusiness.co.uk/downloads/

 

I will try and do a codePen also but will be tomorrow. I am worried as this seems to be happening on a few different sites, not just this one.

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

Hi,

I think it's going to be impossible to replicate what is going on, on this page inside a code pen. I'm not sure which part of the page construction or loading is causing the issue.

Thanks for having a look
 

Link to comment
Share on other sites

Even in that post/pen that you link to, SplitText retains the break, it just removes the subsequent breaks that would create additional white space. Is that the case for you?

 

Why use <br>s anyway?

Link to comment
Share on other sites

I managed to isolate the issue!!!

 

See the Pen XWbbOON by ilovemypixels (@ilovemypixels) on CodePen


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??

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

Unfortunately I have no control over the sites that this as will appear on.

 

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

 

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

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

Sorry, wasn't very clear.

 

In your example you use my button to split the text, but this button won't be there on the ad. I need to as you say get the load event on the iframe. Not sure currently if I can do this.

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 so much for continuing to help. 

 

The issue though is that I am not setting display: none. The site that hosts the banner is.

Link to comment
Share on other sites

Just now, iloveaphextwin said:

The issue though is that I am not setting display: none. The site that hosts the banner is.

So you could check to see if the element is visible on the page or not:

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

Link to comment
Share on other sites

By the way, the version of GSAP that you're using is really old. We recommend at least upgrading to version 2.1.3, but really we recommend version 3.1.1 since it's the latest at the moment.

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.
×