28172 sujets

CSS et mise en forme, CSS3

Ancres dans un div en overflow:hidden ne fonctionnent pas sous Opera

Bonjour,
Je cherche une solution pour faire défiler horizontalement dans une fenêtre les éléments d'un portfolio.
J'ai bidouillé 2 sources mêlant des ancres horizontales (code trouvé ici) et des flèches de scroll horizontales en javascript (script trouvé là).
A condition que l'élément scrollé horizontalement ait la même largeur que la fenêtre de visualisation, les ancres se calent bien à gauche.
Mais avec Opéra, impossible d'avoir à la fois des ancres horizontales dans un div en overflow:hidden et le scroll horizontal.
ça fonctionne sous FF et Safari (Mac OS X), et donc pas sous Opera (et je n'ai pas encore testé sous IE, j'en frémis d'avance…).
Une petite idée sera la bien venue (même s'il parait que les russes sont les seuls à utiliser Opéra massivement…!)
J'aurais bien joint un fichier html, mais ça n'a pas l'air possible…
Le html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

h1 {
	line-height: 1em;
	font-family: "Times New Roman", Times, serif;
	color: #666;
	font-style: italic;
	text-align: center;
	padding: 30px 0 0 0;
}


#content-slider {
	width: 650px;
	overflow: hidden;
	height: 300px;
	margin: 30px 0 0 0;
	border: solid 1px #666;
}

#content-slider-inside {
	list-style: none;
	height: 320px;
	width:3250px;   /* Pour un défilement HORIZONTAL dans Opéra: largeur totale du bandeau soit 5 x 650px (5 éléments de liste x leur largeur) */
	overflow: scroll;   /* help Opera (soi-disant !) */
	overflow-y: hidden;
}

	#content-slider-inside li {
		float: left;
		width: 650px;
		background: #ccc;
		height: 300px;
		color: #666;
		font-size: 200px;
		font-family: "Times New Roman", Times, serif;
		font-style: italic;
		text-align: center;
	
	
	}
	
#navigation {
	list-style: none;
	margin: 20px 0 0 0;
	float: right;
}

#navigation li {
	float: left;
	width: 30px;
	height: 30px;
	text-align: center;
	margin: 0;
	border: solid 1px #ccc;
	line-height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 0 0 5px;
}

#navigation li a, #navigation li a:link, #navigation li a:visited {
	text-decoration: none;
	display: block;
	height: 30px;
	color: #666;
}

#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited {
	background: #666;
	color: #fff;
}

#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	background: #666;
	color: #fff;
} 
</style>
<script language="JavaScript">
var SR;
var SL;
function SRight(){
document.getElementById('content-slider').scrollLeft+=5;
}
function SLeft(){
document.getElementById('content-slider').scrollLeft-=5;
}
 
function ScrollRight(Speed){
//alert()
SR = setInterval('SRight()',Speed);
}
 
function ScrollLeft(Speed){
SL = setInterval('SLeft()',Speed);
}
 
function clearScroll(way){
clearInterval(way)}
 
</script>
<title>Marche sauf ds Opera</title></head>

<body>

<div style="width: 650px; margin: 0 auto 0 auto;">

<h1>A JavaScript Content Switcher That Works Without JavaScript</h1>

	<div id="content-slider">
		<ul id="content-slider-inside">
			<li id="one">1</li>
			<li id="two">2</li>
			<li id="three">3</li>
			<li id="four">4</li>
			<li id="five">5</li>
		</ul>
	</div>
	
	<ul id="navigation">
    	<li><a href="#" onmouseover="ScrollLeft(20)" onmouseout="clearScroll(SL)"><</a></li>
        <li><a href="#" onmouseover="ScrollRight(20)" onmouseout="clearScroll(SR)">></a></li>
		<li><a href="#one">1</a></li>
		<li><a href="#two">2</a></li>
		<li><a href="#three">3</a></li>
		<li><a href="#four">4</a></li>
		<li><a href="#five">5</a></li>
	</ul>

</div>

</body>
</html>
</html>
Bonsoir,

c'est un vieux defaut d'opera.(sur le scroll horizontal)

