Options
Creating a text marquee
dannysheppard
Registered Users Posts: 2 Beginner grinner
I'm trying to create a scrolling text marquee (to scroll testimonials) on my Smugmug site. What I'm trying to do is almost exactly what I found here (except for the JS button of course): http://jsfiddle.net/jonathansampson/h7SYp/
But when I put this HTML/CSS into my Smugmug page, it just shows a white box with the top line of text visible. I've tried simplifying it to see if I could sort out what's causing the problem but no luck so far. At first I thought maybe CSS keyframes were not supported by Smugmug, but after searching (a lot!) it looks like these animations are being used by a lot of people to create slideshows.
On a related note, I have found the following:
- Viewing this HTML/CSS JSFIDDLE site in Chrome, properly displays the animation.
- Viewing this HTML/CSS that I copied from JSFIDDLE to a local file does NOT work in Chrome, but DOES in IE???
- When I paste this code into my Smugmug customization, it doesn't work in any browser.
Has anyone else created this kind of customization that can help me, or know of some resource/example?
Thanks!
But when I put this HTML/CSS into my Smugmug page, it just shows a white box with the top line of text visible. I've tried simplifying it to see if I could sort out what's causing the problem but no luck so far. At first I thought maybe CSS keyframes were not supported by Smugmug, but after searching (a lot!) it looks like these animations are being used by a lot of people to create slideshows.
On a related note, I have found the following:
- Viewing this HTML/CSS JSFIDDLE site in Chrome, properly displays the animation.
- Viewing this HTML/CSS that I copied from JSFIDDLE to a local file does NOT work in Chrome, but DOES in IE???
- When I paste this code into my Smugmug customization, it doesn't work in any browser.
Has anyone else created this kind of customization that can help me, or know of some resource/example?
Thanks!
0
Comments
Try adding this
.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
-webkit-animation: marquee 15s linear infinite alternate;
-moz-animation: marquee 15s linear infinite alternate;
-ms-animation: marquee 15s linear infinite alternate;
-o-animation: marquee 15s linear infinite alternate;
animation: marquee 15s linear infinite;
}
@-webkit-keyframes marquee
0% {top:8em;}
100% {top:-11em;}
}
www.joeywashburn.com
Hmmmm, nope that didn't work either. Now it doesn't work in IE or Chrome on my local desktop. I'm really confused how I can copy the exact code from the JFIDDLE site (where it works in both browsers) into a new file or into Smugmug customization and it doesn't work at all!
I can't help you with the code and why it doesn't work, except to say I've had the exact same experience of code working on, for example, W3S, and in Dreamweaver, and then KER-plunk dead in SM. Some html code is not permitted in SM, some HTML requires one use CSS instead of HTML. The big one that stuck out for me is constructing tables. I wish there was a way to have Dreamweaver adapt to SM's rules. Or at least that SM would post a list of what's allowed and what's not (or where the code has to be placed, i.e. HTML or CSS).
Just for giggles take out the Comments from the code on the Jfiddle site
www.joeywashburn.com
The best bet for figuring out what works and what doesnt work is to read up on YUI
http://yuilibrary.com/
www.joeywashburn.com