Grow your CSS skills. Land your dream job.

Fade in / fade out

  • # November 13, 2008 at 3:57 am

    I’ve tried various javascripts to accomplish a very ‘simple’ task, but i can’t get it to work. I hope one of you can help me.

    I have a simple mySql database with oneliners. I would like to show these oneliners in a random order with a fade in / fade out effect with a timed interval.

    Do anyone of you have a (simple :D ) solution to do this?

    gr. Bert

    # November 13, 2008 at 7:44 am

    I’m not really skilled at all in mysql, php or even javascript but maybe you can use jQuery the fade function is pretty simple.

    And I think you’d have to put some sort of switch div or w/e as well after the fade

    # November 14, 2008 at 2:51 am

    @Jonz: thx for your reply. I never used jQuery. I’ll have a look at this

    Anyone else have ideas?

    gr. Bert

    uba
    # November 16, 2008 at 6:52 am

    You can create an array in JavaScript with all of the one-liners that you want to show and then write a function that gives you a random number using “Math.random()” but make sure that it does not gives a number greater or smaller than your arrays length. After that just use that number and get the text on that index in the array. To fade it in & out you can use jQuery which is very simple.

    # November 16, 2008 at 8:25 am
    "uba" wrote:
    You can create an array in JavaScript with all of the one-liners that you want to show and then write a function that gives you a random number using “Math.random()” but make sure that it does not gives a number greater or smaller than your arrays length. After that just use that number and get the text on that index in the array. To fade it in & out you can use jQuery which is very simple.

    Uba,
    Thanks a lot. I’ve impemented this and it works. Just the jQuery thing isn’t clear yet, but i’ll look into this.
    Again, thanks a lot.

    gr. Bert

    uba
    # November 16, 2008 at 10:02 am

    I am glad to be of any help, for jQuery all you need to do after including the main jQuery script file in you html is to write something similar to this:

    Code:
    var $objTimer = “”;

    window.clearInterval($objTimer);
    $objTimer = window.setInterval(“doFadeInOut()”, 5000);

    function doFadeInOut() {
    $(“#element”).fadeOut().queue(function() {
    $(this).html(“new line goes here”).fadeIn().dequeue();
    });
    }

    # November 19, 2008 at 4:36 pm

    I found the perfect plugin for jQuery to do what i wanted to do. Its called innerfade.
    http://medienfreunde.com/lab/innerfade/
    Thx everyone for your help.

    gr. Bert

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".