Miscellaneous Resources

The following are tips that don't fit into any particular category. Where possible I have provided the original source of the information. Note that external links may no longer be valid.
Embedding Flash in Web Pages
Web Design

There are several methods of embedding Flash swf files into your web pages depending upon what functionality you want if:

  • Internet Explorer is in use
  • Flash is not installed.

My own preference is to display alternative content, eg. an image, if Flash is not installed. Many users refuse to install Flash and they will not see anything. Alternative content will at least display your company's logo for example which is better than missing out on that fancy Flash logo you created Smile.

Invite User to Install Flash

The following code will display an Adobe icon inviting the user to install the Flash Player if not already installed.

<script type="text/javascript" src="/js/swfobject.js"></script>

<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent";
var attributes = {};
attributes.id = "jetking";
swfobject.embedSWF("flash/jetking.swf", "mainFlashAlt", "480", "175", "8.0.0", false, flashvars, params, attributes);
</script>

<div id="mainflash">
<div id="mainFlashAlt">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" />
</a>
</div>
</div>

 

The Simplest Method

A simple method:

<object width="250" height="250" type="application/x-shockwave-flash" id="jetking" data="/images/bouncingjet.swf"><param name="wmode" value="transparent"></object>

Alternative Content

This method will display alternative content if Flash is not installed. For Internet Explorer only, other browsers may not recognise the IF statements. I have not had a chance to test it with other browsers that don't have Flash installed.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
 
Star Rating Display
jQuery Ideas

Sometimes articles and items are given a star rating using a row of stars as can be seen in this example on my home web site. This method will not allow the viewer to change the rating. 

The code below is contained in a separate file or within <script></script> tags.

jQuery.fn.stars = function() {
return $(this).each(function() {

// Get the value
var val = parseFloat($(this).html());
val = Math.round(val * 2) / 2; /* To round to nearest half */

// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;

// Create stars holder
var $span = $('<span />').width(size);

// Replace the numerical value with stars
jQuery(this).html($span);
});
}

The following CSS is required to display the star image.

/*CSS for the star ratings
*/
span.stars, span.stars span {
display: block;
width: 80px;
height: 16px;
background-image: url(images/stars.png);
background-repeat: repeat-x;
background-position: 0 -16px;
}

span.stars span {
background-position: 0 0;
}

Once set up insert the following to display your stars. The number is the number of starts to display.

<p><span class="stars">4.5</span></p>
 
Striping Tables using jQuery
jQuery Ideas

Striping tables means to set each alternate row in a table to a different colour to make it more readable.

For example:

1 Apples
2 Bananas
3 Oranges
4 Pears
5 Strawberrys

To colour the above table the following code was used:

<script language="JavaScript" type="text/javascript">
         jQuery('.striped tr:even').addClass('evenrow');
         jQuery('.striped tr:odd').addClass('oddrow');
</script>

The ".striped" ensures that only the table with class "striped" is affected. This is especially important in Joomla as pages are often constructed using tables from the template.
 
Automatically redirecting visitors to another page
General

(from http://www.webdevelopersnotes.com/tips/html/automatically_redirecting_visitors_to_another_page_.php3)

It might so happen that during the web site maintenance process, you might rename a page or move it to another location. One of your kind visitors (rare!) informs you that he/she stumbled on this page and it shows a "404 page not existing error".
Think about other users who have 'bookmarked' this page or worse still, search engines that have indexed this page.

A remedy for this problem would be to use an automatic redirection and we employ the <META> tag to accomplish this job.

Using the http-equiv and content attributes with appropriate values, we can set up this redirection.

<meta http-equiv="refresh" content="10; url=somepage.html">

The <meta> tag has to be included in the HTML head. The content attribute takes two values. The first specifies the number of seconds for the page to refresh and the second is the page URL address. (Note: These two values are enclosed in only ONE pair of quotes and separated by a colon).

The code above redirects the user to somepage.html in 10 seconds.

It is also wise to include a link to the new page in the HTML body section for older browsers that do not recognize the <meta> tag, something like:

The page has been moved <a href="/newlocation.html">here</a>
 


facebookjoinCopyright © 2010 Rinet IT. All rights reserved. Admin.
Powered by Joomla! Design based on Splash template by BUYHTTP. Open Source Matters