Scrolling text restarts before the scroll has finished

**theremotedr** · 11-16-2016, 07:31 PM

I originally started a post in the HTML section but as ive now moved on i think i should ask a the question here seeing its js related.

My issue is the scrolling text does not completely finish but rather as soon as the text reaches the left hand side of the element it starts over again as opposed to scrolling all the text the starting.
Here is a page as an example http://theremotedoctor.co.uk/skype_i...rollto=content

Here is the link for the js file info http://www.quackit.com/javascript/co...ipt_scroll.cfm

Could you be so kind to give it the once over to see if you can advise if the problems lies here.

Many thanks.

**coothead** · 11-17-2016, 12:09 AM

Hi there theremotedr,

have a look at this example..

Code:


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-image: url(http://theremotedoctor.co.uk/m-images/background.png);
    font: 1em/150% arial, helvetica, sans-serif;
 }

#marquee {
    height: 2.5em;
    border-radius: 1em;
    border: 1px solid #5d0e13;
    box-shadow: 0.25em 0.25em 0.5em  #000;
    overflow: hidden;
    background-color: #66c2f1;
 }

#marquee p {
    width: 38em;
    line-height: 3.5em;
    margin: 0;
    font-size: 0.8em;
    font-weight: bold;
    white-space: nowrap;
    animation: marquee 12s linear infinite;
 }

@keyframes marquee {
    0%   {margin-left: 100%;}
    100% {margin-left: -38em;}
 }
</style>

</head>
<body> 
 <div id="marquee">
  <p>CONTACT ME ON IPBR21054, I ALSO USE WHATSAPP 07899827427.</p>
 </div>

</body>
</html>

coothead

**theremotedr** · 11-17-2016, 11:56 AM

Morning,
This code is so much easier to get your head around.
Ive updated all the pages that i need to and i am really happy,thanks very much.

Please could you assist with a few answers where i have become unsure about a couple of things.

Here i am not sure how to center the element to the page where the text scrolls inside.
http://theremotedoctor.co.uk/sitemap.html

Can you advise what determines the delay from when the text scroll ends to when it starts to scroll again.

**styxlawyer** · 11-17-2016, 12:22 PM

Originally Posted by theremotedr

Morning,
.
.
Here i am not sure how to center the element to the page where the text scrolls inside.
http://theremotedoctor.co.uk/sitemap.html
.
.

Simply add these two lines to your #marquee CSS around line 155:

Code:

		margin-right:auto;
		margin-left:auto;

**theremotedr** · 11-17-2016, 12:42 PM

Thanks very much,
One down and one to go.

Cheers.

**theremotedr** · 11-17-2016, 06:22 PM

I have noticed that some text is not being allowed to fully scroll to the left before it starts over again.
In that I mean depending on how much text there is depends at what point it's cut off.
Can you advise how to overcome this problem so the whole text scrolls off the left hand side before it starts over again.

**coothead** · 11-18-2016, 10:54 AM

Hi there theremotedr

the code that I gave you was specific for the text length.

If you are going to use multiple marquees then each will need individual coding.

Here is an example...

Code:


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-image: url(http://theremotedoctor.co.uk/m-images/background.png);
    font: 1em/150% arial, helvetica, sans-serif;
 }

.marquee {
    height: 2.5em;
    border-radius: 1em;
    border: 1px solid #5d0e13;
    box-shadow: 0.25em 0.25em 0.5em  #000;
    overflow: hidden;
    background-color: #66c2f1;
 }

.marquee p {
    line-height: 3.5em;
    margin: 0;
    font-size: 0.8em;
    font-weight: bold;
    white-space: nowrap;
    animation: 12s linear infinite;
    background-color: red; /* this is only for testing and should be removed */
 }

#marq-1 {
    width: 33em;
    animation-name: marquee-1;
 }

#marq-2 {
    width: 45em;
    animation-name: marquee-2;
 }

#marq-3 {
    width: 18em;
    animation-name: marquee-3;
 }

@keyframes marquee-1 {
    0%   {margin-left: 100%;}
    100% {margin-left: -33em;}
 }
