Jquery Overlay Default Positioning

I have a jquery tools overlay one my wordpress blog, and I have the code that keeps it in position where I want it to be when I resize the window. But on first click to load the overlay, it displays in the center of the page, I need it set to the left an additional 250px.

heres my code for the positioning:

$(document).ready(function() { setDef() });

function setDef() {
var w = $('.simple_overlay').width();//get width of overlay
    var h = $('.simple_overlay').height(); //get height of overlay
    var l = ($(window).width() - w) / 2 + 250;  //calculate left property
    var t = ($(window).height() - h) / 2  //calculate top property
$('.simple_overlay').css({ 'left': l })
}

the above should calculate the default position (centered) then add 250px, but its not adding the 250. The code below adds the 250 when the window is resized.

$(window).resize(function() { rePosition() });

function rePosition() {
    var w = $('.simple_overlay').width();//get width of overlay
    var h = $('.simple_overlay').height(); //get height of overlay
    var l = ($(window).width() - w) / 2 + 250;  //calculate left property
    var t = ($(window).height() - h) / 2  //calculate top property
    $('.simple_overlay').css({ 'left': l })

I think I need to use something other than (document).ready

Ps- You can close the overlay by clicking in the top right corner, theres no visual indicator right now but your cursor will change.

Any suggestions?

Thanks!!!

Just get rid of the setDef() function and put a call to rePosition() in your click event handler on the #search-box-nav image (or whichever element has a click handler).

If you refresh your page and run the following code in the console then it mimics doing that...

$("#search-box-nav img").bind("click", function() { rePosition(); });