Solved

Improving cross-browser performance of a javascript scroller

Posted on 2011-03-01
4
342 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

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…
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

919 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

17 Experts available now in Live!

Get 1:1 Help Now