Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

I have tried quite a bit of research on this because this is my first Greasemonkey script:

// ==UserScript==
// @name           Codecademy Resizeable Code
// @description    Adds jQuery resizable to editor
// @namespace      http://chrisneetz.com
// @include        http://www.codecademy.com/courses/*
// ==/UserScript==

$('#editor').resizable({ alsoResize: ".ace_scroller, .ace_editor, .ace_content, .ace_sb, .ace_print_margin_layer", handles: "n, s" });

I have tried Greasemonkey's recommendations and I'm not sure if it's a compatibility issue or not. Third Party Libraries I have wrapped it in a document ready and it makes no difference, yet when I use the Firebug console, it works fine.

share|improve this question
up vote 3 down vote accepted

Update:

I now recommend just using one of the standard themes hosted on Google and forget about trying to get everything running from local copies (The purpose of the @resource directive and the CSS re-writing as shown below).

See this answer for a less maintenance-intensive approach to jQuery-UI loading.


Old answer (still works):

Firebug javascript executes in the target page scope.
Greasemonkey javascript executes in a protected and privileged sandbox.

That means that if the page loads libraries, like jQuery and jQuery-UI, the Greasemonkey script won't normally see them. (There are ways around that, but avoid them as much as possible.)

That link, in the question, gave the answer. Since the code: $('#editor').resizable(... uses jQuery and jQuery-UI, your script must include those libraries -- like so:

// ==UserScript==
// @name        Codecademy Resizeable Code
// @description Adds jQuery resizable to editor
// @namespace   http://chrisneetz.com
// @include     http://www.codecademy.com/courses/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require     http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
// @grant       GM_addStyle
// ==/UserScript==

$('#editor').resizable ( {
    alsoResize: ".ace_scroller, .ace_editor, .ace_content, .ace_sb, .ace_print_margin_layer",
    handles:    "n, s"
} );



However, jQuery-UI also makes heavy use of custom CSS. Getting this CSS to work with Greasemonkey is a bit more involved. Change the script, like so, to use the CSS, plus 2 of the better icon sets:

// ==UserScript==
// @name        Codecademy Resizeable Code
// @description Adds jQuery resizable to editor
// @namespace   http://chrisneetz.com
// @include     http://www.codecademy.com/courses/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require     http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
// @resource    jqUI_CSS  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
// @resource    IconSet1  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png
// @resource    IconSet2  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_454545_256x240.png
// @grant       GM_addStyle
// ==/UserScript==

$('#editor').resizable ( {
    alsoResize: ".ace_scroller, .ace_editor, .ace_content, .ace_sb, .ace_print_margin_layer",
    handles:    "n, s"
} );

/*--- Process the jQuery-UI, base CSS, to work with Greasemonkey (we are not on a server)
    and then load the CSS.

    *** Kill the useless BG images:
        url(images/ui-bg_flat_0_aaaaaa_40x100.png)
        url(images/ui-bg_flat_75_ffffff_40x100.png)
        url(images/ui-bg_glass_55_fbf9ee_1x400.png)
        url(images/ui-bg_glass_65_ffffff_1x400.png)
        url(images/ui-bg_glass_75_dadada_1x400.png)
        url(images/ui-bg_glass_75_e6e6e6_1x400.png)
        url(images/ui-bg_glass_95_fef1ec_1x400.png)
        url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)

    *** Rewrite the icon images, that we use, to our local resources:
        url(images/ui-icons_222222_256x240.png)
        becomes
        url("' + GM_getResourceURL ("IconSet1") + '")
        etc.
*/
var iconSet1    = GM_getResourceURL ("IconSet1");
var iconSet2    = GM_getResourceURL ("IconSet2");
var jqUI_CssSrc = GM_getResourceText ("jqUI_CSS");
jqUI_CssSrc     = jqUI_CssSrc.replace (/url\(images\/ui\-bg_.*00\.png\)/g, "");
jqUI_CssSrc     = jqUI_CssSrc.replace (/images\/ui-icons_222222_256x240\.png/g, iconSet1);
jqUI_CssSrc     = jqUI_CssSrc.replace (/images\/ui-icons_454545_256x240\.png/g, iconSet2);

GM_addStyle (jqUI_CssSrc);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.