Skip to main content

FancyBox iFrame broke after Tables & Styles in IE

Image
By User



I'm wondering if there's any particular rules regarding using and stylizing 'fancybox' windows. I've implemented a 'fancybox' using the iFrame call - and when I just had some simple text, a background color, and an Image; it rendered great IE 6+. BUT, now that I've added a simple table with some styles for buttons within - it breaks in 6/7.





Anything particular I should avoid implementing and putting inside an iFrame called .html while using fancybox supporting IE6/7?





! Update (please help me debug - here's what I have being called in the fancybox via iFrame):







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>



<style>



h1 { font-family: Georgia, Regular; font-size: 30px; color: #8E4925;  font-weight: 300;}

h2 { font-family: Georgia, Regular; font-size: 18px; color: #8E4925; line-height: 30px;  font-weight: 300; text-transform:Uppercase;}

p { font-family: Georgia, Regular; font-size: 16px; color: #000; padding: 4px; line-height: 25px;  font-weight: 300; }



</style>



</head>



<body style="background-color: #FFFDEF;">



<div id="wrap" style="width:650px;">



<div style="float:left; width: 300px;">







<table width="300" height="30">

  <tr>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

  </tr>

  <tr>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

  </tr>

</table>





<table width="300" height="30" >

  <tr>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

  </tr>

  <tr>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

  </tr>

</table>





<br />





<table width="300" height="30">

  <tr>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>

  </tr>

</table>







</div>



<div style="float:right; width: 300px">



<img src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/Cover.jpg" style="border:0px; margin-top:40px;"/>





</div>

</div>



       <!-- SiteCatalyst Code version: H.17.

Copyright 1997-2008 Omniture, Inc. More info available at

http://www.omniture.com -->

<script language="JavaScript" type="text/javascript" src="http://www.mytest.com/js/s_code.js"></script>

<script language="JavaScript" type="text/javascript"><!--

/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/

var s_code=s.t();if(s_code)document.write(s_code)//--></script>

<script language="JavaScript" type="text/javascript"><!--

if(navigator.appVersion.indexOf('MSIE')>=0)document.write(unescape('%3C')+'\!-'+'-')

//--></script><noscript><a href="http://www.omniture.com" title="Web Analytics"><img

src="http://code.mytest.com/b/ss/ranhrollup/1/H.17--NS/0"

height="1" width="1"style="border:3px solid #FFFDEF; alt="" /></a></noscript><!--/DO NOT REMOVE/-->

<!-- End SiteCatalyst code version: H.17. -->







</body>

</html>







FancyBox JS inline:







<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>





<link rel="stylesheet" href="css/jquery.ui.all.css">



<script type="text/javascript" src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.mousewheel-3.0.4.pack.js">

</script>

<script type="text/javascript" src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.pack.js">

</script>



<link rel="stylesheet" type="text/css" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.css" media="screen">



<!--JS for Fancybox iFrame buybtn-->



<script type="text/javascript">

                $(document).ready(function() {

                        /*

                        *   Examples - various

                        */

                          $("#various7").fancybox({

                                'width'                         : 700,

                                'height'                        : 500,

                                'autoScale'                     : false,

                                'transitionIn'          : 'elastic',

                                'transitionOut'         : 'fade',

                                'enableEscapeButton'    : 'true',

                                'type'                  : 'iframe',

                                'speedIn'               : 250,

                                'speedOut'              : 500,





                        });



                });

</script>



<!--End JS for Fancybox iFrame buybtn-->







CTA:







<a id="various7" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/iframe/buybutton.html" name="various7"><img src="http://rh-dev.us.randomhouse.com/crown/features/AmericanGrown/imgs/buythebook_btn.png" border="0"></a>




Labels:

Comments

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

By User
I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
3 comments
Read more

Is it possible to have IF statement in an Echo statement in PHP

By User
Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.
5 comments
Read more