Creating a text marquee

dannyshepparddannysheppard Registered Users Posts: 2 Beginner grinner
edited January 13, 2014 in SmugMug Customization
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!

Comments

  • jwashburnjwashburn Registered Users Posts: 476 Major grins
    edited January 12, 2014
    dannysheppard wrote: »
    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!

    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;}
    }
    Joey Washburn
    www.joeywashburn.com
  • dannyshepparddannysheppard Registered Users Posts: 2 Beginner grinner
    edited January 12, 2014
    jwashburn wrote: »
    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;}
    }

    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!
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 12, 2014
    dannysheppard wrote: »
    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).
  • jwashburnjwashburn Registered Users Posts: 476 Major grins
    edited January 13, 2014
    dannysheppard wrote: »
    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!

    Just for giggles take out the Comments from the code on the Jfiddle site
    Joey Washburn
    www.joeywashburn.com
  • jwashburnjwashburn Registered Users Posts: 476 Major grins
    edited January 13, 2014
    ChancyRat wrote: »
    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).


    The best bet for figuring out what works and what doesnt work is to read up on YUI

    http://yuilibrary.com/
    Joey Washburn
    www.joeywashburn.com
Sign In or Register to comment.