Not Solved Help styling "Cool Announcements with Marquee" container
#1
Not Solved
I am having a rough time trying to style the container that the marquee scrolls in...here is the code I am working with:

<div style="background: {$mybb->settings['annc']};
	border-top: 1px solid {$mybb->settings['annb']}; border-right: 1px solid {$mybb->settings['annb']}; border-left: 1px solid  {$mybb->settings['annb']}; border-bottom: 1px solid {$mybb->settings['annb']};border-radius: 6px;text-align: center; margin: 10px auto; padding: 5px 20px;color:{$mybb->settings['anncc']};"><center><marquee onmouseover="this.setAttribute('scrollamount',0)" onmouseout="this.setAttribute('scrollamount',1)" direction="left" scrollamount="5" scrolldelay="1" height=""> {$mybb->settings['ann']}</marquee></center></div>
		<br />
Which gives me this:

   

But I would like to add a title block on the left side with a font awesome icon...something like this photoshop rendering:

   

I tried a few things but every attempt broke the entire marquee... Sad
MyBB 1.8.22 (x4)
7173Mustangs.com, pa2a.org, pazrt.com & paguntalk.com
Reply
#2
Not Solved
Pls, try this:

<div style="background: #EEEEEE;border: 1px solid #2c82c9;border-radius: 3px;text-align: center;margin: 10px auto;padding: 5px 20px 5px 165px;color:#03456b;line-height: 2em;position: relative;">
	<div style="background: red; position: absolute; top: 0; left: 0; padding: 5px 20px; margin: -1px; line-height: 2em; font-weight: 800; color: white; border: 1px solid red; border-bottom-left-radius: 3px; border-top-left-radius: 3px; ">
		<i class="fas fa-microphone-alt fa-lg"></i> Forum News
	</div>
	<center>
		<marquee onmouseover="this.setAttribute('scrollamount',0)" onmouseout="this.setAttribute('scrollamount',1)" direction="left" scrollamount="5" scrolldelay="1" height="">
			{$mybb->settings['ann']}
		</marquee>
	</center>
</div>
<br />
Reply
#3
Not Solved
(2019-12-03, 05:19 PM)SvePu Wrote: Pls, try this:

<div style="background: #EEEEEE;border: 1px solid #2c82c9;border-radius: 3px;text-align: center;margin: 10px auto;padding: 5px 20px 5px 165px;color:#03456b;line-height: 2em;position: relative;">
	<div style="background: red; position: absolute; top: 0; left: 0; padding: 5px 20px; margin: -1px; line-height: 2em; font-weight: 800; color: white; border: 1px solid red; border-bottom-left-radius: 3px; border-top-left-radius: 3px; ">
		<i class="fas fa-microphone-alt fa-lg"></i> Forum News
	</div>
	<center>
		<marquee onmouseover="this.setAttribute('scrollamount',0)" onmouseout="this.setAttribute('scrollamount',1)" direction="left" scrollamount="5" scrolldelay="1" height="">
			{$mybb->settings['ann']}
		</marquee>
	</center>
</div>
<br />

Perfect!!  I just can't seem to get the hang of styling!  Thank you!!

While looking at this code, do you know why the scroll slows down with mouse hover but doesn't speed up after you stop hovering?  The scroll stays real slow.  It did this before any styling.  I'd like it to speed back up after no hover?

https://www.7173mustangs.com/index.php

Thanks again for the styling, it looks GREAT!
MyBB 1.8.22 (x4)
7173Mustangs.com, pa2a.org, pazrt.com & paguntalk.com
Reply
#4
Not Solved
I have also noticed the slowdown but can not see where it comes from. If you really like this type of marquee, there are even better ways to build it.
On browsers like Firefox that marquee doesn't run smoothly, it sticks a little bit.
Reply
#5
Not Solved
(2019-12-03, 05:48 PM)RocketFoot Wrote:
(2019-12-03, 05:19 PM)SvePu Wrote: Pls, try this:

<div style="background: #EEEEEE;border: 1px solid #2c82c9;border-radius: 3px;text-align: center;margin: 10px auto;padding: 5px 20px 5px 165px;color:#03456b;line-height: 2em;position: relative;">
	<div style="background: red; position: absolute; top: 0; left: 0; padding: 5px 20px; margin: -1px; line-height: 2em; font-weight: 800; color: white; border: 1px solid red; border-bottom-left-radius: 3px; border-top-left-radius: 3px; ">
		<i class="fas fa-microphone-alt fa-lg"></i> Forum News
	</div>
	<center>
		<marquee onmouseover="this.setAttribute('scrollamount',0)" onmouseout="this.setAttribute('scrollamount',1)" direction="left" scrollamount="5" scrolldelay="1" height="">
			{$mybb->settings['ann']}
		</marquee>
	</center>
</div>
<br />

Perfect!!  I just can't seem to get the hang of styling!  Thank you!!

