javascript displaying a picture message

Question

I want to display a Happy Holidays picture along with a message on my home page when user visits the page and it should fade away after few seconds. I think I have to do it in javascript or jquery but I dont know how to do it. Are there any examples/tutorials to do that.

I know that there are some jquery plugins like lightbox,shadow box etc. but I dont know how to activate them when the page loads, so I think it has something to do with javascript.

score 2 · Accepted Answer · answered Dec 20 '11 at 19:39

2

For an image like

<img src="x.png" alt="My Image" id="MyImage" />

The jQuery library javascript below will fade it out after 5 seconds

setTimeout(function()
{
    $("#MyImage").fadeOut('fast');
}, 5000);

See http://www.w3schools.com/jsref/met_win_settimeout.asp and http://api.jquery.com/fadeOut/

answered Dec 20 '11 at 19:39

Sheridan Bulger

1,214
7
9

thanks! can you put it all as a chunk so that I can copy and test it. – uday Dec 20 '11 at 19:46
Do we have to install some jquery plugins or just the above code would do? -Thanks Dave – uday Dec 21 '11 at 18:37
I was wondering can I cascade another command for redirection after the time for which image has been displayed. I want to do same like what has been showed in top answer in this question. http://stackoverflow.com/questions/3677667/delay-automatic-url-redirect-with-jquery – uday Dec 22 '11 at 23:17

Fabrizio Calderan · Answer 2 · 2011-12-20T19:53:38.707

since you have used html5 and css tags in the question you could achieve this effect with a simple css3 animation (other prefixes omitted for brevity)

#myimage {
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-delay: 5s;
    -webkit-animation-iteration-count: 1;
}


@-webkit-keyframes fadein {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

otherwise you can use a transition

#myimage {
    opacity: 1;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease;
    -webkit-transition-delay: 5s;
}

#myimage.classAppliedOnDomReadyViaJavascript {
   opacity: 0;
}

applying a particular class at dom ready event so the transition can start at a given time

I wonder how much longer until IE9 becomes the minimum standard among at least 90% of IE users so we can justify the transition. Until then we have jQuery I suppose. — jeffkee, Dec 20 '11 at 22:40

score 0 · Answer 3 · answered Dec 20 '11 at 19:40

0

$(document).ready(function(){
     setTimeout("$('#xmasdiv').fadeTo(300,0.0);",5000); 
     // change the 5000 to however many miliseconds you want delay,
     // and the 300 to whatever speed of transition you wish to.
     // And of course #xmasdiv should refer to the right DIV
     // (like <div id="xmasdiv">[xmas content]</div>)
});

hoep this helps.

answered Dec 20 '11 at 19:40

jeffkee

5,106
12
44
76

Also: http://api.jquery.com/fadeTo/ this is the fadeTo() function documentation. You can also use fadeOut(300); as a shorthand, but I'm in the habit of using fadeTo for more concise control. – jeffkee Dec 20 '11 at 19:43
Hi, when I try the above script, nothing happens & when I use firebug to see where I am going wrong it says- "missing ) after argument list" `$(document).ready(function(){` – uday Dec 22 '11 at 18:11
Did you make sure to include the final line? }); is critical. At the moment I don't see any missing brackets.. – jeffkee Dec 22 '11 at 21:35
yeah I did place }); but for some reason I dont know may be thats a bug in Firebug itself. Can you try to see if its showing the same error. Thanks – uday Dec 22 '11 at 23:16

score 0 · Answer 4 · answered Dec 20 '11 at 20:30

JS:

setTimeout(function() {
    var image = document.getElementById('hh'),
        step = 0.01,
        opacity = 1,
        interval = setInterval(function() {
           opacity = opacity - step;
           if (opacity < 0) {
                image.style.opacity = 0;
                clearInterval(interval);
                return false;
           }
           image.style.opacity = opacity;
        }, 1);
}, 5000);

HTML:

<img id="hh" src="http://goo.gl/qEH6i" alt="" />

score -1 · Answer 5 · answered Dec 20 '11 at 19:37

-1

Use Jquery. See the documentation and show case : http://jqueryui.com/demos/animate/. You'll find tons of source on this page to get you started.

answered Dec 20 '11 at 19:37

Yahel

8,522
2
24
32

javascript displaying a picture message

5 Answers5