Icone non visible sur Internet Explorer 9

Version imprimable

03/11/2015, 00h17
Toufik83

Icone non visible sur Internet Explorer 9

bonsoir,

j'ai une fenêtre modal générée par (colorbox.js) avec une icone de fermeture en bas.
le problème sur I.E c'est que l'icone s'affiche comme ça Pièce jointe 191662 pourtant sous chrome est firefox s'affiche correctement Pièce jointe 191663.

en jquery j'ajoute cette icone ainsi :

Code:

$("#cboxContent").empty().append("<img id='cboxClose' class='imgfermer' alt='fermer' />");

est-ce que c'est juste la configuration de mon serveur local asp.net qui fait le bug? si je met le site en ligne, l'image sous IE se comportera de la même façon?

Bonjour,
pour ce genre d'image il n'est peut être pas nécessaire d'avoir justement recours à une image.
exemple :

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Bouton close sans image</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  width:60em;
  margin:0 auto;
}
h1, h2, h3 {
  color:#069;
}
.btn_close_popin {
  font-size:1.5em;
  font-weight:bold;
  color:#fff;
 
  padding:.125em;
  width:1em;
  height:1em;
  line-height:1em;
  text-align:center;
 
  border:.125em solid #fff;
  border-radius:50%;
  background:#f00;
  box-shadow:1px 1px 5px #888;
  cursor:pointer;
}
.btn_close_popin:hover {
  color:#f00;
  background:#fff;
  border-color:#f00;
  box-shadow:1px 1px 10px #f00;
}
.btn_close_popin:before {
  content:'\002716';
}
</style>
</head>
<body>
<div id="main">
  <h1>Bouton close sans image</h1>
  <div class="btn_close_popin"></div>
</div>
</body>
</html>

Sinon je dirais que tu as un problème de format de l'image.

03/11/2015, 12h42
Toufik83
Bonjour,NoSmoking
je vous signale que l'image est en format png (annimée) et ses propriétés css sont définies dans le css approprié a colorbox.js comme ça :
Code:

1 2 #cboxClose{position:absolute; bottom:0; right:0; background:url(../image/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
j'ai fais plusieurs recherches sur les forums et tout le monde parle de SVG, j'ai même telechargé un logiciel qui convert les png en svg mais je sais pas franchement si je suis vers le bon chemin ou non.:mur:
03/11/2015, 14h19
NoSmoking
Citation:

...en jquery j'ajoute cette icone ainsi :

pourquoi ajouter un élément qui est géré par le plugin ?

Citation:

...est en format png (annimée)

non c'est sur base d'image sprite !
Code:

1 2 3 #cboxClose:hover { background-position: -25px -25px; }
Testé sous IE8, j'ai pas mieux sous la main, pas rencontré de soucis d'affichage de l'image.

justement, j'utilise Ajax pour afficher mon résultat dans la fenêtre modal, le conteneur HTML qui reçoit le résultat d'ajax s'appelle #cboxContent et c'est lui qui contient l'image de fermeture.

quand je fais

Code:

$("#cboxContent").empty()

il vide tout ce qu'il y a dedans y compris l'image, c'est pour cela que je l'ajoute encore une fois puisque elle a déja été effacé par

Code:

$("").empty()

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
$.ajax({
                    type: "POST", contentType: "application/json; charset=utf-8",
                    url: "../GestionCatego/Default.aspx/Editer",
                    data: JSON.stringify(donner),
                    dataType: "json",
                    cache: false,
                    success: function (msgE) {
                        for (var i = 0; i < msgE.d.length; i++) {
                            html += "<a id='Titre'>" + msgE.d[i].Titre + "</a><br/>";
                            html += "<a id='image'><img alt='' style='width:13em;height:13em' src='../photos/" + msgE.d[i].Image + "' /></a><br/>";
                            html += "<a id='date'>" + msgE.d[i].Date + "</a>";
                        }
                        //$.colorbox({ open: true });
                        $(this).colorbox({ open: true, inline: true, width: "50%", height: "50%", href: parseInt($(this).attr("id")) });
                        $("#colorbox").show("slow");
                        $("#cboxContent").empty().append("<img id='cboxClose' class='imgfermer'  alt='fermer'  />");
                        
                        $("#cboxClose").on("click", function () {
                            $("#colorbox,#cboxOverlay").hide("slow");
                        });
                        $("#cboxContent").append(html);
                    } //fin success

                });

