Polo's Bushtarion Background Script

Polo

Garden Designer
Super Moderator
Joined
Dec 14, 2007
Messages
1,005
No idea if anyone else will find this interesting/useful. :p

After messing around with the colour scheme system in bush I realised it would be so much better if you could use full screen background images that resized as necessary (as otherwise you end up with either an image tiled loads of times on a high resolution or an image you only see a small part of on a low resolution).

Anyway, I've written a greasemonkey script which adds the necessary javascript into bush and makes this image a full screen background. The script is easily editable if anyone is interested in changing the image.

Here's a screenshot of the script in action and here is a "demo" of it.

If anyone's interested in using this script, it's available here and the source code is as follows:

Code:
// ==UserScript==
// @name           Polo's Bushtarion Background Script
// @version        1.0
// @namespace      http://bush.nobreakspace.com
// @description    Allows fullscreen backgrounds on bushtarion.com
// @include        http://*.bushtarion.com/*
// @require           http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js
// ==/UserScript==

// ===========================================================================
// License and Disclaimer
// ===========================================================================
// This software is donationware. You are welcome to donate to Polo via paypal
// at http://bush.nobreakspace.com/donate.php if you feel it is warranted.
// Software is provided 'AS IS' and without any warranty.
// Use on your own responsibility.
// ===========================================================================

var pagebody    =    document.getElementById('css-bushtarion');
var newbackground    =    document.createElement('div');
newbackground.innerHTML    =    '<div style="visibility:hidden;" id="body-background"><img style="position:absolute;bottom:0;" src="http://img215.imageshack.us/img215/7694/mysteryanddarknessbycra.jpg" width="1680" height="1050" alt="background" /></div>';
pagebody.appendChild(newbackground);
(function($) {
    // plugin definition
    $.fn.ezBgResize = function(options) {
        // First position object
        this.css("position","fixed");
        this.css("visibility","hidden");
        this.css("bottom","0px");
        this.css("left","0px");
        this.css("z-index","-1");
        this.css("overflow","hidden");
        
        // Set obj to the width and height of window
        this.css("width",getWindowWidth() + "px");
        this.css("height",getWindowHeight() + "px");
        
        // Resize the img object to the proper ratio of the window.
        var iw = this.children('img').width();
        var ih = this.children('img').height();
        if (getWindowWidth() > getWindowHeight()) {
            if (iw > ih) {
                var fRatio = iw/ih;
                this.children('img').css("width",getWindowWidth() + "px");
                this.children('img').css("height",Math.round(getWindowWidth() * (1/fRatio)));
                
                var newIh = Math.round(getWindowWidth() * (1/fRatio));
                
                if(newIh < getWindowHeight()) {
                    var fRatio = ih/iw;
                    this.children('img').css("height",getWindowHeight());
                    this.children('img').css("width",Math.round(getWindowHeight() * (1/fRatio)));
                }
            } else {
                var fRatio = ih/iw;
                this.children('img').css("height",getWindowHeight());
                this.children('img').css("width",Math.round(getWindowHeight() * (1/fRatio)));
            }
        } else {
            var fRatio = ih/iw;
            this.children('img').css("height",getWindowHeight());
            this.children('img').css("width",Math.round(getWindowHeight() * (1/fRatio)));
        }
        
        this.css("visibility","visible");
        
    };
    
    // private function for debugging
    function debug($obj) {
        if (window.console && window.console.log) {
            window.console.log('Window Width: ' + $(window).width());
            window.console.log('Window Height: ' + $(window).height());
        }
    };
    
    // Dependable function to get Window Height
    function getWindowHeight() {
        var windowHeight = 0;
        if (typeof(window.innerHeight) == 'number') {
            windowHeight = window.innerHeight;
        }
        else {
            if (document.documentElement && document.documentElement.clientHeight) {
                windowHeight = document.documentElement.clientHeight;
            }
            else {
                if (document.body && document.body.clientHeight) {
                    windowHeight = document.body.clientHeight;
                }
            }
        }
        return windowHeight;
    };
    
    // Dependable function to get Window Width
    function getWindowWidth() {
        var windowWidth = 0;
        if (typeof(window.innerWidth) == 'number') {
            windowWidth = window.innerWidth;
        }
        else {
            if (document.documentElement && document.documentElement.clientWidth) {
                windowWidth = document.documentElement.clientWidth;
            }
            else {
                if (document.body && document.body.clientWidth) {
                    windowWidth = document.body.clientWidth;
                }
            }
        }
        return windowWidth;
    };
})(jQuery);

$(window).load(function() {
    $("#body-background").ezBgResize();
});

$(window).resize(function() {
    $("#body-background").ezBgResize();
});
 

Davis

Tree Surgeon
Joined
Dec 14, 2007
Messages
516
Location
usa
would i need grease monkey for this to work or something? its a nice little feature btw :D
 

Polo

Garden Designer
Super Moderator
Joined
Dec 14, 2007
Messages
1,005
Yeah you need greasemonkey installed on firefox (I *think* greasemonkey scripts can run natively in Chrome though although I haven't tested it). Cheers. :)
 
Top