[jQuery] Re: InnerFade without javascript support
CSS is so powerful & easy sometimes.
Wouldn't placing the innerFade sequence of images in a div, and then
assigning that div:
overflow:hidden;
properties take care of it, that's just too easy, I'll report back how
it works.
Also I tried throwing in the innerfade as a page include using .Asp
that didn't work out to well.
The images get don't fade correctly at all, and jump from one to the
other kind of blinky like.
Are there many added problems with lot's of jquery goodies using them
from an include page.
My buddy here can help me figure it out, but keeping it simple once
again, there's probably no reason I need to use an include, but
sometimes it would be handy.
On Jun 5, 2:05 pm, [EMAIL PROTECTED] wrote:
> Thanks again Joel,
>since I'm just beginning the layout, I could build it so the images
> all loading wouldn't be a problem.
> If the images were not contained in a header div, but a right-hand
> sidebar div, that only looked like it was in the header and there
> wouldn't be a problem.
> It wouldn't break the rest of the layout.
> Trouble is though I wasn't planning on a right hand column only a left
> hand one, if it was floated right though and only extended to take in
> all the images it might work, if I can keep the rest of the layout
> flexible in width, which usually it isn't.
> My standard structuring is maybe the problem, and i need to just
> rethink it a tad.
> I've built just a ton of sites now using this
> layout:http://www.456bereastreet.com/lab/developing_with_web_standards/cssla...
>
> Throwing it out there in case anyone else needs a standard layout.
> A slight tweak in structure may be best then.
>
> On Jun 5, 1:56 pm, [EMAIL PROTECTED] wrote:
>
> > Is there a way to call the div containing the fade list code, only if
> > there is jquery support.
> > Obviously it wouldn't load if there was no js. The absolute
> > positioning and z-indexing sounds troublesome.
> > I try not to absolutely position anything normally.
> > ty
> > Thanks joel.
>
> > On Jun 5, 1:31 pm, Joel Birch <[EMAIL PROTECTED]> wrote:
>
> > > On 06/06/2007, at 3:12 AM, [EMAIL PROTECTED] wrote:
>
> > > > Hi All, I'm hoping this is an easy fix.
> > > > Normally on the images list sample:
> > > >http://medienfreunde.com/lab/innerfade/
> > > > The images all load when there is now javascript support.
> > > > I'm planning to use an innerfade list of images in the header design
> > > > of a site.
> > > > I'ld like for the innerfade images to not load at all, if there is no
> > > > javascript support.
> > > > Or maybe the CSS could handle loading only 1 background image for that
> > > > div.
> > > > Any ideas?
> > > > It's not a big concern that there won't be javascript support, just a
> > > > general precaution.
>
> > > Something I have done before is change all but the first image into
> > > links to the images, Then use CSS to position all the li elements
> > > absolutely on top of each other and z-index the first (and now only)
> > > image on top of the links, obscuring them from view. Then, just
> > > before calling your slideshow plugin (innerfade in your case) run
> > > this simple plugin I wrote, upon the same containing element you are
> > > about to run innerfade on:
>
> > > $.fn.anchorsToImg = function() {
> > > this.find("a").add(this.filter("a")).each(function() {
> > > if (this.href.substr(this.href.length-4)==('.jpg' ||
> > > '.gif' ||
> > > '.png') ) {
> > > var $$ = $(this);
> > > $$.after(' > > />').remove();
> > > }
> > > }).end();
> > > return this;
>
> > > };
>
> > > So your calling code may look like something like this:
> > > $('.gallery').anchorsToImg().innerfade();
>
> > > the anchorsToImg plugin will, um, change all the anchors found
> > > anywhere within the element it is called upon into img tags, thereby
> > > providing innerfade with the structure it needs. If JavaScript is
> > > unavailable, only the one image is shown and the other images are not
> > > downloaded but still remain accessible (at least in non-CSS
> > > situations) via the links.
>
> > > Good luck.
>
> > > Joel Birch.
[jQuery] Re: InnerFade without javascript support
Thanks again Joel,
since I'm just beginning the layout, I could build it so the images
all loading wouldn't be a problem.
If the images were not contained in a header div, but a right-hand
sidebar div, that only looked like it was in the header and there
wouldn't be a problem.
It wouldn't break the rest of the layout.
Trouble is though I wasn't planning on a right hand column only a left
hand one, if it was floated right though and only extended to take in
all the images it might work, if I can keep the rest of the layout
flexible in width, which usually it isn't.
My standard structuring is maybe the problem, and i need to just
rethink it a tad.
I've built just a ton of sites now using this layout:
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Throwing it out there in case anyone else needs a standard layout.
A slight tweak in structure may be best then.
On Jun 5, 1:56 pm, [EMAIL PROTECTED] wrote:
> Is there a way to call the div containing the fade list code, only if
> there is jquery support.
> Obviously it wouldn't load if there was no js. The absolute
> positioning and z-indexing sounds troublesome.
> I try not to absolutely position anything normally.
> ty
> Thanks joel.
>
> On Jun 5, 1:31 pm, Joel Birch <[EMAIL PROTECTED]> wrote:
>
> > On 06/06/2007, at 3:12 AM, [EMAIL PROTECTED] wrote:
>
> > > Hi All, I'm hoping this is an easy fix.
> > > Normally on the images list sample:
> > >http://medienfreunde.com/lab/innerfade/
> > > The images all load when there is now javascript support.
> > > I'm planning to use an innerfade list of images in the header design
> > > of a site.
> > > I'ld like for the innerfade images to not load at all, if there is no
> > > javascript support.
> > > Or maybe the CSS could handle loading only 1 background image for that
> > > div.
> > > Any ideas?
> > > It's not a big concern that there won't be javascript support, just a
> > > general precaution.
>
> > Something I have done before is change all but the first image into
> > links to the images, Then use CSS to position all the li elements
> > absolutely on top of each other and z-index the first (and now only)
> > image on top of the links, obscuring them from view. Then, just
> > before calling your slideshow plugin (innerfade in your case) run
> > this simple plugin I wrote, upon the same containing element you are
> > about to run innerfade on:
>
> > $.fn.anchorsToImg = function() {
> > this.find("a").add(this.filter("a")).each(function() {
> > if (this.href.substr(this.href.length-4)==('.jpg' || '.gif'
> > ||
> > '.png') ) {
> > var $$ = $(this);
> > $$.after(' > />').remove();
> > }
> > }).end();
> > return this;
>
> > };
>
> > So your calling code may look like something like this:
> > $('.gallery').anchorsToImg().innerfade();
>
> > the anchorsToImg plugin will, um, change all the anchors found
> > anywhere within the element it is called upon into img tags, thereby
> > providing innerfade with the structure it needs. If JavaScript is
> > unavailable, only the one image is shown and the other images are not
> > downloaded but still remain accessible (at least in non-CSS
> > situations) via the links.
>
> > Good luck.
>
> > Joel Birch.
[jQuery] Re: InnerFade without javascript support
On 06/06/2007, at 3:56 AM, [EMAIL PROTECTED] wrote:
Is there a way to call the div containing the fade list code, only if
there is jquery support.
Obviously it wouldn't load if there was no js. The absolute
positioning and z-indexing sounds troublesome.
I try not to absolutely position anything normally.
ty
Thanks joel.
I guess you could use one of the Ajax functions to import the HTML of
the list of images into whatever container you want it in, upon
document ready. My ajax function knowledge is rusty, but something like:
$(document).ready(function() {
$('.container').load('/path/to/htmlOfImageList.html', function(){
$('.container').innerfade();
});
});
I'm not sure if you call innerfade on the ul or any containing
element (haven't checked) but I'm sure you get the idea.
Joel.
[jQuery] Re: InnerFade without javascript support
Is there a way to call the div containing the fade list code, only if
there is jquery support.
Obviously it wouldn't load if there was no js. The absolute
positioning and z-indexing sounds troublesome.
I try not to absolutely position anything normally.
ty
Thanks joel.
On Jun 5, 1:31 pm, Joel Birch <[EMAIL PROTECTED]> wrote:
> On 06/06/2007, at 3:12 AM, [EMAIL PROTECTED] wrote:
>
> > Hi All, I'm hoping this is an easy fix.
> > Normally on the images list sample:
> >http://medienfreunde.com/lab/innerfade/
> > The images all load when there is now javascript support.
> > I'm planning to use an innerfade list of images in the header design
> > of a site.
> > I'ld like for the innerfade images to not load at all, if there is no
> > javascript support.
> > Or maybe the CSS could handle loading only 1 background image for that
> > div.
> > Any ideas?
> > It's not a big concern that there won't be javascript support, just a
> > general precaution.
>
> Something I have done before is change all but the first image into
> links to the images, Then use CSS to position all the li elements
> absolutely on top of each other and z-index the first (and now only)
> image on top of the links, obscuring them from view. Then, just
> before calling your slideshow plugin (innerfade in your case) run
> this simple plugin I wrote, upon the same containing element you are
> about to run innerfade on:
>
> $.fn.anchorsToImg = function() {
> this.find("a").add(this.filter("a")).each(function() {
> if (this.href.substr(this.href.length-4)==('.jpg' || '.gif' ||
> '.png') ) {
> var $$ = $(this);
> $$.after(' />').remove();
> }
> }).end();
> return this;
>
> };
>
> So your calling code may look like something like this:
> $('.gallery').anchorsToImg().innerfade();
>
> the anchorsToImg plugin will, um, change all the anchors found
> anywhere within the element it is called upon into img tags, thereby
> providing innerfade with the structure it needs. If JavaScript is
> unavailable, only the one image is shown and the other images are not
> downloaded but still remain accessible (at least in non-CSS
> situations) via the links.
>
> Good luck.
>
> Joel Birch.
[jQuery] Re: InnerFade without javascript support
On 06/06/2007, at 3:12 AM, [EMAIL PROTECTED] wrote:
Hi All, I'm hoping this is an easy fix.
Normally on the images list sample:
http://medienfreunde.com/lab/innerfade/
The images all load when there is now javascript support.
I'm planning to use an innerfade list of images in the header design
of a site.
I'ld like for the innerfade images to not load at all, if there is no
javascript support.
Or maybe the CSS could handle loading only 1 background image for that
div.
Any ideas?
It's not a big concern that there won't be javascript support, just a
general precaution.
Something I have done before is change all but the first image into
links to the images, Then use CSS to position all the li elements
absolutely on top of each other and z-index the first (and now only)
image on top of the links, obscuring them from view. Then, just
before calling your slideshow plugin (innerfade in your case) run
this simple plugin I wrote, upon the same containing element you are
about to run innerfade on:
$.fn.anchorsToImg = function() {
this.find("a").add(this.filter("a")).each(function() {
if (this.href.substr(this.href.length-4)==('.jpg' || '.gif' ||
'.png') ) {
var $$ = $(this);
$$.after('').remove();
}
}).end();
return this;
};
So your calling code may look like something like this:
$('.gallery').anchorsToImg().innerfade();
the anchorsToImg plugin will, um, change all the anchors found
anywhere within the element it is called upon into img tags, thereby
providing innerfade with the structure it needs. If JavaScript is
unavailable, only the one image is shown and the other images are not
downloaded but still remain accessible (at least in non-CSS
situations) via the links.
Good luck.
Joel Birch.
