IE iframe transparent problem!

380 views
Skip to first unread message

Warrrrr

unread,
Aug 21, 2010, 9:21:56 AM8/21/10
to fancybox
Hi all,

I still have problem with iframes in fancybox...
I've tried:
- allowtransparency="true" on iframe tags in fancybox lib
- style="background:transparent;" on iframe tags in fancybox lib
or css

But nothing to do in IE...the iframe always displays a white
background...

I've tried the latest version of fancybox...

this is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.1 | Demonstration</title>
<script type="text/javascript" src="http://code.jquery.com/
jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./fancybox/
jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="./fancybox/
jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/
jquery.fancybox-1.3.1.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
<style>
#fancybox-outer {background:transparent;}
</style>
</head>
<body>
<div id="content">
<h1>fancybox <em>v1.3.1</em></h1>

<hr />
<ul>
<li><a id="various3" href="prova.html">Iframe</a></li>
</ul>
</div>
<div><p>&nbsp;</p></div>
</body>
</html>



and this is prova.html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body style="background:transparent;">
<div>
Prova
</div>
</body>
</html>

Marco Limas

unread,
Aug 21, 2010, 10:27:56 PM8/21/10
to fanc...@googlegroups.com
you mean displays white and then turns transparent?

or stay white...








--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.


Warrrrr

unread,
Aug 24, 2010, 3:24:16 AM8/24/10
to fancybox
nono it's only white...but i need it transparent......only on IE this
problem... :/

On 22 Ago, 04:27, Marco Limas <limas.ma...@gmail.com> wrote:
> you mean displays white and then turns transparent?
>
> or stay white...
>
> > fancybox+u...@googlegroups.com<fancybox%2Bunsu...@googlegroups.com>
> > .

Marco Limas

unread,
Aug 24, 2010, 8:28:00 AM8/24/10
to fanc...@googlegroups.com
you have the correct styles applied...

on js file:

<iframe id="fancybox-frame" name="fancybox-frame'+(new Date).getTime()+'" frameborder="0" hspace="0" scrolling="'+e.scrolling+'" src="'+e.href+'" allowtransparency="true" background-color="transparent"></iframe>


and on "pagetoOpen.html"  i use:

<body style="background-color:transparent"></body>

and css

#fancybox-outer {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: transparent;
}


if not working, check you are editing the correct js linked:

jquery.fancybox-1.3.1.js

or

jquery.fancybox-1.3.1.pack.js


To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.

Warrrrr

unread,
Aug 25, 2010, 8:51:34 AM8/25/10
to fancybox
I've tryied...nothing...


On 24 Ago, 08:28, Marco Limas <limas.ma...@gmail.com> wrote:
> you have the correct styles applied...
>
> on js file:
>
> <iframe id="fancybox-frame" name="fancybox-frame'+(new Date).getTime()+'"
> frameborder="0" hspace="0" scrolling="'+e.scrolling+'" src="'+e.href+'"
> allowtransparency="true" background-color="transparent"></iframe>
>
> and on "pagetoOpen.html"  i use:
>
> <body style="background-color:transparent"></body>
>
> and css
>
> #fancybox-outer {
>     position: relative;
>     width: 100%;
>     height: 100%;
>     background-color: transparent;
>
> }
>
> if not working, check you are editing the correct js linked:
>
> jquery.fancybox-1.3.1.js
>
> or
>
> jquery.fancybox-1.3.1.pack.js
>
> > <fancybox%2Bunsu...@googlegroups.com<fancybox%252Buns...@googlegroups.com>

Tom

unread,
Aug 25, 2010, 10:25:45 AM8/25/10
to fancybox
I had this issue only the other day.

In the plugin, find the line where it is creating the iframe and add
this ALLOWTRANSPARENCY="true"

Hope that works.
Tom

Warrrrr

unread,
Aug 26, 2010, 6:16:54 AM8/26/10
to fancybox
nothing....

try to download lastest version of fancybox and write my same
example....nothing...IE doesn't display transparent background...
Reply all
Reply to author
Forward
0 new messages