While looking at this code, do you know why the scroll slows down with mouse hover but doesn't speed up after you stop hovering?  The scroll stays real slow.  It did this before any styling.  I'd like it to speed back up after no hover?

https://www.7173mustangs.com/index.php

Thanks again for the styling, it looks GREAT!
 
bro possible u can make one plugin for this 


https://community.mybb.com/thread-225522-post-1339581.html#pid1339581

p
lease check
----------------------------No -------- Signature ---------------------------------
Reply
#6
Not Solved

I found a nice pure CSS marquee but it is coded different than the one above...It looks good other than it also needs the red title box and font awesome microphone!

I tested it in my template and it worked nicely on all browsers!  If anyone could help me with the same styling as the other one above, I would greatly appreciate it!!


    <style style="text/css">
        .marquee {
            height: 40px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
        
        .marquee p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 40px;
            text-align: center;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 20s linear infinite;
        }
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }
    </style>

    <div class="marquee">
        <p> {$mybb->settings['ann']} </p>
    </div>

<br />
MyBB 1.8.22 (x4)
7173Mustangs.com, pa2a.org, pazrt.com & paguntalk.com
Reply
#7
Not Solved
Here is your code Wink

<style type="text/css">
    .marquee_cont {
        height: 2em;
        background: #fefefe;
        color: #333;
        border: 1px solid #4a4a4a;
        position: relative;
        padding: 5px 0;
        border-radius: 3px;
    }

    .marquee_badge {
        position: absolute;
        padding: 5px 20px;
        line-height: 2em;
        height: 2em;
        top: 0;
        left: 0;
        background: red;
        border: 1px solid red;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        color: white;
        font-weight: 800;
        margin: -1px;
        z-index: 1;
    }

    .marquee {
        max-width: 100vw;
        white-space: nowrap;
        overflow: hidden;
        line-height: 2em;
        margin: 0 5px 0 145px;
    }

    .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 10s linear infinite;
    }

    .marquee span:hover {
        animation-play-state: paused
    }

    @keyframes marquee {
        0%  { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
</style>

<div class="marquee_cont">
    <div class="marquee_badge"><i class="fas fa-microphone-alt fa-lg"></i> Forum News</div>
    <div id="marquee" class="marquee">
        <span>{$mybb->settings['ann']}</span>
    </div>
    <script type="text/javascript">
    if (document.getElementById('marquee')) {
        var marquee = document.getElementById('marquee');
        len = marquee.innerHTML.length;
        marquee.firstElementChild.style.animationDuration = len/6 +'s';
    }
    </script>
</div>
<br />

   
Reply
#8
Not Solved
(2019-12-04, 05:39 PM)SvePu Wrote: Here is your code Wink

<style type="text/css">
    .marquee_cont {
        height: 2em;
        background: #fefefe;
        color: #333;
        border: 1px solid #4a4a4a;
        position: relative;
        padding: 5px 0;
        border-radius: 3px;
    }

    .marquee_badge {
        position: absolute;
        padding: 5px 20px;
        line-height: 2em;
        height: 2em;
        top: 0;
        left: 0;
        background: red;
        border: 1px solid red;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        color: white;
        font-weight: 800;
        margin: -1px;
        z-index: 1;
    }

    .marquee {
        max-width: 100vw;
        white-space: nowrap;
        overflow: hidden;
        line-height: 2em;
        margin: 0 5px 0 145px;
    }

    .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 10s linear infinite;
    }

    .marquee span:hover {
        animation-play-state: paused
    }

    @keyframes marquee {
        0%  { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
</style>

<div class="marquee_cont">
    <div class="marquee_badge"><i class="fas fa-microphone-alt fa-lg"></i> Forum News</div>
    <div id="marquee" class="marquee">
        <span>{$mybb->settings['ann']}</span>
    </div>
    <script type="text/javascript">
    if (document.getElementById('marquee')) {
        var marquee = document.getElementById('marquee');
        len = marquee.innerHTML.length;
        marquee.firstElementChild.style.animationDuration = len/6 +'s';
    }
    </script>
</div>
<br />

SvePu, that is amazing!  You even added the hover pause!  I love it! 

Is the scroll speed adjustable?  I may need to speed it up just a bit but otherwise...PERFECT!!

Thanks again!!
MyBB 1.8.22 (x4)
7173Mustangs.com, pa2a.org, pazrt.com & paguntalk.com
Reply
#9
Not Solved
You can set the number 6 in here:
marquee.firstElementChild.style.animationDuration = len/6 +'s';

higher or lower (higher number => faster scroll)
Reply
#10
Not Solved
(2019-12-04, 06:30 PM)SvePu Wrote: You can set the number 6 in here:
marquee.firstElementChild.style.animationDuration = len/6 +'s';

higher or lower (higher number => faster scroll)

Got it!  Thanks again!!
MyBB 1.8.22 (x4)
7173Mustangs.com, pa2a.org, pazrt.com & paguntalk.com
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)