jQuery fancyBox: affichage de titre

Version imprimable

1 pièce(s) jointe(s)

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é.

Pièce jointe 97392

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:

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:

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:

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

4) Fonction javascript de la fancybox

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
 
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.

23/06/2012, 09h01
ticroch

c'est que avec IE le bug ou avec les autres browser aussi ??
25/06/2012, 10h17
Cahaledor

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

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:

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.

26/06/2012, 17h20
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 !
26/06/2012, 17h33
Cahaledor

Ok, merci.