Balise <a> : ne pas modifier la position du scroll

Version imprimable

Bonjour,

voici un exemple avec plein de balises <a>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>test</title>
</head>
<body>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
 
</body>
</html>

Si on clique sur le dernier lien, ça me remet sur le haut de la page : comment faire pour ne pas que le scroll de ma page bouge lorsque je clique sur un lien (mes liens vont appeler des commandes via javascript) ?

J'ai testé plusieurs solutions qui ne fonctionnent pas :
- enlever href : le curseur de la souris n'est plus modifié au survole du lien
- mettre href="" : sous IE8, si j'ouvre ma page en local, l'explorateur s'ouvre lorsque je clique sur le lien XD

merci d'avance,

13/03/2013, 13h38
Vil'Coyote

si tes lien ne font qu'appeler une fonction javascript ce n'est pas la meilleur option à utiliser. pourquoi ne pas prendre un bouton à la place? le onclick effectueras l'appel de tes fonctions ...

parce que j'utilise le framework Bootstrap et que les boutons n'ont pas la même apparence que les liens
=> j'aurais bien aimé limiter l'utilisation de css pour rester au plus proche du design du framework

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
<!DOCTYPE HTML>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
 
   	<style type="text/css">
        table .tab_actions {
                text-align: right;
        }
        </style>
</head>
 
<body>
	<div class="container">
 
		<div class="row">
			<div class="span8 offset2">
				<table id="myTable" class="table table-hover">
					<caption>Rendu que je veux</caption>
					<thead>
						<tr>
							<th>AAA</th>
							<th>BBBB</th>
							<th>1234567</th>
							<th></th>
						</tr>
					</thead>
 
					<tbody>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove"><i class="icon-remove"></i></a>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove"><i class="icon-remove"></i></a>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove"><i class="icon-remove"></i></a>
							</td>
						</tr>
					</tbody>
				</table>
 
 
				<table id="myTable" class="table table-hover">
					<caption>Rendu avec bouton</caption>
					<thead>
						<tr>
							<th>AAA</th>
							<th>BBBB</th>
							<th>1234567</th>
							<th></th>
						</tr>
					</thead>
 
					<tbody>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<button class="tab_modify" type="button"><i class="icon-pencil"></i></button>
								<button class="tab_remove" type="button"><i class="icon-remove"></i></button>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<button class="tab_modify" type="button"><i class="icon-pencil"></i></button>
								<button class="tab_remove" type="button"><i class="icon-remove"></i></button>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<button class="tab_modify" type="button"><i class="icon-pencil"></i></button>
								<button class="tab_remove" type="button"><i class="icon-remove"></i></button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>	
 
 
	<!-- -------------------------------------- -->
	<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
	<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>	
</body>
</html>

=> Bootstrap propose des classe pour que des balises <a> est la même apparence que des <button> mais il me semble que l'inverse n'existe pas

13/03/2013, 14h43
Bisûnûrs

Return false sur tes liens.

Citation:

Envoyé par Bisûnûrs

Return false sur tes liens.

=> effectivement ça fonctionne (merci)

Mais ça me semble quand même plus propre de modifier le .css et d'utiliser les boutons comme l'a suggéré Vil'Coyote

Voici le résultat : les modifications restent mineures (j'espère juste que ça fonctionne de partout => ce qui à l'air le cas) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
 
<!DOCTYPE HTML>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
 
   	<style type="text/css">
        table .tab_actions {
                text-align: right;
        }
        .tab_actions .btn{
                background-image: none;
                border: none;
                background-color: transparent;
                text-shadow: none;
                padding: 0;
                margin: 0 2px;
                
                -webkit-border-radius: none;
                   -moz-border-radius: none;
                border-radius: none;
        }
 
        </style>
</head>
 
<body>
	<div class="container">
 
		<div class="row">
			<div class="span8 offset2">
				<table id="myTable" class="table table-hover">
					<caption>Rendu que je veux</caption>
					<thead>
						<tr>
							<th>AAA</th>
							<th>BBBB</th>
							<th>1234567</th>
							<th></th>
						</tr>
					</thead>
 
					<tbody>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove"><i class="icon-remove"></i></a>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla (bug sous IE8)</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify btn"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove btn disabled"><i class="icon-remove"></i></a>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>correction du bug mais ca ne va pas pour le hover</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify btn"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove btn disabled" style="background-color: #FFFFFF;"><i class="icon-remove"></i></a>
							</td>
						</tr>
					</tbody>
				</table>
 
 
				<table id="myTable" class="table table-hover">
					<caption>Rendu avec bouton</caption>
					<thead>
						<tr>
							<th>AAA</th>
							<th>BBBB</th>
							<th>1234567</th>
							<th></th>
						</tr>
					</thead>
 
					<tbody>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<button class="tab_modify" type="button"><i class="icon-pencil"></i></button>
								<button class="tab_remove disabled" type="button"><i class="icon-remove"></i></button>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla (bug sous IE8)</td>
							<td class="tab_actions">
								<button class="tab_modify btn" type="button"><i class="icon-pencil"></i></button>
								<button class="tab_remove btn disabled" type="button"><i class="icon-remove"></i></button>
							</td>
						</tr>
					</tbody>
				</table>
 
 
				<table id="myTable" class="table table-hover">
					<caption>Rendu avec return false</caption>
					<thead>
						<tr>
							<th>AAA</th>
							<th>BBBB</th>
							<th>1234567</th>
							<th></th>
						</tr>
					</thead>
 
					<tbody>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla (sans return false)</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify btn"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove btn disabled"><i class="icon-remove"></i></a>
							</td>
						</tr>
 
						</tbody>
				</table>				
			</div>
		</div>
	</div>	
 
 
	<!-- -------------------------------------- -->
	<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
	<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>	
</body>
</html>

Vous savez pourquoi la classe .disabled cause des problèmes d'affichage sous IE8 ?
=> on peut résoudre le problème ?

13/03/2013, 16h22
Bisûnûrs

Citation:

Envoyé par boboss123

Mais ça me semble quand même plus propre de modifier le .css et d'utiliser les boutons comme l'a suggéré Vil'Coyote

Après c'est juste une histoire de sémantique ...

Citation:

Envoyé par boboss123

Vous savez pourquoi la classe .disabled cause des problèmes d'affichage sous IE8 ?
=> on peut résoudre le problème ?

Quel est le problème ?
13/03/2013, 16h51
boboss123

1 pièce(s) jointe(s)

L’icône sur la deuxième ligne est flouté :
http://www.developpez.net/forums/att...1&d=1363189792
=> sur la troisième ligne j'ai résolu le problème en mettant un background-color à #FFFFFF mais on voit l’arrière plan lorsque la ligne est en mode hover.
13/03/2013, 17h15
Bisûnûrs

Bizarre, je n'ai pas ce problème là.
14/03/2013, 08h46
boboss123

Tu as testé sous IE8 ? Tu as quelle résolution d’écran ?
14/03/2013, 09h24
Bisûnûrs

Sur IE9 en mode IE8 (après il peut y avoir une différence avec un IE8 natif ..) en 1600x1200.
14/03/2013, 19h21
NoSmoking

Bonjour,
on voit effectivement un"flou" sur certaines croix. Il semblerait que cela soit un problème lié à la gestion des PNG et l'opacité sous IE8.
15/03/2013, 12h04
boboss123

Donc il n'y a pas de solution possible ?
15/03/2013, 14h54
NoSmoking
La solution tu l'as trouvé, mettre un fond #FFFFFF, et si cela te tourmante de ne pas avoir la même couleur au survol alors ajoutes la modification de la couleur de fond sur le :hover de la TR.
Code:

1 2 3 4 5 6 i.icon-remove { background-color:#FFFFFF; } tr:hover i.icon-remove { background-color: #F5F5F5; }
18/03/2013, 09h59
boboss123

ok, merci : je pense que je vais partir sur cette solution