How to reach inside of an iframe with Javascript

I know this stuff is pretty basic, but as always, this post is more self serving than anything else. It’s a bookmark and a resource for my own benefit as well. So here it goes…

Let’s say you have a wufoo form or iframe embedded on your page and you wish to add some events to it or control interactions with javascript. It’s pretty easy to reach inside and gain access to the elements within. Simply do the following:

                _iframe = document.getElementById('iframeId');
                _doc = _iframe.contentDocument || _iframe.contentWindow.document;

The code above accesses the iframe element in your page. Then you simply drill down and select the first available “document” inside the iframes context.

Pretty simple, but very useful. Keep in mind, you’ll need to access the iframe from the same protocol so if the iframe is loading from “https” then your script must also be calling from “https”.

 

Kill Your Node Process

I started writing applescripts to automate some server setup processes. One drawback is that these processes don’t show up in terminal so its hard to kill them later on when you’ve stopped using the service.

In this case I’m talking about running an apple script to start a node server. I’m gonna keep this short and to the point. If you have an errant node process running in the background and can’t find it on your mac do this in your terminal:

ps aux | grep node

It will tell you what processes it found running node. Then you need to kill them off by killing the process id (pid).

sudo kill -9 PID

Where “PID” is a number that represents a process id.

That’s all I have time for, sorry I haven’t been posting but I’ve been super slammed at work.

Remember to call your webkit filters on the parent element

DEMO

I’ve been playing with CSS3 transforms and filters lately, and wanted to point out a little  “gotcha” if you’re working with javascript based animations of these effects.

I had a script that was placing “-webkit-filter” rules on individual elements, and realized it was really slowing things down. So I wrapped everything in a “<div>” tag and suddenly everything worked as intended. It’s because CSS  filters can be applied to the contained elements within a parent faster than they can individually be assigned style rules by javascript.

Just something to rememeber, I put up a little demo of this here.

Prometheus Clock with CSS3 Animations and HTML5 Background Video

DEMO

I was inspired by the photo of some Prometheus technology and decided to spend the weekend building a prometheus style clock to test the animation capabilities of html5 and CSS3.

There are 13 individual CSS3 animations on various timing loops including cubic-bezier and easing functions, one HTML5 video (for background &  ambiancé) and perspective changes (using css transformations). Most of it uses CSS3 animations for rotations, the charts, the glowing red dot in the middle and even the lens flair you see from time to time. Additionally, there’s an html5 video in the background that flashes static about every 15 – 20 seconds. Then I’m using “-webkit-perspective” to adjust the view perspective based on mouse movement. To make the individual layers I’m using “-transform: translateZ([num]px)” to adjust the height of the layers and put “transform-style: preserve-3d;” to keep everything on one plane.

The clock itself is powered by Javascript (no surprise there). In fact you can just copy and past the script into your site, point it at the right element and you’ve got a working clock in minutes!

I’m pretty happy with the way it turned out, the adjustment in perspective totally changes the look and feel, I recommend it’s use sparingly though as I approached the limit of the browser’s capability to handle this well. Hollar if you want more of an explanation, I also have the project up on github.

Best viewed on Safari, also works in Chrome Canary and the animations work with Firefox…but the perspective doesn’t change and I’m not spending any more of my weekend figuring that out…

DEMO

GITHUB

CSS Animations and Keyframes

DEMO

GITHUB

One of our vendors (css + html5 magician named Mike Kellog) did this: http://www.google.com/campaigns/gonegoogle/

It’s impressive on it’s own, but the fact that it’s using nothing but html5 and css3 animations, makes it one of the coolest things I’ve seen on the web lately.

I decided to give it a go… so I made this. I used the same images but decided to write the code from scratch so I’d have a good idea about how it works. I’ll explain below…

Something to note before I get into this. There are going to be a ton of tools coming out that help you create html5 animations. Sencha has a pretty cool one. Adobe (of course) is coming out with one. Even Motorola is getting in the game.  These guys have something that looks interesting as well. Tumult has a tool that might be good for making banners. You may find yourself learning to code something by hand that newer developers will simply animate with a program. As soon as these tools are reliable and html5/css3 specs are the standard, you might consider investing some time to learn the tools…

Anyway, there are a couple tricks to getting started and avoid major headaches.

  1. We want our animations to be “hardware accelerated.” Some CSS animations are not automatically hitting your processor and are instead trying to execute from your browser. To ensure that we hit the cpu, use “-webkit-transform: translateZ(0);”. This will tell your browser to get ready for some 3D action. Even though we may not use it, we want the hardware acceleration that comes with it…
  2. You text will look a little jenky during animations. To help with this, use “-webkit-font-smoothing: antialiased;” to smooth things out while text is flying across your screen.
  3. Sometimes your animation will flash just before it begins. To fight the flash we use “-webkit-backface-visibility: hidden;” which tells the browser, oh heck I don’t know, just use it.

Ok now for the cool stuff. Rather than posting a ton of code here, I made a demo here. Go to it and inspect the element if you want to see what’s going on. I’ll just briefly explain how all this works:

#animate {
    -webkit-animation: animation-name 5.5s ease-in-out 0s;
}

@-webkit-keyframes animation-name {
    0% {  top: -45px; left: 0px; opacity: 0; }
    50% {  top: -45px; left: 0px; opacity: 0; }
    100% {  top: -45px; left: 103px; opacity: 1; }
}

For brevity’s sake I took out alot of the stuff I just talked about. Basically, you attach an animation to the element you want to animate and give it a name. Then you attach a @keyframe to the animation name and specify some style rules to change. In case you’re wondering about the shorthand syntax I’ll explain below:

#animate {
    -webkit-animation: [animation-name] [duration (seconds)] [timing] [delay];
}

That’s it! With this tool, you can build pretty much anything flash can build…except it’ll take you 10x longer and won’t be cross browser compatible. Oh and you can’t use the webcam. Anyway…feel free to head over to the demo and see how it works. I also put it up on github.

DEMO

GITHUB

Chrome Canary Broke Google Search

I recently “upgraded” to canary. It’s super awesome, except that it broke my search bar… Frickin’ Chrome.

So annoying to type and expect the omnibox to search google with chrome canary and then get a page I typed a similar search for in the past. I almost gave up…

Fear not. “There’s a flag for that.” Simply type in your omnibox “chrome://flags”. Scroll about half way down and “Disable ‘shortcuts’ in the omnibox”. This should relieve that headache…phew!

Hit me up if you have any questions or if you believe in science!

Cross Domain True Type Font Files on Firefox

Firefox doesn’t want you linking to true type font files on a different domain than the page your on. There are security issues and copyright issues with doing so. To prevent this they detect if your true type font is cross domain and simple wont display it.

To get around this you need to server your true type font files embedded in CSS. This can be done by base64 encoding the actually true type font (.ttf) file and including it as data source in your CSS file. Great tutorial on how to do this here:

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

One downside, is that your CSS file is going to be larger. This may be mitigated by the face that your browser is making fewer file requests onload.

Interactive Video with HTML5 Video and Canvas

Part of the key to making website experiences seem polished and exciting is adding animated interactive elements. People like to see things that move, that they can click on or drag around. Developers have yet to adopt a consistent amount of this functionality. Part of the reason is Flash has library to aid in the process of making these elements. HTML5 and Javascript simply lack either the library or the graphical user interface to allow developers to easily manipulate and place elements. Old school calculations and physics are still in play here.

DEMO

DOWNLOAD

Below is an HTML5 video manipulation that takes a video and allows the user to pull parts of the video away from it. Probably isn’t browser compatible, but you get the idea…

I’ll start with the basics. What we are doing here is pulling the information from a an HTML5 video and re-writing that information to a canvas tag. In order to get the video to appear in a circle that you click, we need to take the video information in a circle pattern from where you clicked, write it to a canvas element, then make that canvas element follow your mouse around until you release it.

There’s some CSS3 Transitions on things, but for the most part the work is done with javascript. I run through it below:

