HTML MARQUEE not works as expected

Question

I am using MARQUEE tag to scroll three sentences.

The first 2 sentence scrolls correctly, whereas the last one is in completing the scrolling in the middle of the div (when I use full screen 100%).

marquee span { 
 margin-right: 23%; 
 } 
 marquee p { 
 white-space:nowrap;
 margin-right: 100px; 
 }

<div style='color: #fff;position: fixed;bottom: -10px;padding: 8px 0px;width: 100%;background:#090270;z-index:100;'>

<div  style='float: left;width: 90%;padding: 3px 8px 0px 8px;margin-top:-5px;'>

<marquee scrollamount='20'>
<p>
1. To decrease effort to plan 2018, we have copied your team planing from CW49/2017 to CW01/2018. By doing that you will have already all 2017 employees with their individual project setup available to start 2018 planning. That was only applied if no planning was avaialble yet.
<span> </span>
2. <a href='./rat/docs/RAT_Absence_2018.xlsx' title='Absence calendar 2018' target='_blank'>Absence calendar 2018 available</a>. Please select your team location and plan absence accordingly. Either use weekly or monthly planning. If detailed vacation planning per employee is known, please update the planning
<span> </span>
3. Team leaders are requested to use the information regarding target hire date for RAT planning in their project with respect to resources joining in future.  This date can be found in Menu:Reports-><a href='./team-members'>Team Members List</a> page as (Internal - <span style='color:#093F7F'>DD-MON-YYYY</span>).  Please use projx id:100000 for timeline prior to that date.
</p>
</marquee> 

</div>
</div>

[The `` element is obsolete and must not be used. While some browsers still support it, it's not required.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee) — j08691, Aug 02 '17 at 13:47
In code snippet we can't see the error. But if we copy the codes into a HTML file and when run in the screen we could see that the 3rd sentence in-completing — ManiMuthuPandi, Aug 02 '17 at 13:48
@j08691 thanks for the feedback; Any alternative for scrolling the texts horizontally — ManiMuthuPandi, Aug 02 '17 at 13:49
We can't help you unless you replicate the issue in snippet or JSfiddle — Muthu Kumaran, Aug 02 '17 at 13:52
do you want just simple 3 marquees inside the box as u shown above in the box with same direction and everything — Jok3r, Aug 02 '17 at 13:54
@MuthuKumaran the issue occurs when we see in desktop width. In JSfiddle the result width is minimized. So its doesn't occur in JSfiddle — ManiMuthuPandi, Aug 02 '17 at 13:56
then how do you want that? can you simply tell how it should be like ? — Jok3r, Aug 02 '17 at 13:59
a bit more research would have revealed that marquee is deprecated — Yvonne Aburrow, Aug 02 '17 at 14:23

fehrlich · Answer 1 · 2017-08-02T14:19:49.947

1

The marquee-Tag is deprecated. See:

https://www.w3.org/wiki/HTML/Elements/marquee

Alternatives:

javascript libary:

https://github.com/aamirafridi/jQuery.Marquee

css3:

https://codepen.io/jamesbarnett/pen/kfmKa (by James Barnett - found on google search)

edited Aug 02 '17 at 14:19

answered Aug 02 '17 at 13:48

fehrlich

2,497
2
26
44

2

You don't need 500 lines of JS code to do a simple marquee effect. This can be done with pure CSS with few lines of styling. – Muthu Kumaran Aug 02 '17 at 13:54
its an example, you can provide a css3 solution if you want to – fehrlich Aug 02 '17 at 13:56
This really doesn't answer the question. You made the same comment I did, plus you then just point to a link as a recommendation. At best this is a comment. – j08691 Aug 02 '17 at 14:00
@fehrlich could you explain a bit how to do it in CSS3 – ManiMuthuPandi Aug 02 '17 at 14:01
1

the answer to the question is, that the `marquee` was removed from the html standard, for good reasons like epilepsy and therefore shouldnt be used, there are alternatives, which can be used, that have pros and cons (browser support, flexibility, ...) but this is beyond the answer – fehrlich Aug 02 '17 at 14:02

score 0 · Answer 2 · answered Aug 02 '17 at 14:22

The marquee tag was deprecated for very good reasons (usability, accessibility, etc)

If these are bits of information you want to display to your users on a rolling basis, why not use a carousel? They would be easier to read and easier to go back to.

HTML

<div class="carousel carousel-slider center" data-indicators="true">

    <div class="carousel-item red white-text" href="#one!">
      <h2>First Panel</h2>
      <p class="white-text">To decrease effort to plan 2018, we have copied your team planning from CW49/2017 to CW01/2018. By doing that you will have already all 2017 employees with their individual project setup available to start 2018 planning. That was only applied if no planning was available yet.</p>
    </div>
    <div class="carousel-item amber white-text" href="#two!">
      <h2>Second Panel</h2>
      <p class="white-text"> <a href='./rat/docs/RAT_Absence_2018.xlsx' title='Absence calendar 2018' target='_blank'>Absence calendar 2018 available</a>. Please select your team location and plan absence accordingly. Either use weekly or monthly planning. If detailed vacation planning per employee is known, please update the planning</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">Team leaders are requested to use the information regarding target hire date for RAT planning in their project with respect to resources joining in future.  This date can be found in Menu:Reports-><a href='./team-members'>Team Members List</a> page as (Internal - <span style='color:#093F7F'>DD-MON-YYYY</span>).  Please use projx id:100000 for timeline prior to that date.</p>
    </div>

  </div>

jQuery initialisation

 $('.carousel.carousel-slider').carousel({fullWidth: true});

You will need to download the library code associated with this.

HTML MARQUEE not works as expected

2 Answers2