il est possible d'arrivée a quelque résultats hasardeux en jouant sur un reflow css forcé a l'aide des pseudo élements, le positionement , reduire virtuellement a zero la largeur de certans elements et en en ejectant d'autre au loin ... En bref une bidouille alambiquée et fouteuse de foutoir ... A tester et retester donc dans les autres nav et au cours de leur mise a jour ... un tit js est quand même plus sur Smiley smile

Pour le code ci dessus , voici un patch css qui devrait convenir a Opéra et probablement aux autres si le fichier css n'est pas trop important :

#content-slider-inside li:target:before {content:'';position:absolute;left:3800px /* création d'un element virtuel jeté a gauche de la largeur de l'element parent  XLi X 650px ... */;}
#content-slider {position:relative; /* reference pour  l'element créer */}
#content-slider-inside { width:3250px;margin-right:-3800px;/* et hop l'element a virtuellement une largeur de zero ou besoin de 0px de large , le positionement du scroll n’interfère plus vraiment dans opera  et on se defait enfin de ce vieux bug connu d'opera*/}


Cordialement

probleme opera similaire par exemple :http://forum.alsacreations.com/topic-4-52252-1-Liens-avec-ancres.html ou un javascript aide avantageusement, reste le defaut que les contenus restent accessibles si js desactivé (rare mais quand même Smiley smile )
Modifié par gc-nomade (20 Apr 2011 - 00:12)
Merci pour le tuyau, je vais tester ça et la solution de siu (je n'avais pas vu qu'il m'avait répondu).
Sinon, je me demandais: quelles sont les raisons qui peuvent inciter un internaute à désactiver le js ?
Pour info, je viens de tester ta suggestion CSS, mais ça ne change rien : les ancres ne fonctionnent toujours pas dans Opera (Opera v° 10.10 + Mac OS 10.5.8) et dans Safari, c'est le scroll qui continue avec un espace vide après le dernier item (5).
bonjour,

Pour Opera (que je viens de mettre a jour Smiley smile ) , j'en conclut qu'il faut mettre ou un caractère ou un padding a l’élément généré via content. (sinon taille = zero ce qui semble logique ... si on peut parler de logique car width ne sert a rien) du coup le test ne marche pas.
Pour profiter de cet élément virtuel , l’idéal est d'injecter un texte ou une image pour dire que c'est la "fin" ?. (et on profite pour verifier que 5 X 650 = 3250 et pas 3800 Smiley smile )
#content-slider-inside li:target:before {
content:' Fin ';
position:absolute;left:3650px /* création d'un element virtuel jeté a gauche de la largeur de l'element parent  XLi X 650px ... */;
padding:0 0.5em;}


Pour Safari, je trouve le même comportement que dans les autres navigateurs.
En injectant du texte dans l’élément généré via content et :target, on en arrive a une bidouille qui ne ressemble plus vraiment à une bidouille si on creuse un peu Smiley smile .

Pour Opera il faudra néanmoins une dernière correction pour forcé le reflow css lorsque qu'on est sur le dernier élément et que l'on a scrollé jusqu'au bout :
li:nth-last-child(1):target:before {
margin:0 -2px; /* force opera a rafraichir l'affichage en recalculant la position de cet element virtuel */
}


Cordialement

<edit : page test : http://gcyrillus.free.fr/essai/ancres-opera-patch.html />
Modifié par gc-nomade (20 Apr 2011 - 14:23)
J'avoue que je n'ai rien pigé à ton 2e paragraphe de code…
C'est quoi ce "li:nth-last-child(1):target:before" ?
J'ai néanmoins ajouté ces modifs au code de ma page ci-dessus, et rien ne change :
il reste toujours une portion vide après le dernier item quand on scrolle, et les ancres ne marchent pas avec Opera…
cyberfact a écrit :
J'avoue que je n'ai rien pigé à ton 2e paragraphe de code…
C'est quoi ce &quot;li:nth-last-child(1):target:before&quot; ?

li:nth-last-child(1) sert a cibler le dernier <li> d'une liste.
:target sert a cibler l'ancre indiquer dans l'url
Le bug ou defaut d’Opéra provient d'un rafraichissement de la page incomplet (recalcule et repositionnement des éléments après un "resize" par exemple, ou dans le cas un retour en arrière sur un scroll horizontal)
Pour le cas, le dernier <li> va générer un élément occupant un espace légèrement différent et forcé Opéra a recalculé la position de celui-ci et des autres.
a écrit :

