Justin McCandless

Update: This project has been updated yet again, check out this post: Open Source jQuery Carousel Awhile back I posted a jQuery carousel type project that I wrote, eloquently called Scrolling Image Bar. I went back and rewrote a bunch of it, making it more solid, usable, and featured, so I thought I would make another post about it to talk about the changes and how to use it. github: github.com/justinmc/jQuery-Open-Carousel demo: justinmccandless.com/demos/jQuery-Open-Carousel/index.html Most proudly, the project is now a bit more robust.

The other weekend I found myself feeling unsatisfied about the data management of a javascript based side project I'm working on, and I decided to take the day and get organized. I wanted to set it up in an available framework, so I jumped on the opportunity to try out backbone.js since I had read about it previously. In this article, I'll show the process of getting the most basic backbone.js setup just for organizing your data.

Here’s a simple jQuery project I packaged up to provide a more/less button to expand and contract a div with lots of text.  Yet another simple concept, but implemented very nicely and easy to reuse. Github:  http://github.com/justinmc/More-Less-Overflow Live Demo:  http://www.justinmccandless.com/demos/More-Less-Overflow/index.html Go ahead and check out the demo so you know what we’re talking about.  There you go, a simple expanding and contracting div to view more content when necessary.  It has a few nice features besides just changing the height of a div though, so I’ll go over them here.

I've had a bit more trouble than I should have getting HTML objects to intuitively fade in or out when you mouse over them. When I finally decide to invest some actual time on such a small project, I got some clean and solid code as a result, so I thought I would share it here. Here's what I'm talking about: $(document).ready(function() { $('.mouseme_final').mouseenter(function() { $(this).children('.mouseme_final_over').stop(); $(this).children('.mouseme_final_over').fadeOut(0); $(this).children('.mouseme_final_over').fadeIn(); }); $('.mouseme_final').mouseleave(function() { $(this).children('.mouseme_final_over').stop(); $(this).children('.mouseme_final_over').fadeIn(0); $(this).children('.mouseme_final_over').fadeOut(); }); }); Mouse over me!

Sencha released some big changes in their build process with Sencha Touch 2.0, but unfortunately right now there is an obvious lack of documentation on how to use it.  After a lot of work building my app, I thought I’d write out some pointers for others having similar problems building Sencha Touch apps. <br> <br> First of all, there are a couple of things that you need to make sure you're doing right before you start.<br> <br> <br> Include all dependencies in app.json, and none in index.html.  Do not do any normal js or css includes in index.html like these: <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <br> Instead, include these files in Sencha Touch's app.json in the js and css arrays.&nbsp; Be sure to set "update": "delta" unless you don't want a file to be updated.<br> However, do not just copy the app.js format and say “bundle”: true on a js file you’re including.  I made this admittedly stupid mistake, and my app would not start when I built to the package and native environments.  I got console errors saying “Uncaught Error: [Ext.Loader] Failed loading ‘file:///Users/apps/Documents/repositories/smartots/www/ParentAppActivityFeedPack/www/sdk/src/event/Dispatcher.js’, please verify that the file exists”.  Removing that “bundle”: true line fixed the problem after a ton of troubleshooting.

While never getting quite as much love as I would have liked to give it, this blog has been here while I recorded my life for the past five years or so.  I started it as an undeclared freshman to graduated electrical engineer, living in four different countries. Something. And for the first time, I've moved the blog off of a 100% custom hand coded platform and onto a framework. Why the change?  At the time I wrote the first draft of this site, I didn't actually have that much interest in keeping a blog.  I even registered this domain without having an idea of what I would put on it .  But the reason why I wound up spending hundreds of hours of my time coding this site, probably significantly more time than I've spent writing posts, is just because I wanted to learn.  This blog has always been a platform for me to learn about web development, and the decision to move to Cake PHP continues this.

I’m always testing sites in different browsers, and besides the expected headaches caused by browsers like IE, I also tend to waste a lot of time just getting everything I need running. With this setup I started using, you can test IE6, IE7, and more in a way that’s free, officially supported by Microsoft, and allows you to have all of the browsers you want installed at the same time. You’ll need a computer running Windows 7 Professional, Enterprise, or Ultimate (because Microsoft only let’s you run Windows XP for free on these editions.

A simple bit of javascript, but I just wanted to package it up nicely and post it here since I find myself repeatedly going back and looking this up.  Check the links or scroll down if you just want the code. Source code: github.com/justinmc/confirm-link Live demo: justinmccandless.com/demos/confirm-link/index.html   If you want your users to be presented with a yes/no kind of choice before proceeding, javascript's confirm() function might be a nice simple way to accomplish that.  An alert style box will pop up with two buttons, OK and Cancel, and the result will be passed back to javascript.  I often use this to make the user verify their choice on things like delete buttons where a simple misclick can have really bad results.  Customization is pretty limited, but if this fits the requirements for you then you can't get much more simple.  Here's the javascript (using jQuery):   $(document).ready(function () { $('a[data-confirm-link]').click(function () { if (confirm($(this).data('confirm-link'))) window.location = $(this).attr('href'); return false; }); });   Then, any time you include the data-confirm-link attribute on an <a> tag, the user will be prompted with a confirm box with the text of the attribute.  So the html might look like this: <a data-confirm-link="Are you sure?

code: http://github.com/justinmc/Rank-Form demo: www.justinmccandless.com/demos/Rank-Form/index.html I wrote this quick open source project to be a nice way to allow users to rank a series of options in an HTML form.  It just uses jQuery in addition to simple HTML and CSS.  Here’s an example of how it works:   1     Bronze  ▼ ▲  2     Platinum  ▼ ▲  3     Gold  ▼ ▲  4     Silver  ▼ ▲  5     Diamond  ▼ ▲  You can use the arrows to swap options up and down on the list, and a nice animation moves them for you and changes the numerical rank.  It uses an automatically updated hidden input for each option, so you can stick this directly in a form and use it right away.  Of course everything is scalable and customizable so it's easy to change the look of things or the number of options.

Here is a simple Firefox trick. Sometimes a tab in Firefox with a faulty flash object or something similar will start eating up a ton of resources and causing Firefox to run slow. You can check out how much memory individual tabs are using with by entering the following into the url bar, and then kill the malicious tab. I like to keep it open in a tab and keep track of Firefox’s memory usage.