SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Safari and overflow div with Flash

    I have a flash animation within a div which is given the overflow:Auto property because the window needs to be scrollable. The file works fine in IE, FF and Safari for PC but on Mac Safari, when scrolling the flash animation appears on top of the div above the scrollable div.

    Does anyone know why this would be the case?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's your code look like?

  3. #3
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    What's your code look like?
    I think you may have tried to help me last night, I've kind of found a way around the Safari overflow problem but this has created a new set of problems. When scrolling, the flash file appears above the div above it, i.e. it doesn't scroll with the overflow.

    HTML:

    HTML 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>
    <title></title>
    <script language="JavaScript" type="text/javascript" src="javascript/flash.js"></script>
    <script language="JavaScript1.1" type="text/javascript"  src="javascript/thirdparty/flash_detect.js"></script>
    <script language="VBScript" type="text/vbscript" src="javascript/thirdparty/flash_detect.vbs"></script>
    <script language="VBScript" type="text/vbscript"></script>
    <script language="JavaScript" type="text/javascript" src="javascript/ajax.js"></script>
    <script language="JavaScript" type="text/javascript">
     <!--
     // -----------------------------------------------------------------------------
     // Globals
     // Major version of Flash required
     var requiredMajorVersion = 8;
     // Minor version of Flash required
     var requiredMinorVersion = 0;
     // Minor version of Flash required
     var requiredRevision = 0;
     // the version of javascript supported
     var jsVersion = 1.0;
     // -----------------------------------------------------------------------------
     // -->
    </script>
    <style type="text/css">
     @import url("styles/new.css"); 
    </style>
    </head>
    <body>
    <div class="he">
     <script type="text/javascript">
      var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
      if(hasReqestedVersion){
       write_flash("flash/topbar01.swf","760","125");
      }else{
       document.write('<div class="no_flash"><a href="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">You do not have flash player installed, click here to download.</a></div>');
       document.write('<img src="images/no_flash_banner.jpg" width="780" height="123" alt=""/>');
      }
     </script>
     <noscript>
      <div class="no_flash"><a href="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">You may not have flash player installed, click here to download.</a></div>
      <a href="/"><img src="images/no_flash_banner.jpg" width="780" height="123" alt="" border="0"/></a>
     </noscript>
    </div>
    <div class="wra">
     <div id="rightcolumn">
       <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="718" height="325" title="image" style="float:left;">
       <param name="movie" value="flash/home.swf" />
       <param name="quality" value="high" />
       <embed src="flash/home.swf" width="718" height="325" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
       </object>
      <div class="bodyText">
       <h1>HOME</H1>
       <p>During the last century towns and cities prospered when they had the benefit of docks for their trade and industry. On a world wide basis these once wonderful assets have fallen into disrepair and dereliction due to trade patterns and transportation methods changing to meet our modern "computer" age lifestyles. Birkenhead docks are a classic example of such a decline. However, this does not mean that the docks should cease to operate, indeed quite the opposite. For them to survive, consolidation of the dock system must take place so that it can operate efficiently and regenerate with new uses. Done successfully a new breath of life can be brought to Birkenhead and the docks can once again be a wonderful and thriving environment.</p>
       <p>Consideration for all of Birkenhead docks is needed for improvement, but only part for redevelopment. "Wirral Waters" is the area selected for this redevelopment; the name reflecting the new and unique place it will strive to be. Once completed, people of Wirral will benefit from this spectacular development which will be a place for all ages to work, socialise, rest and play. Wirral Waters will be a recognized name around the world; tourists will identify with its location and want to visit.</p>
       <p>Birkenhead docks extends to over 500 acres. Wirral Waters within these docks will be a 4.5 Billion investment, creating tens of thousands of jobs during construction (which will span over at least 30 years), and approximately 27,000 jobs when complete.</p>
      </div>
      <div style="clear: left; margin-bottom: 1em"></div>
     </div>
    </div>
    <div class="fo">
     <script type="text/javascript">
      var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
      if(hasReqestedVersion){
       write_flash("flash/bottom.swf","760","60");
      }else{
       document.write('<div class="no_flash"><a href="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">You do not have flash player installed, click here to download.</a></div>');
       document.write('<img src="images/no_flash_banner.jpg" width="780" height="123" alt=""/>');
      }
     </script>
     <noscript>
      <div class="no_flash"><a href="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">You may not have flash player installed, click here to download.</a></div>
      <a href="/"><img src="images/no_flash_banner.jpg" width="780" height="123" alt="" border="0"/></a>
     </noscript>
    </div>
    
    </body>
    </html>
    CSS

    HTML Code:
    *{
     padding:0;margin:0;
    }
     
    body{
     height:100%;
     font-size:75%;
     background-image: url("../images/bg.gif");
    }
    .he,.fo,.wra{
     width:64em;
    }
     
    .he{
     position:absolute;
     left:50%;
     margin-left:-32em;
     height:100px;
     top:0;
    }
    .fo{
     bottom:0;
     height:60px;
     position:absolute;
     left:50%;
     margin-left:-32em;
     
     /*border:1px solid black;*/;
    }
    .wra{
     overflow:auto;
     position:relative; /*New additions*/
     /*overflow-y: auto;
     overflow-x:hidden;*/
     width:718px; 
     /*border:1px solid black;*/
    }
    head+body .wra{
     position:absolute;
     left:50%;
     top:110px;
     bottom:70px;
     /*margin-left:-30.4em;*/
     margin-left:-364px;
     background:#FFFFFF;
     
     /*border:1px solid black;*/
    }
    #rightcolumn{
     height:100%;
     background:#FFFFFF;
     
     /*border:1px solid black;*/
    }
     
    * html{padding:110px 0;overflow:hidden;} 
    * html body{padding:95px 0;padd\ing:0;}
    * html .wra{height:108%;margin:0 auto;position:relative;overflow-y: auto;overflow-x:hidden;}
    * html #rightcolumn{ height:99.5%; }
    
    .bodyText{
     background-color:#FFFFFF;
     font-family:verdana;
     font-size:11px;
     /*border:1px solid black;*/
    }
    .bodyText P{
     padding:5px;
    }
    h1{
     font-family:Tahoma;
     font-weight:normal;
     font-size:16px;
     margin-left:5px;
    }
     

  4. #4
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a screenshot:
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •