Tips and Tricks About Computers, Web Development, Linux, the Internet and the Like
Javascript
This section contains javascript snippets and scripts
jQuery and jQuery UI in your Grease Monkey scripts.
Jul 16th
Not all websites are made equal. Unfortunately, some of those websites are ones we’re required to use. Be it our job, our interests or the undiscovered, web-browsing can be the orgeon trail of the internet. Cultivating the atmosphere to work for us and bringing the right tools along for the journey are essential for survival, if you’re a pioneer.
I’m tired of websites that don’t provide, can’t provide or will never provide. I’ve called in my boys, Stylish and Grease Monkey on the front lines. However, beyond the crazy happenstance that another user might share a solution to your issue on userstyles.org or userscripts.org you could be left in the cold, without the right tools. I won’t go into detail on Stylish in this post but you might not even need it after you see the script.
Since I’m already connected with Google every which way in my life, why not pretend like the Internet is a big party and websites are your friends. Introduce jQuery from Google’s CDN to other friends (websites) that don’t already know jQuery and jQuery UI and make it personal.
That was the driving force behind this Grease Monkey Script, which was derived from mashing together strd6′s script and Joan Piedra’s script with an update to the latest versions of jQuery and jQuery UI.
// ==UserScript==
// @name jQuery and jQuery UI
// @author Tyler "-z-" Mulligan
// @version 0.5
// @namespace http://www.doknowevil.net
// @description jQuery 1.6.2 and jQuery UI 1.8.4 loaded from google's CDN with redmond theme.
// @include http://www.website.com/*
//
// @resource jQuery https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// @resource jQueryUI https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js
//
// @resource jQueryUICSS http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/jquery-ui.css
//
// @resource ui-bg_inset-hard_100_fcfdfd_1x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_inset-hard_100_fcfdfd_1x100.png
// @resource ui-bg_gloss-wave_55_5c9ccc_500x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png
// @resource ui-bg_glass_85_dfeffc_1x400.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_glass_85_dfeffc_1x400.png
// @resource ui-bg_glass_75_d0e5f5_1x400.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png
// @resource ui-bg_inset-hard_100_f5f8f9_1x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_inset-hard_100_f5f8f9_1x100.png
// @resource ui-bg_flat_55_fbec88_40x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_flat_55_fbec88_40x100.png
// @resource ui-bg_glass_95_fef1ec_1x400.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_glass_95_fef1ec_1x400.png
// @resource ui-icons_469bdd_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_469bdd_256x240.png
// @resource ui-icons_469bdd_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_469bdd_256x240.png
// @resource ui-icons_d8e7f3_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_d8e7f3_256x240.png
// @resource ui-icons_6da8d5_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_6da8d5_256x240.png
// @resource ui-icons_217bc0_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_217bc0_256x240.png
// @resource ui-icons_f9bd01_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_f9bd01_256x240.png
// @resource ui-icons_2e83ff_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_2e83ff_256x240.png
// @resource ui-icons_cd0a0a_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_cd0a0a_256x240.png
// @resource ui-bg_flat_0_aaaaaa_40x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_flat_0_aaaaaa_40x100.png
// @resource ui-bg_flat_0_aaaaaa_40x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_flat_0_aaaaaa_40x100.png
// ==/UserScript==
var $;
// Inject jQuery into page... gross hack... for now...
(function() {
if (typeof unsafeWindow.jQuery == 'undefined') {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
var jQuery = GM_getResourceText('jQuery');
var jQueryUI = GM_getResourceText('jQueryUI');
script.innerHTML = jQuery + jQueryUI;
head.appendChild(script);
}
GM_wait();
})();
// Check if jQuery's loaded
function GM_wait() {
if (typeof unsafeWindow.jQuery == 'undefined') {
window.setTimeout(GM_wait, 100);
} else {
$ = unsafeWindow.jQuery.noConflict(true);
addUIStyles();
letsJQuery();
}
}
function addUIStyles() {
var head = document.getElementsByTagName('head')[0];
var resources = {
'ui-bg_inset-hard_100_fcfdfd_1x100.png': GM_getResourceURL('ui-bg_inset-hard_100_fcfdfd_1x100.png'),
'ui-bg_gloss-wave_55_5c9ccc_500x100.png': GM_getResourceURL('ui-bg_gloss-wave_55_5c9ccc_500x100.png'),
'ui-bg_glass_85_dfeffc_1x400.png': GM_getResourceURL('ui-bg_glass_85_dfeffc_1x400.png'),
'ui-bg_glass_75_d0e5f5_1x400.png': GM_getResourceURL('ui-bg_glass_75_d0e5f5_1x400.png'),
'ui-bg_inset-hard_100_f5f8f9_1x100.png': GM_getResourceURL('ui-bg_inset-hard_100_f5f8f9_1x100.png'),
'ui-bg_flat_55_fbec88_40x100.png': GM_getResourceURL('ui-bg_flat_55_fbec88_40x100.png'),
'ui-bg_glass_95_fef1ec_1x400.png': GM_getResourceURL('ui-bg_glass_95_fef1ec_1x400.png'),
'ui-icons_469bdd_256x240.png': GM_getResourceURL('ui-icons_469bdd_256x240.png'),
'ui-icons_469bdd_256x240.png': GM_getResourceURL('ui-icons_469bdd_256x240.png'),
'ui-icons_d8e7f3_256x240.png': GM_getResourceURL('ui-icons_d8e7f3_256x240.png'),
'ui-icons_6da8d5_256x240.png': GM_getResourceURL('ui-icons_6da8d5_256x240.png'),
'ui-icons_217bc0_256x240.png': GM_getResourceURL('ui-icons_217bc0_256x240.png'),
'ui-icons_f9bd01_256x240.png': GM_getResourceURL('ui-icons_f9bd01_256x240.png'),
'ui-icons_2e83ff_256x240.png': GM_getResourceURL('ui-icons_2e83ff_256x240.png'),
'ui-icons_cd0a0a_256x240.png': GM_getResourceURL('ui-icons_cd0a0a_256x240.png'),
'ui-bg_flat_0_aaaaaa_40x100.png': GM_getResourceURL('ui-bg_flat_0_aaaaaa_40x100.png'),
'ui-bg_flat_0_aaaaaa_40x100.png': GM_getResourceURL('ui-bg_flat_0_aaaaaa_40x100.png')
};
var style = document.createElement('style');
style.type = 'text/css';
var css = GM_getResourceText ('jQueryUICSS');
$.each(resources, function(resourceName, resourceUrl) {
console.log(resourceName + ': ' + resourceUrl);
css = css.replace( 'images/' + resourceName, resourceUrl);
});
style.innerHTML = css;
head.appendChild(style);
}
// All your GM code must be inside this function
function letsJQuery() {
//alert($); // check if the dollar (jquery) function works
//alert($().jquery); // check jQuery version
$("
<div id='example' class='flora' title='This is my title'>I'm in a dialog!</div>
").dialog({
buttons: {
"Ok": function() {
alert("Ok");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
}
I also wanted to use this script with Chromium browser, the open-source version of Google Chrome. I found the TamperMonkey Extension for Chrome. Stylish is also available for Chrome.
Customizing Colors for Your .bashrc
Oct 21st
I’m working on organizing my dotfiles and part of that process has led me to clean up the way I address colors. I came across a few good sources, for .bashrc colors and decided it’d be better to create my own. I would like to have used the ones I found on the Arch wiki but the aliases were a bit odd to me. They also break consistency as you scroll down. I’m not sure if this is due to it being a collaborative wiki or it’s a way to teach multiple syntaxes/approaches. In either case I figured the aliases weren’t as “standard” as I thought they might be in that world.
So I decided to copy them the best of the bunch into geany and modify them with regular expressions. I used column selection to speed up some of the tasks, such as Title Case formatting and typing the prefixes.
# define colors Black='\e[0;30m' # Black / Regular Red='\e[0;31m' # Red Green='\e[0;32m' # Green Yellow='\e[0;33m' # Yellow Blue='\e[0;34m' # Blue Purple='\e[0;35m' # Purple Cyan='\e[0;36m' # Cyan White='\e[0;37m' # White BBlack='\e[1;30m' # BBlack / Bold BRed='\e[1;31m' # BRed BGreen='\e[1;32m' # BGreen BYellow='\e[1;33m' # BYellow BBlue='\e[1;34m' # BBlue BPurple='\e[1;35m' # BPurple BCyan='\e[1;36m' # BCyan BWhite='\e[1;37m' # BWhite UBlack='\e[4;30m' # UBlack / Underline URed='\e[4;31m' # URed UGreen='\e[4;32m' # UGreen UYellow='\e[4;33m' # UYellow UBlue='\e[4;34m' # UBlue UPurple='\e[4;35m' # UPurple UCyan='\e[4;36m' # UCyan UWhite='\e[4;37m' # UWhite BGBlack='\e[40m' # BGBlack - background BGRed='\e[41m' # BGRed BGGeeen='\e[42m' # BGGreen BGYellow='\e[43m' # BGYellow BGBlue='\e[44m' # BGBlue BGPurple='\e[45m' # BGPurple BGCyan='\e[46m' # BGCyan BGWhite='\e[47m' # BGWhite NC='\e[0m' # Text Reset / No Color
Here is a test case:
for c in {,B,U,BG}{Black,Red,Green,Yellow,Blue,Purple,Cyan,White}; do echo -e ${!c}$c${NC}; done; echo -e "${NC}"Here is the same test case without the aliases
for c in {0,1,4}\;{30..37} {40..47}; do echo -e \\e[${!c}${c}m${c}m\\e[0m; done;Here's a PS1 you can try it with
PS1="${debian_chroot:+($debian_chroot)}\[${BWhite}\]\u\[${NC}\]\[${Yellow}\]@\[${White}\]\h\[${NC}\]:\[${BBlue}\]\w\[${NC}\]$ "I plan to use these quite often as I build out my .bash_aliases but the most immediate use you might find useful is the PS1 generation tool I’ve setup an alpha of http://interwebninja.com/ps1-o-matic/
ps1-o-matic-0.5 video in action
Below is a screenshot of how I’m revising the script to use only javascript objects rather than relying on html inputs to store values:
I’m currently at the point where I’m using jquery ui’s draggable and sortable to allow segments to be moved around but I have nothing worth sharing yet. Stay tuned, I’ll be checking the source into my github account soon.
Resources for Learning About jQuery Functions and a Note About Callbacks
Sep 7th
Though it’s still using 1.2.6 (with current jQuery at 1.3.2), visualjquery.com has always been a favorite of mine for it’s simple and elegant layout. Some of the functions leave some documentation to be desired but after working with jQuery for a while, you begin to develop a taste for what is needed. Unfortunately, next to this issue and despite it’s strong layout, there is one other thing this application that takes this application down from strongest candidate. It cannot look into the future and as such, some functions are outright missing.
The jquery API is a somewhat familiar interface, featuring the latest version, the freshest functions and some decent documentation. Another in-depth (but outdated) resource is the old api-browser. Of course, there exists the Main Wiki Documentation, which also provides Alternative Resources. I think I’ll find myself using http://api.jquery.com/ most often despite it lacking the multi-panel style selection. It integrates it’s documentation with jsbin.com for testing / playing with code which is a nice touch.
Now a note about callbacks while we’re on the subject of jQuery. I find myself using them quite often, with ajax specifically. Understanding how to nest functions in jQuery allows you to do more things in terms of user or application response. When using ajax, you’ll often want to fade out content, do some processing, report the data back and have it fade back in nicely rather than a quick blink that can cause discomfort for a user. If you aren’t familiar with a callback, it’s a function that’s executed when the current function finishes.
Below I will break down this common scenario.
You have your HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="my_ajax.js" type="text/javascript"></script>
<style>
#ajax_loader {
display:block;
height:90px;
width:90px;
background:url('http://imgur.com/KW8ZD.gif') no-repeat 0 0;
}
</style>
</head>
<body>
<div id="ajax_loader"></div>
<div id="ajax_content"></div>
<a href="#" id="my_link">click me</a>
</body>
</html>
your php (or whatever language returning the data file) (my_page.php)
<? echo "hi, I was loaded with ajax!"; ?>
and your javascript (my_ajax.js) that glues them together
// $(function() is shorthand for $(document).ready(function () {
$(function() {
$("#ajax_loader").hide();
$("#my_link").click(function() {
$("#ajax_loader").fadeIn();
$("#ajax_content").fadeOut();
$("#content").load("my_page.php",function() {
$("#ajax_loader").fadeOut();
$("#ajax_content").fadeIn();
});
});
});
Here we can clearly see how all functions are nested into one root, the document ready function. We go two more deep here, using the click event and then the load callback. Many functions allow for callbacks, search the documentation for the best way you think you should be nesting them. I hope this helps to clarify some of the basics in AJAX using jQuery, good luck.
Reducing pageweight by compressing production css and js files
Sep 4th
I’ve been a little obsessed with improving the speed of web pages via minified javascript and css files. YUI’s team not only agrees with this, they recommend gzipping your minified js and css files. For a while I’ve been calling YUI Compressor inside my push to production scripts to do the deed. However, with this new mention of gzipping, I think might be exploring other options such as the method mentioned on the page which originally linked me to that awesome YUI writeup; minifying and gzipping javascript and css on the fly using php.
Litebox 1.0 Released
Jul 3rd
I know… this seems silly because I released 1.0a today… but I honestly didn’t think I’d get this done today.
1.0a links are down for a short while. I want to clean up the script a bit.
litebox 1.0 get it while it’s hot!
