Discussion :

[Cahaledor]

Bonjour à tous.

Cela fais plusieurs jours que je cherche une solution à mon problème d'affichage de titre de fancybox. En effet, voici ce que j'obtient lorsque j'affiche ma lightbox. Mon titre ne s'affiche qu'à moitié.




Je développe une application web en APS.NET/C# sous IE 8 avec VS2010. J'utilise jQuery 1.7 et fancybox 2.0.6. Ces technologies sont imposées par le client et ne peuvent pas être changées.

Voici les différents morceaux de code nécessaire à cet affichage.

1) Création d'un bouton qui ouvrira la fancybox après avoir effectué ses taches (sauvegarde de session par exemple)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
btnHistory = (Button)ucBANContext.FindControl("btnHistory");
btnHistory.Visible = true;
this.btnHistory.Click += new EventHandler(btnHistory_Click);

2) Ajout du code de déclaration de la fancybox

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
Controls.AddAt(0, 
new LiteralControl(
"<a class=\"histo\" href=\"http://www.fancybox.net\" onClick=\"javascript:fancy();\"></a>"));

3) Dans la méthode "btnHistory_Click", création d'un trigger qui cliquera sur la balise <a> (fancybox) après avoir effectué le travail demandé au bouton.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
Page.RegisterStartupScript("showModal", "<script language=\"javascript\">jQuery(\".histo\").trigger('click');</script>");

4) Fonction javascript de la fancybox

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
function fancy() {
                    $(".histo").fancybox({
                        openEffect: 'elastic',
                        closeEffect: 'elastic',
                        type: 'iframe',
                        autoSize: false,
                        width: 800,
                        height: 1200,
                        title:'est un test',
                        helpers: {
                            title: {
                                type: 'float'
                            },
                            overlay: {
                                opacity: 0.6,
                                closeClick: false,
                                css: {
                                    cursor: 'auto'
                                }
                            }
                        }
                    });
                }

J'ai essayé de nombreuses choses et je me retrouve à cours d'idées.

Merci pour votre aide, j’espère avoir été clair mais si vous avez des questions n’hésitez pas.

[ticroch]

c'est que avec IE le bug ou avec les autres browser aussi ??

[Cahaledor]

C'est une application intranet qui fonctionnera sous IE, mais effectivement ça fonctionne correctement sous FF ou Chrome

[Cahaledor]

j'ai trouvé une solution, bien que je ne sois pas sur qu'elle soit la plus jolie, elle fonctionne. Si vous avez d'autres idées je suis toujours attentif à vos remarques.

le problème venait de deux paramètres du css qui n'était pas bon.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 jQuery('.fancyboxHisto').fancybox({
            closeBtn: true,
            openEffect: 'elastic',
            closeEffect: 'elastic',
            autoSize: false,
            width: 800,
            height: 1200,
            type: 'iframe',
            titlePosition : 'outside',
            helpers: {
                overlay: {
                    opacity: 0.6
                }
            },
            afterShow: function () {
                jQuery('.fancybox-title-float-wrap').css('right', '35%');
                jQuery('.fancybox-title-float-wrap .child').css('margin-right','0px');
            }
        });

J'ai rajouté le aftershow qui remplace correctement le css.

[ticroch]

ouais je pense pas que tu trouveras bcp mieux...y'a tjr des problème de CSS enter les différents browser ...

Pense à mettre ton POST en résolu !

[Cahaledor]

Ok, merci.