?
Solved

HTML Marquee Tag - Continuous Scrolling

Posted on 2014-01-21
2
Medium Priority
?
1,215 Views
Last Modified: 2014-01-29
Hello Experts,

I am working with the following HTML code and currently the marquee is working great with the exception that the marquee will not "start-up" again til after the last image has made it completely off the screen. Is there anyway without using javascript that will make the scrolling effect continuous so that the first image will appear before the last one has completely left the screen?

<div class="bp_scroll" style="background-color:#ffffff;">
    
	<marquee behavior="scroll" direction="right">
	
	<a href="http://www.anderscpa.com/industries/health-care/" title="Anders" target="_blank">
	<img alt="Anders" src="/resource/resmgr/bp_logos/anders_healthcare-08.jpg" style="" align="left" height="76px" width="150px" />
	</a>
	
	<a href="http://www.curas.net/" title="Curas, Inc" target="_blank">
	<img alt="Curas, Inc" title="Curas, Inc" src="/resource/resmgr/bp_logos/curas_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.enterprisebank.com" title="Enterprise Bank" target="_blank">
	<img alt="Enterprise Bank" title="Enterprise Bank" src="/resource/resmgr/bp_logos/enterprise_homepage_image_15.jpg" align="left" />
	</a>
	
	<a href="http://www.medicusins.com/" title="Medicus Insurance" target="_blank">
	<img alt="Medicus" title="Medicus" src="/resource/resmgr/bp_logos/medicus_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.mpmins.com" title="Missouri Professional Mutual" target="_blank">
	<img alt="MPM" title="MPM" src="/resource/resmgr/bp_logos/mpm_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.signaturehealth.net" title="Signature Medical Group" target="_blank">
	<img alt="Signature Medical Group" title="Signature Medical Group" src="https://mgmastl.site-ym.com/resource/resmgr/bp_logos/signature_homepage_image_150.jpg" align="left" />
	</a>
	
	</marquee>
</div>

Open in new window

0
Comment
Question by:robthomas09
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39798323
Apart from the fact that Marquee is obsolete and was really only an IE thing (first time I have heard it mentioned in a decade) what you are asking for is not possible, you would need a javascript implementation.

edit
I tell a lie it is now in CSS3 but doesn't seem to be recognised by all browsers, still not valid HTML
0
 
LVL 16

Accepted Solution

by:
hankknight earned 1500 total points
ID: 39799981
Here are the pure CSS options available to you:
http://www.w3schools.com/cssref/default.asp?utm_source=twitterfeed&utm_medium=twitter

