Putting the css before the js doesn't always work. :( -- Brandon Aaron On Sun, May 3, 2009 at 12:57 AM, Kelvin Luck <[email protected]> wrote:
> > That suggestion has worked for some of my users. But some of them are > still having problems. It may be an issue in my code - I'm trying to find > the time to produce a striped down test case... But for example, visit > this site in Safari or Chrome: > > http://lolkeegan.com/ > > Everything works great on first load and refresh of the main page. But > then if you click the contact tab on the left hand side and then click > back to portfolio then the content is all missing. If you inspect you will > see that jScrollPaneContainer has a massive width and height. Refresh and > everything is fine - the width and height have been correctly copied from > the ul.thumb-gallery style in the stylesheet. The CSS is before the JS on > this page. And the problem is only seen in Webkit browsers. > > Like I said, the problem could be in my plugin code as I've yet to put > together a stripped down example. But when Jake mentioned issues with > ready not indicating CSS was loaded I thought I'd mention my experiences... > > Cheers, > > Kelvin :) > > > On Sat, 02 May 2009 21:21:45 -0700, John Resig <[email protected]> wrote: > > > It tried to, in some cases, but in reality its implementation was pretty > > weak. Right now the better solution is to include your stylesheets before > > your jQuery code - which will force the CSS to load before the ready > > event > > occurs. > > > > --John > > > > > > On Sat, May 2, 2009 at 2:49 AM, Kelvin Luck <[email protected]> > > wrote: > > > >> > >> So did document ready not wait for CSS to load in 1.2.6 then? When > >> Brandon > >> mentioned that it made sense to me because people started complaining > >> about the problems with jScrollPane shortly after 1.3 was released... > >> > >> On Fri, 01 May 2009 19:53:21 -0700, John Resig <[email protected]> > >> wrote: > >> > >> > Unfortunately, it's not that easy - I wasn't able to find a set of > >> > techniques that worked in all browsers that waited for all CSS to load > >> > (save > >> > for the window onload event). > >> > > >> > If anyone has any insight, I'd appreciate it. > >> > > >> > --John > >> > > >> > > >> > On Fri, May 1, 2009 at 4:27 PM, Kelvin Luck <[email protected]> > >> > wrote: > >> > > >> >> > >> >> Hmmm... Then I'd be happy if there was another event that waited for > >> CSS > >> >> and I could tell users of my plugin to use that event... Somewhere > >> >> between > >> >> onReady and onLoad... > >> >> > >> >> Kelvin :) > >> >> > >> >> On Fri, 01 May 2009 12:47:35 -0700, Brandon Aaron > >> >> <[email protected]> wrote: > >> >> > >> >> > Eh... document.ready waited for CSS to load in 1.2.6 but then you'd > >> >> get a > >> >> > flash of unstyled content in some browsers. It is a very ugly > >> problem. > >> >> > -- > >> >> > Brandon Aaron > >> >> > > >> >> > On Fri, May 1, 2009 at 1:52 PM, Kelvin Luck <[email protected] > > > >> >> > wrote: > >> >> > > >> >> >> > >> >> >> Hi, > >> >> >> > >> >> >> I think that this is the source of a problem that has been > >> reported > >> >> by > >> >> >> some users of my jScrollPane script. It seems that sometimes > >> webkit > >> >> >> based > >> >> >> browsers are not loading the CSS before document ready which is > >> >> breaking > >> >> >> the jScrollPane. When the cache is empty it works as expected. > >> More > >> >> info > >> >> >> in this thread: > >> >> >> > >> >> >> > >> >> >> > >> >> > >> > http://groups.google.com/group/jquery-en/browse_thread/thread/978ef0b2877dac77 > >> >> >> > >> >> >> It would definitely be really useful if either document ready > >> waited > >> >> for > >> >> >> css to load or if there was an alternative event that I could tell > >> >> users > >> >> >> to use when initialising jScrollPane. > >> >> >> > >> >> >> Cheers, > >> >> >> > >> >> >> Kelvin :) > >> >> >> > >> >> >> On Fri, 01 May 2009 08:20:42 -0700, JaffaTheCake > >> >> >> <[email protected]> > >> >> >> wrote: > >> >> >> > >> >> >> > > >> >> >> > Hi, > >> >> >> > > >> >> >> > I've been doing some research into how browsers load CSS files > >> and > >> >> how > >> >> >> > they impact on the parsing of script. > >> >> >> > > >> >> >> > A problem I'm having is reading styles of an element, but > >> getting > >> >> >> > incorrect values as the script is (sometimes) running before the > >> >> >> > stylesheets have loaded. > >> >> >> > > >> >> >> > When Firefox & IE encounter a <script>, they wait for any > >> currently > >> >> >> > loading CSS to load and apply before executing the script. > >> However, > >> >> >> > Firefox won't do this if the CSS has been added to the document > >> via > >> >> >> > appendChild. > >> >> >> > > >> >> >> > Opera and Webkit do not wait for CSS to load before executing > >> >> script. > >> >> >> > > >> >> >> > I've been looking for ways to detect when CSS has loaded. This > >> is > >> >> easy > >> >> >> > if you know the contents of the file, just add an element to the > >> >> page > >> >> >> > and poll for an expected style. It's trickier if you don't know > >> the > >> >> >> > rules that are going to be applied... > >> >> >> > > >> >> >> > > >> >> >> > >> >> > >> > http://code.google.com/p/ajaxsoft/source/browse/trunk/xLazyLoader/jquery.xLazyLoader.js > >> >> >> > > >> >> >> > xLazyLoader almost solves the problem, except when it comes to > >> CSS > >> >> >> > files that are from another domain. Checking > >> >> linkElement.sheet.cssRule > >> >> >> > throws a cross domain security error in Firefox. > >> >> >> > > >> >> >> > I understand a "cssReady" event or similar has been attempted in > >> >> >> > jQuery before, was it abandoned for this reason? Also, since > >> >> >> > xLazyLoader is being included in jQuery 1.4, does that mean this > >> >> issue > >> >> >> > has been solved? > >> >> >> > > >> >> >> > Cheers, > >> >> >> > Jake. > >> >> >> > > >> >> >> > > > >> >> >> > >> >> >> > >> >> >> > >> >> >> > > >> >> >> > >> >> > > >> >> > > > >> >> > >> >> > >> >> > >> >> > > >> >> > >> > > >> > > > >> > >> > >> > >> > > >> > > > > > > > > > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~----------~----~----~----~------~----~------~--~---
