How to display an animated logo in the Portal Masthead

Introduction

if you want to display a different logo in the portal masthead, you would upload it through the Portal Themes. You can even upload Flash images the same way. But what will happen if the end user doesn't have Flash installed on his/her machine?

The sample code below would identify whether Flash is installed or not on the client user machine at runtime. Based on this we can display animated image if Flash is installed else display the normal image.

The below code should be placed in the Headeriview.jsp which is inside the masthead.par.

<!-- // Flash Installation Check code Starts Here -->
 
<script language="JavaScript" type="text/javascript">
 
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 5;
// 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>
<script language="VBScript" type="text/vbscript">
<!-- // Visual basic helper required to detect Flash Player 
ActiveX control version information
Function VBGetSwfVer(i)
  on error resume next
  Dim swControl, swVersion
  swVersion = 0
  
  set swControl = CreateObject("ShockwaveFlash.
ShockwaveFlash." + CStr(i))
  if (IsObject(swControl)) then
    swVersion = swControl.GetVariable("$version")
  end if
  VBGetSwfVer = swVersion
End Function
// -->
</script>
 
 
<script language="JavaScript1.1" type="text/javascript">
 
<!-- // Detect Client Browser type
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") 
!= -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
jsVersion = 1.1;
 
 
// JavaScript helper required to detect Flash Player PlugIn version information
function JSGetSwfVer(i){
 // NS/Opera version >= 3 check for Flash plugin in plugin array
 
if (navigator.plugins != null && navigator.plugins.length > 0) 
{
        if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins
["Shockwave Flash"]) 
        {
   
     var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0":"";
        var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].
description;
   
        descArray = flashDescription.split(" ");
   
        tempArrayMajor = descArray[2].split(".");
   
        versionMajor = tempArrayMajor[0];
   
        versionMinor = tempArrayMajor[1];
   
       if ( descArray[3] != "" ) {
    
      tempArrayMinor = descArray[3].split("r");
   
       } else {
         tempArrayMinor = descArray[4].split("r");
         }
       versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
 flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
        }else
 style='mso-tab-count:
1'>        {
   
        flashVer = -1;
        }
}
 // MSN/WebTV 2.6 supports Flash 4
 else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1)
flashVer = 4;
 // WebTV 2.5 supports Flash 3
 else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1)
flashVer = 3;
 // older WebTV supports Flash 2
 else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1)
flashVer = 2;
 // Can't detect in all other cases
 else {
  
  flashVer = -1;
 }
 return flashVer;
} 
 
// When called with reqMajorVer, reqMinorVer, reqRevision 
returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision) 
{
  reqVer = parseFloat(reqMajorVer + "." + reqRevision);
    // loop backwards through the versions until find the newest version 
 for (i=25;i>0;i--) { 
  if (isIE && isWin && !isOpera) {
   versionStr = VBGetSwfVer(i);
  } else {
   versionStr = JSGetSwfVer(i);  
  }
  if (versionStr == -1 ) { 
   return false;
  } else if (versionStr != 0) {
   if(isIE && isWin && !isOpera) {
    tempArray         = versionStr.split(" ");
    tempString        = tempArray[1];
    versionArray      = tempString .split(",");    
   } else {
    versionArray      = versionStr.split(".");
   }
   versionMajor      = versionArray[0];
   versionMinor      = versionArray[1];
   versionRevision   = versionArray[2];
   
   versionString     = versionMajor + "." + versionRevision;   // 7.0r24 == 7.24
   versionNum        = parseFloat(versionString);
         // if the major.revision >= requested major.revision 
AND the minor version >= requested minor
   if ( (versionMajor > reqMajorVer) && (versionNum >= reqVer) ) {
    return true;
   } else {
    return ((versionNum >= reqVer && versionMinor >= reqMinorVer) ? true : false ); 
   }
  }
 } 
}
// -->
</script>

<!-- // Flash Installation Check code Ends Here -->
The below code should replace the Header Logo container portion in the Headeriview.jsp which is inside the masthead.par.
Note: Change the logo_anim.swf file name and path according to your file name and path.

<!-- ***** Animated Logo Change Starts Here ***** -->    
<script language="JavaScript" type="text/javascript">
 
// Version check based upon the values entered above in "Globals"
 
var hasReqestedVersion = DetectFlashVer
(requiredMajorVersion, requiredMinorVersion, requiredRevision);
 
// Check to see if the version meets the requirements for playback
if (hasReqestedVersion) {  // if we've detected an acceptable version
      var objectTags = '<TD nowrap width="100">   
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'
    + 'width="159" height="48"'
    + 'codebase=
"https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">'
    + '<param name="movie" value="../layout/logo_anim.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#58595B" />'
    + '<embed src="../layout/logo_anim.swf" quality="high" bgcolor="#58595B" '
    + 'width="159" height="50" name="logo" align="middle"'
    + 'play="true"'
    + 'loop="false"'
    + 'quality="high"'
    + 'allowScriptAccess="sameDomain"'
    + 'type="application/x-shockwave-flash"'
    + 'pluginspage="https://www.macromedia.com/go/getflashplayer">'
                       
                        
    + '<\/embed>'
    + '<\/object><\/TD><td> </td>';
                        
 
document.write(objectTags); // embed the Flash Content SWF 
                       
} 
else 
{  // flash is not installed or can't detect the plugin then display ordinary image
                        
   
    document.write('<TD class="prtlHdrBrandImgContainer" 
ti="-1"> <%=GetLicenseText(componentRequest)%></TD>');
    document.write('<TD nowrap class="prtlHdrLogoContainer"> ');
                        
    <% if (isAccessabilityOn)
   {%>
          document.write('<span tabindex="0" id="myTable-skipend" ti="0" 
onkeydown="sapUrMapi_skip(''myTable'',event);" title="<%=mastheadExitTable%>" >
</span>');
 <%}%>
          document.write('</TD>');
}
-->
</script>
<!-- ***** Animated Logo Implementation Ends Here ***** -->

Conclusion

You have learned in this article how to display an animated image in the masthead only if Flash is installed on the client machine. This code snippet may be useful in other places where you want to display an animated logo.

Want to read more from this author? Click here to read Birla Bose's Weblog. Click here to read more about the Enterprise Portal on SDN.