Jump to content
Search Community

SplitText and iFrame support?

chrisk test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello all,

 

We're trying to integrate SplitText into our solution, content will come from a JSON endpoint which is entered from a WYSIWYG.

 

When using SplitText, it seems to omit the iframe element.

 

Is there any recommendations around that?

 

Thank you

Chris

See the Pen reeBvR by chriskekeke (@chriskekeke) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Can you explain a little more about why you are splitting an iframe and what you expect the desired result to be?

I'm not sure I understand what you are trying to do.

 

SplitText takes the raw text content of an html element and splits it into words, lines and chars. 

The target that you pass into SplitText should only contain text, no other html tags.

 

Does that help?

  • Like 1
Link to comment
Share on other sites

Hi Carl,

 

Thanks!  Let me explain a little more:

 

 

 

We're trying to integrate SplitText into our solution, content will come from a JSON endpoint which is entered from a WYSIWYG.

 

We actually don't want to do anything with the iframe, but because of the way the CMS works, when a user is entering content it might get wrapped within a <p> tag.  There will be ways to tidy it up, ideally we'd want to ensure the iframe isn't wrapped around whatever selector we're targeting SplitText to manipulate.  But mistakes can happen within a CMS environment.

 

Creating a work around in our script, but I just wanted to check if there's any config options or best practices around it? Of course not wrapping the <iframe> in the <p>.

 

Anything else?

 

Thanks!

Link to comment
Share on other sites

  • Solution

Ah, ok, that makes a lot more sense. Thanks for the clarification.

 

Yes, ideally you wouldn't be putting iframes inside <p> tags and trying to split to them, but with a cms I see that it can happen. 

 

SplitText doesn't have any internal logic to detect things that aren't text and ignore them. 

It sounds like you will need to create a custom script that finds the iframes and somehow wraps them in a way that they are not included in the same selector you are passing into SplitText. Or maybe there is some funky selector you can write that finds all <p> that don't have an <iframe> as a first child. 

  • Like 2
Link to comment
Share on other sites

To add to Carl's great advice.

 

If your using a CMS like Wordpress or Magento that will automatically add <p> tags around your elements. Then you can add a class to the parent <p> tag of your iframe, and then only target <p> tags that don't have that 'iframe' class like this:

 

Using this CSS selector in your splitText() constructor that uses CSS :not()

 var splitText = new SplitText('p:not(.iframe)'); // target only <p> tags that do not have an 'iframe' class

x

See the Pen jqqOeN by jonathan (@jonathan) on CodePen


 

// add a class to the iframe tags parent, which is a <p> tag
var iframe = document.querySelector("p > iframe");
iframe.parentElement.classList.add("iframe");

function split() {
  var splitText = new SplitText('p:not(.iframe)'); // target only <p> tags that don't have an 'iframe' class
  console.log(splitText);
}

Also keep in mind that some wysiwyg have functions to not allow p tag wrapping .

 

I hope this helps!

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