issue with resize() function, when growing widths

mjabado · 02-25-2013, 02:23 PM

i have a fixed div on the right of window, what i want to do is when the user resize the window, i want this fixed div not to overlap with the other div by changing it's positioning, i managed to do that when resizing to smaller, but what i want, is when the user also resize the window for higher widths, i want that div to go back to the initial "fixed" state.

Here is the code sample:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(window).resize(function(){
        var pos = $("#div").offset();
        var fix = $("#fix").offset();
        if(fix.left<950){
            $('#fix').css('position','relative');
            $('#fix').css('left',fix.left);
            $('#fix').css('top',-fix.top);
            var available = true;
        }
        var pos = $("div").offset();
        var fix = $("fix").offset();
        if(fix.left>950){
            $('#fix').css('position','fixed');
            $('#fix').css('right','100px');
            $('#fix').css('top',fix.top);
        }
    });

});
</script>
</head>

<body style="margin:0;">
<div id="div" style="width:600px; height:200px; background-color:red; margin-left:300px;"></div>
<div id="fix" style="position:fixed; right:100px; height:100px; width:100px; background-color:yellow; top:100px;"></div>
</body>
</html>

Thanks everyone in advance.

sunfighter · 02-26-2013, 03:24 PM

You get what you want

Quote:

i want that div to go back to the initial "fixed" state.

if you remove the jquery.