[jQuery] Re: fadein thumbnails when loaded
Hi Rick,
Karl's suggestion seems the most elegant (assuming it works OK).
Here is some sample code for what he is suggesting
-- in HEAD or a stylesheet...
body.js #media-gallery ul li img {
/* opacity *may* work better than display:none */
opacity: 0.01;
filter: alpha(opacity=1);
}
And in your JS...
$(function() {
$(#media-gallery ul img).fadeIn(2000);
});
Then add this JS to your HTML - immediately after the BODY tag...
body
script type=text/javascript
document.documentElement.className = js;
-OR-
$('body').addClass(js);
/script
In theory, the images will only be hidden (1% opacity) if Javascript
is enabled, because otherwise BODY will not have the 'js' class,
therefore your CSS rule will not have any effect. Since you are adding
the class *before* the images are added to the DOM, they should load
transparent. And because they are not 'hidden' (display:none), the
images will still take up their normal space when loading, instead of
making the page 'jump' they they are made visible.
/Kevin
On Apr 28, 4:26 am, Rick Faircloth r...@whitestonemedia.com wrote:
In the head you can do this:
script type=text/javascript document.documentElement.className =
'js';/script
Then you can set styles for elements as descendants of .js.
Karl...will you explain a little more about what this means and perhaps give
an
example of its implementation? Or is there a blog or tutorial somewhere?
Thanks,
Rick
[jQuery] Re: fadein thumbnails when loaded
Here is a variation on Eric's idea. But in this example, instead of
writing the CSS rule via Javascript, write a rule to *negate it*
inside a noscript tag.
-- in HEAD or a stylesheet...
#media-gallery ul li img {
/* opacity *may* work better than display:none */
opacity: 0.01;
filter: alpha(opacity=1);
}
Then in the HEAD of you page, add a STYLE block inside a NOSCRIPT
block...
noscript
style type=text/css
#media-gallery ul li img {
/* UNDO the opacity rule set previously */
opacity: 1;
filter: alpha(opacity=100);
}
/style
/noscript
Just one more idea.
/Kevin
On Apr 29, 9:58 am, Kevin Dalman kevin.dal...@gmail.com wrote:
Hi Rick,
Karl's suggestion seems the most elegant (assuming it works OK).
[jQuery] Re: fadein thumbnails when loaded
Thanks for the explanation, Kevin!
Rick
On Wed, Apr 29, 2009 at 12:58 PM, Kevin Dalman kevin.dal...@gmail.comwrote:
Hi Rick,
Karl's suggestion seems the most elegant (assuming it works OK).
Here is some sample code for what he is suggesting
-- in HEAD or a stylesheet...
body.js #media-gallery ul li img {
/* opacity *may* work better than display:none */
opacity: 0.01;
filter: alpha(opacity=1);
}
And in your JS...
$(function() {
$(#media-gallery ul img).fadeIn(2000);
});
Then add this JS to your HTML - immediately after the BODY tag...
body
script type=text/javascript
document.documentElement.className = js;
-OR-
$('body').addClass(js);
/script
In theory, the images will only be hidden (1% opacity) if Javascript
is enabled, because otherwise BODY will not have the 'js' class,
therefore your CSS rule will not have any effect. Since you are adding
the class *before* the images are added to the DOM, they should load
transparent. And because they are not 'hidden' (display:none), the
images will still take up their normal space when loading, instead of
making the page 'jump' they they are made visible.
/Kevin
On Apr 28, 4:26 am, Rick Faircloth r...@whitestonemedia.com wrote:
In the head you can do this:
script type=text/javascript document.documentElement.className =
'js';/script
Then you can set styles for elements as descendants of .js.
Karl...will you explain a little more about what this means and perhaps
give
an
example of its implementation? Or is there a blog or tutorial somewhere?
Thanks,
Rick
--
-
It has been my experience that most bad government is the result of too
much government. - Thomas Jefferson
[jQuery] Re: fadein thumbnails when loaded
In the head you can do this: script type=text/javascript document.documentElement.className = 'js';/script Then you can set styles for elements as descendants of .js. Karl...will you explain a little more about what this means and perhaps give an example of its implementation? Or is there a blog or tutorial somewhere? Thanks, Rick On Mon, Apr 27, 2009 at 11:33 PM, Karl Swedberg k...@englishrules.comwrote: On Apr 27, 2009, at 8:05 PM, Eric Garside wrote: A) the images very quickly load then disapper. I dont want to hide the images in css incase people have js diasbled. You're out of luck, then. DOMReady will trigger after the images and html has loaded, so unless you hide them with CSS, there's no way to prevent the flash, afaik. In the head you can do this: script type=text/javascript document.documentElement.className = 'js';/script Then you can set styles for elements as descendants of .js. --Karl -- - It has been my experience that most bad government is the result of too much government. - Thomas Jefferson
[jQuery] Re: fadein thumbnails when loaded
I don't know that would work, Karl. It would have to be either at the
bottom of the page, as the elements wouldn't be in the dom yet if it
was just up top. But, that did inspire an idea. If you want to keep
the compliance, you could try the following:
head
titleTest/title
script type=text/javascript
var css = document.createElement('link');
css.setAttribute('rel','stylesheet');
css.setAttribute('type', 'text/css');
css.setAttribute('href', '/path/to/css/file.css');
document.getElementsByTagName(head)[0].appendChild(css);
/script
/head
body
div id=media-gallery
h2Media Gallery/h2
ul
li
a href=HYPERLINKimg src=IMG SOURCE //a
/li
li
a href=HYPERLINKimg src=IMG SOURCE //a
/li
/ul
/div
/body
Then, inside the CSS file you're including with javascript, put:
#media-gallery img { display: none; }
This will prevent the flickering effect, and only hide them when JS is
enabled.
function loadjscssfile(filename, filetype){
if (filetype==js){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute(type,text/javascript)
fileref.setAttribute(src, filename)
}
else if (filetype==css){ //if filename is an external CSS file
var fileref=document.createElement(link)
fileref.setAttribute(rel, stylesheet)
fileref.setAttribute(type, text/css)
fileref.setAttribute(href, filename)
}
if (typeof fileref!=undefined)
}
On Apr 28, 7:26 am, Rick Faircloth r...@whitestonemedia.com wrote:
In the head you can do this:
script type=text/javascript document.documentElement.className =
'js';/script
Then you can set styles for elements as descendants of .js.
Karl...will you explain a little more about what this means and perhaps give
an
example of its implementation? Or is there a blog or tutorial somewhere?
Thanks,
Rick
On Mon, Apr 27, 2009 at 11:33 PM, Karl Swedberg k...@englishrules.comwrote:
On Apr 27, 2009, at 8:05 PM, Eric Garside wrote:
A) the images very quickly load then disapper. I dont want to hide the
images in css incase people have js diasbled.
You're out of luck, then. DOMReady will trigger after the images and
html has loaded, so unless you hide them with CSS, there's no way to
prevent the flash, afaik.
In the head you can do this:
script type=text/javascript document.documentElement.className =
'js';/script
Then you can set styles for elements as descendants of .js.
--Karl
--
-
It has been my experience that most bad government is the result of too
much government. - Thomas Jefferson
[jQuery] Re: fadein thumbnails when loaded
A) the images very quickly load then disapper. I dont want to hide the images
in css incase people have js diasbled.
You're out of luck, then. DOMReady will trigger after the images and
html has loaded, so unless you hide them with CSS, there's no way to
prevent the flash, afaik.
B) all the images load together which is making me think that i have
something wrong somewhere.
What do you mean, load together? Chances are, the images finish
loading during the 2 second fade in, giving the appearance they are?
Also, if you have the images cached by having visited the page before,
they should all come up within seconds of each other.
On Apr 27, 4:18 pm, David davidgsw...@gmail.com wrote:
Hi, im a totally beginner so this may be obvious but im stuck!!!
I have image galleries on my site and i want the images to fade in
after loading, at the moment i have the following script:
Code:
$(function() {
$(div#media-gallery ul li img).css(display,none);
$(div#media-gallery ul li img).fadeIn(2000);
});
Which almost does what i want but
A) the images very quickly load then disapper. I dont want to hide the
images in css incase people have js diasbled.
B) all the images load together which is making me think that i have
something wrong somewhere.
the markup for the div in question is:
Code:
div id=media-gallery
h2Media Gallery/h2
ul
li
a href=HYPERLINKimg src=IMG SOURCE //a
/li
li
a href=HYPERLINKimg src=IMG SOURCE //a
/li
/ul
/div
With HYPERLINK and IMG SOURCE being actual urls.
Hope someone can help me with this, i have looked around but cant find
an answer anywhere.
David
[jQuery] Re: fadein thumbnails when loaded
Eric, thanks for the input.
I think (not sure) the way i have the code done it waits for all
images to load before fading them in, as opposed to fading the
individual image in when loaded.
I found this: http://clagnut.com/sandbox/imagefades/
Which seems to do eveyrhing i want including the images loading
quickly, but not sure how to implement it.
On Apr 28, 1:05 am, Eric Garside gars...@gmail.com wrote:
A) the images very quickly load then disapper. I dont want to hide the
images in css incase people have js diasbled.
You're out of luck, then. DOMReady will trigger after the images and
html has loaded, so unless you hide them with CSS, there's no way to
prevent the flash, afaik.
B) all the images load together which is making me think that i have
something wrong somewhere.
What do you mean, load together? Chances are, the images finish
loading during the 2 second fade in, giving the appearance they are?
Also, if you have the images cached by having visited the page before,
they should all come up within seconds of each other.
On Apr 27, 4:18 pm, David davidgsw...@gmail.com wrote:
Hi, im a totally beginner so this may be obvious but im stuck!!!
I have image galleries on my site and i want the images to fade in
after loading, at the moment i have the following script:
Code:
$(function() {
$(div#media-gallery ul li img).css(display,none);
$(div#media-gallery ul li img).fadeIn(2000);
});
Which almost does what i want but
A) the images very quickly load then disapper. I dont want to hide the
images in css incase people have js diasbled.
B) all the images load together which is making me think that i have
something wrong somewhere.
the markup for the div in question is:
Code:
div id=media-gallery
h2Media Gallery/h2
ul
li
a href=HYPERLINKimg src=IMG SOURCE //a
/li
li
a href=HYPERLINKimg src=IMG SOURCE //a
/li
/ul
/div
With HYPERLINK and IMG SOURCE being actual urls.
Hope someone can help me with this, i have looked around but cant find
an answer anywhere.
David
[jQuery] Re: fadein thumbnails when loaded
Ok... i sorted the initial problems out, i load the css that hides the
elements using javscript:
script type=text/javascript
document.write('link rel=stylesheet media=all type=text/css
href=/css/no-js.css /');
/script
But i still think it is not dealing with the images on a per load
basis but on whole, any ideas?
On Apr 28, 1:31 am, David davidgsw...@gmail.com wrote:
Eric, thanks for the input.
I think (not sure) the way i have the code done it waits for all
images to load before fading them in, as opposed to fading the
individual image in when loaded.
I found this:http://clagnut.com/sandbox/imagefades/
Which seems to do eveyrhing i want including the images loading
quickly, but not sure how to implement it.
On Apr 28, 1:05 am, Eric Garside gars...@gmail.com wrote:
A) the images very quickly load then disapper. I dont want to hide the
images in css incase people have js diasbled.
You're out of luck, then. DOMReady will trigger after the images and
html has loaded, so unless you hide them with CSS, there's no way to
prevent the flash, afaik.
B) all the images load together which is making me think that i have
something wrong somewhere.
What do you mean, load together? Chances are, the images finish
loading during the 2 second fade in, giving the appearance they are?
Also, if you have the images cached by having visited the page before,
they should all come up within seconds of each other.
On Apr 27, 4:18 pm, David davidgsw...@gmail.com wrote:
Hi, im a totally beginner so this may be obvious but im stuck!!!
I have image galleries on my site and i want the images to fade in
after loading, at the moment i have the following script:
Code:
$(function() {
$(div#media-gallery ul li img).css(display,none);
$(div#media-gallery ul li img).fadeIn(2000);
});
Which almost does what i want but
A) the images very quickly load then disapper. I dont want to hide the
images in css incase people have js diasbled.
B) all the images load together which is making me think that i have
something wrong somewhere.
the markup for the div in question is:
Code:
div id=media-gallery
h2Media Gallery/h2
ul
li
a href=HYPERLINKimg src=IMG SOURCE //a
/li
li
a href=HYPERLINKimg src=IMG SOURCE //a
/li
/ul
/div
With HYPERLINK and IMG SOURCE being actual urls.
Hope someone can help me with this, i have looked around but cant find
an answer anywhere.
David
[jQuery] Re: fadein thumbnails when loaded
On Apr 27, 2009, at 8:05 PM, Eric Garside wrote: A) the images very quickly load then disapper. I dont want to hide the images in css incase people have js diasbled. You're out of luck, then. DOMReady will trigger after the images and html has loaded, so unless you hide them with CSS, there's no way to prevent the flash, afaik. In the head you can do this: script type=text/javascript document.documentElement.className = 'js';/script Then you can set styles for elements as descendants of .js. --Karl
