August 10, 2007

Generate variable names dynamically in Javascript

Suppose you want to use the value of one variable as part of the name of another variable, but you don't know the exact name of the first variable, because it will be selected by user input.

For example, suppose you want a variable "itemArray" to be assigned any of several possible lists of items, depending on what your users select.

If the lists are named itemArray1, itemArray2, itemArray3, and the user selects "1," then itemArray1 should be selected. If 3 is selected, then itemArray3 should be selected. The exact number of lists is configured by a configuration file by the author of the content.

So, you won't know in advance exactly how many different arrays there need to be.

I ran across this problem while building a javascript-based learning module template where there can be several different versions of each module. All possible page in the module are listed in an array but different audiences will get different subsets of the pages. The content author sets up several versions of the page arrays in the configuration file: pageArray1, pageArray2, etc. A parameter in the launch URL determines which version actually is displayed to the user.

The problem is that I as programmer can not know how many versions will ultimately be used by the authors. If I knew the exact number of different lists, I could write "if else" or "switch" statements for them.


if (userSelection == 3){
itemArray = itemArray3
}

Because the exact number of arrays is unknown, it needs to be generated by a statement sort of like this :

var itemArray = pathTo.('itemArray'.+userSelection);

This was my first guess at how to do this, but unfortunately this syntax will not work. But it turns out there is another way to access the identifier of any property of an object: square bracket notation. Dot notation and square-bracket notation are actually parallel means of saying the same thing. According to the comp.lang.javascript FAQ :


//dot notation
var bodyElement = document.body;
//square bracket notation, using an expression
var bodyElement = document["bo"+"dy"];

So the correct way to write this would be:

var itemArray = pathTo['itemArray'+someOtherVariable]

This way, when your users select which set of items they want to see, the right variable name will be generated automatically.


Posted by ellen at 10:13 PM

August 8, 2007

Dynamically assign functions to mouse or other events

Have you ever wanted to assign a function to an onload or onclick event, based on some condition or even from another page?

A project where this came in handy was a multi-page learning module. Each page has previous and next buttons in the header and footer, except for the first and last pages, where the Previous and Next buttons would be hidden as appropriate. Here is the code used to blank out the "previous" button on the first page.

 //if this is page 1
	if (parent.data.pageNumber==1){ 
//set the source for both header and footer "previous" button images to a blank image.
       document.getElementById('hdrPrevBtn').src = 'images/hdr_Prev_btnBlank.jpg';
       document.getElementById('ftrPrevBtn').src = 'images/footer_Prev_btnBlank.jpg';
//then assign an empty function to the onmouseover event. This will override whatever is currently set for the onmouseover event.
	   document.getElementById('headerPrev').onmouseover= function(){ };
	   document.getElementById('footerPrev').onmouseover=function(){ };
	 }
Posted by ellen at 6:47 PM

Streaming Flash Video with open-source software

Flash video has several advantages over other formats, especially the fact that the Flash plugin comes pre-installed on most browsers. For this reason I've been looking at using streaming Flash video in sites which must support a wide variety of browsers and platforms.


However, until recently, the cost of licensing the Flash Media Server software has been prohibitive. An article on Forbes.com notes that the cost for streaming Flash video is sometimes more expensive than it is worth. Fortunately, there is now an open source alternative to Flash Media Server: "Red5," which is not only free but does more than Adobe's Flash Media Server Software. In fact it does more than several Adobe server products put together.

Red5 is an open source Flash Server written in Java that supports streaming audio and video, recording client video streams, remote shared objects (a flash feature that allows collaborative multi-user applications), live stream publishing (webcasting) and much more.

Starting out with simple streaming using the Red5 server:

  1. First go to Red5 Downloads Page and download the latest version for your server platform.
  2. A good tutorial on installing Red5 on Windows is available here. To get to the correct article, find the navigation bar at the bottom of the page, and click to page 2. Click on the button for Red5 Flash Media Server.
  3. Find the file "red5.properties". On my server it is at:
    /serverRoot/Red5/conf/red5.properties

    Change the http.host line to read:

    http.host = your.server.com
    # HTTP
    http.host = your.server.com
    http.port = 5080
    # RTMP
    rtmp.host = your.server.com
    rtmp.port = 1935
    rtmp.event_threads_core=16
    rtmp.event_threads_max=32
    # event threads queue: -1 unbounded, 0 direct (no queue), n bounded queue
    rtmp.event_threads_queue=-1
    rtmp.event_threads_keepalive=60
    rtmp.send_buffer_size=271360
    rtmp.receive_buffer_size=65536
    rtmp.ping_interval=5000
    rtmp.max_inactivity=60000
    # RTMPT
    rtmpt.host = your.server.com
    rtmpt.port = 8088
    rtmpt.ping_interval=5000
    rtmpt.max_inactivity=60000
    # Debug proxy (needs to be activated in red5-core.xml)
    proxy.source_host=0.0.0.0
    proxy.source_port=1936
    proxy.destination_host=your.server.com
    proxy.destination_port=80
    
    (note, these settings are for a server that is NOT also running a standard webserver side by side with red5. For an explanation of how to do that, see this article ) To stream a video, just put the FLV video file into any of the streams directories. For example: /Red5/webapps/oneOfTheApps/streams/yourVideo.flv

    Access the stream by using a flash based video player. A simple example is available for download:

    Download example player file

    The relevant actionscript is in frame1 of the main timeline.



    Additional Resources
  4. General Flash Video information:
    Best Practices for Delivery: Flash Video
  5. Additional Information:
    Subscribe to the Red5 mailing list
  6. Another Red5 forum is located here

  7. Security:
    To see all Red5 mailing list posts on the topic of security, paste the following query into a Google search box:
    site:http://osflash.org/pipermail/red5_osflash.org/ security
  8. Performance:
    Stress test results of publishing a live stream to many clients (May 2007)

  9. Firewall and Shared IIS server issues
    How to run Red 5 on a shared IIS server on port 80

Posted by ellen at 11:51 AM

August 3, 2007

When colspan property doesn't appear to work in Firefox or Safari

When building web applications I often use display styles to show or hide divs or table rows as needed. On one project, I found that the "colspan" property did not seem to work in Firefox or Safari. This was because I had incorrectly used display:block to style the TR element, instead of display:table-row. A demo is below, and the code follows.

display:block

Using display:block on this table. This th should span 3 columns
cell 1 cell 2 cell 3


display:table-row
Using display:table-row on this table. This th should span 3 columns
cell 1 cell 2 cell 3


Code
<table border=1>
<tr style="display:block">
<th colspan="3">
Using display:block on this table. This th should span 3 columns
</th>
</tr>
<tr> 
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
</table>
<table border=1>
<tr style="display:table-row">
<th colspan="3">
Using display:table-row on this table. This th should span 3 columns
</th>
</tr>
<tr> 
<td>cell 1</td>
<td>cell 2 </td>
<td>cell 3</td>
</tr>
</table>
Posted by ellen at 6:31 PM

mySQL error: duplicate entry '127' for key

While working on a php insert-record form I was getting the error:


#1062 - Duplicate entry '127' for key 1

although there were no other records with the id "127" - just the latest one.

Thanks to jc_armor for the answer to this:
"quick question, what's the Data Type of your ID field? It could be a reason that the data type can only handle up to 127 :) "

Changing the field type to "unsigned INT" as recommended in the forum message made the error disappear.

http://dev.mysql.com/doc/refman/5.1/en/numeric-types.html">MySQL Reference Manual: data types: numeric types

Posted by ellen at 5:32 PM