Dynamic Tooltip & Fade-In won't work together

[phosphor]

I use 2 java scripts in my template, one for the image fade in (line 19) and one for the dynamic tooltips (line 20/21).
My problem is that only the last I load works! So in this case only the tooltip works. If I change line 19 with the lines 20/21 only the image fade in works.

Can anybody help me with this problem? I'm a Pixelpost beginner and have no idea how to solve.

www.fantasia-center.ch/stubiblog

thanx for help!

[Connie]

Phosphor,

this is more a javascript-problem as a Pixelpost-Problem, so I hope we have some Javascript-Experts here!

your about-page is very dark... not easy to read..

there are some HTML-errors in your page which might cause trouble as well:

<br> instead of <br />
one <div> is not closed...

check your page with this URL:

http://validator.w3.org/check?verbose=1&uri=http%3A//www.fantasia-center.ch/stubiblog/index.php

43 errors! I think the Javascript is minor...

it is always good first to have valid HTML and valid CSS and then start to fix other script-thingies..

good luck!

[GeoS]

Yesterday I was installing same fade in JS script and what is funny - on the other site it was working fine (from which I took it) and on mine didnt. Problems where only under IE.

Ive changed:
function initImage() {
imageId = 'photo';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}

to:
function initImage()
{
imageId = 'photo';
imgobj = document.getElementById(imageId);
setOpacity(imgobj, 0);
imgobj.style.visibility = 'visible';
fadeIn(imageId,0);
}

And it started to work fine also under IE. Maybe it will solve your problem. If no then tell us where exactly is the issue.

PS First of all you must uncomment:
<!-- <style type='text/css'>#photo {visibility:hidden;} </style> -->
and put it back to JS lib as it was.
There must be also this part with initialization in onload state.

[phosphor]

The fade is working properly, but not together with the Dynamic Tooltip!

In this case the tooltips works but the fade dont.
<script type="text/javascript" src="stubifade.js"></script>
<script type="text/javascript" src="overlib.js"></script>
<script type="text/javascript" src="overlib_fade.js"></script>

And in this case the fade works but the tooltips dont.
<script type="text/javascript" src="overlib.js"></script>
<script type="text/javascript" src="overlib_fade.js"></script>
<script type="text/javascript" src="stubifade.js"></script>

It works always only the last JS that the site is loading...
Any idea why?

[Connie]

very simple, it's Microsoft ;=(

[GeoS]

I told you to move it:

<style type='text/css'>#photo {visibility:hidden;} </style>

back to JS lib.

So put back
document.writeln("<style type='text/css'>#photo {visibility:hidden;} </style>");
to http://www.fantasia-center.ch/stubiblog/stubifade.js
and remove it from image_template.html

[phosphor]

hmmm, won't work either :-(

[GeoS]

It needs many test for solution and writing post once for few hours is never ending story - it is hard to work in such conditions. You must solve it on own hand.

[inophoto]

The problem seems to be that XHTML doesnt like you passing the 'visibility:hidden' through javascript.

Take this like out of stubifade.js:

document.write("<style type='text/css'>#photo
{visibility:hidden;}</style>");

And add edit your #page css element to look like this:

#photo {
background:#f5f5f5;
padding:5px;
border:1px solid #ccc;
visibility:hidden;
}

Minus my style information obviously :)

That seemed to get it to work for me.

Jamie

[GeoS]

It shouldnt be a problem but after my try fixing all issues for IE I also made it like inophoto suggested above.