News Ticker

AshevilleRPG
AshevilleRPG
edited August 2012 in Campaign Portal Building
Wondering if anyone's ever tried to include a news ticker-style scroll to their OP page, similar to the ones on the right hand side of "this page.":http://allwebco-templates.com/support/S_script_IFrame-NewsScroll.htm

I'm having trouble getting any HTML code to work on my site, and I'm wondering if it's just too complex of a code for OP to work with.

Comments

  • Leonidas300
    Leonidas300
    Posts: 273
    Great Idea but above my pay grade
  • magavendon
    magavendon
    Posts: 112
    I believe that you can't use the iframe tag on OP.
  • tic
    tic
    Posts: 44
    Marquee tag doesn't work either. You could almost have gotten away with embedding a twitter feed, but those things require the use of IDs instead of classes, and OP's CSS doesn't allow IDs.
  • madartiste
    madartiste
    Posts: 328 edited August 2012
    Maybe play with the code for this? I haven't played too much with CSS3 animations, so I'm not sure what the best way to make it work would be.
    "http://cssdeck.com/labs/css-news-ticker":http://cssdeck.com/labs/css-news-ticker":http://cssdeck.com/labs/css-news-ticker">http://cssdeck.com/labs/css-news-ticker

    If you want a horizontal scrolling ticker, this one looks good:
    "http://www.cssplay.co.uk/menu/css3-marquee-two.html":http://www.cssplay.co.uk/menu/css3-marquee-two.html
    Post edited by madartiste on
  • gaaran
    gaaran
    Posts: 740
    Well, I was able to get the first one working with my code "here.":http://www.obsidianportal.com/campaign/test-campaign-2/wikis/news-ticker I included the HTML and CSS on the page. You have to make sure to isolate it from the rest of the page like I did, the first time i put it in, all the nav bars and everything started moving :P. I couldn't get the second one working without doing more work than i wanted to (pretty sure it CAN work though...).
  • madartiste
    madartiste
    Posts: 328
    @gaaran, I'm noticing Obsidian Portal makes some of this code behave very strangely. I got the horizontal scroll one working, but only with some tweaking. I also noticed that if you have three capital letters in a row (such as in an acronym), it causes JUST that word to scroll much faster across. Very weird effect, but undesirable just the same. I also found the effect looks more smooth if you duplicate the text you want to scroll -- ie. "Here is my sentence. Here is my sentence."
    I was not so wise as to include the code on the page, but firebug or chrome developer tools should let you poke around. If folks really want it, I can add the code to the page.

    "here's the page":http://www.obsidianportal.com/campaign/test-campaign-ghv2/wikis/test-scroll
  • gaaran
    gaaran
    Posts: 740
    Hey Sara, want to take a look and firebug my version of your horizontal ticker? I tried to simply copy over your content, but it won't animate. Is there something I'm missing?

    It's at the bottom of "News Ticker":http://www.obsidianportal.com/campaign/test-campaign-2/wikis/news-ticker
  • madartiste
    madartiste
    Posts: 328
    Hi gaaran. Sorry for the delay. Had some minor, but irritating computer issues over the weekend.
    First off, awesome looking page!
    Second, I can't seem to find the code for the marquee in your custom style sheet. Maybe I'm just missing it, but here's what it should be:

    .wrapper {width:680px; height: 45px;border:1px solid #aaa;margin:0 auto; overflow:hidden; border-radius:8px;}

    .marquee{position:relative;
    overflow:hidden;
    float:left;
    }
    .marquee span{font:25px Courier, sans-serif; line-height:25px; padding-left:50px;
    white-space: nowrap;
    display:inline;
    position: relative;
    top:-15px;
    left:0%;
    -moz-animation: marquee 15s infinite linear 1s;
    -webkit-animation: marquee 15s infinite linear 1s;
    }
    .marquee:hover span{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    }
    .marquee span:after {content:attr(rel); display:inline; color:black; padding-left:10px;}
    @-webkit-keyframes marquee{
    0% {left: 0%;}
    100% {left: -50%;}
    }

    @-moz-keyframes marquee{
    0% {left: 0%;}
    100% {left: -50%;}
    }



    What you have on the page itself looks like it should be correct, but here's what I've got. I hope you don't mind the goofy text. :) It's was an experiment for a sci-fi campaign.





    Ancient ship found on outerworld. Gga sends team to investigate.    Ancient ship found on outerworld. Gga sends team to investigate.    





    As I said earlier, OP seems to cause some of the code to behave strangely. I had to edit the type placement and a few other things to get it to look okay. Hopefully we can get it working for you.
  • gaaran
    gaaran
    Posts: 740
    Oh yeah, sorry about that, I forgot about this post, and when I was cleaning up the code, I took out the marquee that didn't work :P. Thanks for the assistance though, and I'l probably be finding a use for that vertical ticker. (Or I could not, because I keep coming up with more and more crazy things for my page... since we can only have one stylesheet for the whole site, I'm up to like 900 lines of CSS :P).
  • madartiste
    madartiste
    Posts: 328
    @gaaran, No worries! I just felt bad that I took so long to respond.
    The code definitely works, but it's very strange at times. I'm guessing some part of OP's own stylesheets or some kind of scripting on the site causes the weird behavior.
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions