HTML Webapp sous Android : liens de pop-up ne sont pas pris en compte

Version imprimable

11/10/2011, 15h24
n1k00

HTML Webapp sous Android : liens de pop-up ne sont pas pris en compte

Bonjour,
Je sais pas si je suis dans le bon topic donc je m'en excuse d'avance
Voilà je suis actuellement en train de développer une webapp et sous android je rencontre un problème avec une pop up faite par moi même.
Dans cette pop-up j'ai deux liens et quand je l'affiche par dessus du contenu ayant des liens. Lorsque je clique soit aucun de mes liens n'est pris en compte ou alors cela me sélectionne le lien qui est situé derrière la pop-up.

Merci d'avance
11/10/2011, 18h50
NoSmoking

Bonjour,
un peu de mal a cerné ton problème suite à tes explications.

Un peu de code aiderait sûrement à la compréhension, l'essentiel il va de soi.
11/10/2011, 19h35
n1k00

Je ne peux pas spécialement montrer du code car ma pop-up est censé pourvoir apparaitre sur toutes les pages. Mais je vais essayer d'être plus claire.

Donc pour commencer j'ai une pop-up en position absolute qui s'affiche par dessus l'ensemble de mon site. Cette pop-up est composé de trois lien <a></a>.
J'arrive à parfaitement afficher ma pop-up sur mon site. Le problème que j'ai viens des liens dans ma pop-up.
Mon problème vient lorsque la pop-up s'affiche par dessus une page qui comporte des liens et que ces liens se retrouvent dessous ceux de la pop-up.
En effet quand j'ai ce cas de figure quand je clique sur un des liens de la pop-up celui qui sera pris en compte sera celui de la page et non de la pop up.

Pour faire simple si sur ma page j'ai les liens 1,2,3,4,5. Et sur ma pop-up j'ai mes liens A,B et C. Qu'a l'affichage le lien A se retrouve sur le 2, le B sur 4 et le C sur le 5. Si je clique sur le lien B ça me fera comme si j'avais cliqué sur le 4.

Voila j'espère que j'ai pu être plus explicite.
11/10/2011, 20h12
NoSmoking

Citation:

Envoyé par n1k00

Je ne peux pas spécialement montrer du code car ma pop-up est censé pourvoir apparaitre sur toutes les pages. Mais je vais essayer d'être plus claire.

dommage !! même pas le style ?

Citation:

Mon problème vient lorsque la pop-up s'affiche par dessus une page qui comporte des liens et que ces liens se retrouvent dessous ceux de la pop-up.
En effet quand j'ai ce cas de figure quand je clique sur un des liens de la pop-up celui qui sera pris en compte sera celui de la page et non de la pop up.

de toute évidence si le lien du dessous prend le pas sur le lien du dessus c'est qu'il est dessus :roll:
- essaies de mettre un z-index sur le style de la DIV(?) popup,
- ou encore essaies en mettant un fond de couleur sur les liens, différent entre le dessous et le dessus, pour voir quels liens sont réellement dessus,
- ou encore met un background-color à ta popup, le fond ne devrait pas apparaître.
- ou encore ...

J'ai déjà mis des z-index où je pouvais. Tiens voici le CSS et le code html/php/js de ma pop-up (hier je l'avais pas sous la main)

Code CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.layout { width:100%; height:100%; z-index:10; position:fixed; top:0; left:0; background-image:url('images/layout.png'); }
.popup_container { position:absolute; top:90px; left:30px; z-index:11; right:30px}
 
.popup_container table { width:100%; }
.popup_container table td { background-repeat:no-repeat; }
.popup_container table td.top_left { background-image:url('images/pop_up_top.png'); background-position:top left; height:11px; width:11px; }
.popup_container table td.top_right { background-image:url('images/pop_up_top.png'); background-position:top right; height:11px; width:11px; }
.popup_container table td.top_mid { background-image: url('images/pop_up_top.png'); background-position:bottom left; background-repeat:repeat-x; height:11px; padding:0;}
 
