Solved

HTML Marquee Tag - Continuous Scrolling

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS Style on Chrome 1 40
aria difference 2 15
html5 1 19
Can't get video to center on page 2 16
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

730 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