[jQuery] Re: Use jquery before the DOM is ready?
document.write() can only be used while the document is "open" (i.e. while
the page is loading), not in response to any event such as the load event.
If you call document.write() in an event handler, the document has already
been closed. So document.write() opens a *new* document to write into, which
deletes the existing document. That's why you get a blank page if you do
that.
You can either use document.write in code that's called directly while the
document loads - not inside an event handler - or you can use one of the
techniques mentioned in the thread.
-Mike
> From: Derba
>
> scratch that, including the document.write line in $(window).load
> (function() causes some error while leads to just a blank
> page in the browser.
>
> Using the first line of document.write('#mainimage{visibility:hidden}'); seems to work
> fine thought.
>
> On Apr 4, 8:03 pm, Derba wrote:
> > I tried the document.write method you told me to try, but using it
> > anywhere causes the whole webpage to load up as a blank
> page. I have
> > NO idea whats happening.
>
[jQuery] Re: Use jquery before the DOM is ready?
document.write() works fine in XHTML documents unless you serve the document
with an XHTML MIME type, which is rarely done in practice. If you are doing
that you must avoid document.write().
I'm a big fan of document.write(). It lets you accomplish some things very
cleanly that you can't do at all with the DOM.
Of course, WRT Derba's code, document.write() can not be used in a load()
event. It can only be used while the page is loading.
-Mike
_
From: Hector Virgen
@Karl: Thanks, that sounds like a good reason to me :) I wasn't aware of
XHTML not allowing document.write()
@Ricardo: The $('head').append() approach looks great.
-Hector
On Mon, Apr 6, 2009 at 11:31 AM, Karl Swedberg
wrote:
On Apr 5, 2009, at 11:30 PM, Hector Virgen wrote:
Just curious, why would you want to avoid document.write()?
Here's one reason:
http://ln.hixie.ch/?start=1091626816
&count=1
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: Use jquery before the DOM is ready?
@Karl: Thanks, that sounds like a good reason to me :) I wasn't aware of
XHTML not allowing document.write()
@Ricardo: The $('head').append() approach looks great.
-Hector
On Mon, Apr 6, 2009 at 11:31 AM, Karl Swedberg wrote:
> On Apr 5, 2009, at 11:30 PM, Hector Virgen wrote:
>
> Just curious, why would you want to avoid document.write()?
>
>
>
> Here's one reason:
> http://ln.hixie.ch/?start=1091626816&count=1
>
> --Karl
>
>
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com
>
>
[jQuery] Re: Use jquery before the DOM is ready?
On Apr 5, 2009, at 11:30 PM, Hector Virgen wrote: Just curious, why would you want to avoid document.write()? Here's one reason: http://ln.hixie.ch/?start=1091626816&count=1 --Karl Karl Swedberg www.englishrules.com www.learningjquery.com
[jQuery] Re: Use jquery before the DOM is ready?
Just curious, why would you want to avoid document.write()?
-Hector
On Sat, Apr 4, 2009 at 9:49 PM, Ricardo wrote:
>
> If you want to avoid document.write, append should work just as well
> (the head element already exists):
>
> $('head').append('#mainimage
> { visibility:hidden }');
>
> On Apr 4, 9:27 pm, Derba wrote:
> > That works a lot better. Thanks for putting up with my questions
> > hector.
> >
> > On Apr 4, 8:21 pm, Hector Virgen wrote:
> >
> > > Actually, it might be better to just start off with 0 opacity and not
> mess
> > > with the visibility property at all:
> > > document.write('#mainimage{opacity:0}');
> > > $(window).load(function() {
> > > //when everything is finally loaded, fade image in
> > > $("#mainimage").animate({opacity: "1"}, 1000);
> >
> > > });
> >
> > > -Hector
> >
> > > On Sat, Apr 4, 2009 at 4:18 PM, Hector Virgen
> wrote:
> > > > Try setting the opacity to 0 when you set it to visible.
> > > > -Hector
> >
> > > > On Sat, Apr 4, 2009 at 4:15 PM, Derba
> wrote:
> >
> > > >> the css visible seems to make it visible before it has a chance to
> > > >> fade in, but I will tinker with it some to see if I can get it to
> work.
>
[jQuery] Re: Use jquery before the DOM is ready?
If you want to avoid document.write, append should work just as well
(the head element already exists):
$('head').append('#mainimage
{ visibility:hidden }');
On Apr 4, 9:27 pm, Derba wrote:
> That works a lot better. Thanks for putting up with my questions
> hector.
>
> On Apr 4, 8:21 pm, Hector Virgen wrote:
>
> > Actually, it might be better to just start off with 0 opacity and not mess
> > with the visibility property at all:
> > document.write('#mainimage{opacity:0}');
> > $(window).load(function() {
> > //when everything is finally loaded, fade image in
> > $("#mainimage").animate({opacity: "1"}, 1000);
>
> > });
>
> > -Hector
>
> > On Sat, Apr 4, 2009 at 4:18 PM, Hector Virgen wrote:
> > > Try setting the opacity to 0 when you set it to visible.
> > > -Hector
>
> > > On Sat, Apr 4, 2009 at 4:15 PM, Derba wrote:
>
> > >> the css visible seems to make it visible before it has a chance to
> > >> fade in, but I will tinker with it some to see if I can get it to work.
[jQuery] Re: Use jquery before the DOM is ready?
I don't understand. How does that make the image useless? It should be
visible by JS and non-JS browsers, except that JS browsers will see it fade
in. Am I missing something?
-Hector
On Sat, Apr 4, 2009 at 3:55 PM, Derba wrote:
>
> Well, I that was the first thing I thought of, but I generally try to
> avoid that as it renders the image useless if the browser does not
> have javascript enabled. If this was just a minor part of the webpage
> it wouldn't be that big of a deal. But I am using this for an image
> gallery that is the main purpose of the site, so I don't want no
> javascript to mean that the website is rendered useless.
>
> On Apr 4, 7:48 pm, Hector Virgen wrote:
> > You may want to try a different approach. For example, you could use
> > javascript to add a new style rule to the CSS that sets the image to
> > visibility: hidden. This would have to happen *before* the dom has
> finished
> > downloading to ensure that it always hidden, so no need to wrap it in
> > $(document).ready().
> > document.write(' > type="text/css">#mainimage{visibility:hidden}');
> >
> > Then, in your $(window).load(), you can set the visibility: visible
> before
> > calling animate.
> >
> > $(window).load(function() {
> > //when everything is finally loaded, fade image in
> > document.write(' > type="text/css">#mainimage{visibility:visible}');
> > $("#mainimage").animate({opacity: "1"}, 1000);
> >
> > });
> >
> > I hope this helps.
> >
> > -Hector
> >
> > On Sat, Apr 4, 2009 at 3:35 PM, Derba wrote:
> >
> > > I'm trying to have jquery set an image's opacity to 0. Then, while the
> > > image is fully loaded, it will fade the image in.
> >
> > > It seems to work fine, unless the images have already been viewed in
> > > the browser and are stored in cache. In this case, the image is
> > > already loaded by the time of $(document).ready, then it fades out,
> > > then fades back in.
> >
> > > I'm doing it like this:
> > > Code:
> >
> > > $(document).ready(function() {
> > > $("#mainimage").animate({opacity: "0"}, 0);
> > > });
> >
> > > $(window).load(function() {
> > > //when everything is finally loaded, fade image in
> >
> > > $("#mainimage").animate({opacity: "1"}, 1000);
> > > });
> >
> > > Am I just going about this the wrong way? Or is there a way to set the
> > > opacity to 0 before $(document).ready?
> > > Still somewhat new to jquery, so if I am making a stupid mistake, my
> > > bad. Any help would be great.
>
[jQuery] Re: Use jquery before the DOM is ready?
My mistake, I don't think you can write to the document after it has loaded.
Try this instead:
document.write('#mainimage{visibility:hidden}');
$(window).load(function() {
//when everything is finally loaded, fade image in
$("#mainimage").css({visibility: 'visible'});
$("#mainimage").animate({opacity: "1"}, 1000);
});
-Hector
On Sat, Apr 4, 2009 at 4:03 PM, Derba wrote:
>
>
> I tried the document.write method you told me to try, but using it
> anywhere causes the whole webpage to load up as a blank page. I have
> NO idea whats happening.
[jQuery] Re: Use jquery before the DOM is ready?
You may want to try a different approach. For example, you could use
javascript to add a new style rule to the CSS that sets the image to
visibility: hidden. This would have to happen *before* the dom has finished
downloading to ensure that it always hidden, so no need to wrap it in
$(document).ready().
document.write('#mainimage{visibility:hidden}');
Then, in your $(window).load(), you can set the visibility: visible before
calling animate.
$(window).load(function() {
//when everything is finally loaded, fade image in
document.write('#mainimage{visibility:visible}');
$("#mainimage").animate({opacity: "1"}, 1000);
});
I hope this helps.
-Hector
On Sat, Apr 4, 2009 at 3:35 PM, Derba wrote:
>
> I'm trying to have jquery set an image's opacity to 0. Then, while the
> image is fully loaded, it will fade the image in.
>
> It seems to work fine, unless the images have already been viewed in
> the browser and are stored in cache. In this case, the image is
> already loaded by the time of $(document).ready, then it fades out,
> then fades back in.
>
> I'm doing it like this:
> Code:
>
> $(document).ready(function() {
> $("#mainimage").animate({opacity: "0"}, 0);
> });
>
>
> $(window).load(function() {
> //when everything is finally loaded, fade image in
>
> $("#mainimage").animate({opacity: "1"}, 1000);
> });
>
>
> Am I just going about this the wrong way? Or is there a way to set the
> opacity to 0 before $(document).ready?
> Still somewhat new to jquery, so if I am making a stupid mistake, my
> bad. Any help would be great.
[jQuery] Re: Use jquery before the DOM is ready?
I tried the document.write method you told me to try, but using it anywhere causes the whole webpage to load up as a blank page. I have NO idea whats happening.
[jQuery] Re: Use jquery before the DOM is ready?
How about just using CSS on the image ?
On Apr 4, 7:35 pm, Derba wrote:
> I'm trying to have jquery set an image's opacity to 0. Then, while the
> image is fully loaded, it will fade the image in.
>
> It seems to work fine, unless the images have already been viewed in
> the browser and are stored in cache. In this case, the image is
> already loaded by the time of $(document).ready, then it fades out,
> then fades back in.
>
> I'm doing it like this:
> Code:
>
> $(document).ready(function() {
> $("#mainimage").animate({opacity: "0"}, 0);
>
> });
>
> $(window).load(function() {
> //when everything is finally loaded, fade image in
>
> $("#mainimage").animate({opacity: "1"}, 1000);
>
> });
>
> Am I just going about this the wrong way? Or is there a way to set the
> opacity to 0 before $(document).ready?
> Still somewhat new to jquery, so if I am making a stupid mistake, my
> bad. Any help would be great.
[jQuery] Re: Use jquery before the DOM is ready?
No problem, Derba. Glad to hear it worked :)
-Hector
On Sat, Apr 4, 2009 at 4:27 PM, Derba wrote:
>
> That works a lot better. Thanks for putting up with my questions
> hector.
>
> On Apr 4, 8:21 pm, Hector Virgen wrote:
> > Actually, it might be better to just start off with 0 opacity and not
> mess
> > with the visibility property at all:
> > document.write('#mainimage{opacity:0}');
> > $(window).load(function() {
> > //when everything is finally loaded, fade image in
> > $("#mainimage").animate({opacity: "1"}, 1000);
> >
> > });
> >
> > -Hector
> >
> > On Sat, Apr 4, 2009 at 4:18 PM, Hector Virgen
> wrote:
> > > Try setting the opacity to 0 when you set it to visible.
> > > -Hector
> >
> > > On Sat, Apr 4, 2009 at 4:15 PM, Derba
> wrote:
> >
> > >> the css visible seems to make it visible before it has a chance to
> > >> fade in, but I will tinker with it some to see if I can get it to
> work.
>
[jQuery] Re: Use jquery before the DOM is ready?
That works a lot better. Thanks for putting up with my questions
hector.
On Apr 4, 8:21 pm, Hector Virgen wrote:
> Actually, it might be better to just start off with 0 opacity and not mess
> with the visibility property at all:
> document.write('#mainimage{opacity:0}');
> $(window).load(function() {
> //when everything is finally loaded, fade image in
> $("#mainimage").animate({opacity: "1"}, 1000);
>
> });
>
> -Hector
>
> On Sat, Apr 4, 2009 at 4:18 PM, Hector Virgen wrote:
> > Try setting the opacity to 0 when you set it to visible.
> > -Hector
>
> > On Sat, Apr 4, 2009 at 4:15 PM, Derba wrote:
>
> >> the css visible seems to make it visible before it has a chance to
> >> fade in, but I will tinker with it some to see if I can get it to work.
[jQuery] Re: Use jquery before the DOM is ready?
Try setting the opacity to 0 when you set it to visible. -Hector On Sat, Apr 4, 2009 at 4:15 PM, Derba wrote: > > the css visible seems to make it visible before it has a chance to > fade in, but I will tinker with it some to see if I can get it to work.
[jQuery] Re: Use jquery before the DOM is ready?
the css visible seems to make it visible before it has a chance to fade in, but I will tinker with it some to see if I can get it to work.
[jQuery] Re: Use jquery before the DOM is ready?
Actually, it might be better to just start off with 0 opacity and not mess
with the visibility property at all:
document.write('#mainimage{opacity:0}');
$(window).load(function() {
//when everything is finally loaded, fade image in
$("#mainimage").animate({opacity: "1"}, 1000);
});
-Hector
On Sat, Apr 4, 2009 at 4:18 PM, Hector Virgen wrote:
> Try setting the opacity to 0 when you set it to visible.
> -Hector
>
>
> On Sat, Apr 4, 2009 at 4:15 PM, Derba wrote:
>
>>
>> the css visible seems to make it visible before it has a chance to
>> fade in, but I will tinker with it some to see if I can get it to work.
>
>
>
[jQuery] Re: Use jquery before the DOM is ready?
scratch that, including the document.write line in $(window).load
(function() causes some error while leads to just a blank page in the
browser.
Using the first line of document.write('#mainimage{visibility:hidden}'); seems to work fine
thought.
On Apr 4, 8:03 pm, Derba wrote:
> I tried the document.write method you told me to try, but using it
> anywhere causes the whole webpage to load up as a blank page. I have
> NO idea whats happening.
[jQuery] Re: Use jquery before the DOM is ready?
thats works, thanks hector! Sorry about the previous confusion
On Apr 4, 8:07 pm, Derba wrote:
> scratch that, including the document.write line in $(window).load
> (function() causes some error while leads to just a blank page in the
> browser.
>
> Using the first line of document.write('#mainimage{visibility:hidden}'); seems to work fine
> thought.
>
> On Apr 4, 8:03 pm, Derba wrote:
>
> > I tried the document.write method you told me to try, but using it
> > anywhere causes the whole webpage to load up as a blank page. I have
> > NO idea whats happening.
[jQuery] Re: Use jquery before the DOM is ready?
Well, I that was the first thing I thought of, but I generally try to
avoid that as it renders the image useless if the browser does not
have javascript enabled. If this was just a minor part of the webpage
it wouldn't be that big of a deal. But I am using this for an image
gallery that is the main purpose of the site, so I don't want no
javascript to mean that the website is rendered useless.
On Apr 4, 7:48 pm, Hector Virgen wrote:
> You may want to try a different approach. For example, you could use
> javascript to add a new style rule to the CSS that sets the image to
> visibility: hidden. This would have to happen *before* the dom has finished
> downloading to ensure that it always hidden, so no need to wrap it in
> $(document).ready().
> document.write(' type="text/css">#mainimage{visibility:hidden}');
>
> Then, in your $(window).load(), you can set the visibility: visible before
> calling animate.
>
> $(window).load(function() {
> //when everything is finally loaded, fade image in
> document.write(' type="text/css">#mainimage{visibility:visible}');
> $("#mainimage").animate({opacity: "1"}, 1000);
>
> });
>
> I hope this helps.
>
> -Hector
>
> On Sat, Apr 4, 2009 at 3:35 PM, Derba wrote:
>
> > I'm trying to have jquery set an image's opacity to 0. Then, while the
> > image is fully loaded, it will fade the image in.
>
> > It seems to work fine, unless the images have already been viewed in
> > the browser and are stored in cache. In this case, the image is
> > already loaded by the time of $(document).ready, then it fades out,
> > then fades back in.
>
> > I'm doing it like this:
> > Code:
>
> > $(document).ready(function() {
> > $("#mainimage").animate({opacity: "0"}, 0);
> > });
>
> > $(window).load(function() {
> > //when everything is finally loaded, fade image in
>
> > $("#mainimage").animate({opacity: "1"}, 1000);
> > });
>
> > Am I just going about this the wrong way? Or is there a way to set the
> > opacity to 0 before $(document).ready?
> > Still somewhat new to jquery, so if I am making a stupid mistake, my
> > bad. Any help would be great.
[jQuery] Re: Use jquery before the DOM is ready?
You can't use *just* CSS, because browsers without javascript will never see
the image.
-Hector
On Sat, Apr 4, 2009 at 3:49 PM, MorningZ wrote:
>
> How about just using CSS on the image ?
>
> On Apr 4, 7:35 pm, Derba wrote:
> > I'm trying to have jquery set an image's opacity to 0. Then, while the
> > image is fully loaded, it will fade the image in.
> >
> > It seems to work fine, unless the images have already been viewed in
> > the browser and are stored in cache. In this case, the image is
> > already loaded by the time of $(document).ready, then it fades out,
> > then fades back in.
> >
> > I'm doing it like this:
> > Code:
> >
> > $(document).ready(function() {
> >$("#mainimage").animate({opacity: "0"}, 0);
> >
> > });
> >
> > $(window).load(function() {
> > //when everything is finally loaded, fade image in
> >
> > $("#mainimage").animate({opacity: "1"}, 1000);
> >
> > });
> >
> > Am I just going about this the wrong way? Or is there a way to set the
> > opacity to 0 before $(document).ready?
> > Still somewhat new to jquery, so if I am making a stupid mistake, my
> > bad. Any help would be great.
>
