Solved

Improving cross-browser performance of a javascript scroller

Posted on 2011-03-01
4
341 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
  • 2
  • 2
4 Comments
 
LVL 3

Accepted Solution

by:
dtocci earned 250 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

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 …
Introduction:   Welcome to my first article ever. To begin with, the reason I write this article.  I participated in a question on Experts Exchange about the start command in Windows and there were some discussion about the usage. The discussio…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

771 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

14 Experts available now in Live!

Get 1:1 Help Now