Split Text - Bold?

[Lawrie]

Hi,

I really like the SplitText utility, but I'm having some problems with it.

Is it possible to animate a block of text that contains some bold words? So far, SplitText seems to disregard any <b> or <strong> tags, so the animated elements are not bold, and then the bold "pops back" on when I revert to the original text.

 

I've forked the SplitText Starter Pen here, though I have just added the <b> tags on line 5 of the html, and an onComplete function to revert the SplitText.

 

See the Pen Iqhfm by LawrieCape (@LawrieCape) on CodePen

Thanks.

Lawrie.

[jamiejefferson]

Sorry, but the utility is just SplitText, not SplitHTML it's just for splitting plain text.

 

From the API's Notes/Limitations

SplitText only recognizes raw text and <br> tags, not child elements like <strong> or <em> elements

[Lawrie]

Ahh, okay. I searched the docs for bold, instead of strong, so missed that.

Thanks for the quick response

[Silverback IS]

--EDIT--

If the formatted text wraps over 2 lines this would not work either which would be a huge drawback. So I would strongly advise against this code and can't see how to delete this post at the moment.

 

 

You could do a little workaround, but I wouldn't bank on the automatic line breaks working. For small formatting such as a couple of bold words, or italics this doesn't do too badly. This is by no means full proof and wouldn't work for example if you have the same text in 2 places with the second being bold. 

var $mainText = $(".mainText"),//the container holding paragraph tags
                //select just the paragraph tags (I have a div in there as well that I will leave out of the animation as it doesn't contain text)
		$p = $mainText.children("p"),
                //jquery - clone all the children in each paragraph, which you should only have tags around areas of text that you'd like to format
		$newChildren = $p.children().clone(true);

                //splitText as normal
		var splitMainText = new SplitText($p,{type:"lines"});

                //loop through the resulting lines
		$(splitMainText.lines).each(function(){
			var $splitTextLine = $(this),
			lineText = $splitTextLine.html();
    
                        //loop through the formatted areas you cloned earlier
    			$newChildren.each(function(){
                                        //put this in a container so we can find the HTML and Text equivalent that it will have been converted to
				        var $newChild = $(this),
				        $tempDiv = $("<div />");
				        $tempDiv.append($newChild);

                                        //get the text equivalent of this formatted area and check if that is in this line
				        var changedToText = $tempDiv.text(),
        				indexx = lineText.indexOf(changedToText);
				        if(indexx!==-1){
                                                    //if the text was found, replace it with the formatted version and update variables
					            var newHTML = lineText.replace(changedToText,$tempDiv.html());
					
					            $splitTextLine.html(newHTML);

					            $newChildren.detach($newChild);
					            lineText = $splitTextLine.html();
				        }
				        $tempDiv.remove();
			    });
		});