Question

I am trying to use the jQuery plugin: Floating boxes with easing and motion-blur in jQuery By: Marcell Jusztin.

I have it working just fine and understand how to tweak most attributes, but I am a Javascript rookie and really do not understand the mechanics involved in changing how it uses math to place the elements I want to animate. What I want to do is change the set x and y offset coordinates (which are in pixels of course) to a set of percentages so that the elements will dynamically scale in position based on screen resolution. Here is the script in its entirety:

jQuery.fn.floatingBox = function ( userOptions ) {

options = jQuery.extend ({
    parent    : 'backdrop',
    stage     : 'backdrop',
    scale     : 0.3,
    xOffset   : 0,
    yOffset   : 0,
    blur      : false,
    isText    : false,
    blurColor : '#888',
    frameRate : 40,
}, userOptions);


var parent = options.parent;
var stage = options.stage;
var scale = options.scale;
var xOffset = options.xOffset;
var yOffset = options.yOffset;
var blur = options.blur;
var isText = options.isText;
var blurColor = options.blurColor;
var frameRate = options.frameRate;

var midX = $('#' + stage).width() / 2;
var midY = $('#' + stage).height() / 2;
var _x = midX;
var _y = midY;
var xx = midX;
var yy = midY;

var objectId = $(this).attr('id');
$('#' + objectId).css('position','absolute');

shadowAmount = 0;

window["timer" + objectId] = window.setInterval(update,frameRate);


$('#' + parent).mousemove(function(event){

    _x = event.pageX; 
    _y = event.pageY;

    if( shadowAmount < 5 && blur == true ) shadowAmount += scale;

});

factor = scale * 0.5;   

function update() {

        xx += (((_x - midX) * -scale) - xx) * factor;
        yy += (((_y - midY) * -scale) - yy) * factor;
        $('#' + objectId).css('left', xx + xOffset + $('#' + parent).position().left);
        $('#' + objectId).css('top', yy + yOffset + $('#' + parent).position().top);
        if(blur){
            if(!isText){
                $('#' + objectId).css('box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
                $('#' + objectId).css('-moz-box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
                $('#' + objectId).css('-webkit-box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
                $('#' + objectId).css('-o-box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
            }else{
                $('#' + objectId).css('text-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
            }
            if(shadowAmount > 0 ) shadowAmount -= scale;
        }


}

}

Here is the script that initiates the javascript in the HTML document:

<script type="text/javascript">

jQuery(function(){

        $('#biglogo').floatingBox({ 
            scale : 0.09,
            blur : false,
            isText : false,
            xOffset : 400,
            yOffset: 200,
        });

            $('#biglogo2').floatingBox({    
            scale : 0.08,
            blur : false,
            isText : false,
            xOffset : 405,
            yOffset: 205,
        });
    });
</script>

I have two transparent png files that are layered over each other with a minor offset of 5 pixels (or maybe its considered 10), but would rather the two images be centered in all browser windows and not just mine. The scale indicates how fast and far the elements move. The xOffset and yOffset parameters are of course fixed numbers that don’t scale based on browser window size.

I have attempted to research this but ultimately, I’m neither finding that it can’t be done, nor that it can because no one response seems to address the specific issue I am having. Perhaps I am not wording it correctly.

Thanks!

Answer 1

From the looks of the script I would say that it already takes the necessary calculations into accout. Try setting the parent and stage options and leave out the offset parameters. I.e

$('#biglogo').floatingBox({ 
    parent: 'container-id',
    stage: 'container-id',
    scale: 0.09,
    blur: false,
    isText: false
});

Edit: I created a fiddle with some modifications to the plugin that shows how to get centering working, http://jsfiddle.net/wwBJt/