[RESOLU] Script Non Fonctionnel Avec Opera

Question

ThiWeb

11 Mar 2007 à 02:49

Bonjour,

C'est très simple, voici le lien :

http://www.thiweb.online.fr/div/div.html

L'HTML :

<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.box {
	height: 100px;
	width: 300px;
	overflow: hidden;
	border: solid 1px black;
}
</style>
<script type="text/javacript" src="scrolldivtoanchor.js"></script>
</head>
<body>

<ul>
<li><a href="#t01">link to 1</a></li>
<li><a href="#t05">link to 5</a></li>
<li><a href="#t10">link to 10</a></li>
<li><a href="#t15">link to 15</a></li>
</ul>

<div class="box">
<p><a id="t01">1</a> content goes in here, many lines</p>
<p><a id="t02">2</a> content goes in here, many lines</p>
<p><a id="t03">3</a> content goes in here, many lines</p>
<p><a id="c04">4</a> content goes in here, many lines</p>
<p><a id="t05">5</a> content goes in here, many lines</p>
<p><a id="t06">6</a> content goes in here, many lines</p>
<p><a id="t07">7</a> content goes in here, many lines</p>
<p><a id="t08">8</a> content goes in here, many lines</p>
<p><a id="t09">9</a> content goes in here, many lines</p>
<p><a id="t10">10</a> content goes in here, many lines</p>
<p><a id="t11">11</a> content goes in here, many lines</p>
<p><a id="t12">12</a> content goes in here, many lines</p>
<p><a id="t13">13</a> content goes in here, many lines</p>
<p><a id="t14">14</a> content goes in here, many lines</p>
<p><a id="t15">15</a> content goes in here, many lines</p>
</div>

</body>
</html>

Le JS :

var targBox = "box";
function init() {
	if (document.getElementById) {
		var atags = document.getElementsByTagName("A");
		for (var i=0;i<atags.length;i++) {
			var ca = atags[ i ]; /* Sans espaces entre [ i ] */
			if (ca.href.indexOf("#") > -1) {
				ca.onclick = function() {
					scrollDivToAnchor(this.href.split("#")[1]);
				}
			}
		}
	}
}
function scrollDivToAnchor(a) {
	var b = document.getElementById(targBox);
	b.scrollTop = document.getElementById(a).offsetTop - b.offsetTop;
}
if (navigator.userAgent.indexOf("Safari") > -1) {
	window.onload = init;
}

J'utilise en fait le script d'un certain "Geoff Stearns" mais à la base, le DIV est scrollable...

Bon très bien. Sauf que j'ai modifié dans le CSS l'attribut "auto" en "hidden". Tout continue de fonctionner parfaitement sur TOUS les navigateurs, SAUF sur Opera !! Smiley fache

Sauriez-vous m'aider dans mon problème ou faut-il que je triche et que j'attribue une CSS spéciale pour Opera ? Smiley confused

Pas testé sous Safari... (Si d'ailleurs quelqu'un peut tester son fonctionnement... Smiley confused

)

Merci d'avance

ThiWeb
Modifié par ThiWeb (13 Mar 2007 - 07:38)

matmat

11 Mar 2007 à 22:32

Salut,
est ce que ça marche si tu mets overflow:auto?
Parcequ'a mon avis c'est la méthode qui est un peu étrange, ça me semble pas trés logique d'assigner un scrollTop a un élement en oveflow:hidden qui logiqument n'en a pas...

ThiWeb

12 Mar 2007 à 13:25

matmat a écrit :
Salut,
est ce que ça marche si tu mets overflow:auto?
Parcequ'a mon avis c'est la méthode qui est un peu étrange, ça me semble pas trés logique d'assigner un scrollTop a un élement en oveflow:hidden qui logiqument n'en a pas...

Heu je pense que ça doit fonctionner en effet, mais je ne veux pas utiliser de scroll justement...
Ça donne un effet d'aparition...

J'appel tel ou tel titre qui ne peut se voir qu'en cliquant sur les rubriques... Enfin comme dans l'exemple quoi...

Si je met "auto" ça perd de son intérêt... Et bon sang pourquoi Opera est le seul à pas obéïr ! Smiley bawling

Merci de votre aide...

ThiWeb

Laurent Denis

12 Mar 2007 à 13:38

ThiWeb a écrit :
Et bon sang pourquoi Opera est le seul à pas obéïr !

Ce n'est pas lié à ce navigateur ou à un autre, mais: peut-être bien parce que c'est une idée d'intefrace foireuse à la base serait une assez pertinente réponse.

matmat

12 Mar 2007 à 19:53

C'est vrai que je vois pas trop l'interet de ton interface non plus, mais bon on vat imaginer que c'est completement justifié dans ton projet.
Ma question sur l'overflow, ce n'était pas une solution, c'est juste pour tester le probléme.
En fait Opéra pose rarement de problémes, c'est plutôt les scripts qui en posent...
Déja le premier probléme c'est que sans javascript il faut que ton contenu soit accessible donc en overflow:auto ou sans hauteur fixe, et c'est ensuite le script qui vat transformer ses paramétres au besoins de ton interface.
Aprés moi je n'utiliserais pas scrolltop, mais tout simplement la valeur top, d'une div imbriqué dans une autre ce qui est beaucoup plus robuste.

ThiWeb

13 Mar 2007 à 03:47

