Solved

JQuery Slideshow Help in Safari

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

733 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