Solved

Improving cross-browser performance of a javascript scroller

Posted on 2011-03-01
4
346 Views
Last Modified: 2012-06-27
I am a novice at html and JS.  I have a scrolling image on my website at http://mauitradewinds.com/Virtual%20Tours/TdwVT.htm which works well with Internet Explorer, but not with Chrome, Firefox or Safari.  The image is supposed to scroll smoothly and  pause on mouseover, with a changed cursor shape and the appearance of text "pause virtual tour:"  With non-IE browsers, the bottom 20 px (or so) of the image are missing, the scroll is jerky, and the scroll pauses with mouse-over but, in most cases, there is no change in the cursor shape or text appearing.  Of these issues, the jerky scrolling is ther most serious.  Thanks for your help.
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 3

Accepted Solution

by:
dtocci earned 250 total points
ID: 35014089
I can't tell you for sure if this will help or not, but I have found that when scripts act funny in standards compliant browsers like firefox it's a good idea to validate your code first.

You can check out the code errors here and fix them:

http://validator.w3.org/check?uri=http%3A%2F%2Fmauitradewinds.com%2FVirtual%2520Tours%2FTdwVT.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

I also recommend adding width="8074" height="400" to your image as that may help with rendering.

After you've done those things you'll have the best shot at getting the scrolling to be smooth, although I'm using firefox and even the "simplyScroll" demo page on the scripts website is jumpy.  

http://logicbox.net/jquery/simplyscroll/horizontal.html

So you may need to find another script that's written a little better.
0
 

Author Comment

by:ddantes
ID: 35014233
Thank you for your commments.  Using a test page on my local drive, I corrected the code errors, added width and height values for the image, and corrected an oversight in the css file.  This restored the missing 20px to the bottom of the image, for which I am grateful.  But it didn't affect the jumpiness of the scrolling, or result in the mouse cursor changing shape, or text appearing with mouse-over.  Here are some questions for you:  Can you recommend a cross-browser friendly javascript scrolling solution?   Can you suggest cross-browser code which allows the ALT tag on the image to display, and also respects the style code which changes the cursor when the mouse is over the image?
0
 
LVL 3

Assisted Solution

by:dtocci
dtocci earned 250 total points
ID: 35014383
The mouse cursor problem can probably solved by changing
cursor: hand; 

Open in new window

to
cursor: pointer; 

Open in new window


For the mouseover text, try using the title attribute
<img src="images/TdwVT.jpg" width="8074" height="400" alt="pause virtual tour" title="pause virtual tour">

Open in new window


I'm afraid I can't help you with a javascript scroller recommendation. Perhaps someone else on this site knows of a good one.  You may be able to improve the performance of the one you're currently using by cutting your image up into smaller chunks side-by-side instead of trying moving one huge image. But like I said, even the official demo is a bit jumpy on my firefox browser.
0
 

Author Comment

by:ddantes
ID: 35014514
You've been a great help.  Changing the cursor to "pointer" and replacing the ALT tag with a TITLE tag results in the intended effect in every browser.  The motion artifact during scrolling is probably acceptable, but is most pronounced in Firefox.  Interestingly, the Title text persists too long under Safari.  It doesn't seem to refresh properly, but I can live with that!
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

If you get a (Blue Screen of Death), your system writes a small file called a minidump. Your first step is to make certain your computer is setup to record memory dumps. Right click My Computer, choose properties. Click on the advanced tab, an…
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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 …

628 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