11548 sujets

JavaScript, DOM et API Web HTML5

[résolu]équivalence de scrolltop en ecmascript ?

Bonjour,

J'essaye de positionner un fieldset de formulaire en fonction du scroll effectuer sur la page.
Il s'agit en fait de l'émulation en JS d'un position:fixed sous IE pour une apllicatioin intranet
Les soluces que j'ai trouvé sur le web utilise srolltop. Comme IE est en mode standard (j'utilise un doctype xtml stict sans prologue xml), scrolltop ne fonctionne pas.
Existe-t-il un équivalant ecmascript de scrolltop ?
Avez-vous une autre idée ?

Merci

Code :
Le fieldset à fixer à une id = "actionMenu"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>SIS Bundle Manager 0_1</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
    <script type="text/javascript" src="script/common.js"></script>
</head>
<body>
<div id="header">
	<img src="" alt="Logo SIS Bundle Manager" title="Version 0.1"/>
	<img src="" alt="Logo IPM"/>
	<ul>
		<li><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=requestBundleList">Bundle Area</a></li>
		<li><a href="http://localhost:8080/SIS%20bundle%20Manager/AdminArea.do?method=viewAdminArea">Admin Area</a></li>
	</ul>
	<p><a href="javascript:window.close()" title="Fermer la page"><span>Fermer la page</span></a></p>
</div>

<div id="main">
	<h1>Bundle Management</h1>
	<div id="BundleList">
		<h2>Bundle List</h2>
		<form action="">
			<fieldset id="actionMenu">
				<h4>Bundle List Actions</h4>
				<input type="submit" value="Execute" />
				<input type="reset" value="Reset" />
				<p><a href="javascript:ecrire()">ecrire</a></p>
			</fieldset>
			<table summary="Bundle List">
			<caption>Bundle List</caption>
			<thead>
				<tr>
					<th></th>
					<th>Name</th>
					<th>Target</th>
					<th>Validity</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input id="DHfoot" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot2" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot2</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4a" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4a</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4&agrave;" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4&agrave;</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4d" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4d</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot6" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot6</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfootd" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot2e" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot2</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4az" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4a</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4&agrave;r" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4&agrave;</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4dr" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4d</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot6r" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot6</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoott" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot2t" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot2</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4at" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4a</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4&agrave;t" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4&agrave;</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4dt" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4d</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot6t" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot6</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfooty" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot2u" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot2</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4au" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4a</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4&agrave;u" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4&agrave;</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4du" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4d</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot6u" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot6</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>				<tr>
					<td><input id="DHfooti" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot2o" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot2</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4ao" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4a</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4&agrave;o" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4&agrave;</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot4do" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot4d</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
				<tr>
					<td><input id="DHfoot6o" type="checkbox"/></td>
					<td><a href="http://localhost:8080/SIS%20bundle%20Manager/ManageBundle.do?method=prepareProductList&amp;bundleName=DHfoot">DHfoot6</a></td>
					<td>ftp://[user]:[password]@[host]:[port]/[path]</td>
					<td>7</td>
				</tr>
			</tbody>
			</table>
			<p><input type="submit" value="Execute" /><input type="reset" value="Reset" /></p>
			</form>
	</div>
</div>
</body>
</html>

Modifié par Mathieu_vd (15 May 2006 - 18:12)
Salut,
Le long code que tu nous a donné ne contient pas ton JS.
Sinon, la valeur du scroll vertical pour IE6 en mode standards est 
document.documentElement.scrolltop
et 
pageYOffset
pour les autres
Désolé pour le long code... il s'agit juste d'un tableau suffisament long pour permettre un scroll.

Je connais scrolltop et pageYOffset mais je n'arrive pas à accéder à scrolltop quand IE switche en mode standard grâce au doctype XHTML strict.

Pour les autres navigateurs, j'utilise le css 

position: fixed


Je n'ai pas posté de code js vu que je ne suis capable que d'utiliser scrolltop et que ca ne fonctionne pas en mode standard.

Voici la solution de rechange que j'utilise en espérant trouver mieux:

- prologue xml pour que ie ne soit plus en mode standard.
- utilisation d'un commentaire conditionnel pour charger un js que seul IE interprétera.

    <!--[if lte IE 6]>
		<script type="text/javascript" src="script/actionfixed.js"></script>
    <![endif]-->

- le code js suivant

window.onscroll = function(){
	document.getElementById("actionMenu").style.top= document.body.scrollTop + 27 + 'px';
}


Le problème réside dans le fait que IE n'est plus en mode standard. Le modèle de boîte est donc différent ce qui occasionne quelques petits soucis de mise en page.

Ma question est donc de savoir s'il y a moyen d'implémenter un code équivalant en restant en mode standard.
Je suis biensûr ouvert à toutes propositions en pure CSS...

Merci pour votre aide
@chmel

J'ai lu ton intervention trop vite (pourtant elle était bien plus courte que les miennes Smiley cligne ).

J'ai donc modifier mon code js comme ceci:

window.onscroll = function(){
	document.getElementById("actionMenu").style.top= document.documentElement.scrollTop;
}


Ca fonctionne en mode standard mais il faut un T majuscule au Top de scrollTop.

Merci pour ton aide et la prochaine fois je posterai mon js même si ca me semble inutile à première vue.

@+
Modifié par Mathieu_vd (15 May 2006 - 18:11)
Sujet clos
Aller à