Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    issue with resize() function, when growing widths

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    You get what you want
    i want that div to go back to the initial "fixed" state.
    if you remove the jquery.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •