Oh my god. It's full of code!

jQuery UI

Javascript Console

So I just wrapped up another Cloudspokes challenge.I spent way too much time on this. Really it’s just a dumb little $300 dollar challenge, and I think I put like 10 or so hours into this, but whatever, it was fun. I probably went overboard, but I think I made something actually kind of useful. First, before I get too deep into it, check out the challenge details.

http://www.cloudspokes.com/challenges/1999

The basic idea being that they wanted a way to run javascript on a web page, similar to Firebug or the Chrome developer tools. They also suggested adding a list of the user/developer defined functions and maybe an auto complete system to make entering the code to run easier. I wanted to take it a step further and build it all as pure javascript so that it could be turned into a bookmarklet. With it all delivered as a bookmarklet that means you can inject this console on any webpage anywhere without needing access to the source and start running functions on it. You don’t need to include any additional libraries or hooks or anything. You need NO access to the source code of the webpage for this to work, which is what really makes it cool.

It does this by using javascript to dynamically inject jQuery, jQuery UI, and bootstrap (only if needed, it’s smart enough not to double include libraries), and builds the console directly by inserting it into the DOM. It uses some tricky looping and evaluation to find all exisitng functions, list them, and get the function bodies as well. It creates an input area where javascript code can be entered, and the results are displayed in a console using intelligent return type handling. Using a bit of bootstrap for autocomplete, buttons, and the collapsible side list view it creates a simple yet powerful interface. As a neat side effect I found what is probably the end all, be all way to inject scripts that may or may not be present and rely on each other. I’m hoping to make a blog post out of that technique pretty soon. It uses some neat recursion and callbacks to work it’s magic and the end result is very efficient and reliable.

Anyway, check out the video for a better understanding/demo of what it can do.

http://www.screencast.com/t/jVUo5Qsh5 <- Demo video

To try it out, make a bookmark a new bookmark, and set it’s path to this. Sorry I can’t make a bookmarklet link here for you, wordpress keeps killing the link.  It might take a little bit of time to load on very complicated pages. Also it does support pressing up and down in the input box to flip between previously entered commands.

javascript: (function(){var jsCode=document.createElement('script');jsCode.setAttribute('src','https://dl.dropbox.com/u/65280390/jsConsoleScript.js');document.body.appendChild(jsCode);}());

January 6, 2013 | Categories: CloudSpokes, Javascript, jQuery, jQuery UI | Tags: , , , , | Leave a comment

jQuery UI Checkbox better feedback

Hey all,
This is just a quick snippet for any people out there googling how they can make jQuery UI checkboxes provide better feedback to users. One weakness is that the default checkbox in jQuery UI just looks like a button. It doesn’t really indicate to the user that it is in fact a check box. I was developing an application and watching the end user attempt to use it. They skipped right over the checkbox because they thought it was a button! Even worse, after I told them it was a checkbox, they couldn’t keep track of if it was actually on or off, because the change in style isn’t exactly obvious. So anyway, I knew I needed to somehow give the user more tips that it was in fact an item they can interact with. My fix uses stock UI icons that change based on the checked state to help the user know exactly whats up. Just jam this in the onload portion of your script and the change should be pretty easily apparent.

$( "input[type=checkbox]" ).button({ icons: {primary:'ui-icon-circle-minus'} });
    $( "input[type=checkbox]" ).click(function(){
        if($(this).is(':checked'))
        {
            $(this).next().children('.ui-button-icon-primary').addClass("ui-icon-circle-check").removeClass("ui-icon-circle-minus");
        }
        else
        {
            $(this).next().children('.ui-button-icon-primary').addClass("ui-icon-circle-minus").removeClass("ui-icon-circle-check");
        }
    });

Or for a full example page

<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/redmond/jquery-ui.css" type="text/css" media="all" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script>

<script>
$(function() {
    $( "input[type=checkbox]" ).button({ icons: {primary:'ui-icon-circle-minus'} });
    $( "input[type=checkbox]" ).click(function(){
        if($(this).is(':checked'))
        {
            $(this).next().children('.ui-button-icon-primary').addClass("ui-icon-circle-plus").removeClass("ui-icon-circle-minus");
        }
        else
        {
            $(this).next().children('.ui-button-icon-primary').addClass("ui-icon-circle-minus").removeClass("ui-icon-circle-plus");
        }
    });
});
</script>
</head>
<body>
<form name="testForm">

<input type="checkBox" id="myCheckbox"><label for="myCheckbox">Click me Beyatch!</label>

</form>
</body>
</html>

Anyway, hopefully this helps someone. Feel free to of course expand on this example and let me know if you are able to make it more efficient.

March 1, 2012 | Categories: jQuery, jQuery UI | Tags: , , , , , | 1 Comment