How to use marquee tag without gap?

Question

4.00/5 (1 vote)

See more:

I am using <MARQUEE> for continues moving of record in upward direction.Suppose I have a 5 records than it moving fine but after completion of last record move there is a big gap to start scrolling from 1 st record.How can i manage this? I want to use in asp.Net.
Is any other way is there to scroll the records in asp.net.

What I have tried:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type='text/javascript' src="jquery-3.1.0.js"></script>
<script type='text/javascript' src="jquery-3.1.0.min.js"></script>
<script type='text/javascript' src="JavaScript1.js"></script>
<script type='text/javascript' src="jQuery.Marquee-master/jquery.marquee.js"></script>
<script type='text/javascript' src="jQuery.Marquee-master/jquery.marquee.min.js"></script>
<link href="StyleSheet1.css" rel="stylesheet"/>

</head>
<script src="jQuery.Marquee-master/jquery.marquee.js"></script>
<body>
<form id="form1" runat="server">

<img src="images/demo/80x80.gif" alt="" />

Indonectetus facilis leo. Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.
<img src="images/demo/80x80.gif" alt="" />

Indonectetus facilis leo. Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.
<img src="images/demo/80x80.gif" alt="" />

Indonectetus facilis leo. Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.
<img src="images/demo/80x80.gif" alt="" />

Indonectetus facilis leo. Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.
<img src="images/demo/80x80.gif" alt="" />

Indonectetus facilis leo. Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.

</Marquee>

</body>
</html>

CSS

.marquee {
width: 300px;
overflow: hidden;
border: 1px solid #ccc;
background: #ccc;
}

JS

$('.marquee').marquee({
//speed in milliseconds of the marquee
duration: 5000,
//gap in pixels between the tickers
gap: 50,
//time in milliseconds before the marquee will start animating
delayBeforeStart: 0,
//'left' or 'right'
direction: 'up',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true
});

With these code...I added jquery marquee plugin

Posted 31-Jul-16 3:40am

Developer29

Updated 2-Aug-16 2:50am

v7

Add a Solution

Comments

Kornfeld Eliyahu Peter 31-Jul-16 9:51am

Probably better not to use it...
https://developer.mozilla.org/en/docs/Web/HTML/Element/marquee

Developer29 31-Jul-16 11:36am

I want a continues scrolling without gap...

Homero Rivera 31-Jul-16 16:05pm

Solving this will require a lot of precision, or otherwise our solutions may not be accepted....

1. Do you have a link so we can get a better picture of what you are trying?
2. Also, can you add the code of the elements inside the marquee, please?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 1 · 2016-07-31T20:28:00

Solution 1

Use a plugin - jQuery Marquee with CSS3 Support | jQuery Plugin Registry[^].

Demo - jQuery Marquee Plugin Example[^]

You can use the gap property to minimize the gap.

Posted 31-Jul-16 20:28pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

Developer29 1-Aug-16 8:56am

I tired this solution in visual studio it's not Moving in any direction.But the demo is working....Whether i want to add plugins in visual studio for jquery

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 1-Aug-16 10:51am

Yes, of course you need jQuery.

Developer29 2-Aug-16 5:34am

I added jquery....But it's not working

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 2-Aug-16 6:34am

What is the error you see on console?

Developer29 2-Aug-16 8:26am

there is no error..But it's not scrolling...above I written the code what i tried...