jquery How to refresh pages when resize happens?

Question

I have some indicator displays settings which float above a menu. Problem is when someone resizes the 'indicators stays on the same place', the page needs to 'refreshed to position correctly'. How to have a page refresh by itself when it detects the page is being resized? or is there any better way to do it? jQuery

    function findPosY(b) {
    var a = 0;
    if (b.offsetParent) {
        while (1) {
            a += b.offsetTop;
            if (!b.offsetParent) {
                break
            }
            b = b.offsetParent
        }
    } else {
        if (b.y) {
            a += b.y
        }
    }
    return a
}
function findPosX(b) {
    var a = 0;
    if (b.offsetParent) {
        while (1) {
            a += b.offsetLeft;
            if (!b.offsetParent) {
                break
            }
            b = b.offsetParent
        }
    } else {
        if (b.x) {
            a += b.x
        }
    }
    return a
}
function setNotifications() {
    $("#shortcut_notifications span").each(function () {
        if ($(this).attr("rel") != "") {
            target = $(this).attr("rel");
            if ($("#" + target).length > 0) {
                var a = findPosY(document.getElementById(target));
                var b = findPosX(document.getElementById(target));
                $(this).css("top", a - 31 + "px");//-24
                $(this).css("left", b + 83 + "px")//+60
            }
        }
    });
    $("#shortcut_notifications").css("display", "block")
}

CSS

#shortcut_notifications {
display:none;
}

.notification {
color:#fff;
font-weight:700;
text-shadow:1px 0 0 #333;
background:transparent url(../images/bg_notification.png) no-repeat center;
position: absolute;/*absolute*/
width:37px;/*37*/
height:37px;
display:block;
text-align:center;
padding-top:17px;
color:#ffffff;
}

#nav li {
    display:block;
    float:right;
    padding:19px 21px;
    text-align: left;
    position:relative;
    height:24px;
    font-size:16px;
}

HTML

<li class="settings"><a class="settings" href="#">Settings</a>
        <ul>
          <li><a href="#">Game Settings</a></li>
          <li><a href="#">Transactions </a></li>
        </ul>
      </li>

Answer 1

There is a window resize event that can be hooked into. Just rerun the code you used to initially position the indicators and it should all work.

This question has good answers on using the resize event:

http://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery

Answer 2

You can use the .resize() handler, like this:

$(window).resize(setNotifications);