Marquee with Safari

[kenderuiter]

Hi,

I am using WWB 14 (because until now it fits my needs)

On one of my websites (www.mitzy.nl) today I added a Marquee
It works just fine on Google Chrome, Microsoft Edge, Internet Explorer and Opera (on pc's and mobile devices)
It also works on Firefox although the scrolling speed there is much higher than in all other browsers

On Safari however, (when - like on mobile phones - the 320 responsive definition is used) the Marquee stops scrolling after only having shown a small part of all text

Any suggestions as to what I am doing wrong?

Kind regards,
Ken

[Pablo]

As mentioned in the help, the Marquee is an obsolete/deprecated HTML element and it may not work in all browsers.
In WWB15, the Marquee supports standard CSS animations which should work in all modern browsers.

[kenderuiter]

Thank you for your reply Pablo!
In the mean time I decedid to purchase the WWB15 version!

Could you please explain how I can define a Marquee in WWB15 that works in Safari
(because I rebuilt my site and checked Safari but right now it still does not work properly)

[Pablo]

In the Marquee properties, set the 'Type' property to 'CSS'

[kenderuiter]

I changed this but now it shows an even smaller part of text (it shows as much text as WWB shows in the development screen (although there is a lot more text behind it)

What am I doing wrong?

[Pablo]

To be able to help you, I need to see what you have done.
Do you have a demo project?

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=82134

[kenderuiter]

I understand

When you go to www.mitzy.nl/testmarquee you can see a 'demo of the marquee that is only showing a part of all text'
When you look at this site on a mobile device, you can see that it only shows "We hebben de volgende". The marquee contains a lot more text though (which you can see when you look at it from a pc).

I have stored the project as www.mitzy.nl/testmarquee/Marqee_testproject.wbs (the folder with the same name is empty because i added no pictures) so I think you should be able to download it

[BaconFries]

Looking at the source of the HTML in the page properties you have selected "Emulate IE8", this now is now a old browser and not commonly used anymore I recommend to set this to 'none' instead.

This is what I see using a mobile phone Android 10.

[kenderuiter]

Thank you for assisting me BaconFries, but your suggestion does not solve my problem...

First of all:
When i look at the page from a mobile phone (for example a Samsung S8) the 320 responsive page is shown instead of the view you presented in your answer. If you go to http://responsivetesttool.com and choose a Samsung S8 there, you can see what the page looks like and you can also see that the text in the Marquee is only shown for a small part.

My question is if we could try it the other way around?
Could you or Pablo create a mini demo-project in which a Marquee with the following text is shown completely ? (if possible with a default page and a 320px breakpoint):
Wij hanteren de volgende voorzorgsmaatregelen tegen het Coronavirus: 1) Houd minimaal 1½ meter afstand 2) Bij voorkeur geen mensen in de salon 3) Draag uw huisdier buiten de salon over 4) Betaal bij voorkeur contactloos 5) Toch contant betalen? Vermijd handcontact 6) Corona verschijnselen? Verzet de afspraak!


If that were possible I could check which part of my project definition is incorrect

[Pablo]

The problem is that the text is divided over multiple rows. But the height of the marquee is only one row, so the rest is invisible.
To prevent the text from wrapping to the next line you can add this code between the head tags of the Page HTML:

Code: Select all

<style>
#Marquee_Corona
{
    white-space: nowrap;
}
</style>

[kenderuiter]

Hi Pablo,

I added your html code in the "Between Head tag" (2nd tab in the page html screen)
But I still see no difference

[Pablo]

I do not see the code.
Did you republish the page?
http://www.mitzy.nl/testmarquee/

[kenderuiter]

I republished it now

[Pablo]

You can also try this:

<style>
#Marquee_Corona
{
white-space: nowrap;
width: 2000px !important;
}
</style

>

where 2000 is the total length of the text.

Note that the problem is caused by the fact that the text wraps. It was designed to work that way to support multiple lines.

[kenderuiter]

Tecnhically this works (thanks!) but...now the the text is scrolling so fast that you cannot read it!
Do you also have a solution for this high speed? (i.e. to make it slower)

The Marquee window has the following values:

Left 10
scroll
5000 linear

Responsive fonts NOT ticked

default
CSS

[Pablo]

You can set the speed (duration) in the properties.

[kenderuiter]

I know i can set the duration, but it already is filled with value 5000 and if I make it longer (10.000 for instance) then it takes a long time before the marquee starts showing text and the speed is still very fast...

So I am wondering what value I should enter to make the Marquee readable (I uploaded the test site with the 5000 duration value)

[Pablo]

The higher the value, the longer it will take for the animation to complete, so it will be slower.

[kenderuiter]

Hi Pablo, I understand.

I don't want to take too much of your time, but i bought the WWB15 version yesterday especially to get the marquee function working properly. That is why I am asking you this:
Could you create a .wbs file with only a small Marquee that works in an acceptable speed in 'Chrome' and in 'Safari'?
(this way I can compare your version with my version to find out what I am doing wrong)

If so, could you put the following text line in it?
Wij hanteren de volgende voorzorgsmaatregelen tegen het Coronavirus: 1) Houd minimaal 1½ meter afstand 2) Bij voorkeur geen mensen in de salon 3) Draag uw huisdier buiten de salon over 4) Betaal bij voorkeur contactloos 5) Toch contant betalen? Vermijd handcontact 6) Corona verschijnselen? Verzet de afspraak!

I would be very grateful if you could do this for me!

[Pablo]

The speed depends on the duration of the animation. The longer the text, the faster it will scroll.
There is no other setting in HTML to control the speed.

So, to make the text run slower:
- increase the duration
or
- decrease the length of the text

You are not doing anything wrong. This is just how it works.

[kenderuiter]

I am trying to understand so please let met sum things up:

The Marquee I originally defined (no CSS) worked great in Chrome, Opera, Edge etc.. The scroll speed was OK and the complete text was shown. Safari however did not show it the same way (abbreviated the text) so i purchased WWB 15 so it would work OK on Safari too.

Now I understand that in the WWB 15 way of showing the Marquee (CSS) the large text size makes the marquee scroll faster to the point that it is unreadable (which it did not do in my original setup).

From your last remark I conclude that there is no solution for showing a large text in a Marquee and still keeping the scroll speed "acceptable". The only thing I can do is to make the text shorter (which in this case is not a solution because "every word in the message counts")

Is this a fair resume of my situation?
Or am I missing a possible solution?

[Pablo]

To slow down the animation, please increase the duration.

Also, note that old marquee is also still available in WB15.

[kenderuiter]

To slow it down to a "normal" speed (so you can actually read the text) i had to increase the duration to 30.000 !!!
As a result it takes the Marquee more than 12 seconds to start showing the text (i guess you agree that's not really acceptable)

By the way: You spoke of the 'old marquee'
Is that the marquee option from the toolbox with the Advanced 'Type' = <marquee>?
Or is there a newer marquee option i am not aware of?

(sorry to keep bothering you with all my questions but i would really like to wrap things up with an acceptable solution; i hope you understand)

[Pablo]

As a result it takes the Marquee more than 12 seconds to start showing the text (i guess you agree that's not really acceptable)

Sorry, that is how it works. The duration affects the entire animation.

In the properties of the Marquee you can set the typo to 'css' or <marquee>.
<marquee> activates the old behavior.

[lummis]

Have you considered using the News Feed Ticker object as an alternative? If your message consists of more than one topic you can use that object to give a rolling message. Have a look at how I have implemented it on https://www.stowaways.org.uk/ - there are only two lines at the moment due to the present Covid-19 situation, but you can have more.