/    Sign up×
Community /Pin to ProfileBookmark

Fade in on a div

Copy linkTweet thisAlerts:
Apr 01.2008

I have a page that has a div created just to cover the entire page with a transparent png. To do so I just created an absolute div and made it 100% by 100%. I then use javascript to envoke the div from display: none to display: block. Everything works great.

What I am trying to do is make my transparent png thats the background image for that div. Fade in when the display is changed via javascript. I’ve been trying different stuff all day and just can’t seem to get it working. Any tips?

here is teh source code for the div:

#fullscreen_overlay{

position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
background: url(images/background_overlay.png) repeat;

}

and the current javascript function:

}function video_pop(){
document.getElementById(‘fullscreen_overlay’).style.display = ‘block’;
}

Any help would be great.

Thanks!

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@iizApr 02.2008 — this may help you out. this should work did not have time to test late for din din pm me if it does not. i also changed it to a background color for better compatibility with MSIE. if you want it to have a 50% opacity then set "for(i = 0; i <= 100; i++)" to "for(i = 0; i <= 50; i++)"


[CODE]
#fullscreen_overlay{

position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
background-color: blue;
}

function opac() {
var blank1 = changeOpac(0);
document.getElementById('fullscreen_overlay').style.display = 'block';
//speed for each frame
var speed = Math.round(1000 / 200);
var timer = 0;
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ")",(timer * speed));
timer++;
}
}

function changeOpac(opacity) {
var object = document.getElementById("fullscreen_overlay").style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
[/CODE]

-nick
Copy linkTweet thisAlerts:
@budsterApr 02.2008 — Hi,

These articles may assist you too.

This page has an example of fading in a div

http://www.astral-consultancy.co.uk/cgi-bin/hunbug/doco.cgi?11450

This page has an example of creating an opaque background without the png image

http://www.astral-consultancy.co.uk/cgi-bin/hunbug/doco.cgi?11420

Hope these help
×

Success!

Help @scalhoun 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 4.27,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

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