Improve company productivity with a Business Account.Sign Up

x
?
Solved

Improving cross-browser performance of a javascript scroller

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article will show, step by step, how to integrate R code into a R Sweave document
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

580 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