Solved

How to eliminate jerking in an html scrolling image

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Making a simple AJAX shopping cart Couple years ago I made my first shopping cart, I used iframe and JavaScript, it was very good at that time, there were no sessions or AJAX, I used cookies on clients machine. Today we have more advanced techno…
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 count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

738 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