[jQuery] Re: Scripts at the bottom of the page
Actually, it isn't outside the scope of jQuery and it is now fixed in
Rev 3822.
--
Brandon Aaron
On Nov 13, 10:34 pm, Brandon Aaron [EMAIL PROTECTED] wrote:
This is pretty much outside the scope of jQuery :/. You should bind
events that have the potential to be triggered before the page is
loaded within $(window).bind('load', fn). This will insure that the
page is ready to accept your events ... otherwise the browser just
isn't ready for you to interact with the page.
--
Brandon Aaron
On Nov 9, 4:55 pm, mike503 [EMAIL PROTECTED] wrote:
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
Brandon Aaron wrote on 11/14/2007 9:11 AM: Actually, it isn't outside the scope of jQuery and it is now fixed in Rev 3822. Thanks! - Bil
[jQuery] Re: Scripts at the bottom of the page
This is pretty much outside the scope of jQuery :/. You should bind
events that have the potential to be triggered before the page is
loaded within $(window).bind('load', fn). This will insure that the
page is ready to accept your events ... otherwise the browser just
isn't ready for you to interact with the page.
--
Brandon Aaron
On Nov 9, 4:55 pm, mike503 [EMAIL PROTECTED] wrote:
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
mike503 wrote on 11/8/2007 9:03 PM: I also might try submitting this as a bug/enhancement request and see where it goes there. Yes, please do. - Bil
[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
Interesting. I can see the error by clicking the tabs and quickly hovering over them. All the JS-stuff seems to be ok. Only error I can see is that your HTML is incorrect, you are missing a closing /div (the #bodyContainerWide div is nto closed). This causes the DOM to possibly go wicked even on such as small page, and this could possiblt cause document.ready to missfire in one way or another. I'd first fix the HTML and then try again.
[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
mike503 wrote on 11/8/2007 3:16 AM:
Thank god someone else can validate this.
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.
- Bil
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html
head
meta http-equiv=Content-Type content=text/html;
charset=utf-8
titleDemo/title
/head
body
span id=testTest Span/span
script src=jquery-1.2.1.js type=text/javascript/script
script language=JavaScript type=text/javascript
function xyzzy() {}; // noop
$(function(){
$(#test).mouseover(function() {
xyzzy();
$(this).css(background-color,
#7dbeee).css(cursor, pointer);
});
$(#test).mouseout(function() {
xyzzy();
$(this).css(background-color,
#ff9900).css(cursor, default);
});
});
/script
/body
/html
[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
mike503 wrote on 11/8/2007 4:22 PM: 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) That won't work because jQuery doesn't exist -- you'd have to use straight JavaScript. Probably the best solution is to make the event wait until jQuery exists. Seems like a task jQuery itself should take care of though. - Bil
[jQuery] Re: Scripts at the bottom of the page
I experienced this problem, and ended up wrapping these events inside jQuery's ready function. That solved 99% of the problem. Of course it still occurs, but maybe I missed some events :) Bil Corry wrote: mike503 wrote on 11/8/2007 4:22 PM: 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) That won't work because jQuery doesn't exist -- you'd have to use straight JavaScript. Probably the best solution is to make the event wait until jQuery exists. Seems like a task jQuery itself should take care of though. - Bil
[jQuery] Re: Scripts at the bottom of the page
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.
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.
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.
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.
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.
Charles
doublerebel.com
On Nov 6, 7:25 pm, DaveG [EMAIL PROTECTED] wrote:
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...
I've seen this exact behavior with other tip libraries jQuery based, and
others. I didn't fully track down the issue, but managed to minimize it
by wrapping all 'inline' and attached javascript calls inside
document.ready.
The presumption at the time was that some script loading tags took
longer to process, and were doing so whilst the page was building, and
events firing.
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...
In this case we loaded in the head, so if we have the same issue, that
may not correct it.
Of course we may have the same symptoms, but entirely different issues.
~ ~ David
[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
there is one thing - these are not placed *after* jquery.js is called.
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.
Charles
On Nov 7, 12:01 pm, mike503 [EMAIL PROTECTED] wrote:
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
I read it too Have a look at it : http://developer.yahoo.com/performance/rules.html#js_bottom On Nov 5, 9:42 pm, Guy Fraser [EMAIL PROTECTED] wrote: Sean Catchpole wrote: Is there a good reason why placing scripts at the bottom of a page is a bad idea? By placing them in the head all javascript files must be downloaded before the rest of the page can render. This seems odd since most of the time the javascript needs to wait for the page to be loaded anyway. Other than perhaps organizational issues, are there any good reasons why having the script tags at the bottom of the page is a bad idea? According to YSlow docs, putting JS as far down the page as possible is beneficial.
[jQuery] Re: Scripts at the bottom of the page
There is a noticable difference with scripts loading at the bottom of the page. The page certainly loads and renders faster. However, if you are running pngFix or roundedCorners there is a longer time before the script can make the adjustments... So although I think it's generally best practice to place scripts at the bottom there are some cases you may not want to. Charles On Nov 6, 4:55 am, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: I read it too Have a look at it :http://developer.yahoo.com/performance/rules.html#js_bottom On Nov 5, 9:42 pm, Guy Fraser [EMAIL PROTECTED] wrote: Sean Catchpole wrote: Is there a good reason why placing scripts at the bottom of a page is a bad idea? By placing them in the head all javascript files must be downloaded before the rest of the page can render. This seems odd since most of the time the javascript needs to wait for the page to be loaded anyway. Other than perhaps organizational issues, are there any good reasons why having the script tags at the bottom of the page is a bad idea? According to YSlow docs, putting JS as far down the page as possible is beneficial.
[jQuery] Re: Scripts at the bottom of the page
I place all my scripts at the bottom of my pages, just before the closing body tag. I think it definitely helps to stop the vsistor clicking the back button as they can see the information they came for immediately whilst in the background the javascript is loading. -- View this message in context: http://www.nabble.com/Scripts-at-the-bottom-of-the-page-tf4754009s27240.html#a13612005 Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Scripts at the bottom of the page
I'm writing a scriptLoader applet, runnning on $(document).ready(), which: a) checks if a script has been loaded and b) if not, loads it as needed. I think this will help some, and it's following along with the whole plugin registry idea. marlyred wrote: I place all my scripts at the bottom of my pages, just before the closing body tag. I think it definitely helps to stop the vsistor clicking the back button as they can see the information they came for immediately whilst in the background the javascript is loading.
[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] Re: Scripts at the bottom of the page
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... I've seen this exact behavior with other tip libraries jQuery based, and others. I didn't fully track down the issue, but managed to minimize it by wrapping all 'inline' and attached javascript calls inside document.ready. The presumption at the time was that some script loading tags took longer to process, and were doing so whilst the page was building, and events firing. 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... In this case we loaded in the head, so if we have the same issue, that may not correct it. Of course we may have the same symptoms, but entirely different issues. ~ ~ David
[jQuery] Re: Scripts at the bottom of the page
On Nov 6, 9:05 am, Sean Catchpole [EMAIL PROTECTED] wrote: Is there a good reason why placing scripts at the bottom of a page is a bad idea? The bad practice here is that where you place the script shouldn't really matter. Your scripts should usually be made non-intrusive enough to wait for the document to be ready before starting their magic. Which is why $(document).ready() is rather useful. By placing them in the head all javascript files must be downloaded before the rest of the page can render. Not true. Browsers usually pull linked files in asynchronously.
[jQuery] Re: Scripts at the bottom of the page
Not true. Browsers usually pull linked files in asynchronously. Not scripts. All script elements are evaluated in order as the document is loaded. How else would you be able to have script dependencies? :-)
[jQuery] Re: Scripts at the bottom of the page
Sean Catchpole wrote: Is there a good reason why placing scripts at the bottom of a page is a bad idea? By placing them in the head all javascript files must be downloaded before the rest of the page can render. This seems odd since most of the time the javascript needs to wait for the page to be loaded anyway. Other than perhaps organizational issues, are there any good reasons why having the script tags at the bottom of the page is a bad idea? According to YSlow docs, putting JS as far down the page as possible is beneficial.
