positionner un ascenseur dans un div.

Le
Etienne SOBOLE
Bonjour.

J'ai un div avec un ascenseur qui contient un tableau de plusieurs centaine
de lignes.
j'aimerai trouver le moyen en javascript de placer la scroll du div de telle
façon qu'une ligne soit visible.

par exemple je voudrai en cliquant sur un bouton rendre la ligne 100 visible
a l'ecran.

est ce quelqu'un saurait comment je peux faire ca?

merci.
a+
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Patrick Mevzek
Le #1506682
Le Tue, 11 Mar 2008 21:07:55 +0100, Etienne SOBOLE a écrit:
par exemple je voudrai en cliquant sur un bouton rendre la ligne 100 visible
a l'ecran.


Donner un id à chaque ligne (le <tr> du tableau), et jouer avec
window.location.hash (sans oublier le # initial), le navigateur devrait se
positionner directement au bon endroit.

--
Patrick Mevzek . . . . . . . . . . . . . . Dot and Co

SAM
Le #1506681
Bonjour.

J'ai un div avec un ascenseur qui contient un tableau de plusieurs centaine
de lignes.
j'aimerai trouver le moyen en javascript de placer la scroll du div de telle
façon qu'une ligne soit visible.

par exemple je voudrai en cliquant sur un bouton rendre la ligne 100 visible
a l'ecran.

est ce quelqu'un saurait comment je peux faire ca?


Ça dépend d'avec quel navigateur.

Il y a du monde en plus (avant) le tableau ?
Les rangées sont toutes de même hauteur ?
à part le N° de ligne on a un autre truc pour repérer la rangée ?


document.getElementById('monTable').rows[100].focus()

Non ? dommage ...

Alors peut-être :

function aller(num) {
num--;
var d = document.getElementById('monTable').rows[num];
// pour bien se la repérer
d.style.background = '#ffc';
d.style.color = 'red';
// pour y aller
d.id = 'truc'+num;
location = '#truc'+num;
return false;
}

Aller à la rangée N°<input name="Num">
</form>
<table cellspacing="3" border=1 id="monTable">
<tr> ...

Fonctionne avec tous mes navigateurs sauf Safari qui se contente d'aller
à la rangée 1

--
sm

SAM
Le #1513206
Bonjour.

J'ai un div avec un ascenseur qui contient un tableau de plusieurs centaine
de lignes.
j'aimerai trouver le moyen en javascript de placer la scroll du div de telle
façon qu'une ligne soit visible.

par exemple je voudrai en cliquant sur un bouton rendre la ligne 100 visible
a l'ecran.

est ce quelqu'un saurait comment je peux faire ca?


Oui,
il suffit que le table et la rangée ne soient pas stylés en
display: none;
ni en
visibility: hidden;




function unRang(laquelle) {
var T = document.getElementsByTagName('TR');
for(var i=0; i<T.length; i++)
if(i!==(laquelle-1)) T[i].style.display = 'none';
return false;
}
function tousRangs() {
var T = document.getElementsByTagName('TR');
for(var i=0; i<T.length; i++)
T[i].style.display = '';
return false;
}
</script>
</head>
<body>
<p>aller rang N°<input name="Num">
<input type=submit value="voir">
<input type=button onclick="return tousRangs()" value=reset>
</form>
<table cellspacing="3" border=1 id="monTable">
<tr> ...


--
sm

SAM
Le #1513205
Bonjour.

J'ai un div avec un ascenseur qui contient un tableau de plusieurs centaine
de lignes.
j'aimerai trouver le moyen en javascript de placer la scroll du div de telle
façon qu'une ligne soit visible.

par exemple je voudrai en cliquant sur un bouton rendre la ligne 100 visible
a l'ecran.

est ce quelqu'un saurait comment je peux faire ca?


Ha! mais en fait tu veux faire glisser le table dans l'overflowed ?




function ceRang(num) {
var T = document.getElementById('monTable');
T.style.marginTop = 0;
num--;
var N = T.rows.length;
T.style.marginTop = -(T.offsetHeight/N * num)+'px';
return false;
}

glisse vers :<input name="Num"><input type=submit value="Hop !">
</form>
<div style="height:200px; overflow:auto" id="content">
<table cellspacing="3" border=1>
<tr> ...


Cette fois ça fonctionne même avec Safari ;-)
(toutes les rangées doivent être de même hauteur)

--
sm

SAM
Le #1551018

<div style="height:200px; overflow:auto" id="content">
<table cellspacing="3" border=1>
<tr> ...



<div style="height:200px;overflow:auto">
<table cellspacing="3" border=1 id="monTable">
<tr>
<td> ...


Bien sûr !

--
sm

Etienne SOBOLE
Le #1569984
Ha! mais en fait tu veux faire glisser le table dans l'overflowed ?


yeap.

function ceRang(num) {
var T = document.getElementById('monTable');
T.style.marginTop = 0;
num--;
var N = T.rows.length;
T.style.marginTop = -(T.offsetHeight/N * num)+'px';
return false;
}

glisse vers :<input name="Num"><input type=submit value="Hop !">
</form>
<div style="height:200px; overflow:auto" id="content">
<table cellspacing="3" border=1>
<tr> ...

Cette fois ça fonctionne même avec Safari ;-)
(toutes les rangées doivent être de même hauteur)


Je vais tester toutes ces propositions.
merci!

Etienne

Publicité
Poster une réponse
Anonyme