11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu]Liste déroulante div (problème de scrollbar)

Bonjour,

J'ai codé une petite liste (un peu comme un select) car j'ai besoin de pouvoir agir vraiment sur la liste.
Bref, pour le moment, je n'arrive pas à avoir le comportement d'une liste, enfin j'en suis proche.
Seulement le comportement devient identique seulement quand je clique sur un élement.
La différence se fait au niveau de la scroolbar qui bouge seulement quand je clique une fois sur un élément (au niveau de la gestion des flèches).


**************************************
Voici le fichier HTML:

<html>
<head>
<title> test</title>
<script language="JavaScript" src="Listes.js">

</script>
<link rel="stylesheet" type="text/css" href="Liste.css"/>
</head>
<body onKeyDown="javascript:keyPressed(event);">
<div id="listeElements" class="liste">
<div class="Selected" id="elementList0" onclick="listeId(this);">option1</div>
<div class="notSelected" id="elementList1" onclick="listeId(this);">option2</div>
<div class="notSelected" id="elementList2" onclick="listeId(this);">option3</div>
<div class="notSelected" id="elementList3" onclick="listeId(this);">option4</div>
<div class="notSelected" id="elementList4" onclick="listeId(this);">option5</div>
<div class="notSelected" id="elementList5" onclick="listeId(this);">option6</div>
<div class="notSelected" id="elementList6" onclick="listeId(this);">option7</div>
<div class="notSelected" id="elementList7" onclick="listeId(this);">option8</div>
<div class="notSelected" id="elementList8" onclick="listeId(this);">option9</div>
<div class="notSelected" id="elementList9" onclick="listeId(this);">option10</div>
<div class="notSelected" id="elementList10" onclick="listeId(this);">option11</div>
<div class="notSelected" id="elementList11" onclick="listeId(this);">option12</div>
</div>
</body>
</html>

**************************************
Voici le ficheir js.

var selected = "elementList0";
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 (currentID != selected){
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);
}
}

function keyPressed(pEvent){
if (pEvent.keyCode == 40) down(); // pression touche bas
else if (pEvent.keyCode == 38) up(); // pression touche haut

}


/**
* Déplace l'élément vers le bas
*/
function down(){
var selectedId = getSelectedId();

if (selectedId < getNbList()-1){
listeId(getElement(selectedId+1));
}
}

/**
* Déplace l'élément vers le haut
*/
function up(){
var selectedId = getSelectedId() ;
if (selectedId !=0){
listeId(getElement(selectedId-1));
}
}

/**
* Permet de récupérer le numéro de l'élément sélectionné.
*/
function getSelectedId(){
return parseInt(selected.split("elementList")[1]);
}

/**
* Permet de récupérer le nombre d'éléments de la liste
*/
function getNbList(){
if (isIE()){
return document.getElementById("listeElements").children.length;
} else {
var nb = 0;
var elements = document.getElementById("listeElements").childNodes;
for (i = 0; i< elements.length;i++){
if (elements.item(i).nodeType == Node.ELEMENT_NODE) {
nb++;
}
}
return nb;
}
}

/**
* Permet de récupérer l'élément définit à la position number de la liste
*/
function getElement(number){
if (isIE()){
return document.getElementById("listeElements").children(number);
} else {
var nb = 0;
var elements = document.getElementById("listeElements").childNodes;
for (i = 0; i< elements.length;i++){
if (elements.item(i).nodeType == Node.ELEMENT_NODE) {
if (nb==number) return elements.item(i);
nb++;
}
}
}
}

**************************************
Et voici la css

.liste{
/*overflow = hidden;*/
overflow: auto ;
font-size:20pt;
background:rgb(97,114,128);
height:200px;
display:block;
}

.notSelected{
background:rgb(97,114,128);
font-size:12pt;
height:30px;
margin-left:0px;
padding-left:10px;
padding-top:2px;
cursor:pointer;
display:block;
}

.selected{
background:rgb(0,104,10);
font-size:12pt;
height:30px;
margin-left:0px;
padding-left:10px;
padding-top:2px;
cursor:pointer;
display:block;
}

************************************
C'est comme si la scrollbar devient active à partir du moment ou je clique sur un élément.
Modifié par manutudescends (06 Oct 2006 - 12:32)
Chez moi la scrollbar s'active seulement si je clique sur un élément (en utilisant les flèches haut et bas)
Si tu démares la page et que tu cliques sur bas plusieurs fois, la scrollbar ne bouge pas. Si jamais tu clique sur un élément puis que tu clique sur haut ou bas, la scrollbar bouge.
Ah ok ! j'ai compris Smiley smile

Sans chercher plus loin est-ce que tu as essayé de simuler un clic de ton elementList0 sur le onload de ta page ?
heu j'ai essayé de lancé la meme fonction que j'ai développé (listeId) sur le premier élément au chargement de la page mais ca n'a rien fait.
Par contre je ne sais pas comment simuler un clic souris sur cet élément.
Donc si qq sais, je suis preneur Smiley cligne
En fait le clic n'était pas une très bonne idée Smiley ohwell

Par contre le focus à l'air de marcher
<body onKeyDown="javascript:keyPressed(event);" onLoad="document.getElementById('listeElements').focus();">

A adapter pour tous les navigateurs Smiley cligne

@+
Modifié par Heyoan (05 Oct 2006 - 18:12)
Sujet clos
Aller à