Tech Mug » swf http://www.techmug.com Tue, 31 Jan 2012 12:15:34 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Detect Javascript and Flash Enabled http://www.techmug.com/detect-javascript-and-flash-enabled/ http://www.techmug.com/detect-javascript-and-flash-enabled/#comments Wed, 06 Jan 2010 18:56:07 +0000 Fraz Ahmed http://www.techmug.com/?p=73 Javascript and Flash are super tools to enhance the usability of your website. You put a lot of efforts to create beautiful form validation and an attractive flash animation. But all the efforts are ruined when the visitor of your website has disabled Javascript or does not have flash plugin installed. Here I’ll provide you a little solution to escape from this problem.

First Tactic – Detect Javascript Enabled

Our first step is to detect whether visitor has Javascript enabled or not. If Javascript is not enable, we will redirect user to an error/instruction page (I create a seperate page where I give instructions to visitor that how to enable Javascript in his/her browser).

Put below code just after the <head> tag in your web page:

<noscript>
<meta http-equiv="refresh" content="0;URL=error-javascript.php" />
</noscript>

Above code is executed if Javascript is disabled and redirect user to error-javascript.php. We are using <meta> tag for redirection. If Javascript is not disabled, above code will not be executed.

Advertisement

Second Tactic- Detect Flash Plugin Installed

There is a Javascript solution to detect Flash Plugin Installed and replace Flash animation with your custom message. In order to accomplish the said task you need to place below Javascript instead of your normal embedded code:

<script type="text/javascript">
<!--
var MM_contentVersion = 9;
var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
if ( plugin ) {
		var words = navigator.plugins["Shockwave Flash"].description.split(" ");
	    for (var i = 0; i < words.length; ++i)
	    {
		if (isNaN(parseInt(words[i])))
		continue;
		var MM_PluginVersion = words[i];
	    }
	var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion;
}
else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
   && (navigator.appVersion.indexOf("Win") != -1)) {
	document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag
	document.write('on error resume next \n');
	document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n');
	document.write('</SCR' + 'IPT\> \n');
}
if ( MM_FlashCanPlay ) {
	document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="160" height="120">');
    document.write('<param name="movie" value="animation.swf">');
    document.write ('<param name="quality" value="high">');
	document.write ('<param name="wmode" value="transparent">');
    document.write('<embed src="animation.swf" width="160" height="120" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed></object>');
} else{
	document.write('<a href="./"><img src="replaced-image.png" alt="Flash Plugin not Installed" border="0"></a>');

}
//-->

</script>

Above code detect for Version 9 or greater version of flash plugin. If flash plugin is detected it displays flash animation (animation.swf) else it displays an image (replaced-image.png) instead of flash animation. In the place of image you can write more text and instructions. Everything is upto on you.

Advertisement

Don’t forget to share the post on your favorite website. It may also help someone somewhere.

]]> http://www.techmug.com/detect-javascript-and-flash-enabled/feed/ 17 jMouse Follower http://www.techmug.com/jmouse-follower/ http://www.techmug.com/jmouse-follower/#comments Wed, 29 Jul 2009 19:33:14 +0000 Fraz Ahmed http://www.techmug.com/?p=28 What is Mouse Follower?

Mouse Follower or Cursor Trail is typically an image or set of images which follows the cursor in your browser screen.

Demo and Download

To understand more clearly visit demo. Alternatively you may also download the files from here.

Problem

Today I was asked to enhance the existing mouse trail feature of a website. They were using 3 or 4 PNG images to make the mouse trail. But the problem was that images were inline. While our client wanted some more advanced animation with mouse trail/follower. And that animation was not possible without using flash animation in it.

From the above its clear that we were need to have a DIV in the script where all of the Flash embedded code may be inserted. I searched for many scripts but the problem was that they were doing well with IE but for Firefox answer was NO.

Things to do

Eventually I had to play with code. And surely my first choice for Javascript is always jQuery. Basically the concept was so simple, to achieve Mouse Follower effect we need to do following:

  1. Create a DIV for Flash Object (You may also use image in this DIV).
  2. Find X and Y co-ordinates of cursor’s current position.
  3. Change DIV position according to X and Y position of Cursor.

Advertisement

How it works?

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
   $("*").mousemove(function(e){
	  $("#follower").css({'position' : 'absolute', 'margin-left' : e.pageX+10, 'margin-top' : e.pageY+10, 'display' : 'block', 'z-index' : '999'});
   });
})
// ]]></script>

Explanation

  1. In the above code first we define use document.ready() it simply call the underneath function on the load of page.
  2. $(“*”).mousemove(function(e){… – this line reads that call the function whenever mouse move on any element of the page. mousemove is a jQuey event. Click here to learn more jQuery events.
  3. $(“#follower”).css({… – this line looks for an element which ID is “follower”. This is our Flash Object DIV. In this line we change the CSS style of our DIV. jQuery has made it much easy for us to change the CSS style of any element on the move.
  4. We get X and Y co-ordinates by calling page.X and page.Y builtin functions of jQuery.
  5. We used margin-left and margin-top to style our DIV. Values of both margins are set equivalent of page.X and page.Y
  6. So, every time when mouse moves on the page, our DIV changes its position itself. And this all is happening because we have defined the position of our DIV to absolute. So, DIV is free to move anywhere on the page.
  7. We used +10 with page.X and page.Y its just because we wanted to move our object a little far from the cursor.
  8. Our DIV has a Flash Object. And we have made this flash animation a transparent one. So, it will not hide any element on the page. Code for our DIV is below:
<div id="follower">
 <object id="followers" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="250" height="150" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
 <param name="name" value="follower" />
 <param name="align" value="middle" />
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="allowFullScreen" value="false" />
 <param name="quality" value="high" />
 <param name="bgcolor" value="#ffffff" />
 <param name="wmode" value="transparent" />
 <param name="allowScale" value="false" />
 <param name="src" value="mouse.swf" />
 <param name="allowfullscreen" value="false" />
 <embed id="followers" type="application/x-shockwave-flash" width="250" height="150" src="mouse.swf" allowscale="false" wmode="transparent" bgcolor="#ffffff" quality="high" allowfullscreen="false" allowscriptaccess="sameDomain" align="middle" name="follower"></embed>
 </object>
</div>

Advertisement

Don’t forget to share the post on your favorite website. It may also help someone somewhere.

]]> http://www.techmug.com/jmouse-follower/feed/ 6