Solved

JQuery Slideshow Help in Safari

Posted on 2011-03-02
2
730 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

773 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