New Media Fun

Interesting New Way to Use a Computer

Posted by admin under Fun

A note on jQuery .unique()

Posted by admin under HTML

I was dealing with an array full of years (2009, 2009, 2010, 2010, 2009, 2010), and I wanted to easily remove duplicate entries in the array.

I found that jQuery had a .unique() function that removes duplicates. However, there if the duplicates are not in a sequential order, it will miss some of the items in the array.

var yearArray = new Array(2009, 2009, 2010, 2010, 2009, 2010);
$.unique(yearArray);

This returns 2009, 2010, 2009, 2010. The function missed a couple of the duplicates. This is simply fixed by sorting the array and then passing it into the unique function.

var yearArray = new Array(2009, 2009, 2010, 2010, 2009, 2010);
yearArray.sort();
$.unique(yearArray);

This should then return 2010, 2009. Hope this helps.

!! UPDATE !!
I hate Internet Explorer. I just discovered that the .unique() function works with DOM objects and because IE sucks, it doesn’t work properly. So, I had to replace the .unique() with the following code:

More code, but it works in all browsers now.

Thanks to Developer Snippets for the code

1 COMMENT

jQuery SWFObject Plugin and AllowFullScreen

Posted by admin under Flash

UPDATE! The SWF Object plugin for jQuery has been recently updated to include allowfullscreen! Click here to get it!

I am a big fan of jQuery and when ever I am using JavaScript, it is the first engine I go to. Lately, I have been building a video player that has full screen functionality. Normally, I would use jQuery SWFObject but for some reason I was getting errors when I clicked on the button for the video to go to full screen. A quick inspection of the plugin’s code revealed that full screen functionality hadn’t been included.

It turned out adding ‘allowFullScreen’ to the plugin’s code was easier that I originally anticipated. The plugin uses a object that contains information like the SWF URL, width, height, wmode, flashvars, etc. All I needed to do was add an extra line of code that would grab ‘allowFullScreen’ value and integrate it into the rendered code to display the flash file.

I used the uncompressed plugin JS file to make the adjustments needed to make full screen to work.

Find this section of code in the JS file:

attrs: {
id: obj.id,
name: obj.name,
height: obj.height || 180,
width: obj.width || 320
},
params: {
wmode: obj.wmode || 'opaque',
flashvars: obj.flashvars
}

Insert the following code after wmode:

allowFullScreen: obj.allowFullScreen || 'false',

The new code should look like this:

attrs: {
id: obj.id,
name: obj.name,
height: obj.height || 180,
width: obj.width || 320
},
params: {
wmode: obj.wmode || 'opaque',
allowFullScreen: obj.allowFullScreen || 'false',
flashvars: obj.flashvars
}

Now the plugin will use the allowFullScreen correctly. This is a sample of how to use it:

$(document).ready(function(){
$("#flashContent").flash(
{
swf:'sample.swf',
width:'800',
height:'600',
wmode: 'window',
allowFullScreen: 'true'
}
);
});

Finally, you will want to compress the revised code. I suggest going over to Google Code and using their Closure tool.

1 COMMENT

Updated jQuery Cheat Sheet

Posted by admin under Education, HTML

Impulse Studios have an updated Cheat Sheet for jQuery 1.4.

Here is the PDF

Or a handy HTML version at Future Colors.

ADD COMMENTS

Better Swap Image with jQuery

Posted by admin under HTML

Today, I needed to create a swap image for a left hand navigation. I am already using jQuery and I didn’t want to use Dreamweaver’s clunky image swap code. After some searching I found a great and simple snippet of code that will allow me to swap images all the images in the navigation with only 4 lines of code while using jQuery.

$(".img-swap").hover(
function(){this.src = this.src.replace("_off","_on");},
function(){this.src = this.src.replace("_on","_off");
});

Be sure to have a naming convention with your images. Images for off states will be xxxxxx_off.jpg and the hover state xxxxxx_on.jpg. Also add the class “img-swap” to the images.

Big thanks to Design Chemical, click on the link to see their example.

ADD COMMENTS

BulkLoader and CSS

Posted by admin under Flash, HTML

I have become a big fan of using BulkLoader. It is a great class library that allows me to load many different types of files in a controlled and organized fashion. However, it isn’t clear on how to load CSS.

I assumed I would be able to use a “getCSS” function, but there isn’t one coded into the class structure.

To get around this I used the loaded CSS file as a String and then used the parseCSS() function to convert the String into a usable CSS Object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// create the loader instance
var loader:BulkLoader = new BulkLoader("cssLoading");

var css:StyleSheet;
var cssURL:String = "myCSS.css";

loader.add(cssURL);

...

// when loader is complete
function parseCSS():void{
// place the loaded CSS into a string
var cssContent:String = String(loader.getContent(cssURL))

css = new StyleSheet();
css.parseCSS(cssContent);

// trace should output '[object StyleSheet]'
trace(" Loaded Style Sheet: " + css);
}

Hope this can be helpful for others.

3 COMMENTS

Short Documentary on Mendal (RepRap)

Posted by admin under 3D, Education

This is the future of in home production:

Some day I will get my hands on this or the Makerbot

ADD COMMENTS

FlashVars Simplified

Posted by admin under Flash

Today, I was having a frustrating time finding a clear method flashVars code snippet. With some trial and error, I finally had success with a simple method to grab variables from the html embedding code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

package{
import flash.display.LoaderInfo;
import flash.display.Sprite;

public class DocumentClass extends Sprite{
private var _myflashVar:String = LoaderInfo(root.loaderInfo).parameters.myVar;

public function DocumentClass(){
if(_myflashVar == null){
_myflashVar = "ERROR"
}
}
}
}

Hope this helps anyone out there.

ADD COMMENTS

Learning Blender

Posted by admin under 3D, Education

For a large part of my time the last 2 weeks have been focused on learning Blender. A free open source 3D tool that is incredible powerful and complex.

The learning curve is aided by Lynda.com’s exceptional tutorials for Blender and Lee Brimelow’s tutorial on GotoAndLearn. When creating 3D in flash, Lee’s tutorial shows you how to build a model in Blender and bring it into flash using Papervision. Very helpful in understanding the process from beginning to end.

One trick I have found helpful is after you have exported the UV map outlines in Blender (UVs –> Scripts –> Save UV Face Layout), in Photoshop keep the layer with the outlines on the top and change the layer blend mode to “Color Burn”. This removes all the white and keeps the outline visible.

Otherwise, Merry Christmas Everyone!

ADD COMMENTS