So I am having problems with my trello boards resetting their size to sizes that are far too small. TIL that I can create javascript functions that can update the view of any page by clicking a bookmark link. Instead of a page URL, I can put a short bit of javascript into the destination URL and it will execute the script in the console. Here is the script provided for changing the size of the card lists. It asks for a width.

javascript:(function(w) { $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(prompt("List width?", 500))

I want to stop the overlay window from shrinking on my screen since the window is so large. The css element causing the problem is overflow: hidden . I need to change it to visible or initial.


The element that is the problem is the html>body>div.window-overlay>div.window

javascript:(function(w) { $('.window').overflow('initial');})

javascript:(function(w) { $('.window').css('overflow', 'visible');})('1')
The ('1') actually calls the function I just defined. I used this really great page for better understanding javascript.

A Simple, Comprehensive Overview of Javascript


Now that I know about bookmarklets, I want to change other sites and customize shit. Next is setting a background image for the trello boards.

The first step is to write the code in the Chrome console. If it works, then make it into a booklet. = "url('')";
javascript:(function umBack() { = "url('')";}) umBack();

Putting the javascript function in straight without the javascript: first fails to execute as a booklet but it works in console.

I want my background to change to whatever I want so I need an array of picture URL’s and a random number generator.

var rand = myArray[Math.floor(Math.random() * myArray.length)];

Here is the real code

function myfunc() {
var pics = ["url('')", "url('')", "url('')", "url('')", "url('')", "url('')", "url('')", "url('')"];
var rand = Math.floor(Math.random() * pics.length); = pics[rand];