Solved

JQuery Slideshow Help in Safari

Posted on 2011-03-02
2
731 Views
Last Modified: 2013-12-07
My main browser is Safari 5.0.3.

I have a page that uses a slideshow based on JQuery elements and CSS. I have an unrelated widget on the page that fetches information from an external source. When the page loads in Safari, all the images in the slideshow are temporarily displayed for less than a second, then the page looks correct and the slideshow functions as it should.

A test page without the widget is correct from the start.

The same effect happens in FireFox 3.5.7 for Mac, but is so fast you almost don't notice it. And, subsequent reloads of the page don't show the problem at all.

It seems like a Safari issue and I don't have Windows/Explorer to test. Any help to make the problem go away is appreciated.

http://www.gailjennings.pro/not_working_correctly.php

http://www.gailjennings.pro/working_without_widget.php

Thank you.
0
Comment
Question by:SlickCatSeven
2 Comments
 
LVL 8

Accepted Solution

by:
McNetic earned 500 total points
ID: 35022003
The effect occurs in every browser, it just may not be visible because of fast loading / page rendering. This is also why it does not happen again on reload. It is by design; in your html, all images are visible and displayed below each other, and when the page is loaded, the javascript starts and hides all but one image.

Try adding style="display: none" to all but the first image in your html code to prevent this from happening (and display fine without js enabled).
0
 

Author Closing Comment

by:SlickCatSeven
ID: 35022051
It works, thank you.
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.

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

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 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