Marquee loop question

[theremotedr]

Hi,
Here is the page in question,
http://www.theremotedoctor.co.uk/index.html

Here is the code used,
<marquee width="100%" bgcolor="#93D3F1"><font size="5" color="#000000" face="Arial, Helvetica">*** New Honda Flip Upgrade & Key cloning Call <a href="tel:07899-827427">07899-827427</a> ***</font></marquee>

What I've noticed is when viewing on a phone the text is shown on say 3 lines.
I would like it to just scroll the text in one line & once the last letter has disappeared off the left hand side then start again leading in from the right.
I believe the reason is due to the width but unsure how to overcome this part.

[coothead]

Hi there theremotedr,


come on squire...

"You can't have your cake and eat it"

If you choose to use twentieth century propriety and obsolete code,
then you really should be extremely grateful to find that it actually
works in any modern phone device. :rolleyes:

Having said that, you could try this CSS....



marquee {
white-space: nowrap;
}

...but don't hold your breath. :D


coothead

[theremotedr]

Hi,
CSS was an option & still is but as I started to run into problems & didn't want to ask I got this working in no time.
I'm still thinking of CSS but looking for a post etc of where to start and achieve the same thing.
This was a Sunday afternoon time filler but I'm looking as we speak.

[mlegg]

html:

<p class="marquee">*** New Honda Flip Upgrade & Key cloning Call <a href="tel:07899-827427">07899-827427</a> ***</p>

css:

.marquee {
width: 100%;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
font-size: 20px;
position: absolute;
color: #000;
font-family: Arial, Helvetica;
-webkit-animation: marquee 5s linear infinite;
}

@-webkit-keyframes marquee {
0% {
text-indent: 260px;
}
100% {
text-indent: -260px;
}
}

[theremotedr]

Morning,
I thought i would apply Mlegg code to see how it would look.
I dont see it scroll ?

[mlegg]

look at it working here https://jsfiddle.net/nkfdz1a0/

[theremotedr]

Hi,
That's strange,please take a look here http://theremotedoctor.co.uk
Ive copied your text again and placed it as follows.

HTML code has been placed where i want the marquee to scroll on the page.
CSS code has been placed in the basic-style.css file.

Ive checked it in Chrome & Firefox but its just staic without the scroll.

I see your fiddle and it works like you say.

[mlegg]

Fix your html errors and upload the page again. You've been doing this website long enough that you should know to check for code errors. Here are a few pages to start with
https://validator.w3.org/nu/
https://jigsaw.w3.org/css-validator/


Error: Stray end tag script. From line 13, column 1; to line 13, column 9 head>↩↩↩↩↩</script>↩

No p element in scope but a p end tag seen. From line 215, column 11; to line 215, column 14 </p>↩

Error: The hspace attribute on the img element is obsolete. Use CSS instead for lines line 324, column 29; to line 324, column 144: 99827427"><img src="m-images/phone-icon.png" hspace="3" alt="phone the remote doctor" width="53" height="53" class="shadow" /></a>↩↩
and all the image lines below that

Error: The language attribute on the script element is obsolete. Use the type attribute instead.
From line 348, column 1; to line 348, column 33: ↩ <h2>↩<script language="JavaScript1.2">↩↩/*↩N

[theremotedr]

Ive done what i can but still does not scroll.
Taking a look i dont see why so putting it to one side as it taking up too much time for me to see the problem.

Thanks anyway

[Beverleyh]

And the fact that you've put the css-marquee CSS inside a print media query doesn't jump out as being problematic to you?

[theremotedr]

The fact that i have learning disabilities is why even the basic things do not register with me sometimes.
Like mlegg said, You've been doing this website long enough....That is correct because things are not the same for me as it is for you.

I cant help they way i am but trying to work things out as i go.

[mlegg]

I get that. I've been doing this for 16 yrs and every day is a new learning experience. I have MS, multiple sclerosis, so my cognitive issues are too much at times and I step away for a day or two to figure it out.

[theremotedr]

I was playing with the code in the fiddle to see how things altered.
I couldn't understand where to put the CSS marquee code in the basic CSS file.
Trying to understand where to put it was one thing but then got so confused I had to upload my original file as I was getting in a mess.
I will try and work out where it needs to be placed when I can understand the layout.

[theremotedr]

Today i looked at it a different way and managed to get it scrolling ok.
http://theremotedoctor.co.uk/index.html

Thanks.

[mlegg]

it works yes but you used <marquee which is obsolete. You should really use current code standards so it works with all browsers. Check out this http://www.quackit.com/javascript/codes/javascript_scroll.cfm (http://www.quackit.com/javascript/codes/javascript_scroll.cfm)

[theremotedr]

Hi,
I did see that this morning but was stumped as to how to make the area the text scrolls in big enough for all the text to be shown.
Ive applied the code advised from the link above so you can see what i mean.
Once the text reaches the left hand side the scroll starts again but there was more text to be seen.
Making the 98% larger to say 130% you just get the text starting further across the page which is no good but same again,soon as the text reaches the left hand side it starts the scroll again without letting you see all the text before the restart of the scroll.
Ive changed the 98% to 100% as you will see but i am limited now ?

[theremotedr]

As this has gone from HTML to js ive now posted in the correct forum