I'm getting a bug with Internet Explorer. The iframe doesn't have correct size and it is displayed on the top left of the page instead of the center.
In Firefox and Chrome, everything is working perfectly.
Tried many things but I couldn't find a solution :(
Please help me.
You can see the bug in IE8 here:
http://www.ni-dieu-ni-maitre.com/v2/index_v2.php
Click link labelled "iframe" on top left
Here's a screenshot of what it looks like:
Here's my code:
<head>
<script type=\"text/javascript\" src=\"http://www.$domain/scripts/jquery-1.8.2.min.js\"></script>
<script type=\"text/javascript\" src=\"http://www.$domain/scripts/jquery.fancybox.js?v=2.1.1\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"http://www.$domain/scripts/jquery.fancybox.css?v=2.1.1\" media=\"screen\" />
<script type=\"text/javascript\">
$(document).ready(function() {
$('.fancybox').fancybox();
$('.fancybox').click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5,
autoScale : false
});
});
$(\".contactbox\").fancybox({
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
'overlayShow' : false,
href : 'contact.php',
type : 'iframe',
padding : 5,
autoScale : true,
scrolling : 'no'
frameWidth : 430,
frameHeight : 380
});
});
</script>
</head>
<body background=\"$background\" id=\"top\">
<a class=\"contactbox\" href=\"http://$domain/contact.php\">Iframe</a>
Your page is rendered in quirks mode because you don't have a correct HTML DTD declaration.
If you bring up IE dev toolbar (F12), you can see it renders correctly in standards modes.
Related
I'm using Fancybox to show a iframe when a page load, but, the vertical aligment in Firefox and Chrome doesn't show fine, and IE work perfect. The code is this:
<script type="text/javascript">
$.fancybox.open([
{
type : 'iframe',
href : 'http://www.example.org/online/index.html',
title : 'Inscribete',
width: 800,
height: 580
}
], {
padding : 0
});
</script>
If you want to display the iframe with those dimensions, then you may need to use fitToView set to false.
Also, check your syntax. I would rather do something like
$.fancybox.open({
type: 'iframe',
href: 'http://www.example.org/online/index.html',
title: 'Inscribete',
width: 800,
height: 580,
fitToView: false,
padding: 0
});
That should work fine in most of modern browsers.
See JSFIDDLE
I use fancybox into a html page but i can't style the link to open the fancybox. Normaly i use a class to style the html link but with fancybox the class is already given to the fancybox. I need to change the background color of the link liks this:
background-color: #E9F3D8;
Here is the fancybox script i use into the html page
<script type="text/javascript">
$(document).ready(function() {
$(".contactForm").fancybox({
'width' : 750,
'height' : 420,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
And the link into this page looks linke this
mail
Hard to recreate problem with jsfiddle because all work fine here
<style>
a {
background-color: #E9F3D8;
}
</style>
<script>
$(document).ready(function() {
$(".contactForm").fancybox({
'width' : 750,
'height' : 420,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
Maybe give more details that we can help you or maybe I do something wrong with recreating.
On this link the FancyBox shows the video but with black bars to the side. Also when I resize the browser black bars appear on the top. I tried everything I could find on SO and elsewhere but I can't seem to find the solution.
This is my JS setup of the FancyBox:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
},
autoSize: false,
fitToView: true,
maxWidth: 960,
maxHeigth: 540,
height: '70%',
width: '70%',
});
});
</script>
Where do I need to look to fix this?
I found if you update the width of div which class is flideo , that would fix this problem
you coulde see the picture url below
https://dl.dropboxusercontent.com/u/23971112/stackoverflow/fancybox%20black%20bar.JPG
I want to apply an image filtration technique and also want to make the image opens in a fancy box, I added the code and made links to the scripts that I need but while adding the below script link :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
above the filtering links and script, the filter works but the fancy box doesn't want to work and while adding the same link above fancy box links and script, the fancy box works but the filter doesn't want to work...
Here is some of my code:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- Add jQuery library of fancybox -->
<script type="text/javascript" src="image-library/lib/jquery-1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="image-library/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="image-library/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="image-library/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="image-library/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="image-library/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="image-library/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="image-library/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="image-library/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = '';
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="filter/filtrify.css">
<script src="filter/highlight.pack.js"></script>
<script src="filter/script.js"></script>
<script src="filter/filtrify.min.js"></script>
<script type="text/javascript">
$(function() {
var ft = $.filtrify("cbp-rfgrid", "placeHolder");
$("a#1").click(function() {
ft.trigger({ categories : ["Photography"] });
});
$("a#2").click(function() {
ft.trigger({ categories : ["Retouching"] });
});
$("a#3").click(function() {
ft.trigger({ categories : ["CGI"] });
});
$("a#4").click(function() {
ft.trigger({ categories : ["Oranges"] });
});
$("div#triggers > a").click(function() {
$(this)
.addClass("selected")
.siblings("a")
.removeClass("selected");
});
$("a#reset strong").click(function() {
ft.reset();
$(this).addClass("selected");
$('#triggers .selected').removeClass("selected");
});
$("li").click(function() {
ft.reset();
$(this).addClass("selected");
$('#triggers .selected').removeClass("selected");
});
});
</script>
</head>
Also you can refer to the below link to see it alive with the fancy box problem...
http://arqqa.net/aostudio-beta/
In your live example, first you are calling upon jQuery (1.10.1), then you are embedding the Fancybox scripts, followed by the script to execute fancybox.
After your actions section you are calling upon another jQuery (1.8.2). Having multiple instances of jQuery is likely to give you the conflict.
Use jQuery only once, and make it the first script to be executed.
Make sure your actions are the last script to be executed.
Place your actions in an external javascript file.
Place javascript before the closing body tag in your document.
you can use two versions of jquery at the same time:
https://api.jquery.com/jQuery.noConflict/
Unfortunately I can confirm that this won't work with later versions of jQuery (1.0.7). I downloaded the demo found at
http://tutorialzine.com/2011/02/converting-jquery-code-plugin/
and replaced the jQuery lib reference to a later version and the ddl fails to function.
NB - I'm also aware that I'm not providing an answer here, but in the infinite wisdom of the site administrators I'm not allows to comment without having reached the required number of brownie points!
I am using Fancybox for showing html files with ajax in [removed] and after struggling to make it work in IE now it is showing the wrong width.
$(document).ready(function() {
$(".loginmodal").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'width' : 350
});
$(".agregardefmago").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'padding': 0,
'margin':0,
'autoScale':false,
'width' : 350,
'type' : 'ajax'
});
});
This is the javascript in the header with:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/static/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
When clicking on Agregar Definicion the fancybox appears with a correct automatically height but a wrong width.
I have tried removing the 'width' attribute, and many other combinations.
Thanks.
I believe the option you are looking for is autoDimensions.
$(".agregardefmago").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'padding': 0,
'margin':0,
'autoScale':false,
**'autoDimensions':false,**
'width' : 350,
'type' : 'ajax'
});
For more info: http://fancybox.net/api
Any specific reason why your using Fancybox?
I have also had some browser issues with it in the past (IE) so I switched to FaceBox seems to work a lot better in all browsers.