Member Avatar for chaitu11

Need continuous marquee scroll without gaps after the last line of marquee.

Edited by pritaeas because: Moved to Javascript.
  • 2 Contributors
  • 3 Replies
  • 6K Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Aamir_5

Dani AI

Generated

The visible gap at the loop boundary is almost always caused by the plugin’s built-in spacer between the duplicated copies, or by default margins on the inner content. For a seamless loop, use duplication and remove the spacer, then make sure your inner elements do not introduce their own margins/padding. For a vertical ticker, confirm the scrolling content is taller than the container so you never reveal empty space during the cycle.

Example setup you can adapt:

$('.my-ticker').marquee({
  direction: 'up',
  duplicated: true,   // creates a second copy for seamless looping
  gap: 0,             // remove the gap between copies
  delayBeforeStart: 0,
  pauseOnHover: true
});
.my-ticker { overflow: hidden; }
.my-ticker > * { margin: 0; padding: 0; }      /* remove default gaps from p, ul, li, etc. */
.my-ticker ul { list-style: none; margin: 0; padding: 0; }
.my-ticker li { margin: 0; padding: 0; }       /* critical for vertical lists */

Troubleshooting:

  • If you still see a sliver of space, inspect the first/last child in DevTools for computed margin or line-height and zero it out. See MDN on margins and the box model: CSS box model and margin.
  • For horizontal marquees, also prevent wrapping with white-space: nowrap on the scrolling content (MDN: white-space).
Member Avatar for chaitu11 
<!DOCTYPE html>
<html>
    <head>
        <title>Marquee</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
        <script src="//rawgithub.com/aamirafridi/jQuery.Marquee/master/jquery.marquee.min.js?v=4" type="text/javascript"></script>

        <style type="text/css">

            .marquee,
            .marquee-with-options,
            .marquee-vert-before,
            .marquee-vert {
              width: 300px;
              overflow: hidden;
              border:1px solid #ccc;
            }
        </style>
    </head>
    <body>


</pre>
        <div class='marquee-with-options'>Lorem ipsum dolor END.</div>





<script>
$(function(){
    var $mwo = $('.marquee-with-options');
    $('.marquee').marquee();
    $('.marquee-with-options').marquee({
        //speed in milliseconds of the marquee
        speed: 500,
        //gap in pixels between the tickers
        gap: 5,
        //gap in pixels between the tickers
        delayBeforeStart: 0,
        //'left' or 'right'
        direction: 'up',
        //true or false - should the marquee be duplicated to show an effect of continues flow
        duplicated: true,
        //on hover pause the marquee - using jQuery plugin 
        pauseOnHover: true
    });

    //Direction upward
    $('.marquee-vert').marquee({
        direction: 'up',
        speed: 1500
    });

    //pause and resume links
    $('.pause').click(function(e){
        e.preventDefault();
        $mwo.trigger('pause');
    });
    $('.resume').click(function(e){
        e.preventDefault();
        $mwo.trigger('resume');
    });
    //toggle
    $('.toggle').hover(function(e){
        $mwo.trigger('pause');
    },function(){
        $mwo.trigger('resume');
    })
    .click(function(e){
        e.preventDefault();
    })
});
</script>

</body>
</html>
Member Avatar for Aamir_5

What is your question. Please create a demo on jsfiddle.net to explain what exactly you want.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.