Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

positionner un ascenseur dans un div.

6 réponses
Avatar
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+

6 réponses

Avatar
Patrick Mevzek
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
<http://www.dotandco.net/> <http://www.dotandco.com/>

Avatar
SAM
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;
}

<form action="#" onsubmit="return aller(this.Num.value);">
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

Avatar
SAM
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>
<form action="#" onsubmit="return unRang(this.Num.value);">
<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

Avatar
SAM
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;
}

<form action="#" onsubmit="return ceRang(this.Num.value);">
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

Avatar
SAM

<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

Avatar
Etienne SOBOLE
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;
}

<form action="#" onsubmit="return ceRang(this.Num.value);">
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