jQuery - Fancybox: Mais je ne veux pas de barres de défilement!
J'utilise jQuery Fancybox pour un formulaire d'inscription popup ici
Je voudrais que le formulaire apparaisse à la taille de 450px par 700px mais peu importe ce que j'ai défini la hauteur et la largeur, j'obtiens des barres de défilement:
<script type="text/javascript">
$(document).ready(function() {
$("a#regForm").fancybox({
'titleShow' : false,
'autoscale' : true,
'width' : '450',
'height' : '700',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
Il doit y avoir quelque chose que je fais mal mais je ne peux pas comprendre ce que c'est. J'apprécierais une main utile ici. Merci.
Cela semble un peu bizarre. une mauvaise solution consiste à utiliser css, overflow: hidden;
Chaque fois que j'utilise fancybox, les barres de défilement fonctionnent correctement. sûr que le contenu de la fancybox ne définit pas une autre hauteur?
Edit: Vu votre site d'exemple. Il semble que le contenu soit plus large que le fancybox lui-même.
J'ai eu le même problème avec fancybox et un iframe, recherché une solution sur Google et je me suis retrouvé ici. Le débordement: caché n'a pas fonctionné pour moi, mais j'ai découvert que fancybox vous permet de définir l'option pour le défilement iframe (équivalent à la définition de l'attribut "scrolling = no" sur l'iframe), ce qui résout le problème dans IE7 de manière plus détaillée. manière gracieuse:
$.fancybox({
'type' : 'iframe',
'scrolling' : 'no',
... and the rest of the parameters.
J'ai eu beaucoup de mal avec cela, seulement pour trouver la réponse dans la documentation de Fancybox.
Comme indiqué ci-dessus, j'ai d'abord pensé qu'il aurait été aussi simple que cela de désactiver le défilement:
$('.fancybox').fancybox({'type': 'iframe', 'scrolling': 'no', 'width': 500})
Cependant, il ne suffit pas de définir l'option "défilement" sur "non". J'ai dû répéter la même chose dans l'option 'iframe', comme ceci:
$('.fancybox').fancybox({
'type': 'iframe',
'scrolling': 'no',
'width': 500,
'iframe': {'scrolling': 'no'}
})
Je voulais juste dire que la réponse de Magnus ci-dessus l'a fait pour moi, mais pour le deuxième "overlay" qui doit être "overflow"
helpers : {
overlay : {
css : { 'overflow' : 'hidden' }
}
}
après avoir testé chacun des conseils ci-dessus (et avoir toujours des barres de défilement inutiles causées par des _ overflow: scroll à .fancybox-inner) et en essayant aussi beaucoup d'autres solutions de contournement, je me suis débarrassé des barres de défilement avec cette solution:
afterShow: function(){
this.inner.css({
overflow: 'auto' // or 'no'
});
}
J'ai rencontré le même problème et après des périodes d'essais et d'erreurs, j'ai découvert que vous pouvez éviter les barres de défilement en remplaçant la classe CSS de trame.
Vous pouvez faire comme ça:
iframe.fancybox-iframe {
overflow:hidden;
}
Configuration JS:
jQuery(document).ready(function(){
$("a.various").fancybox({
'width' : 'auto',
'height' : 'auto',
'autoScale' : false,
'autoDimensions' : false,
'scrolling' : 'no',
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
Remarque: votre type de boîte fancybox doit être un iframe pour que cela prenne effet.
J'ai eu un problème similaire, avec des barres de défilement verticales apparaissant lorsque j'ai défini un maxWidth dans les options de Fancybox.
Pour contourner le problème que j'ai dû régler
.fancybox-inner {
overflow: hidden !important;
}
et définissez une règle CSS à largeur fixe sur le contenu Fancybox plutôt que de spécifier un maxWidth dans les options Fancybox. Si je faisais ce dernier, la hauteur calculée par Fancybox pour le contenu était légèrement trop petite - suggérant probablement pourquoi il mettait des barres de défilement en premier lieu.
Vous devez placer l'option iframe dans son propre contexte, par exemple:
$(".someclass").fancybox({
type : 'iframe',
iframe : {
scrolling : 'no'
}
});
Je crois que la solution à cela est de définir
'autoDimensions' : false
alors la largeur et la hauteur du contenu en ligne seraient telles que vous les définissez
Je sais que cela semble un peu bizarre, mais avez-vous essayé de définir le margin de la balise body de la page de formulaire sur 0.
Le problème est en fait assez simple, la raison en est que la balise body margin par défaut est définie sur 8px (selon le navigateur) et si vous le définissez simplement sur 0, cela corrige la barre de défilement.
La configuration js que j'ai est la suivante et elle fonctionne bien sans changer le CSS de fancybox.
$(".iframe").fancybox({
'autoScale' : false,
'autoDimensions' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
Ajouter iframe: {scrolling: 'no'} comme option
exemple
$.fancybox({
href: 'yourUrl.html',
width: 800,
height: 415,
autoSize: false,
type : 'iframe',
iframe: {
scrolling : 'no',
preload : true
}});
sur jquery.fancybox.js, j'ai édité cette partie:
iframe : {
scrolling : 'no', // i changed this from 'auto' to 'no'
preload : true
},
En utilisant la version fancybox: 2.1.5 et essayé toutes les différentes options suggérées ici et aucune d'entre elles ne fonctionnait toujours en affichant la barre de défilement.
$('.foo').click(function(e){
$.fancybox({
href: $(this).data('href'),
type: 'iframe',
scrolling: 'no',
iframe : {
scrolling : 'no'
}
});
e.preventDefault();
});
Il en a été de même pour le débogage du code jusqu'à ce que je trouve cela, donc il écrase toutes les options que j'ai définies et aucun moyen de l'écraser en utilisant les nombreuses options.
if (type === 'iframe' && isTouch) {
coming.scrolling = 'scroll';
}
Au final, la solution a été d'utiliser le hack CSS! Important.
.fancybox-inner {
overflow: hidden !important;
}
La ligne de code responsable est:
current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling));
Fancybox était une solution de travail fiable maintenant je ne trouve que des incohérences. En fait, débattre de la rétrogradation maintenant même après l'achat d'une licence de développeur. Plus d'informations ici si vous ne réalisiez pas que vous en aviez besoin pour un projet commercial: https://stackoverflow.com/a/8837258/560287
Supprimez les guillemets autour de vos valeurs de hauteur et de largeur:
<script type="text/javascript">
$(document).ready(function() {
$("a#regForm").fancybox({
'titleShow' : false,
'autoscale' : true,
'width' : 450,
'height' : 700,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
C'est la seule chose qui a fonctionné pour moi pour les deux IE et Google Chrome, je pense que c'est principalement à cause du truc .body.scrollHeight, qui fonctionne dans IE = meilleur. J'ai mis +30 pour Firefox ...
jQuery.fancybox({
href: href,
type: "iframe",
centerOnScroll: 'true',
scrolling: 'no',
width: 650,
'onComplete': function() {
jQuery('#fancybox-frame').load(function() {
jQuery('#fancybox-content').height(this.contentWindow.document.body.scrollHeight + 30);
});
}
});
Fancybox 2.x a au moins un "assistant de superposition" qui s'est avéré être la clé pour moi. J'ai ajouté ce qui suit à mes paramètres de configuration de fancybox:
helpers : {
overlay : {
css : { 'overlay' : 'hidden' }
}
}
J'avais essayé de régler cela dans le CSS, mais cela n'a pas fonctionné, et tard dans le jeu, comme lors de l'événement beforeShow, mais cela a conduit à une barre vacillante. Cela semble fonctionner sans accroc.
J'avais, je suppose, le même problème. Ce n'était pas ce que les propriétés fancybox ou CSS étaient, mais le CSS principal de mon site.
si vous avez quelque chose comme
div {overflow:auto;height:auto;}
pour un héritable/root dans votre site css, cela entraînera des problèmes de barre de défilement dans la boîte de fantaisie. Supprimez et rendez votre HTML et CSS plus précis avec les ID et les classes
$(".various").fancybox({
fitToView : false,
width : '100%',
height : '100%',
maxWidth : 850,
maxHeight : 550,
fitToView : false,
padding : 20,
autoSize : true,
closeClick : true,
openEffect : 'none',
closeEffect : 'none',
overflow : 'hidden',
scrolling : 'no'
});
Les réponses ici offrent de nombreuses façons de résoudre ce problème, mais la plupart ne fonctionneront pas pour les appareils dotés d'écrans tactiles. Je pense que la source du problème provient de ces lignes de code de la source:
if (type === 'iframe' && isTouch) {
coming.scrolling = 'scroll';
}
Cela semble remplacer toutes les options définies par la configuration initiale de fancybox, et ne peut être modifié qu'après l'exécution de ces lignes de code, c'est-à-dire en modifiant le CSS à l'aide de la méthode afterShow. Cependant, toutes ces méthodes entraîneront un retard/retard notable et vous pourrez voir les barres de défilement disparaître lorsque vous l'ouvrirez.
Mon correctif suggéré est de supprimer ces lignes du fichier source principal jquery.fancybox.js autour de la ligne 880, car je ne vois aucune raison de forcer les barres de défilement sur les appareils dotés d'écrans tactiles.
Notez que cela ne fera pas immédiatement disparaître les barres de défilement, cela l'empêchera simplement de remplacer l'option de configuration scrolling. Vous devez donc également ajouter scrolling: 'no' à votre configuration initiale de fancybox.
Mes 2 cents, écris
*{ margin:0; padding:0; }
dans le CSS principal de votre page cible, ajoutez un div de contenu avec la taille de tous vos éléments, ne touchez pas le .js, listo, saludos
Je l'ai fait pour me débarrasser du débordement (barre de défilement) ...
à la fin du fichier jquery.fancybox .... js, il existe des fonctions onStart, onCancel, onComplete etc., et elles sont toutes vides ... alors allez-y et remplissez les accolades de onStart avec "$ (' body '). css (' overflow ',' hidden ') "et onClosed" $ (' body '). css (' overflow ',' visible ') "... devrait ressembler à ceci ...
onStart:function(){$('body').css('overflow','hidden')},
onClosed:function(){$('body').css('overflow','visible')},
paix
Voici une autre pensée. j'ai eu
html { overflow-y: scroll; }
dans mon CSS principal pour empêcher un contenu centré de sauter entre les pages qui nécessitaient ou non une barre de défilement. J'ai essayé tout ce qui précède pour se débarrasser de la barre de défilement dans la fenêtre contextuelle jusqu'à ce que je m'en rende compte. Une fois que je l'ai désactivé pour la fenêtre contextuelle uniquement, la barre de défilement dans la fenêtre contextuelle a également disparu. Donc, assurez-vous que la barre de défilement que vous voyez provient bien de l'iframe et non de la page à l'intérieur.
Modifier la ligne 197 et 198 de jquery.fancybox.css:
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: auto;
}