03/11/2015, 15h33
NoSmoking

Citation:

...justement, j'utilise Ajax pour afficher mon résultat dans la fenêtre modal

as tu regardé l'exemple Outside HTML (Ajax) ?
03/11/2015, 16h16
Toufik83

oui NoSmoking, c'est à l'aide de cette page que j'ai connus le colorbox(), mais dans l'exemple OutSideHtml ils mettent une page html comme résultat, alors que moi je reçois mes données en tant que JSON, j'ai pas trouvé un moyen pour faire pareil que l'exemple.
03/11/2015, 17h00
NoSmoking

Visiblement tu ne t'attaques pas au bon conteneur, essaies de cibler/remplir <div id="cboxLoadedContent"....

Citation:

j'ai pas trouvé un moyen pour faire pareil que l'exemple.

Tu peux également créer/modifier un élément que tu afficheras comme dans l'exemple Inline HTML de la même page d'exemple.
04/11/2015, 14h52
Toufik83

bonjour Smoking,

Citation:

Envoyé par NoSmoking

Visiblement tu ne t'attaques pas au bon conteneur, essaies de cibler/remplir <div id="cboxLoadedContent"....

Bravo,comme tu as dis, j'ai attaqué le #cboxLoadedContent et ça fonctionne parfait.
merci beaucoup Smoking, tu es génial.

Perso j'aurais plutôt opté pour la solution

Citation:

Tu peux également créer/modifier un élément que tu afficheras comme dans l'exemple Inline HTML de la même page d'exemple.

Exemple de simulation retour Ajax

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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<style>
body{
  font:1em/1.2 Verdana, sans-serif;
  padding:0 10px;
}
#main {
  max-width:60em;
  margin:auto;
}
h1, h2, h3 {
  font-size:1.5em;
  color: #069;
  text-shadow: 1px 1px 0px #fff;
}
</style>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function() {
    $('#btn_cde').on('click', function() {
        $('#inline_content').empty();
        $('#inline_content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.</p>');
        $.colorbox({
            inline: true,
            width: "50%",
            href: "#inline_content"
        })
    });
});
</script>
</head>
<body>
<div id="main">
    <h1>Exemple création dynamique</h1>
    <p><button id="btn_cde">Création contenu</button>
    Simulation d'un retour Ajax</p>
    <!-- This contains the hidden content for inline calls -->
    <div style='display:none'>
        <div id='inline_content' style='padding:10px; background:#fff;'>
        </div>
    </div>
</div>
</body></html>

la partie du code intéressante

Code:

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
    $('#btn_cde').on('click', function() {
        $('#inline_content').empty();
        $('#inline_content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.</p>');
        $.colorbox({
            inline: true,               // élément dans document
            width: "50%",
            href: "#inline_content"     // l'élément cible à afficher
        })
    });
});

04/11/2015, 15h57
Toufik83

bonjour NoSmoking,

Bravo,comme tu as dis, j'ai attaqué le #cboxLoadedContent et ça fonctionne parfait.
le problème était dans cette ligne de jquery

Code:

$("#cboxContent").empty().append("<img id='cboxClose' class='imgfermer' alt='fermer' />");

à chaque fois que je reçois les données ajax, je vide tout le contenu de #cboxContent avec .empty() y compris l'image png,puis je rajoute l'image png avec append() et sans SRC puisque elle est déjà définie dans le Css.

je ne savais pas qu'il y a un #cboxLoadedContent qui s'occupe de Ajax.
merci beaucoup NoSmoking, tu es génial.