#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    16
    Rep Power
    0

    IE9 Masking can't able to mask Flash Banner


    Hello

    I am trying to hide all the content of my html by masking using CSS and java script. But any how I'm not able to send back the flash banner behind the mask. Here is the code -
    Code:
    <script>
    $(document).ready(function() { 
    $('a[name=modal]').click(function(e) 
    { 
    e.preventDefault(); 
    var id = $(this).attr('href');
    var maskHeight = $(document).height();
    var maskWidth = $(window).width(); 
    $('#mask').css({'width':maskWidth,'height':maskHeight});
    $('#mask').fadeIn(1000);
    $('#mask').fadeTo("slow",0.8);
    var winH = $(window).height();
    var winW = $(window).width();
    $(id).css('top', winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);
    $(id).fadeIn(2000); });
    $('.window .close').click(function (e) 
    {
    e.preventDefault(); 
    $('#mask').hide();
    $('.window').hide(); });
    $('#mask').click(function ()
    { 
    $(this).hide();
    $('.window').hide();
     });
    $(window).resize(function ()
    {
    var box = $('#boxes .window');
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    $('#mask').css({'width':maskWidth,'height':maskHeight});
    var winH = $(window).height();
    var winW = $(window).width();
    box.css('top', winH/2 - box.height()/2);
    box.css('left', winW/2 - box.width()/2); }); }); 
    </script>
    
    <style>
    #mask {
      position:absolute;
      left:0;
      top:0;
      z-index:9000;
      background-color:#000;
      display:none;
    }
      
    #boxes .window {
      position:fixed;
      left:0;
      top:0;
      width:440px;
      height:200px;
      display:none;
      z-index:9999;
      padding:20px;
    }
    
    #boxes #dialog {
      width:375px; 
      height:203px;
      padding:10px;
      background-color:#ffffff;
    }
    </style>
    <div id="schedule"> 
    	     <a href="#dialog" name="modal" onload="hideLoading()" frameborder="0" width="100%" allowTransparency="true" height="350"> Online Test Dates</a></div>
    ......HERE IS THE FLASH OBJECT EMBEDED........
    <div id="boxes">
       <div id="dialog" class="window">Select your course:<br />
    	<p><a href="jee-2013-exam-date-sheet.php">JEE Schedule</a> | <a href="NEET-online-exam-date.php">NEET Schedule</a></p>
    Finally this is the line where when I click masking happen
    Code:
    <a href="#" class="close" style="font-size:larger"/>Close</a>
    </div>
        <div id="mask"></div>
    </div>
    Goggle Chrome and Fire Fox doesn't have any problem but IE 9 take the flash banner on top of Mask. can see this live problem here
    Thank you in advance
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    708
    Rep Power
    441
    Yikes. You're using really out of date coding methods and not following best practices on pretty much the whole page.

    The Flash movie could be made in HTML and Javascript which would avoid the issue entirely, but you can fix it as it is. You have to set the "window mode" (wmode) attribute on your Flash embed to either "opaque" or "transparent". Do a Google search for wmode and you'll see how to do it.

IMN logo majestic logo threadwatch logo seochat tools logo