Posts in Category: JavaScript

Dirt-Simple Overlay

Does your system get all whim-wham when your users get all clicky? Have you inherited a system that gets all whim-wham when your users get all clicky? Hold those extra clicks at bay with this dirt-simple overlay (just add JQuery).

Hello Backbone.js

I am wrapping up a project in which I created a custom model-view-presenter solution that was tied to a ColdBox controller and model. As much fun as I had reinventing the wheel I plan working with an established Javascript framework in the future. I am in the process of evaluating Backbone.js in my free time. Here is a simple Hello World thing that I whipped up…

Menubar_and_localhost_8500_jswot_backbone.html_and_backbone.html

Note that I was using this tutorial. Be warned, it has more than a few syntax errors. Those looking for a more comprehensive tutorial should check out “Up and Running with Backbone.js“.

Export Dygraph To PNG

Dygraphs is a fast and easy-to-use JavaScript charting library. Check out lines 22-35 below to see just how easy it is to make a chart with Dygraphs. If you want to export your charts as images for whatever reason you can grab the handy JavaScript file over at http://cavorite.com/labs/js/dygraphs-export/

From Canvas to PDF via AJAX

If you are ever in the peculiar position of having to convert a canvas tag into an image, post it via AJAX to a CFC and then generate a PDF then I have your solution.

The first file below is the HTML and JavaScript needed to generate a canvas image, convert it to a JavaScript image and ship it to CFC Land via AJAX. The second file is the first (non-functional) version of the CFC. The third file is the working version of the CFC. Hit me with a comment if you have any questions or have a more concise (or different) way of solving this problem. I also shared this problem…and the answer over at Stack Exchange.

UPDATE: Scroll down to the bottom of the code for a bonus SVG-to-Canvas-to-PNG conversion.

Bonus Code: SVG-to-Canvas-to-PNG!

Hacky Zurb Foundation 4 Checkbox Fixer

After screwing around with Zurb Foundation 4 for a time I have to say that it is not without it’s quirks. One of them is not being able to consistently write to a checkbox. Here is my hacky work-around. Pardon the ‘this’ scope…this method is part of a utility object that I created in an effort to handle all of Foundation 4’s quirks in one place. The benefit of delegating responsibility in this manner is that when/if I upgrade the code base to Foundation 5 (or perhaps Twitter Bootstrap) I will only have to change one object.

Supposedly this is fixed in Foundation 5.

“I Object To Objects By Reference” or
“The Power Of jQuery Compels Me”

I’m working on a sexy piece of software at the moment. It’s for somebody else so I can’t share the details. What I can say is that I was tasked with creating a custom object-oriented MVC JavaScript framework. I’m deep in the heart of AJAX country and am really enjoying using JavaScript and jQuery.

I ran into a gotcha today when attempting to overwrite a JavaScript object with a blank one. Here is an example that highlights my issue…

As it turns out these lines of code were the offenders

These ‘copies’ of the aDeveloper object weren’t making copies at all…they were making a ‘shallow copy’ or a ‘copy by reference’ each time. This means that when I modified this.chris to say ‘I like monster movies’ I was also modifying the aDeveloper object.

In order to make a true copy (or ‘deep copy’), I struck down the offending code and wielded the power of jQuery.

jQuery to the rescue! Here’s the entire solution.

OK codeslingers, that’s it for now. Go make something great!