Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

Horizontal Ticker without scrollbars


  #1  
Old Aug 29, 2016, 01:03 PM
flyboy's Avatar
flyboy
 
114 posts · Sep 2010
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/
  #2  
Old Aug 29, 2016, 02:42 PM
juggledad's Avatar
juggledad
 
23,492 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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??
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Aug 29, 2016 at 02:50 PM.
  #3  
Old Aug 29, 2016, 02:53 PM
juggledad's Avatar
juggledad
 
23,492 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Aug 29, 2016, 04:41 PM
juggledad's Avatar
juggledad
 
23,492 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
works fine in montezuma too!
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Aug 30, 2016, 11:58 AM
flyboy's Avatar
flyboy
 
114 posts · Sep 2010
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;}

Last edited by flyboy; Aug 30, 2016 at 12:02 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Horizontal Bar above the Header? thetravelchronicle Header configuration & styling 13 Oct 8, 2015 12:31 PM
Menu 1 (horizontal) vaictor Montezuma Theme 12 Jun 20, 2013 02:32 AM


All times are GMT -6. The time now is 01:42 PM.


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