Wordpress Themes - WP Forum at BFA - Horizontal Ticker without scrollbars

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)

- - Horizontal Ticker without scrollbars (http://forum.bytesforall.com/showthread.php?t=23540)

Horizontal Ticker without scrollbars

I've been trying to solve this for a whole day and my head is starting to hurt. Not specific to Montezuma, but I know a couple of guys here that are really good with CSS, so I thought I'd give them a good challenge

I came up with a 100% CSS ticker - like the one you see on the footer of news channels, only I don't want it stuck on the footer. And that's what's been messing me up - unless I use position: absolute and stick it to the bottom of the screen, I get a horizontal scrollbar.

Any way to get rid of the horizontal scroller without absolute positioning?

Here is a live example: https://jsfiddle.net/xcommie/6fkfj3gk/

try adding 'position: relative; top: -52px;' #tickerwraper and that will put it above teh words 'Content before ticker'

at leasT that's what I think your trying to do??

Hey that's pretty cool. I just did it in Atahualpa! Put the CSS in the CSS Inserts and the HTML in the 'HTML Inserts: Body Top' option and not I have a ticker at the top of the page. Now let me try it with Montezuma.

works fine in montezuma too!

Hey thank you for the reply JD

Actually I was hoping for the opposite effect - a way to get rid of the horizontal scroller without changing the position of a ticker. I had one solution for a scrollbar but it too moved my ticker as it used absolute positioning (hence the need to avoid absolute positioning).

But I got the best solution from some guys at stack overflow.

Also, got another solution from a dev of ours:

HTML:

Code:

<p>Content before ticker</p>



<div id="tickerwrap">

  <div id="ticker">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel augue eget velit tristique 

    pretium. Nam ultrices nulla risus, ut elementum mauris dignissim at. Sed ultrices placerat 

    dolor, ac congue nunc molestie et.

  </div>

</div>



<p>Content after ticker</p>

CSS:

Code:

/* Specifying the name for animation keyframes and keyframes themselves */

@keyframes customticker {

0% {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible;}

100% {-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}

}



/* Formatting the full-width ticker wrapper background and font color */

#tickerwrap {width: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); color: #fff;}



/* Formatting the ticker content background, font color, padding and off-screen entrance */

#ticker {display: inline-block; white-space: nowrap; -webkit-animation-iteration-count: infinite; 

            animation-iteration-count: infinite; -webkit-animation-timing-function: linear; 

            animation-timing-function: linear; -webkit-animation-name: customticker; 

            animation-name: customticker; -webkit-animation-duration: 10s; animation-duration: 10s;}