@keyframes marquee-2 {
    0%   {margin-left: 100%;}
    100% {margin-left: -45em;}
 }
@keyframes marquee-3 {
    0%   {margin-left: 100%;}
    100% {margin-left: -18em;}
 }
</style>

</head>
<body> 
 <div class="marquee">
  <p id="marq-1">CONTACT ME ON IPBR21054, I ALSO USE WHATSAPP 07899827427.</p>
 </div>

 <div class="marquee">
  <p id="marq-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero.</p>
 </div>

 <div class="marquee">
  <p id="marq-3"><a href="http://www.theremotedoctor.co.uk/">http://www.theremotedoctor.co.uk/</a></p>
 </div>
</body>
</html>

I use the "em unit" when coding.

To get the length of the text in this unit requires this calculation...

length of text in pixels divided by (16 multiplied by the font size)

I hope that this helps.

coothead

**theremotedr** · 11-18-2016, 11:32 AM

Morning,
Thatnks for that.
A novice question for me to understand that calculation would be, How do i know length of text in pixels ?

Looking at this page as an example.
Sorry if its basic but im not getting it.

http://www.theremotedoctor.co.uk/hon...rollto=content

Also with keeping all the font size and weight the same will this calc for each page alter it ?

**coothead** · 11-18-2016, 11:55 AM

Hi there theremotedr,

I have used this free tool for years...

http://www.spadixbd.com/freetools/?referrer=JRulerUser

You can of course find others.

To measure the text length start without the animation running.

in your latest example it measured 560px - [560/(16*0.8)=43.75 rounded up =44] - which is 44em.

Code:


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-image: url(http://theremotedoctor.co.uk/m-images/background.png);
    font: 1em/150% arial, helvetica, sans-serif;
 }

.marquee {
    height: 2.5em;
    border-radius: 1em;
    border: 1px solid #5d0e13;
    box-shadow: 0.25em 0.25em 0.5em  #000;
    overflow: hidden;
    background-color: #66c2f1;
 }

.marquee p {
    line-height: 3.5em;
    margin: 0;
    font-size: 0.8em;
    font-weight: bold;
    white-space: nowrap;
    animation: 12s linear infinite;
    background-color: red; /* this is only for testing and should be removed */
 }

#marq-1 {
    width: 33em;
    animation-name: marquee-1;
 }

#marq-2 {
    width: 45em;
    animation-name: marquee-2;
 }

#marq-3 {
    width: 18em;
    animation-name: marquee-3;
 }

#marq-4 {
    width: 44em;
    animation-name: marquee-4;
 }

@keyframes marquee-1 {
    0%   {margin-left: 100%;}
    100% {margin-left: -33em;}
 }

@keyframes marquee-2 {
    0%   {margin-left: 100%;}
    100% {margin-left: -45em;}
 }

@keyframes marquee-3 {
    0%   {margin-left: 100%;}
    100% {margin-left: -18em;}
 }

@keyframes marquee-4 {
    0%   {margin-left: 100%;}
    100% {margin-left: -44em;}
 }
</style>

</head>
<body> HONDA FLIP UPGRADE AVAILABLE TO REPLACE THAT STANDARD HONDA KEY REMOTE
 <div class="marquee">
  <p id="marq-1">CONTACT ME ON IPBR21054, I ALSO USE WHATSAPP 07899827427.</p>
 </div>

 <div class="marquee">
  <p id="marq-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero.</p>
 </div>

 <div class="marquee">
  <p id="marq-3"><a href="http://www.theremotedoctor.co.uk/">http://www.theremotedoctor.co.uk/</a></p>
 </div>

 <div class="marquee">
  <p id="marq-4">HONDA FLIP UPGRADE AVAILABLE TO REPLACE THAT STANDARD HONDA KEY REMOTE</p>
 </div>
</body>
</html>

I hope that this helps.

coothead

**theremotedr** · 11-18-2016, 01:29 PM

I must thank you for that and now complete.
I am now going to take a look at this below and add it into my page thus replacing the current item in use.

http://dynamicdrive.com/dynamicindex14/carousel2.htm