I know the norm is usually to add spans within the Paragraph tags, but I found a neat little setup that does some animated text that I'd love to use so I went to try and set it up. Imagine my surprise when I tried to drag a Paragraph (actually need multiple paragraphs) into the Span tag and it isn't allowed? What could possibly be insecure about that? What I'm trying to do requires a script that is already set up to find the spans and the script displays each paragraph one at a time with a bit of animation.
Can we please get this either fixed or added so that this can be done? Truly there are still so many restrictions in this app, I just don't understand why so much is restricted. If we're smart enough to code a website, then we should be smart enough to know what is and isn't secure, and it should be our choice in the end of what we do and don't want to use in our websites. I understand to a degree that you're protecting the naive and inexperienced, but man, there has to be a middle ground somewhere for those of us that do have a clue. :/
Span is an inline element which can not contain block elements. This is nothing specific to BSS, it produces an error regardless “Element “p” not allowed as child of element “span” in this context.”. You can see that by adding <span><p></p></span> here - https://validator.w3.org/nu/#textarea. So it can be assumed that is why BSS does not allow it. What example or library does this that you are trying to use?
It's a little older code which might be why. I pulled it from an online component named "Animated Type Heading" which is for BSS 3. It's still in the online components list if you want to look at it. Thanks for the heads up on the code being invalid though, I didn't even think of that at all.
Thanks for the heads up on the code being invalid though, I didn’t even think of that at all.
You’re welcome @Jo. I don’t know what criteria BSS uses to determine what they deem as acceptable/unacceptable aside from sticking with the HTML specification/errors. Of course people can do many other things with both HTML & CSS that are not explicitly intended but will still properly work in a browser. BSS is doing its best to help users do things semantically correct. Thats one of the hallmark features of the app, while at times it can also create certain hindrances.
I looked at that component, what aspect are you looking to use with paragraphs do you want an entire paragraph typed out? I'm asking as there may be another library that better meets your needs.
Well the way it works is that each paragraph is cycled through one at a time in the animated part of the Heading. The way it's set up in this version it has those paragraphs enclosed within span tags. That is the part I'm after, the ability to have it cycle through separate lines of text one at a time at a reasonable speed etc. Fade in and out or scroll like a Marquee or whatever. I just need some animated special text setup like this one.
cycle through separate lines of text one at a time at a reasonable speed etc.
Honestly I typically use GreenSock's SplitText “lines” feature and animate paragraphs that way. Its not a free option and you need to code your own desired logic for whatever effect you wish to achieve. I know thats not very helpful to you due to those two things. In general people should be thoughtful with letter by letter reveals regarding lengthy paragraph text as users can easily scroll right past those sections before they finish occurring.
Fade in and out or scroll like a Marquee or whatever.
If you want to instead fade or slide you could always style and use the default BootStrap carousel for text only. You can hide all the controls and indicators so its just text and utilize autoplay. You could also do a scrolling marquee with CSS only. Hopefully something mentioned gives you some potential ideas.
Thanks so very much! :)
I can't seem to find a way to edit the text though. When I try to go to edit mode the box disappears and if I hit keys it just deletes what's there a char at a time. No edit bar shows at the top either.
If you select the first Span in the Overview Tree you will get the edit menu with the pencil and you can edit the first one.
Various methods can be used to edit the other two Spans. You could simply change the is-visible class to the other Spans manually just like javascript is doing when run in a browser.
Or you could add some "Dev Styles" and simply enable the css for the ones that need editing and disable on those that do not.
Thanks again Twinstream, that's a pretty interesting site that I'm sure I will get some use from as well. Looks like most everything there could be incorporated into BSS in some way or another (not that I want everything lol, just saying). Appreciated once again :)