Wordpress Themes - WP Forum at BFA

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)

flyboy Aug 29, 2016 01:03 PM

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/

juggledad Aug 29, 2016 02:42 PM

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??

juggledad Aug 29, 2016 02:53 PM

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.

juggledad Aug 29, 2016 04:41 PM

works fine in montezuma too!

flyboy Aug 30, 2016 11:58 AM

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;}



All times are GMT -6. The time now is 09:38 PM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.