Toon posts:

[JS] DIV faden in FF wel, IE niet..

Pagina: 1
Acties:

vrijdag 12 juni 2009 15:10

Acties:
  • 0 Henk 'm!
  • ekkoper
  • Registratie: Augustus 2003
  • Laatst online: 17-11-2024

ekkoper

Topicstarter
Hallo,

Ik ben met een script bezig om een DIV (een balk met 3 plaatjes) van links naar rechts op te laten lichten.
In Firefox werkt het helemaal, in Internet Explorer werkt het helemaal NIET.

Het is een combinatie van PHP en Javascript, maar de PHP is erg eenvoudig, dus dat zal het probleem niet zijn. In IE worden er geen fouten aangegeven, dus het lijkt goed te gaan. Vandaar dat ik vermoed dat het aan de CSS ligt, maar dat weet ik niet zeker.

Ik ben erg benieuwd wat er verkeerd is. Ik kan er niets over vinden op internet, misschien omdat het redelijk specifiek is.. Ik dacht dat het misschien aan de opacity ligt, maar dat lijkt het niet te zijn.

Heeft iemand een idee?

Alvast bedankt!
Ekkoper

Code:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script type="text/javascript">

var i = 1;
function test(){
<?
for( $i = 1; $i <= 18; $i ++ ){
    echo '
    fade(\'layer_'.$i.'\', 0);';
}

$n = 5;
for( $i = (0-$n); $i <= $n; $i ++ ){
    echo '
    if( document.getElementById(\'layer_\'+(i'.($i>=0?'+':'').$i.')) )
        fade(\'layer_\'+(i'.($i>=0?'+':'').$i.'), '.round(60-abs(60/$n*$i)).');';
}
?>

    i ++;
    
    if( i > 18 ){
        i = 1;
<?
for( $i = 1; $i <= 18; $i ++ ){
    echo '
        fade(\'layer_'.$i.'\', 0);';
}
?>


        //every 2 secondes a break
        setTimeout("test()", 2000);
    }
    else
        //every 80 millisecondes a step forewards
        setTimeout("test()", 80);
}


function fade(obj, opacity){
    opacity = (opacity == 100)?99.999:opacity;
    document.getElementById(obj).style.filter = "alpha(opacity = "+opacity+")";
    document.getElementById(obj).style.backgroundColor = "white";
    document.getElementById(obj).style.KHTMLOpacity = opacity/100;
    document.getElementById(obj).style.MozOpacity = opacity/100;
    document.getElementById(obj).style.opacity = opacity/100;
}
</script>
</head>
<body onload="test()">


<DIV style="width: 900px; height: 25px; position: absolute;">
    <DIV style="width: 300px; height: 25px; position: relative; float: left; background-image: url(plaatje1_1.gif); background-repeat: no-repeat; background-position: center;"></DIV>
    <DIV style="width: 300px; height: 25px; position: relative; float: left; background-image: url(plaatje2_1.gif); background-repeat: no-repeat; background-position: center;"></DIV>
    <DIV style="width: 300px; height: 25px; position: relative; float: left; background-image: url(plaatje3_1.gif); background-repeat: no-repeat; background-position: center;"></DIV>
    <DIV NAME="layer" STYLE="position: absolute; width: 900px; height: 12px;">
<?
for( $i = 1; $i <= 18; $i ++ ){
    echo '
    <DIV ID="layer_'.$i.'" STYLE="width: 50px; height: 25px; float: left;"></DIV>';
}
?>

    </DIV>
</DIV>

</body>
</html>

vrijdag 12 juni 2009 15:16

Acties:
  • 0 Henk 'm!
  • CoolGamer
  • Registratie: Mei 2005
  • Laatst online: 15:47

CoolGamer

What is it? Dragons?

Misschien moet je opacity even afronden bij IE.

¸.·´¯`·.¸.·´¯`·.¸><(((º>¸.·´¯`·.¸><(((º>¸.·´¯`·.¸.·´¯`·.¸.·´¯`·.¸<º)))><¸.·´¯`·.¸.·´¯`·.¸.·´¯`·.¸

vrijdag 12 juni 2009 15:18

Acties:
  • 0 Henk 'm!
  • Tharulerz
  • Registratie: April 2009
  • Laatst online: 10-04 05:16

Tharulerz

Mss kan je eens kijken naar het javascript Framework jQuery, meerbepaald de functie animate().

Ik zie nu ERG veel code voor ERG weinig functionaliteit.

vrijdag 12 juni 2009 15:43

Acties:
  • 0 Henk 'm!
  • Noork
  • Registratie: Juni 2001
  • Niet online

Noork

Ik zie helemaal niks op het scherm? Wellicht is het handig om even een werkende versimpelde versie online te zetten. Dus zonder de php, background images etc.

[toevoeging]
De animatie functioneert overigens wel goed. Plaats de layer_xx div's maar eens buiten de layer div.

[ Voor 27% gewijzigd door Noork op 12-06-2009 16:06 ]

vrijdag 12 juni 2009 16:41

Acties:
  • 0 Henk 'm!
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 18-09 16:28

Bosmonster

*zucht*

Kun je het voorbeeld even posten zoals het gegenereerd wordt door PHP (dus je browser source)? Want dit is nogal moeilijk leesbaar..

vrijdag 12 juni 2009 16:54

Acties:
  • 0 Henk 'm!
  • Noork
  • Registratie: Juni 2001
  • Niet online

Noork

Bosmonster schreef op vrijdag 12 juni 2009 @ 16:41:
Kun je het voorbeeld even posten zoals het gegenereerd wordt door PHP (dus je browser source)? Want dit is nogal moeilijk leesbaar..
Daar word je ook niet heel vrolijk van. Maar hier komt de gefixte versie:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Animatie test Got</title>
<script type="text/javascript">

var i = 1;
function test(){

    fade('layer_1', 0);
    fade('layer_2', 0);
    fade('layer_3', 0);
    fade('layer_4', 0);
    fade('layer_5', 0);
    fade('layer_6', 0);
    fade('layer_7', 0);
    fade('layer_8', 0);
    fade('layer_9', 0);
    fade('layer_10', 0);
    fade('layer_11', 0);
    fade('layer_12', 0);
    fade('layer_13', 0);
    fade('layer_14', 0);
    fade('layer_15', 0);
    fade('layer_16', 0);
    fade('layer_17', 0);
    fade('layer_18', 0);
    if( document.getElementById('layer_'+(i-5)) )
        fade('layer_'+(i-5), 0);
    if( document.getElementById('layer_'+(i-4)) )
        fade('layer_'+(i-4), 12);
    if( document.getElementById('layer_'+(i-3)) )
        fade('layer_'+(i-3), 24);
    if( document.getElementById('layer_'+(i-2)) )
        fade('layer_'+(i-2), 36);
    if( document.getElementById('layer_'+(i-1)) )
        fade('layer_'+(i-1), 48);
    if( document.getElementById('layer_'+(i+0)) )
        fade('layer_'+(i+0), 60);
    if( document.getElementById('layer_'+(i+1)) )
        fade('layer_'+(i+1), 48);
    if( document.getElementById('layer_'+(i+2)) )
        fade('layer_'+(i+2), 36);
    if( document.getElementById('layer_'+(i+3)) )
        fade('layer_'+(i+3), 24);
    if( document.getElementById('layer_'+(i+4)) )
        fade('layer_'+(i+4), 12);
    if( document.getElementById('layer_'+(i+5)) )
        fade('layer_'+(i+5), 0);
    i ++;
    
    if( i > 18 ){
        i = 1;

        fade('layer_1', 0);
        fade('layer_2', 0);
        fade('layer_3', 0);
        fade('layer_4', 0);
        fade('layer_5', 0);
        fade('layer_6', 0);
        fade('layer_7', 0);
        fade('layer_8', 0);
        fade('layer_9', 0);
        fade('layer_10', 0);
        fade('layer_11', 0);
        fade('layer_12', 0);
        fade('layer_13', 0);
        fade('layer_14', 0);
        fade('layer_15', 0);
        fade('layer_16', 0);
        fade('layer_17', 0);
        fade('layer_18', 0);

        //every 2 secondes a break
        setTimeout('test()', 2000);
    }
    else
        //every 80 millisecondes a step forewards
        setTimeout('test()', 80);
}


function fade(obj, opacity){
    opacity = (opacity == 100)?99.999:opacity;
    document.getElementById(obj).style.filter = "alpha(opacity = "+opacity+")";
    document.getElementById(obj).style.KHTMLOpacity = opacity/100;
    document.getElementById(obj).style.MozOpacity = opacity/100;
    document.getElementById(obj).style.opacity = opacity/100;
}
</script>
</head>
<body onload="test();">


<div style="width: 900px; height: 25px; top: 10px; position: absolute; z-index:1; ">
    <div style="z-index:1; background-color: blue; border: 0px solid black; width: 300px; height: 25px; position: relative; float: left; "></div>
    <div style="z-index:1; background-color: blue; border: 0px solid black; width: 300px; height: 25px; position: relative; float: left; "></div>
    <div style="z-index:1; background-color: blue; border: 0px solid black; width: 300px; height: 25px; position: relative; float: left; "></div>
</div>
<div id="layer" style="z-index:2; position: absolute; width: 900px; height: 25px; top:10px;">
        <div id="layer_1" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_2" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_3" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_4" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_5" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_6" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_7" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_8" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_9" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_10" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_11" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_12" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_13" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_14" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_15" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_16" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_17" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
    <div id="layer_18" style="z-index:1; background-color: white; border: 0px solid black; width: 50px; height: 25px; float: left;"></div>
</div>
</body>
</html>

vrijdag 12 juni 2009 17:10

Acties:
  • 0 Henk 'm!
  • ekkoper
  • Registratie: Augustus 2003
  • Laatst online: 17-11-2024

ekkoper

Topicstarter
Ik gebruik liever geen scripts die zijn gemaakt door anderen, beetje een ego-dingetje.
Het gaat me er ook vooral om dat ik dit wil kunnen maken, daarna probeer ik het wel eenvoudiger of efficiënter te maken.

Vreemd dat het in IE op zich wel werkt, als de DIV op een andere plaats staat. Het is dus inderdaad een CSS-issue. Heeft iemand een idee hoe dat op te lossen is?

Ekkoper

--edit--
Het is gelukt door de layer-DIV uit de 'container' te halen en 'm op dezelfde plaats in het venster te laten verschijnen.

Bedankt voor ieders reactie

[ Voor 17% gewijzigd door ekkoper op 12-06-2009 17:18 ]

vrijdag 12 juni 2009 17:19

Acties:
  • 0 Henk 'm!
  • Noork
  • Registratie: Juni 2001
  • Niet online

Noork

Ik denk dat je zelf even moet debuggen waar het mis gaat. Zie mijn bovenstaande code. Dat werkt. Je kan ook alle elementen relatief plaatsen en dan dit gebruiken voor de div waarin de animerende elementen komen:
<div id="layer" style="width: 900px; height: 25px; margin-top: -25;"> (met een negatieve top-margin dus, waardoor deze gelijk komt met de bovenste div.)

vrijdag 12 juni 2009 17:27

Acties:
  • 0 Henk 'm!
  • SKiLLa
  • Registratie: Februari 2002
  • Niet online

SKiLLa

Byte or nibble a bit ?

Ik zou de functie fade herschrijven naar:

HTML:
1
2
3
4
5
6
7
8

function fade(id, opacity){ 
    opacity = (opacity == 100)?99.999:opacity; 
    var obj = document.getElementById(id);
    obj.style.filter = "alpha(opacity = "+opacity+")"; 
    obj.style.KHTMLOpacity = opacity/100; 
    obj.style.MozOpacity = opacity/100; 
    obj.style.opacity = opacity/100; 
}


daar document.getElementById een "dure" operatie is.

'Political Correctness is fascism pretending to be good manners.' - George Carlin

Pagina: 1
Reageer

Apple iPhone 16e LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq