Solved

How to eliminate jerking in an html scrolling image

Posted on 2011-02-25
4
580 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Autoit restart command not working 6 68
Powershell / new-object PSObject rows 2 339
Bulk Reorder File Names 4 67
Need some help with powershell script 5 48
This tutorial will discuss fancy secure registration forms, with AJAX technology support. In this article I assume you already know HTML and some JS. I will write the code using WhizBase Server Pages, so you need to know some basics in WBSP (you mig…
In this tutorial I will show you how to make a simple HTML bar chart with the usage of WhizBase, If you want more information about WhizBase please read my previous articles at http://www.experts-exchange.com/ARTH_5123186.html (http://www.experts-ex…
The viewer will learn how to dynamically set the form action using jQuery.
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 …

786 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