There is no good way without the use of Javascript to make it loop seamlessly the way you want however you could repeat the content 100 times.  For example:
<div class="bp_scroll" style="background-color:#ffffff;">
    
	<marquee behavior="scroll" direction="right">
	
	<a href="http://www.anderscpa.com/industries/health-care/" title="Anders" target="_blank">
	<img alt="Anders" src="/resource/resmgr/bp_logos/anders_healthcare-08.jpg" style="" align="left" height="76px" width="150px" />
	</a>
	
	<a href="http://www.curas.net/" title="Curas, Inc" target="_blank">
	<img alt="Curas, Inc" title="Curas, Inc" src="/resource/resmgr/bp_logos/curas_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.enterprisebank.com" title="Enterprise Bank" target="_blank">
	<img alt="Enterprise Bank" title="Enterprise Bank" src="/resource/resmgr/bp_logos/enterprise_homepage_image_15.jpg" align="left" />
	</a>
	
	<a href="http://www.medicusins.com/" title="Medicus Insurance" target="_blank">
	<img alt="Medicus" title="Medicus" src="/resource/resmgr/bp_logos/medicus_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.mpmins.com" title="Missouri Professional Mutual" target="_blank">
	<img alt="MPM" title="MPM" src="/resource/resmgr/bp_logos/mpm_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.signaturehealth.net" title="Signature Medical Group" target="_blank">
	<img alt="Signature Medical Group" title="Signature Medical Group" src="https://mgmastl.site-ym.com/resource/resmgr/bp_logos/signature_homepage_image_150.jpg" align="left" />
	</a>

	<a href="http://www.anderscpa.com/industries/health-care/" title="Anders" target="_blank">
	<img alt="Anders" src="/resource/resmgr/bp_logos/anders_healthcare-08.jpg" style="" align="left" height="76px" width="150px" />
	</a>
	
	<a href="http://www.curas.net/" title="Curas, Inc" target="_blank">
	<img alt="Curas, Inc" title="Curas, Inc" src="/resource/resmgr/bp_logos/curas_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.enterprisebank.com" title="Enterprise Bank" target="_blank">
	<img alt="Enterprise Bank" title="Enterprise Bank" src="/resource/resmgr/bp_logos/enterprise_homepage_image_15.jpg" align="left" />
	</a>
	
	<a href="http://www.medicusins.com/" title="Medicus Insurance" target="_blank">
	<img alt="Medicus" title="Medicus" src="/resource/resmgr/bp_logos/medicus_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.mpmins.com" title="Missouri Professional Mutual" target="_blank">
	<img alt="MPM" title="MPM" src="/resource/resmgr/bp_logos/mpm_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.signaturehealth.net" title="Signature Medical Group" target="_blank">
	<img alt="Signature Medical Group" title="Signature Medical Group" src="https://mgmastl.site-ym.com/resource/resmgr/bp_logos/signature_homepage_image_150.jpg" align="left" />
	</a>

	<a href="http://www.anderscpa.com/industries/health-care/" title="Anders" target="_blank">
	<img alt="Anders" src="/resource/resmgr/bp_logos/anders_healthcare-08.jpg" style="" align="left" height="76px" width="150px" />
	</a>
	
	<a href="http://www.curas.net/" title="Curas, Inc" target="_blank">
	<img alt="Curas, Inc" title="Curas, Inc" src="/resource/resmgr/bp_logos/curas_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.enterprisebank.com" title="Enterprise Bank" target="_blank">
	<img alt="Enterprise Bank" title="Enterprise Bank" src="/resource/resmgr/bp_logos/enterprise_homepage_image_15.jpg" align="left" />
	</a>
	
	<a href="http://www.medicusins.com/" title="Medicus Insurance" target="_blank">
	<img alt="Medicus" title="Medicus" src="/resource/resmgr/bp_logos/medicus_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.mpmins.com" title="Missouri Professional Mutual" target="_blank">
	<img alt="MPM" title="MPM" src="/resource/resmgr/bp_logos/mpm_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.signaturehealth.net" title="Signature Medical Group" target="_blank">
	<img alt="Signature Medical Group" title="Signature Medical Group" src="https://mgmastl.site-ym.com/resource/resmgr/bp_logos/signature_homepage_image_150.jpg" align="left" />
	</a>

	<a href="http://www.anderscpa.com/industries/health-care/" title="Anders" target="_blank">
	<img alt="Anders" src="/resource/resmgr/bp_logos/anders_healthcare-08.jpg" style="" align="left" height="76px" width="150px" />
	</a>
	
	<a href="http://www.curas.net/" title="Curas, Inc" target="_blank">
	<img alt="Curas, Inc" title="Curas, Inc" src="/resource/resmgr/bp_logos/curas_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.enterprisebank.com" title="Enterprise Bank" target="_blank">
	<img alt="Enterprise Bank" title="Enterprise Bank" src="/resource/resmgr/bp_logos/enterprise_homepage_image_15.jpg" align="left" />
	</a>
	
	<a href="http://www.medicusins.com/" title="Medicus Insurance" target="_blank">
	<img alt="Medicus" title="Medicus" src="/resource/resmgr/bp_logos/medicus_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.mpmins.com" title="Missouri Professional Mutual" target="_blank">
	<img alt="MPM" title="MPM" src="/resource/resmgr/bp_logos/mpm_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.signaturehealth.net" title="Signature Medical Group" target="_blank">
	<img alt="Signature Medical Group" title="Signature Medical Group" src="https://mgmastl.site-ym.com/resource/resmgr/bp_logos/signature_homepage_image_150.jpg" align="left" />
	</a>

	<a href="http://www.anderscpa.com/industries/health-care/" title="Anders" target="_blank">
	<img alt="Anders" src="/resource/resmgr/bp_logos/anders_healthcare-08.jpg" style="" align="left" height="76px" width="150px" />
	</a>
	
	<a href="http://www.curas.net/" title="Curas, Inc" target="_blank">
	<img alt="Curas, Inc" title="Curas, Inc" src="/resource/resmgr/bp_logos/curas_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.enterprisebank.com" title="Enterprise Bank" target="_blank">
	<img alt="Enterprise Bank" title="Enterprise Bank" src="/resource/resmgr/bp_logos/enterprise_homepage_image_15.jpg" align="left" />
	</a>
	
	<a href="http://www.medicusins.com/" title="Medicus Insurance" target="_blank">
	<img alt="Medicus" title="Medicus" src="/resource/resmgr/bp_logos/medicus_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.mpmins.com" title="Missouri Professional Mutual" target="_blank">
	<img alt="MPM" title="MPM" src="/resource/resmgr/bp_logos/mpm_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.signaturehealth.net" title="Signature Medical Group" target="_blank">
	<img alt="Signature Medical Group" title="Signature Medical Group" src="https://mgmastl.site-ym.com/resource/resmgr/bp_logos/signature_homepage_image_150.jpg" align="left" />
	</a>

	<a href="http://www.anderscpa.com/industries/health-care/" title="Anders" target="_blank">
	<img alt="Anders" src="/resource/resmgr/bp_logos/anders_healthcare-08.jpg" style="" align="left" height="76px" width="150px" />
	</a>
	
	<a href="http://www.curas.net/" title="Curas, Inc" target="_blank">
	<img alt="Curas, Inc" title="Curas, Inc" src="/resource/resmgr/bp_logos/curas_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.enterprisebank.com" title="Enterprise Bank" target="_blank">
	<img alt="Enterprise Bank" title="Enterprise Bank" src="/resource/resmgr/bp_logos/enterprise_homepage_image_15.jpg" align="left" />
	</a>
	
	<a href="http://www.medicusins.com/" title="Medicus Insurance" target="_blank">
	<img alt="Medicus" title="Medicus" src="/resource/resmgr/bp_logos/medicus_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.mpmins.com" title="Missouri Professional Mutual" target="_blank">
	<img alt="MPM" title="MPM" src="/resource/resmgr/bp_logos/mpm_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.signaturehealth.net" title="Signature Medical Group" target="_blank">
	<img alt="Signature Medical Group" title="Signature Medical Group" src="https://mgmastl.site-ym.com/resource/resmgr/bp_logos/signature_homepage_image_150.jpg" align="left" />
	</a>

	<a href="http://www.anderscpa.com/industries/health-care/" title="Anders" target="_blank">
	<img alt="Anders" src="/resource/resmgr/bp_logos/anders_healthcare-08.jpg" style="" align="left" height="76px" width="150px" />
	</a>
	
	<a href="http://www.curas.net/" title="Curas, Inc" target="_blank">
	<img alt="Curas, Inc" title="Curas, Inc" src="/resource/resmgr/bp_logos/curas_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.enterprisebank.com" title="Enterprise Bank" target="_blank">
	<img alt="Enterprise Bank" title="Enterprise Bank" src="/resource/resmgr/bp_logos/enterprise_homepage_image_15.jpg" align="left" />
	</a>
	
	<a href="http://www.medicusins.com/" title="Medicus Insurance" target="_blank">
	<img alt="Medicus" title="Medicus" src="/resource/resmgr/bp_logos/medicus_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.mpmins.com" title="Missouri Professional Mutual" target="_blank">
	<img alt="MPM" title="MPM" src="/resource/resmgr/bp_logos/mpm_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.signaturehealth.net" title="Signature Medical Group" target="_blank">
	<img alt="Signature Medical Group" title="Signature Medical Group" src="https://mgmastl.site-ym.com/resource/resmgr/bp_logos/signature_homepage_image_150.jpg" align="left" />
	</a>

	<a href="http://www.anderscpa.com/industries/health-care/" title="Anders" target="_blank">
	<img alt="Anders" src="/resource/resmgr/bp_logos/anders_healthcare-08.jpg" style="" align="left" height="76px" width="150px" />
	</a>
	
	<a href="http://www.curas.net/" title="Curas, Inc" target="_blank">
	<img alt="Curas, Inc" title="Curas, Inc" src="/resource/resmgr/bp_logos/curas_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.enterprisebank.com" title="Enterprise Bank" target="_blank">
	<img alt="Enterprise Bank" title="Enterprise Bank" src="/resource/resmgr/bp_logos/enterprise_homepage_image_15.jpg" align="left" />
	</a>
	
	<a href="http://www.medicusins.com/" title="Medicus Insurance" target="_blank">
	<img alt="Medicus" title="Medicus" src="/resource/resmgr/bp_logos/medicus_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.mpmins.com" title="Missouri Professional Mutual" target="_blank">
	<img alt="MPM" title="MPM" src="/resource/resmgr/bp_logos/mpm_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.signaturehealth.net" title="Signature Medical Group" target="_blank">
	<img alt="Signature Medical Group" title="Signature Medical Group" src="https://mgmastl.site-ym.com/resource/resmgr/bp_logos/signature_homepage_image_150.jpg" align="left" />
	</a>

	<a href="http://www.anderscpa.com/industries/health-care/" title="Anders" target="_blank">
	<img alt="Anders" src="/resource/resmgr/bp_logos/anders_healthcare-08.jpg" style="" align="left" height="76px" width="150px" />
	</a>
	
	<a href="http://www.curas.net/" title="Curas, Inc" target="_blank">
	<img alt="Curas, Inc" title="Curas, Inc" src="/resource/resmgr/bp_logos/curas_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.enterprisebank.com" title="Enterprise Bank" target="_blank">
	<img alt="Enterprise Bank" title="Enterprise Bank" src="/resource/resmgr/bp_logos/enterprise_homepage_image_15.jpg" align="left" />
	</a>
	
	<a href="http://www.medicusins.com/" title="Medicus Insurance" target="_blank">
	<img alt="Medicus" title="Medicus" src="/resource/resmgr/bp_logos/medicus_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.mpmins.com" title="Missouri Professional Mutual" target="_blank">
	<img alt="MPM" title="MPM" src="/resource/resmgr/bp_logos/mpm_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.signaturehealth.net" title="Signature Medical Group" target="_blank">
	<img alt="Signature Medical Group" title="Signature Medical Group" src="https://mgmastl.site-ym.com/resource/resmgr/bp_logos/signature_homepage_image_150.jpg" align="left" />
	</a>

	<a href="http://www.anderscpa.com/industries/health-care/" title="Anders" target="_blank">
	<img alt="Anders" src="/resource/resmgr/bp_logos/anders_healthcare-08.jpg" style="" align="left" height="76px" width="150px" />
	</a>
	
	<a href="http://www.curas.net/" title="Curas, Inc" target="_blank">
	<img alt="Curas, Inc" title="Curas, Inc" src="/resource/resmgr/bp_logos/curas_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.enterprisebank.com" title="Enterprise Bank" target="_blank">
	<img alt="Enterprise Bank" title="Enterprise Bank" src="/resource/resmgr/bp_logos/enterprise_homepage_image_15.jpg" align="left" />
	</a>
	
	<a href="http://www.medicusins.com/" title="Medicus Insurance" target="_blank">
	<img alt="Medicus" title="Medicus" src="/resource/resmgr/bp_logos/medicus_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.mpmins.com" title="Missouri Professional Mutual" target="_blank">
	<img alt="MPM" title="MPM" src="/resource/resmgr/bp_logos/mpm_homepage_image_150.jpg" align="left" />
	</a>
	
	<a href="http://www.signaturehealth.net" title="Signature Medical Group" target="_blank">
	<img alt="Signature Medical Group" title="Signature Medical Group" src="https://mgmastl.site-ym.com/resource/resmgr/bp_logos/signature_homepage_image_150.jpg" align="left" />
	</a>
	
	</marquee>
</div>

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question