J'ai néanmoins ajouté ces modifs au code de ma page ci-dessus, et rien ne change :
il reste toujours une portion vide après le dernier item quand on scrolle, et les ancres ne marchent pas avec Opera…


Okay, et la page test en ligne a le même comportement chez toi , rien ?

Habitué a ce genre de défaut d’Opéra depuis quelques années , j'avoue n'avoir jamais tester ce comportement ailleurs que sous une version de Windows.

Cordialement
Modifié par gc-nomade (20 Apr 2011 - 14:55)
re,

Apparemment sous windows et Opera, la seule difference notable entre :
http://www.site-web-creatif.com/TEST/0-HORIZ/switchernscroll-opera-test.html
et
http://gcyrillus.free.fr/essai/ancres-opera-patch.html
qui fait que finalement ça marche ou pas est la règle content:'';.
Dans l'un vide et dans l'autre avec un peu de texte.: content:''; Vs content:' Fin ';

J'ose croire que dans Mac, Opera a le même comportement ?

Si cela ne fonctionne pas pour Mac Opera, coté CSS je ne vois pas trop comment alourdir plus le matraquage sur les contextes de formatages et reflow .
Ben non, ton exemple en ligne ne marche pas non plus dans Opera + Mac.

Et pour info, est-ce que l'exemple de base fonctionne au moins sur IE + PC ?
Sinon je suis vraiment dedans !…
Merci encore.
Ouf ! merci, c'est toujours ça.
Je pense qu'il y a peut-être une soluce avec jquery, pour peu que je parvienne à le faire marcher avec un div conteneur en overflow:hidden, mais là j'avance vraiment en terrain inconnu…
bonsoir,

pour l'exemple , ce test js devrait le faire 
        <li><a href="#" onmouseover="ScrollLeft(10)" onmouseout="clearScroll(SL)">&lt;</a></li>
        <li><a href="#" onmouseover="ScrollRight(10)" onmouseout="clearScroll(SR)">&gt;</a></li>
		<li><a href="#one"   onclick="document.getElementById('content-slider').scrollLeft='0';">1</a></li>
		<li><a href="#two"   onclick="document.getElementById('content-slider').scrollLeft='650px'">2</a></li>
		<li><a href="#three" onclick="document.getElementById('content-slider').scrollLeft='1300px'">3</a></li>
		<li><a href="#four"  onclick="document.getElementById('content-slider').scrollLeft='1950px'">4</a></li>
		<li><a href="#five"  onclick="document.getElementById('content-slider').scrollLeft='2600px';">5</a></li>


sauf si mac opera est vraiment sourd d'oreille ... Smiley smile


cordialement
Bonjour,

sur le fond , via Jquery ou une simple ligne de JavaScript on demande la même chose :
.scrollLeft.

Ce qui m'etonne c'est que même ça ça ne passe pas dans ton Opera version Mac.

Y-a t-il un autre pilote dans l'avion surfant sous MAc et avec Opera qui peut confirmer que les pages tests en ligne :

http://gcyrillus.free.fr/essai/ancres-opera-patch.html /* le patch css alourdissant proposé forçant un reflow */
http://www.site-web-creatif.com/TEST/0-HORIZ/switchernscroll-base.html /* page test de base */
http://www.site-web-creatif.com/TEST/0-HORIZ/switchernscroll-opera-test.html /* ajout js */

ou dans les balises code :

http://forum.alsacreations.com/topic-4-55092-1-Ancres-dans-un-div-en-overflowhidden-ne-fonctionnent-pas-sous-Opera.html#p376729

ne fonctionnent pas ?

Cordialement
Mais oui, je n'avais pas vu que tu appelais la fonction scrollLeft dans ton code, je n'avais vu que les coordonnées en x. En effet, une fois qu'on a scrollé avec > jusqu'au bout (fonction scrollRight), les boutons-ancres font bien le scrollLeft, mais directement jusqu'à x opx, quel que soit le bouton.
C'est la fonction scrollLeft qui n'est pas adaptée.
Sujet clos
Aller à