Tip

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))

    Requires Free Membership to View

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.


This content is reposted from the SAP Developer Network.
Copyright 2006, SAP Developer Network

SAP Developer Network (SDN) is an active online community where ABAP, Java, .NET, and other cutting-edge technologies converge to form a resource and collaboration channel for SAP developers, consultants, integrators, and business analysts. SDN hosts a technical library, expert blogs, exclusive downloads and code samples, an extensive eLearning catalog, and active, moderated discussion forums. SDN membership is free.

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.



This was first published in December 2006

There are Comments. Add yours.

 
TIP: Want to include a code block in your comment? Use <pre> or <code> tags around the desired text. Ex: <code>insert code</code>

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy
Sort by: OldestNewest

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.