Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

fade between webpages

Discussion in 'Website Design Forum:' started by Levi, Nov 6, 2009.

  1. Levi

    Levi Moderator Staff 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 :)
  2. Harry

    Harry Senior Member

    You'd need to pull your content in with AJAX and fade the resulting markup in, and the old stuff out.
  3. Sunburn

    Sunburn Active Member

    There used to be a javascript on dynamic drive, many many years ago that did this..... does dynamic drive still exist?
  4. Levi

    Levi Moderator Staff Member

    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.
  5. Sunburn

    Sunburn Active Member

    Eeeek! i wouldn't use it if you do find it lol!!! its quite sh|te then so im sure its sh|te now :)
  6. Levi

    Levi Moderator Staff Member

    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 :)
  7. Harry

    Harry Senior Member

    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.
  8. Levi

    Levi Moderator Staff Member

    nah I'll skip that idea :)
  9. Kevin

    Kevin Senior Member

    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.
  10. Harry

    Harry Senior Member

    Enter my AJAX suggestion ;)
  11. Jazajay

    Jazajay Active Member

    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.


    <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.
  12. Levi

    Levi Moderator Staff Member

    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 :)
  13. Jazajay

    Jazajay Active Member

    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.
  14. Levi

    Levi Moderator Staff Member

    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 :)
  15. Harry

    Harry Senior Member

    Ooooh, lots of onclick action there Jaz :(
  16. Levi

    Levi Moderator Staff Member

    :confused::confused::confused::confused: what are you referring to, my stuff, the fade between or something completely different :)
  17. Jazajay

    Jazajay Active Member

    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:

    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 :)
  18. Northy

    Northy Junior Member

    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.
  19. Levi

    Levi Moderator Staff Member

    Oops sorry, completely forgot about this thread :(

    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.

    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.

Share This Page