Ik wil graag dat zowel in Mozilla als IE ik een fade menu krijg. In IE is dit geen probleem maar in Mozilla gaat het al moeilijker. Hij is onvoorspelbaar en zonder een echte reden doet hij het wel en de andere keer niet. Ook flikkert het beeld in Mozilla.
Zoals je ziet gebruik ik prototyping omdat anders de boel in een later stadium aangepast moet worden. Verder heeft prototyping het voordeel dat ik per menuitem variabelen kan onthouden.
Het laatste wat ik geprobeerd heb is een container div die de onmouseout nog eens benadrukt, maar dit werkt ook nog niet helemaal goed. Wel beter dan de eerste keer.
Mijn Code:
Zoals je ziet gebruik ik prototyping omdat anders de boel in een later stadium aangepast moet worden. Verder heeft prototyping het voordeel dat ik per menuitem variabelen kan onthouden.
Het laatste wat ik geprobeerd heb is een container div die de onmouseout nog eens benadrukt, maar dit werkt ook nog niet helemaal goed. Wel beter dan de eerste keer.
Mijn Code:
edit:
1. al meerdere malen aangepast door opmerkingen uit het forum
1. al meerdere malen aangepast door opmerkingen uit het forum
edit:
2. Nu op array basis ipv prototyping
2. Nu op array basis ipv prototyping
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
| <html>
<head>
<title>FadeTest</title>
<style>
div.fader{
font-weight:bold;
font-size:12pt;
text-align:center;
padding:10px;
}
</style>
<script>
// Browser Check
ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
function initFader(arrFaders){
for(var i = 0; i < arrFaders.length; i++){
var fader = arrFaders[i];
var id = fader[0];
var opac = fader[1];
var txt = fader[2];
var width = fader[3];
var height = fader[4];
var color = fader[5];
var newdiv = document.createElement('DIV');
newdiv.id = id;
newdiv.className = "fader";
newdiv.opac = newdiv.startopac = opac;
newdiv.appendChild(document.createTextNode(txt));
newdiv.style.width = width;
newdiv.style.height = height;
newdiv.style.backgroundColor = color;
newdiv.onmouseover = function(){fadeIn(this.id)};
newdiv.onmouseout = function(){fadeOut(this.id)};
if(ie5) newdiv.style.filter = filter="Alpha(opacity="+opac+")";
if(ns6) newdiv.style.MozOpacity = opac/100;
document.body.appendChild(newdiv);
glFaders[id] = newdiv;
}
}
function fadeIn(id) {
var fader = glFaders[id];
if(fader.timer)clearTimeout(fader.timer);
if(fader.opac < 99){
fader.opac+=10;
fader.innerHTML = fader.opac;
if(ie5) fader.style.filter="Alpha(opacity="+fader.opac+")";
if(ns6) fader.style.MozOpacity = fader.opac/100;
fader.timer = setTimeout(function(){fadeIn(id)}, 20);
}
}
function fadeOut(id){
var fader = glFaders[id];
if(fader.timer)clearTimeout(fader.timer);
if(fader.opac > fader.startopac){
fader.opac-=5;
fader.innerHTML=fader.opac;
if(ie5) fader.style.filter="Alpha(opacity="+fader.opac+")";
if(ns6) fader.style.MozOpacity = fader.opac/100;
fader.timer = setTimeout(function(){fadeOut(id)}, 20);
}
}
</script>
</head>
<body>
<h1>Fading menu for Mozilla and IE</h1>
<script>
var arrFaders = [
["test1",19,"Test Div 1",90,80,"red"],
["test2",19,"Test Div 2",110,110,"blue"],
["test3",19,"Test Div 3",80,90,"green"]
];
glFaders = new Array();
initFader(arrFaders);
</script>
</body>
</html> |
[ Voor 110% gewijzigd door Verwijderd op 30-12-2003 10:53 ]
:strip_exif()/u/50656/andre-scholten-avatar.gif?f=community){kind=avatar}
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
/u/44276/got_icon5.png?f=community)
en exact op hetzelfde moment gepost.