Solved

How to eliminate jerking in an html scrolling image

Posted on 2011-02-25
4
573 Views
Last Modified: 2012-05-11
I have a scrolling image on my website at http://mauitradewinds.com/Virtual%20Tours/TdwVTWide.htm   The image does not scroll smoothly, and there is a jerking motion.  I've tried marquee html instead of this code, and the jerking is even more pronounced.  Is there a way to produce a smooth scroll?  Thanks.
0
Comment
Question by:ddantes
  • 2
  • 2
4 Comments
 
LVL 16

Expert Comment

by:sjklein42
ID: 34984427
I looked at your page and the image and your Javascript.

I believe this is as good as it gets using Javascript.

One big reason for the bad scrolling is that Javascript does not have any way to wait for Vertical Sync, so you get "torn" images when the graphics subsystem has a lots of bits to move.  Most programs synchonize frame updates with the vertical synch refresh interval of the monitor to minimize tearing, but there is no way to do that in Javascript.

I believe that to have a smoother scrolling image you will need to use FLASH or equivalent.

Here is a free opensource Flash Image Scroller that may serve your purpose:

http://www.benjaminkeen.com/software/image_scroller/
0
 

Author Comment

by:ddantes
ID: 34984858
Thank you for your comment and instruction.  Before I use FLASH, may I ask: (1) is this cross-browser friendly? and (2) Will the viewer be prompted to download and install software in order to view the page?
0
 
LVL 16

Accepted Solution

by:
sjklein42 earned 125 total points
ID: 34985017
FLASH is as cross-browser friendly as it gets for plugin (IE, Firefox, Chrome...) but maybe not on all the phones yet.  I would say that 95% of all PC browser users already have FLASH installed.

If the user does not have FLASH installed, you can program your web page to either to quietly revert to using your old Javascript code, or to prompt them to download a plugin.  There are many examples of embedding FLASH in your webpage with a fallback. Here is a page that describes how to detect if FLASH is installed and run your own Javascript code if it isn't:

http://www.techmug.com/detect-javascript-and-flash-enabled/

Here's typical HTML to embed a FLASH "movie" in  your web page:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=6,0,40,0"  
width="468" height="60"  id="mymoviename"> 
<param name="movie"  
value="http://www.tizag.com/pics/example.swf" />  
<param name="quality" value="high" /> 
<param name="bgcolor" value="#ffffff" /> 
<embed src="http://www.tizag.com/pics/example.swf" quality="high" bgcolor="#ffffff"
width="468" height="60" 
name="mymoviename" align="" type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer"> 
</embed> 
</object> 

Open in new window


If you use the open-source FLASH scroller I referred you to above, they have examples of how to use it on their web page.
0
 

Author Comment

by:ddantes
ID: 34985161
Great.  Thank you for your specificity!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Ever wondered how to display how many visitors you have online. In this tutorial I will show you an easy but effective way to display the number of online visitors in WhizBase. In this article I assume you have read my previous articles and know …
It is becoming increasingly popular to have a front-page slider on a web site. Nearly every TV website,  magazine or online news has one on their site, and even some e-commerce sites have one. Today you can use sliders with Joomla, WordPress or …
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

746 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

17 Experts available now in Live!

Get 1:1 Help Now