.popup_container table td.mid_left { background-image:url('images/pop_up_side.png'); background-position:top left; background-repeat:repeat-y; width:11px; }
.popup_container table td.mid_right { background-image:url('images/pop_up_side.png'); background-position:top right; background-repeat:repeat-y; width:11px; }
.popup_container table td.mid_mid { background-color:#d826ac; color:#fff; }
 
.popup_container table td.bot_left { background-image:url('images/pop_up_bot.png'); background-position:bottom left; width:11px; height:11px; }
.popup_container table td.bot_right { background-image:url('images/pop_up_bot.png'); background-position:bottom right; width:11px; height:11px; }
.popup_container table td.bot_mid { background-image:url('images/pop_up_bot.png'); background-position:top left; background-repeat:repeat-x; height:11px; }
 
.popup table{width:50%; text-align:center;margin: auto}
 
.popup .close_btn { background-image:url('images/picto_sprite.png'); background-repeat:no-repeat; background-position:0 -445px; display:block; position:absolute; height:20px; width:19px; top:8px; right:8px; }
.popup h3 { margin:0 15px 10px; font-size:13px; font-weight:bold; color:#FFFFFF; }
.popup p { margin:0 15px 0; font-size:11px; font-weight:bold; color:#FFFFFF; text-align:center}
.popup_container #popup_bt1, .popup_container #popup_bt2{z-index:12;}

HTML

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
 
<div id="popup_layout" class="layout">&nbsp;</div>
<div id="popup" class="popup_container">
  <div style="position: relative;">
	  <a id="popup_close" class="close_btn" href="http://nroux.mwk.membre.mediakiosque.dev.hi-media-techno.com/liste-favoris"></a>
	  <table cellspacing="0" cellpadding="0">
	    <tbody>
	      <tr>
	        <td class="top_left"></td>
	        <td class="top_mid"></td>
	        <td class="top_right"></td>
	      </tr>
	      <tr>
	        <td class="mid_left"></td>
	        <td class="mid_mid popup">
		        <h3>Titre</h3>
		        <p>Texte.</p>
		        <table>
				<tbody>
					<tr>
			        		<td>
			        			<a id="popup_bt1" class="btn_dark_grey left" href="">
			        				<span class="btn_dark_grey right">
			        					<span class="btn_dark_grey middle">
			        						Bouton 1			        						
									</span>
			        				</span>
			        			</a>
			        		</td>
			        		<td>
			        			<a id="popup_bt2" class="btn_dark_grey left" href="">
			        				<span class="btn_dark_grey right">
			        					<span class="btn_dark_grey middle">
			        						Bouton 2			        						
									</span>
			        				</span>
			        			</a>
			        		</td>
			        	</tr>
			        </tbody>
			</table>
 
	        </td>
	        <td class="mid_right"></td>
	      </tr>
	      <tr>
	        <td class="bot_left"></td>
	        <td class="bot_mid"></td>
	        <td class="bot_right"></td>
	      </tr>
	    </tbody>
	  </table>
  </div>
</div>

et au cas où voici le css pour tous les balises <a> par defaut

Code:

a{text-decoration:none;color: #9F9797; -moz-border-radius:0 !important; -webkit-border-radius:0 !important; /*webkit-tap-highlight-color: rgba(255, 255, 255, 0)*/; border-radius:0 !important; outline: none !important; border:none !important;}

14/10/2011, 22h24
NoSmoking

ce que je vois, ce sont des href vide, ce qui recharge la page
- <a id="popup_bt1" class="btn_dark_grey left" href=""> et
- <a id="popup_bt2" class="btn_dark_grey left" href="">
14/10/2011, 22h33
n1k00

Les href vides c'est normal y a du code php normalement dedans vu que le contenu de cette pop-up est géré dynamiquement ;)
14/10/2011, 22h46
NoSmoking

dans ce cas es tu sûr que le code généré est correct concernant ces liens.

Une page en ligne peut être pour voir!
14/10/2011, 23h01
n1k00

Oui je bosse avec le framework zend et tous les liens dans mon site sont généré par le helpers url qui génèrent les url que j'ai préalablement ré-écrite. Et durant mes test hors mobile android, sur iPhone par exemple, les liens réagissent correctement.
15/10/2011, 09h09
NoSmoking
Citation:

Envoyé par n1k00

Et durant mes test hors mobile android, sur iPhone par exemple, les liens réagissent correctement.

BUG sous android ???

as tu essayé de mettre ta DIV id="popup à l'intérieure de ta DIV id="popup_layout"
Code:

1 2 3 4 5 <div id="popup_layout" class="layout"> <div id="popup" class="popup_container">  </div> </div>
sinon :koi:
17/10/2011, 17h32
n1k00

Citation:

BUG sous android ???

Oui uniquement, Iphone et Blackberry ca marche sans problème. Même si les BB c'est un calvaire (mais le débat n'est point la :) )

Citation:

as tu essayé de mettre ta DIV id="popup à l'intérieure de ta DIV id="popup_layout"

Ca semble marcher effectivement.

Merci