fade between webpages

Levi

Levi

Ultimate Member
Ok this is curiosity more than anything as my previous post on fading images got me thinking.

I remember ie supports effects like fading between webpages, is this possible with javascript/css now that we've progressed a little with browsers?

Now at the moment its more curiosity as it could be a bit tacky if it's done wrong but I'm 50/50 about giving it a go on my new site as it would be a bit like fading the content rather than changing the entire design. Although obviously it all depends on if it can be done easily and by me :D

Ta very :)
 
You'd need to pull your content in with AJAX and fade the resulting markup in, and the old stuff out.
 
There used to be a javascript on dynamic drive, many many years ago that did this..... does dynamic drive still exist?
 
harry - AJAX may be a little above my level :p

Sunburn - yeah dynamic drive does still exist, I'll have a search and see if anything comes up.
 
Levi said:
harry - AJAX may be a little above my level :p

Sunburn - yeah dynamic drive does still exist, I'll have a search and see if anything comes up.
Click to expand...

Eeeek! i wouldn't use it if you do find it lol!!! its quite sh|te then so im sure its sh|te now :)
 
I'm not too worried if I find anything or not, I probably wouldn't have used it as I prefer a site to be fast and having a transition would slow it down but it's curiosity you see :)
 
You could stretch a white div over the page and use JS to transition its opacity over x seconds. But that would just be ridiculous.
 
Another solution is not switching pages at all but just content. Put all the content on one page but only show the necessary one. Use a script to fade in the hidden content and hide the other. But doing it this way has some obvious disadvantages such as easily marking active "pages" and also losing some SEO benefits which I can't quite expand on.
 
Onartis said:
Another solution is not switching pages at all but just content. Put all the content on one page but only show the necessary one. Use a script to fade in the hidden content and hide the other. But doing it this way has some obvious disadvantages such as easily marking active "pages" and also losing some SEO benefits which I can't quite expand on.
Click to expand...

Enter my AJAX suggestion ;)
 
Hay Levi use my Ajax function I wrote for Tbwcf on this form validation thread. I've explained it on detail there and saves me from repeating myself.

You would have to change a few things but rather than having it on the button, as in that example, have it on a link and then bring in what Harry says.

So

<a href="" onclick="change();return false">Some link</a>

Then in the JS wipe the contents of the body or a div by setting it's content to nothing but change the opacity of the text for 5 seconds first, from full to invisible. Then once it has disappeared load up the new content into the body or div, but once it has loaded set the opacity of the text to invisible then fade it in to full over a few seconds.

Way too busy to write that up without errors for you at the mo, but if no one else can help you genuinely, and if you, i mean genuinely, get stuck, even with looking it up on-line, let me know and when I have some time I'll try and wack something up for you.

Bare in mind this should only only be an enhancement once the site is finished, otherwise you are running into massive SEO and accessibility issues TBH as Onartis says.
 
Cheers fella, I'll take a look at it later but I'm kind of edging away from it at the moment as I'm currently redoing my new site with as little javascript and thinking that adding this in kind of defeats the point of removing the javascript :)

I'm even getting to grips with css based image rollovers (lot easier than I thought they were going to be) whereas I've always used javascript up until now :)

Also I'm now thinking waiting upto 5 seconds per page will soon add up and get rid of possible clients, especially if they're like me as I hate waiting on websites.

Oh and don't worry this would be a last addition rather than a main feature as I want to make the site as accessible and SEO'd as possible within my skill set :)
 
Well you could speed it up to 2 seconds but hay.
Can I just ask why you need to get rid of all your JavaScript?

JavaScript is fine if it is only used to enhance a page and the page deterioates nicely when it's turned off.
 
I know I can reduce the fade etc but it's more a case of it adding up but I may still try it when I've got a working site and see how it feels afterwards.

As to javascript I don't really need too, I can quite easily do the rollovers in javascript (they are at the moment), it's more of a push myself into using css and its should be better for the code as js can only load sequentially etc.

Plus all the images are already listed in the css and they're all the same heights so it should be just adding in an extra class for rollovers which would shift the image up/down etc and this should be a bit neater and require less code than the javascript approach.

In theory it should make the site a bit snappier too :)
 
@Harry
You tit, lol. :D
Yeah there is buddy but trying to explain cross browser DOM scripting may of took me about that post again TBH and lost a few ppl, so I converted it to the dark side of coding. :cry:

@Levi
Ideally, and I do write mine like this, honestly Harry, lol, you should separate your JavaScript into an external file including the event handlers, as that separates your logic, cuts page size, so improves performance, allows it to be cache-able again improving performance, makes it easier to maintain and cuts bloat think thats all the positives why to do it like that.

But it does work using it on-page it's just not the best practice that's what Harry's referring to, lol.

Jaz :)
 
You should have a look at jquery - you could easily use that to create a page fade-in effect. Be careful though - if someone has javascript turned off, you want to ensure that the 'white-out' div is switched off - otherwise, they'll just get a white screen.
 
Oops sorry, completely forgot about this thread :(

Jazajay said:
@Levi
Ideally, and I do write mine like this, honestly Harry, lol, you should separate your JavaScript into an external file including the event handlers, as that separates your logic, cuts page size, so improves performance, allows it to be cache-able again improving performance, makes it easier to maintain and cuts bloat think thats all the positives why to do it like that.
Click to expand...
I have up until now tried to remove all javascript into external files, it makes it simpler if it's used on more than one page :) Also it gets cached iirc so saves on bandwidth.

Northy said:
You should have a look at jquery - you could easily use that to create a page fade-in effect. Be careful though - if someone has javascript turned off, you want to ensure that the 'white-out' div is switched off - otherwise, they'll just get a white screen.
Click to expand...
That's true but at this moment I think I'm going to skip it anyways as it's not really going to add anything to the user experience.
 
You must log in or register to reply here.
Back
Top