Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Improving cross-browser performance of a javascript scroller

Posted on 2011-03-01
4
Medium Priority
?
348 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 1000 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 1000 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

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

In this tutorial I will focus on how to use WhizBase as a tool for sending ICQ messages to ICQ. Here I will use a new technology in WhizBase, published in WhizBase 5.1 version. In this tutorial I will use 3 files, pager.wbsp for the processing, e…
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 strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
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 …

660 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