matmat a écrit :
C'est vrai que je vois pas trop l'interet de ton interface non plus, mais bon on vat imaginer que c'est completement justifié dans ton projet. Ma question sur l'overflow, ce n'était pas une solution, c'est juste pour tester le probléme. En fait Opéra pose rarement de problémes, c'est plutôt les scripts qui en posent...

J'adore le "on va imaginer que c'est complètement justifié" MDR... Oui pour Opera je suis d'accord, c'est une référence pour mes sites...

matmat a écrit :
Déja le premier probléme c'est que sans javascript il faut que ton contenu soit accessible donc en overflow:auto ou sans hauteur fixe, et c'est ensuite le script qui vat transformer ses paramétres au besoins de ton interface.

Ah ça c'est sûr que le contenu sera accessible sans JS, là tout s'affichera puisque c'est un DIV... Quelque soit sa propriété en JS, si JS est désactivé, tout s'affiche...

matmat a écrit :
Aprés moi je n'utiliserais pas scrolltop, mais tout simplement la valeur top, d'une div imbriqué dans une autre ce qui est beaucoup plus robuste.

Alors voilà j'ai testé, ça continue de fonctionner sous IE, FF et Netscape, mais pas sous Opera. Smiley decu

Passons donc à la démo puisque je n'arrive pas à vous convaincre avec mon script lol :

http://beta.thiweb.com

Voilà suffis de cliquer sur un programme, et POUF ! Il apparait dans le DIV de gauche ! Encore une fois, sauf sous Opera... Smiley decu

Maintenant je précise tout de même que je suis loint d'être un utilisateur confirmé en développent Web...
Si vous avez donc des solutions alternatives à me proposer pour obtenir un "effet" équivalent tout en étant compatible avec tous les navigateurs, je suis prenneur.

Merci encore.

ThiWeb

matmat

13 Mar 2007 à 04:48

Si tu veux pas avoir ce genre de reflexion, il faut pas poster sur un forum sur l'accessibilité, vu que le but c'est d'obtenir des sites accessible, ce serait un peu incoherent de proposer des solutions qui vont dans l'autre sens.

C'est pas souvent que ce genre d'interface est justifiée donc effectivement la premiére chose a se demander c'est si ça sert a quelque chose.

par exemple sur ton site tu pourrais trés bien faire exactement la même chose avec des ancres, ce serait beaucoup plus simple et surtout accessible. En plus tu te prendrais moins la tête.

Ensuite je te répette : pour que ton contenu soit accessible il faut que dans ton css ta div soit en overflow:auto puis dans ton script tu change cette valeur par hidden.

Opera il a aucun probléme, si tu regardes ici ça marche trés bien comme je te disais avec style.top.

Vas pas recupérer mon script tel quel, il est bidon, c'est juste une piste. et comme je te disais tu devrais opter pour les ancres.
Modifié par matmat (13 Mar 2007 - 05:11)

ThiWeb

13 Mar 2007 à 07:34

matmat a écrit :
Si tu veux pas avoir ce genre de reflexion, il faut pas poster sur un forum sur l'accessibilité, vu que le but c'est d'obtenir des sites accessible, ce serait un peu incoherent de proposer des solutions qui vont dans l'autre sens.

Non lol, il ne faut pas le prendre mal, au contraire, je soulignai cet humour que j'apprécie Smiley smile

matmat a écrit :
C'est pas souvent que ce genre d'interface est justifiée donc effectivement la premiére chose a se demander c'est si ça sert a quelque chose.

Je trouve l'idée sympas... Non ? Accessible accessible... Justement, c'est plus accessible de cliquer et hop on a ce que l'on veut plutôt que de scroller longtemps.

matmat a écrit :
par exemple sur ton site tu pourrais trés bien faire exactement la même chose avec des ancres, ce serait beaucoup plus simple et surtout accessible. En plus tu te prendrais moins la tête.

Oui alors ça justement si tu pouvais m'éclaircir... Quel intérêt aurai mon JS si de simples ancres suffisent... Je veux bien tenter, mais est-ce que ça aura le même résultat ? (Ou approchant)

matmat a écrit :
Ensuite je te répette : pour que ton contenu soit accessible il faut que dans ton css ta div soit en overflow:auto puis dans ton script tu change cette valeur par hidden.

C'est bon ça, j'ai enregistré, j'ai mis du temps à comprendre je sais, mais le JS et moi, ça fait deux... A l'heure actuelle, les scroll sont invisibles, sauf pour Opera... C'est ce que j'ai réussi à faire, et ma CSS est bien en AUTO. Donc accessible Smiley smile

matmat a écrit :
Opera il a aucun probléme, si tu regardes ici ça marche trés bien comme je te disais avec style.top.
Vas pas recupérer mon script tel quel, il est bidon, c'est juste une piste. et comme je te disais tu devrais opter pour les ancres.

Oui et bien ton scrip m'a donné mal à la tête lol. Je n'ai pas trop compris cet entrelacement de DIV. Mais en tous cas, merci de m'avoir donné un exemple concluant pour ma solution.

A l'heure actuelle, je resterai avec mes Scroll affiché sur Opera et câchés sur les autres navigateurs, mais si quelqu'un peut donc m'éclaircir quand à la solution de rechange consistant à utiliser de simples ancres, ce serai parfait !
A conditions évidement que mes scroll soient toujours câchés et que ça fonctionne sur tous les navigateurs.

Merci encore mille fois de votre patience et de votre aide.

ThiWeb

Sujet clos