jquery How to refresh pages when resize happens?

Posted by Maju on Stack Overflow See other posts from Stack Overflow or by Maju
Published on 2010-06-16T09:37:04Z Indexed on 2010/06/16 10:02 UTC
Read the original article Hit count: 298

Filed under:
|

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>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui