SplitText removes sibling image.

[Rodrigo 2,662 Likes (Superhero)]

Hi Guys,

 

Quick question.

 

I noticed that using SplitText, if the <div> element being passed to the SplitText tool, has an image or any other tag inside, that tag is changed into an empty <div> by the SplitText tool. Is this by design?.

<div class="content" id="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam elementum enim tincidunt suscipit a et lacus. Nunc eros mauris, semper at pellentesque eget, pretium ut lacus. Sed in pulvinar turpis, vitae congue nisi. Mauris aliquam finibus molestie. Duis a volutpat ligula. Nullam lobortis lorem justo, ac gravida arcu mollis quis. Curabitur condimentum diam imperdiet, iaculis libero eget, tempor turpis. Phasellus neque turpis, pretium sit amet nibh ut, egestas rutrum ex. Nam sodales mollis elit ut consequat.<br>
  <img src="http://s.cdpn.io/16327/logo_robust.jpg" />
</div>

The <img> in the code above gets replaced by an empty div.

 

The solution I've found is wrap the text into an extra <div> element and pass that one to the SplitText, thus preserving the <img> element:

<div class="content">
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam elementum enim tincidunt suscipit a et lacus. Nunc eros mauris, semper at pellentesque eget, pretium ut lacus. Sed in pulvinar turpis, vitae congue nisi. Mauris aliquam finibus molestie. Duis a volutpat ligula. Nullam lobortis lorem justo, ac gravida arcu mollis quis. Curabitur condimentum diam imperdiet, iaculis libero eget, tempor turpis. Phasellus neque turpis, pretium sit amet nibh ut, egestas rutrum ex. Nam sodales mollis elit ut consequat.
  </div>
  <img src="http://s.cdpn.io/16327/logo_robust.jpg" />
</div>

Thanks,

Rodrigo.

See the Pen KwgpgJ by rhernando (@rhernando) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi Rodrigo 

 

hi mate , another solution's using html <h> tags :

 

See the Pen PwGPqL by MAW (@MAW) on CodePen

<div class="content" id="content">
  <h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam elementum enim tincidunt suscipit a et lacus. Nunc eros mauris, semper at pellentesque eget, pretium ut lacus. Sed in pulvinar turpis, vitae congue nisi. Mauris aliquam finibus molestie. Duis a volutpat ligula. Nullam lobortis lorem justo, ac gravida arcu mollis quis. Curabitur condimentum diam imperdiet, iaculis libero eget, tempor turpis. Phasellus neque turpis, pretium sit amet nibh ut, egestas rutrum ex. Nam sodales mollis elit ut consequat.</h4>
  <img src="http://s.cdpn.io/16327/logo_robust.jpg" align="bottom"/>
</div>

and 

mySplitText = new SplitText("#content>h4", {type:"lines"})

[Jonathan 5,176 Likes (Superhero)]

Hello Rodrigo,

 

Does this still happen with any other tag besides a <div> tag ??

 

[Carl 9,066 Likes (Superhero)]

Hi Rodrigo,

 

The intended use of SplitText is that you pass it HTML elements that only contain text. Wrapping the text that should be split in a separate <div> is what I would recommend. Hopefully this works for your scenario.

 

Best,

 

Carl

[Rodrigo 2,662 Likes (Superhero)]

Hi Guys,

 

Thanks for jumping in 

 

@Carl, wrapping the text in a separate element actually does the trick (check the second code-block of my first post), I just was wondering if this was an expected behaviour or not. I was expecting that perhaps SplitText will recognize that the element doesn't have any text in it, but I can definitely live with the solution in place.

 

Unfortunately I came around this late last night, so I didn't have time to tinker with the codepen a bit more. I've updated the codepen with both scenarios:

 

See the Pen KwgpgJ by rhernando (@rhernando) on CodePen

 

Thanks,

Rodrigo.

[Rodrigo 2,662 Likes (Superhero)]

Hello Rodrigo,

 

Does this still happen with any other tag besides a <div> tag ??

 

 

Hey Jonathan,

 

Yes, any tag I've throw to it, returns the same result, <section>, <article>, <header>, <footer>, basically it goes beyond the tag-type and more about the DOM node, as Carl explained.

 

Thanks for the support man!!

Rodrigo.