Basically we set up our “App” with a whole bunch of variables. When the window is finished loading we call App.init() which embeds the video, which is set to autoplay in the HTML Tag, look it up for reference. Then we set up some variables and grab some elements from the page. Then around line 62 we set some even listeners for when we click on the video, when our mouse moves, etc. Finally we call a recursive function called “callback()” when the video is playing. This function does two things, calls another function called “compute frame” which does all the work, then calls itself again to step to the next frame. Repeat.

“computeFrame()” checks to see if we’ve clicked and if we’re moving the mouse. If we are, it draws the video data from canvas1 to canvas3 (canvas 3 is the circular one that follows our mouse). Canvas 1 simply stores the image data, canvas 3 has a border radius like a circle and follows our mouse if we’ve pressed mouse down and not triggered the “mouseup” event.

As always, let me know if you need help!

Injecting jQuery into your Firefox Extension

Took me all morning, but I finally figured out the syntax for including jQuery (local file) in your Firefox extension.

The background is, I’m making a firefox extension for work and I need to be able to update the html on a page. Loading jQuery in an extension is normal just as simple as a another data include, but with contentScripts you load files to be injected directly into a users page on their current tab.

It’s simple enough, make sure you download a copy of jquery and store it in your “data” folder of your addon. Then in main.js it goes something like this:

var widgets = require("widget");
var tabs = require("tabs");
var self = require('self');

var widget = widgets.Widget({
    id: 'modify-page',
    label: 'Modifies a Page',
    contentURL: 'http://www.mozilla.org/favicon.ico',
    onClick: function() {
        tabs.activeTab.attach({
            contentScriptFile: [self.data.url('jquery.js'), self.data.url('app.js')]
        });
    }
});

The key here is loading items in array form into “contentScriptFile”. It’s not obvious, nor is it intuitive but that’s the way it was built… Hurray Firefox!

Particle System Starter Package

Visit the Github Project

If you want a starter package for particle systems with Processing, here it is. I’ve been playing with particle systems (thanks RJ Duran) and found a need for a default particle system that I can modify. I’m sure if I searched hard enough, there’s something online that’s already out there, but whatever.

This post is based on a tutorial here: http://www.learningprocessing.com/examples/chapter-23/example-23-2/

If you want to know how it works, it’s actually pretty simple. You create an array of objects called “particles.” Each particle knows it’s own trajectory, size, color, shape…etc. Then you create a loop (in processing this function is called “draw()”) and run through the array updating each particle and drawing it to the screen. So really you have a loop within a loop.

I’m not going to get too much into the code, but here’s a brief explanation:

Add the particles…

int particleCount = 2000;
int maxSize = 20;
ArrayList particles;
PVector m;

void setup() {
  size(1280, 960);

  particles = new ArrayList();

  for(int i = 0; i < particleCount; i++) {
    particles.add(new Particle());
  }

}

Create a particle class…

class Particle {

  // private vars
  float x, y, xspeed, yspeed, r, d;
  color c;
  float md;
  PVector p;

  Particle() {
    x = random(1, 1279);
    y = random(1, 959);
    xspeed = random(.001, 10);
    yspeed = random(.001, 10);
    r = random(1, maxSize);
    c = color(random(50, 254), random(50, 254), random(50, 254), 75);
  }

  void run() {

    calcMouse();

    if(x > width || x < 0) {
      xspeed = xspeed * -1;
    }

    if(y > height || y < 0) {
      yspeed = yspeed * -1;
    }

    x = x + (xspeed * (cos(md * 10)));
    y = y + (yspeed * (sin(md * 10)));
  }

  void display() {
    fill(c);
    ellipse(x, y, r, r);
  }

  void calcMouse() {
    p = new PVector(x, y);
    d = PVector.dist(p, m);
    if(d > 0) {
      md = ((1/d) * 100);
    }
  }
}

Loop through each particle and call the particle’s draw function…

void draw() {

  background(255);
  noStroke();
  smooth();
  m = new PVector(mouseX, mouseY);

  for(int i = 0; i < particles.size(); i++) {
    Particle p = (Particle) particles.get(i);
    p.run();
    p.display();
  }
}

Pretty simple once you break it down…

LMK if you have any questions, I haven’t been good at getting back to people but here’s a git repo if your interested:

Download from Git