Slide the Pagetitle ONLY when it's too long?
-
#header:hover #pagetitle {animation: slide 16s ease-in 1s infinite !important;} @keyframes slide { 0%, 91%, 100% {transform:translateX(0); overflow: visible;} 89%, 90% {transform:translateX(-85%);} }
So, I come up with this CSS mod to slide the Title bar's pagetitle when mouseover the header (or buttons), but I don't know how to set it up to only slide the title when the full length of the title is longer than the width of the browser...
Is there anyway to do so with just CSS, or it need the magic of Javascript?
Thanks.
-
@dude99 I tried to do this kind of thing - a marquee slider for tabs that played audio, and ended up using JS. But even then I couldn't find a reliable way to determine how "long" something was in relation to something else. I ended p just counting the characters and approximating roughly how long it was and needed to be.
Though now that I think about it, in a mod I made a long time ago I did some strange stuff for measuring the length of text by copying into a hidden span, and measuring the length of that. It's a bit complicated but that could work.
-
@LonM Thanks for the suggestion.
I try to use thetext-overflow: ellipsis
condition to trigger the slide effect, but it failed:#header:hover #pagetitle[title$="..."] {animation: slide 16s ease-in 1s infinite !important;}
am i doing something wrong? If so, what's the proper syntax?
-
@dude99 I suspect that doesn't work because the "..." is entirely cosmetic - you can only use $=... to match ellipses that are actually in the text itself.
-
@LonM Hmm... That's too bad. So, my syntax is correct?
I just wrote it out from my intuition, not sure if it's the correct syntax. -
@dude99 It looks right to me - https://www.w3schools.com/css/css_attribute_selectors.asp has a good overview
-
@LonM Ah, ok. Thanks for the confirm.
EDIT: OK, after some research I found out CSS3 can't access HTML's content. Thus, text & innertext node can't be targeted with CSS! LOL
-