Solved

How to eliminate jerking in an html scrolling image

Posted on 2011-02-25
4
604 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
[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
  • 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

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Recently I have been answering a lot of questions like this in IT forums that I frequent. The question posed is usually something along the lines of "We have software X installed and need to uninstall it for reason Y" or some other variant of the sa…
In this tutorial I will show you how to provide a dynamic RTF document on your website generated with data from your database. For this tutorial you will need Microsoft Word or WordPad, WhizBase and Microsoft Access. In this tutorial I will show …
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 …

627 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