/    Sign up×
Community /Pin to ProfileBookmark

Fade in table background image

Copy linkTweet thisAlerts:
Aug 25.2012

I am trying to get the folowing background image to have a slight fade-in;

<table width=”832″ border=”0″ cellpadding=”0″ cellspacing=”0″ background=”image02.jpg”>

I have tried various JS samples I have found online but with no success. Seems like this would be an easy thing to do.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@George88Aug 25.2012 — Do you want this to fade in on page load or at a certain time or after a specific event?

You might want to try something along the lines of:

<i>
</i>
&lt;!DOCTYPE html&gt;

&lt;style type="text/css"&gt;

#test{ background-image: url(someimage.png); opacity: 0;}

&lt;/style&gt;

&lt;div id="test" /&gt;

&lt;script type="text/javascript"&gt;

window.addEventListener("load", fade, false);

// Calls on load.
function fade()
{
var opacity = document.getElementById("test").style.opacity;
var fade_in = 0;

<i> </i>// Calls an interval every 100 ms.
<i> </i>fade_in = setInterval(function()
<i> </i>{
<i> </i> if(opacity == "" || opacity == "undefined" || opacity == "null")
<i> </i> {
<i> </i> // You may have issues incrementing opacity this way. Not sure.
<i> </i> document.getElementById("test").style.opacity += 0.1;

<i> </i> if(opacity &gt;= 1.0)
<i> </i> {
<i> </i> clearInterval(fade_in);
<i> </i> return false;
<i> </i> }
<i> </i> }
<i> </i>}, 100);
}

&lt;/script&gt;

This is not tested code so you might have bugs, but this is how I would go about writing a fade function. If you have some code you can post that you'd prefer to use then feel free to show it. This gives me an idea for a tutorial actually, thanks for the idea!
Copy linkTweet thisAlerts:
@George88Aug 25.2012 — Thanks for the inspiration. Here's some working code. For the sake of demonstration, I've used this image: http://www.uaegroup.net/uploads/ajax.jpg

Here's my code, tested in the top 5 browsers with no bugs or console errors.

<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;

&lt;style type="text/css"&gt;

#fade_this
{
background-image: url(someimage.jpg);
background-repeat: no-repeat;
height: 236px;
width: 474px;
opacity: 0;
}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="fade_this"&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

&lt;script type="text/javascript"&gt;

window.addEventListener("load", fade, false);

function fade()
{
var opacity = document.getElementById("fade_this").style.opacity;
var fade_in = 0;

<i> </i>if(typeof fade.counter == "undefined")
<i> </i> fade.counter = 0;

<i> </i>fade_in = setInterval
<i> </i>(
<i> </i> function()
<i> </i> {
<i> </i> // You can adjust this to suit your needs.
<i> </i> fade.counter += 0.2;

<i> </i> document.getElementById("fade_this").style.opacity = fade.counter;

<i> </i> if(document.getElementById("fade_this").style.opacity &gt;= 1)
<i> </i> {
<i> </i> clearInterval(fade_in);
<i> </i> return false;
<i> </i> }

<i> </i> }, 50 // 50ms per interval. Changing this speeds up/slows down fade.
<i> </i>);
}

&lt;/script&gt;
Copy linkTweet thisAlerts:
@ADVaughnauthorAug 25.2012 — Thanks I will try it out.
×

Success!

Help @ADVaughn spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...