Solved

HTML Marquee Tag - Continuous Scrolling

Posted on 2014-01-21
2
1,001 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
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 500 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

929 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now