/    Sign up×
Community /Pin to ProfileBookmark

Setting visibility will not work in IE

I have two connected scripts running on my page – one to roll out an image (using clip), the other to cause certain text to fade in (using color and visibility). The scripts work fine in Firefox, but the text does not fade in when viewed in IE. I’ve narrowed the problem code to the following.

I have an element on my page with the id “fadetext” and visibility set to hidden, and on my page load I call the function imageRoll(), which in turn calls textFadeIn():

[CODE]function imageRoll() {
textFadeIn();
}

function textFadeIn() {
document.getElementById(“fadetext”).style.visibility=’visible’;
alert(document.getElementById(“fadetext”).style.visibility);
}[/CODE]

This works fine. When I add in the other components that make imageRoll() work, that’s when there are problems in IE. The alert still comes up, showing that textFadeIn() is still being called correctly, but the visibility of “fadetext” is still hidden. This only happens in IE:

[CODE]var left=200;
var right=200;

function imageRoll() {
document.getElementById(“disappear”).style.visibility=’hidden’;
var image=document.getElementById(“image”);
if (left > 0) {
left=left-1;
right=right+1;
image.style.clip=’rect(0 ‘ + right + ‘px 404px ‘ + left + ‘px)’;
window.setTimeout(imageRoll,1);
} else {
textFadeIn();
}
}

function textFadeIn() {
document.getElementById(“fadetext”).style.visibility=’visible’;
alert(document.getElementById(“fadetext”).style.visibility);
}[/CODE]

All code is in <head>

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@JKwingsfanMar 15.2006 — i think its document.getElementById(insert_element_name).style.display = none or = block
Copy linkTweet thisAlerts:
@tarsusauthorMar 15.2006 — Well, display and visibility are two different style properties that do two different things. Display affects whether the element is actually there taking up space or not, but visibility simply affects whether it can be seen. I need the space my element takes up to still be there - the content below it would move up if display was set to none.

You can see from the more detailed code that I also use style.visibility to hide another element in imageRoll(), which works perfectly, and as I said, textFadeIn() works perfectly when imageRoll() is simplified.
Copy linkTweet thisAlerts:
@tarsusauthorMar 15.2006 — Anyone? Maybe someone could at least visit this page in Internet Explorer:

http://www.chrisandkatieforever.com

And tell me if the text "Chris and Katie - The Wedding" fades in when the image is in view. It seems to work in IE on some machines, but it consistently fails in my own.
Copy linkTweet thisAlerts:
@konithomimoMar 15.2006 — IE can get messed up with window functions if they are not done properly. The proper way to use setTimeout is:

window.setTimeout("funcName", delay)

and example is:

window.setTimeout("myFunc()", 5000)

which means that you should change the following line:

window.setTimeout(imageRoll,1);

to this:

window.setTimeout('imageRoll()',1000);

note - the delay is in milliseconds, so by putting in 1000 we are saying 1 second. No browser will actually go faster than 75 milliseconds. If you put in a lower number (such as how you had 1 millisecond) then the browser will just do it as fast as it can. (for most browsers 100-150 milliseconds, but for some 75 milliseconds)

I can't help much besides that though because I am at work and cannot view the source on your page. If you post the code here though then i will be more than happy to take a look at it for you.
Copy linkTweet thisAlerts:
@tarsusauthorMar 15.2006 — Actually, using the syntax you suggested for the timeout method got everything working perfectly. The script seems to be working every time consistently in IE. It's strange that that could be the problem, since it was calling the function before but just not doing it right. But if it works, I'm not complaining! Thanks!
×

Success!

Help @tarsus 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 5.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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

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