Re: <DIV> langsam einblenden

hirsi007 wrote:

div id="p1" style=" visibility: hidden; height: 100%;"><p
id="test">Kibology for all. All for Kibology.</p></div
div

Mit visibility: hidden ist das div-Element halt verborgen, so du das
nicht änderst, wird es auch nicht sichtbar werden. Du willst eher
<div id="d1"
style="height: 100%;
opacity: 0;
filter: progidXImageTransform.Microsoft.Alpha(opacity=0) ;">
...
</div>
<input type="button" value"fade in"
onclick="fade(document.getElementById('d1'), 0.1, 1);">




--

Martin Honnen
http://JavaScript.FAQTs.com/

Martin Honnen wrote:

hirsi007 wrote:
^^^^^^^^

OP: Da sollte Dein richtiger Name stehen.

div id="p1" style=" visibility: hidden; height: 100%;"><p
id="test">Kibology for all. All for Kibology.</p></div
div

Mit visibility: hidden ist das div-Element halt verborgen, so du das
nicht änderst, wird es auch nicht sichtbar werden. Du willst eher
div id="d1"
style="height: 100%;
opacity: 0;
filter: progidXImageTransform.Microsoft.Alpha(opacity=0) ;"

Das ist leider ungültiges CSS, und funktioniert zudem in IE < 5.5 nicht.

...
/div
input type="button" value"fade in"
onclick="fade(document.getElementById('d1'), 0.1, 1);"

Wie ich schon zuvor mit meinem Beispiel andeutete, braucht man dank
blendTrans-Filter für MSHTML 5+ das Ein- oder Ausblenden nicht zu Fuss zu
programmieren (es sei denn, man möchte keinen linearen Verlauf), und die
height-Eigenschaft muss man dann auch nicht setzen.

function fade(o, from, to)
{
if (typeof o.style != "undefined"
&& typeof o.style.visibility != "undefined")
{
if (typeof o.style.filter != "undefined"
&& typeof o.filters == "object")
{
// blend-in transition, 1 second duration
o.style.filter = "blendTrans(duration=1.0, percent="
+ (from * 10) + ")";
if (typeof o.filters.blendTrans != "undefined")
{
o.filters.blendTrans.Apply();
o.style.visibility = "visible";
o.filters.blendTrans.Play();
}
}

// !MSHTML 5+
else
{
o.style.visibility = "visible";
...
}
}
}

...
<div id="d1" style="opacity: 0; visibility: hidden">...</div>
...


OP: Bitte nicht mehrere Threads für dasselbe Problem eröffnen.


PointedEars
--
Lass den Käse mit MS-Fromage besser sein, lerne HTML (kennen) und
designe mit einem gescheitem Editor (z.B Notepad (c.
-- Michael 'Netzmeister Micha' Specht in
http://selfhtml.de/forum/zeigebeitra...563_78273.php3

On 24 Jan., 14:16, Martin Honnen <mahotr... (AT) yahoo (DOT) de> wrote:

hirsi007 wrote:
div id="p1" style=" visibility: hidden; *height: 100%;"><p
id="test">Kibology for all. All for Kibology.</p></div
div

Mit visibility: hidden ist das div-Element halt verborgen, so du das
nicht änderst, wird es auch nicht sichtbar werden. Du willst eher
* *<div id="d1"
* * * * style="height: 100%;
* * * * * * * *opacity: 0;
* * * * * * * *filter: progidXImageTransform.Microsoft.Alpha(opacity=0) ;"
* * * ...
* *</div
* *<input type="button" value"fade in"
* * * * * onclick="fade(document.getElementById('d1'), 0.1, 1);"

--

* * * * Martin Honnen
* * * *http://JavaScript.FAQTs.com/

DAS Funktioniert nicht (!) aber warum? Hab das Ganze jetzt mal so
eingebaut wie du das geschildert hast aber es funktioniert nicht. Hast
du es zufällig irgendwie in eine HTML Seite eingebaut? Oder könntest
du mir den kompletten Code zukommen lassen?

vielen dank

hirsi007 wrote:

DAS Funktioniert nicht (!) aber warum?

Versuche es mit der ursprünglich geposteten Funktion und diesem HTML:

<div id="d1"
style="height: 100%;">
<p>Kibology for all. All for Kibology</p>
</div>
<script type="text/javascript">
var element = document.getElementById('d1');
if (typeof element.style.opacity != 'undefined') {
element.style.opacity = 0;
}
else if (typeof element.style.filter != 'undefined') {
element.style.filter =
'progidXImageTransform.Microsoft.Alpha(opacity=0 )';
}
</script>
<input type="button" value="fade in"
onclick="fade(document.getElementById('d1'), 0.1, 1);">


Mein vorheriger Vorschlag funktioniert in IE nicht, da
<div style="opacity: 0">
in IE bewirkt, dass typeof div.style.opacity != 'undefined' ist, damit
funktioniert dann die fade-Funktion nicht mehr wie vorgesehen.

Beachte auch den Hinweis von Thomas, dass man für IE den
blendTrans-Filter benutzen kann.


--

Martin Honnen
http://JavaScript.FAQTs.com/