Solved

HTML Marquee Tag - Continuous Scrolling

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

Raise the IQ of Your IT Alerts

From IT major incidents to manufacturing line slowdowns, every business process generates insights that need to reach the people required to take action. You need a platform that integrates with your business tools to create fully enabled DevOps toolchains.

You need xMatters.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

717 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