[jQuery] Re: Scripts at the bottom of the page
Yes, please do. http://dev.jquery.com/ticket/1911 Hopefully it will get the right eyes looking at it now :)
[jQuery] Re: Scripts at the bottom of the page
On Nov 8, 12:16 am, Suni [EMAIL PROTECTED] wrote: I can see the error by clicking the tabs and quickly hovering over them. All the JS-stuff seems to be ok. Thank god someone else can validate this. I'd first fix the HTML and then try again. Thanks, I just yanked some code out of another page quick... passes W3C now :P I corrected it, but it still is throwing the error.
[jQuery] Re: Scripts at the bottom of the page
On Nov 8, 10:53 am, Bil Corry [EMAIL PROTECTED] wrote: I played with it a bit. It appears the anonymous functions being bound to mousseover and mouseout don't have access to the functions outside themselves when the page is first being loaded (perhaps they're not fully bound yet?). Below is a simple test case, load it in Firefox, pop open Firebugs, place the cursor over the Test Span, hit Ctrl-R to reload the page and rapidly move the cursor in/out of the Test Span. If you do, you'll see the error xyzzy is not defined when the page is first loading, then the error goes away once those anonymous functions have access to functions outside themselves. And the problem occurs regardless of the placement of JavaScript on the page; it still happens when all the JavaScript is in the head as well. One work-around is to surround all the code contained within the anonymous functions with try/catch, and simply ignore the errors. Yeah, I stole an idea of doing some typeof $ check to see if it's initialized, but I haven't got around to trying that out. But a try/ catch is an idea too. What is confusing is why I can bind the event to the jquery- initialized object but the action inside the event is confused. Perhaps I can try replacing $(this) with $(#theactual div name) It won't really make it a reusable function anymore, but hopefully it will work properly. This of course is just a tab/mouseover example. The bigger pain is link actions that involve jquery being triggered early... we have a login link that pops up a jqmodal window, and of course users see login and want to login quick - I do it all the time. How can I bind that event without using a jquery bind after the fact?
[jQuery] Re: Scripts at the bottom of the page
thanks for the reply.
On Nov 7, 10:19 am, polyrhythmic [EMAIL PROTECTED] wrote:
You are mixing your Model-View-Controller together with such 'links'.
href=javascript: ... is bad jQuery practice, and never recommended.
It does not degrade in any way for users who are not running
JavaScript. Any events that have any jQuery related code should be
unobtrusively bound in $( function() { }); [jQuery's doc.ready fn]
with $(element).click( function() {}), etc. That means no inline
onClick, onMouseover, etc in your HTML.
that's what i am trying to do. before the other developer had a
href=javascript:foo() where foo referenced jquery code. i changed it
to be a href=javascript:; id=foo (if you put href=# it makes
the page skip around and changes the URL, a dead javascript link seems
to work great) and tied it to a jquery onclick event. however, it
still takes time for it to load and process that piece it seems.
Also, make sure your jQuery ready function is placed *after* your
jQuery script, whether it's at the bottom of the page or top. Note
that while you're doing dev, and constantly reloading, you may
experience weird issues with page refreshes and caching that will give
you $ is not defined errors, due to the browser loading the page in
the incorrect order. However, under normal use I and my clients have
not experienced that problem.
when i do this i am using shift-reload in firefox - which is a total
100% reload off the server, no caching. i can confirm this by looking
at firebug's Net tab...
jQuery can always be put safely at the bottom of the page, if the page
is designed with proper jQuery practices. However, the reason to load
jQuery last is to show your users content as fast as possible -- if
your page is completely jQuery-dependent, you may want jQuery in the
head instead so jQuery can work on the content before the users sees
and interacts with it, at the expense of longer load times.
yes, that is my confusion. i bind these actions inside of
document.ready which requires jquery. inside of the action, which is $
(#foo).mouseover(function() { something }); is when it throws a $
is not defined - but why is it binding to the mouseover event of the
$ and able to bind to $(document).ready() then if $ is not
defined? it's confusing.
Also, I can't get your test page to throw an error. I too am using FF
2.0.0.9 with Firebug. I don't use YSlow, but I'm not seeing errors no
matter what I click or hover.
it's very odd, i can do it consistently.
there is one thing - these are not placed *after* jquery.js is called.
they are in document.ready() blocks though. however due to how the
page is designed, reorganizing it to put jquery at the top winds up
changing the point of the experiment ... i will try to group all of
the stuff on this example to the bottom of the page even after the
jquery.js and all the javascripts are referenced, and see if that
helps.
the problem is users have a tendency of hovering/mouseover or clicking
on links before the page fully loads... and if the events are being
bound at the very last part of the page load that's a lot of bad user
experiences and dead links. probably a better rule of thumb is generic
page elements should work without jquery/advanced code needed, but
sometimes that's the whole point of certain links.
[jQuery] Re: Scripts at the bottom of the page
On Nov 7, 2:17 pm, polyrhythmic [EMAIL PROTECTED] wrote: This is likely your entire problem. The jquery.js *must* be before *any* jQuery code -- the browser will choke when it sees $ or jQuery before $ and jQuery are defined. Oops, I should have checked before I replied. I have so many concurrent things going on I didn't realize, for this little test I actually -did- put jquery at the very top in head Even in this example, where the jquery related code is at the absolute bottom of the page (I can't get it any lower) I can still trigger the error by hovering over the tabs while the page loads... Example page: http://mikehost.com/~mike/tmp/jquery/jquery4.html (just view the source to see) Here's the errors: http://mikehost.com/~mike/tmp/jquery/error.jpg As you can see, a lot of hover action happens before it's bound. It's a small page with no images or anything external besides the jquery.js...
[jQuery] Re: Scripts at the bottom of the page
On Nov 5, 12:05 pm, Sean Catchpole [EMAIL PROTECTED] wrote: Is there a good reason why placing scripts at the bottom of a page is a bad idea? wow I was about to come here and post the same thing. I have a blog post about this: http://michaelshadle.com/2007/10/30/handling-events-pre-documentready-in-jquery/ Basically I am trying to align with the Yahoo concepts too, but placing jQuery at the bottom has some odd behaviors. Even with stuff chained to $(document.ready(), I have events that are bound inside of that but inside of the callbacks on the events I can raise a $ is not defined and jQuery is not defined somehow. Somehow, the jQuery code is being called, because it is executing the $(document) stuff, but it still hasn't bound all the items in the DOM or assigned them to the jQuery global object or the $ object or something. Here's one example of that. You need Firefox. I am using Firefox 2.0.0.9 with Firebug and Yslow, just FYI. http://mikehost.com/~mike/tmp/jquery/jquery1.html If you click on one of the links, while it's loading that page if your mouse moves over the other one it will raise the Javascript warning... Also any a href=javascript:foo() links that call jQuery related stuff can't be clicked before jQuery is fully loaded. Having the script towards the bottom can also mess that up. In my blog post I wound up using an ID and a callback so it can only work if jquery is loaded, however, it winds up acting like a dead link until everything is loaded fully (extremely poor user experience) and actually stays dead a lot of the time (for reasons unknown to me) - I've also tried $ (window).load() and some other stuff. For the mouseovers, I might be able to do some if ($ typeof $.isReady == 'boolean' $.isReady) or something to check for the existence of $ ... but the question still remains for more things. Maybe John monitors this list or another hardcore Javascript guy and could chime in Can jQuery be put at the bottom of the page safely, or is using jQuery with Yahoo JS optimization tips mutually exclusive? And if so, I guess the fix is to include jquery in the head (as soon as possible) and the rest can still be in the footer...
[jQuery] Trying to get this to work as expected with images and Sortables
Here is the URL: http://mikehost.com/~mike/tmp/jquery.html I think it's self-explanatory what I am trying to do - basically keep it in two rows. Is this possible? Right now it winds up making 3 rows... has anyone got this to work as expected (where it would stay inside of the 2 rows and adjust as expected) Thanks, mike
[jQuery] Re: Trying to get this to work as expected with images and Sortables
wow thanks for the quick reply. good catch. i wonder if i can fix it by not assigning -any- sort helper class. giving it a float: left; seems to fix it in IE, but firefox is acting up still. On May 22, 5:59 pm, Benjamin Sterling [EMAIL PROTECTED] wrote: Mike, When looking at it in firebug, it looks like you are getting a div in between your li with an ID of sorthelper. That is what is causing the issue. -- Benjamin Sterlinghttp://www.KenzoMedia.comhttp://www.KenzoHosting.com
[jQuery] Re: Trying to get this to work as expected with images and Sortables
the div was being put in by the sortables library... i put in the float: left; and it worked. i changed the CSS width/ height and it worked in FF too. now i'm working on serializing and removing items. On May 22, 6:12 pm, Benjamin Sterling [EMAIL PROTECTED] wrote: not sure if you can fix it with that because it would not be compliant html. Not exactly sure how you have things set up, but cant you use a li instead of a div? -- Benjamin Sterlinghttp://www.KenzoMedia.comhttp://www.KenzoHosting.com
