Compatibilité overflow IE-FF
Bonjour,
j'ai développé un select personnalisé avec des balises div.
Seulement le scroll ne marche pas avec IE. La scrollbar ne s'affiche pas.
Voici le 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
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
| <html>
<head>
<title> test</title>
<script>
var selected = -1;
var navigateur = navigator.appName;
/**
* Permet de cacher la scrollbar principale
*/
function hideScroll(){
document.body.style.overflow='hidden';
}
/**
* Permet de sélectionner un élément de la liste
*/
function listeId(elem){
var currentClasse = getClassAttribute(elem);
var currentID = elem.getAttribute("id");
if (currentClasse=="notSelected") {
setClassAttribute(elem,"selected");
}
else {
setClassAttribute(elem,"notSelected");
}
// on désélectionne le suivant
if (selected !=-1) deselectLast(selected);
// l'élément sélectionné est l'élément courant.
selected = currentID;
}
/**
* Permet de désélectionner l'élément précédent
*/
function deselectLast(id){
var lastSelected = document.getElementById(id);
if (lastSelected){
setClassAttribute(lastSelected,"notSelected");
}
}
/**
* Fonction qui indique si le navigateur est Firefox
*/
function isFF(){
return navigateur == 'Netscape';
}
/**
* Fonction qui indique si le navigateur est Internet Explorer
*/
function isIE(){
return navigateur == 'Microsoft Internet Explorer';
}
/**
* Fonction qui permet de récupérer l'attribut class de l'élément en fonction du navigateur
*/
function getClassAttribute(element){
if (isFF()) {
return element.getAttribute("class");
}
else if ( isIE() ){
return element.getAttribute("className");
}
else {
return "";
}
}
/**
* Fonction qui permet de définir l'attribut class de l'élément en fonction du navigateur
*/
function setClassAttribute(element, value){
if (isFF()) {
return element.setAttribute("class",value);
}
else if ( isIE() ){
return element.setAttribute("className",value);
}
}
</script>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div id="liste" class="liste">
<div class="notSelected" id="elementList1" onclick="listeId(this);">option1</div>
<div class="notSelected" id="elementList2" onclick="listeId(this);">option2</div>
<div class="notSelected" id="elementList3" onclick="listeId(this);">option3</div>
<div class="notSelected" id="elementList4" onclick="listeId(this);">option4</div>
<div class="notSelected" id="elementList5" onclick="listeId(this);">option5</div>
<div class="notSelected" id="elementList6" onclick="listeId(this);">option6</div>
<div class="notSelected" id="elementList7" onclick="listeId(this);">option7</div>
<div class="notSelected" id="elementList8" onclick="listeId(this);">option8</div>
<div class="notSelected" id="elementList9" onclick="listeId(this);">option9</div>
<div class="notSelected" id="elementList10" onclick="listeId(this);">option10</div>
<div class="notSelected" id="elementList11" onclick="listeId(this);">option11</div>
<div class="notSelected" id="elementList12" onclick="listeId(this);">option12</div>
</div>
</body>
</html> |
Et voici la css:
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
| #liste{
overflow = 'hidden';
font-size:20pt;
background:rgb(97,114,128);
}
.liste{
/*overflow = hidden;*/
position : absolute;
overflow: auto ;
background:rgb(97,114,128);
height:200px;
width:300px;
}
.notSelected{
background:rgb(97,114,128);
font-size:12pt;
height:30px;
margin-left:2px;
cursor:pointer;
}
.selected{
background:rgb(0,104,10);
font-size:12pt;
height:30px;
margin-left:2px;
cursor:pointer;
}
|
Savez vous comment je peux faire pour que le scroll marche également sous IE ?
merci
