Does any know how to fix a MArque Code?

JavaScript
41

You posted it.

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <style>
body {
    margin: 10px;
    font-family:'Lato', sans-serif;

}
.marquee {
    width: 100%;
    overflow: hidden;
    border:1px solid #ccc;
    background: yellow;
    color: red;
}
ul.marquee li {
    display: inline-block;
    padding: 10px 20px;
    font-size: 30px;
}
    </style>
</head>
<body>
<ul class='marquee'>
    <li>TEXT 1</li>
<li></li>
<li></li>
<li></li>
<li></li>
    <li>TEXT 2</li>
<li></li>
<li></li>
<li></li>
<li></li>
    <li>TEXT 3</li>
<li></li>
<li></li>
<li></li>
    <li>TEXT 4</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.3.94/jquery.marquee.js"></script>
<script>

$(function () {
    $('.marquee').marquee({
        duration: 15000,

        duplicate: true

    });
})();
</script>
42

If you don’t want the next one to appear until the previous one leaves the screen, just add some extra right padding to each list item:

ul.marquee li {
    display: inline-block;
    padding: 10px 100vw 20px 10px;
    font-size: 70px;
}
2 Likes
43

works thanks! What do you mean by [quote=“ralphm, post:42, topic:256791”]
100vw
[/quote]

44

vw is a new unit of measure, meaning “viewport width”. So it’s saying—“put padding on the right equal to the width of the browser window (the viewport).” If you wanted the text to appear on the right just as text is disappearing on the left, you could make it a little less, like “98vw” etc. :slight_smile:

45

Another CSS version:

This one should cater for any number of list items automatically (with any luck :)).

3 Likes
46

Thank you.

47

Can you please help me or explain to me how can i add a date and time (live) to appear in the arque across the screen please @ralphm @Paul_Wilkins @ronpat

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <style>
body {
    margin: 10px;
    font-family:'Lato', sans-serif;

}
.marquee {
    width: 100%;
    overflow: hidden;
    border:1px solid #ccc;
    background: yellow;
    color: red;
}
ul.marquee li {
    display: inline-block;
    padding: 10px 20px;
    font-size: 30px;
}
    </style>
</head>
<body>
<ul class='marquee'>
    <li>TEXT 1</li>
<li></li>
<li></li>
<li></li>
<li></li>
    <li>TEXT 2</li>
<li></li>
<li></li>
<li></li>
<li></li>
    <li>TEXT 3</li>
<li></li>
<li></li>
<li></li>
    <li>TEXT 4</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.3.94/jquery.marquee.js"></script>
<script>

$(function () {
    $('.marquee').marquee({
        duration: 15000,

        duplicate: true

    });
})();
</script>
48

I did, but the thread was closed as I completed the post, so nuts to that. It’s pretty easy though, just use setInterval.

49

can you show me an example?

50

Some examples and explanations can be found here:

51

Not today - my opportunity for that has been lost.

52

I tried it in the li tags but its not working! I will appreciate if you can show me

53

This should get you close

2 Likes
54

Thank you!

56

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.