resizing sidebar and iframe with jquery

resizing sidebar and iframe with jquery


I am trying to get something to work where I have a sidebar on the left that can be resized with jquery.
On the right I have an iframe. When the sidebar resizes I want to resize the iframe. I have not had any luck with this and the iframe ends up with the sidebar on top of it instead of on the side.

========================================

<script src="/javascripts/prototype.js?1259104156" type="text/javascript"></script>
<script src="/javascripts/effects.js?1259104156" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1259104156" type="text/javascript"></script>
<script src="/javascripts/controls.js?1259104156" type="text/javascript"></script>
<script src="/javascripts/application.js?1259104156" type="text/javascript"></script>

<head>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

</head>


<style type='text/css'>

<!--



#sidebar {
background-color: #999999;
margin: 0px;
padding: 5px;
border-right-width: thin;
border-top-style: none;
border-right-style: dotted;
border-bottom-style: none;
border-left-style: none;
border-right-color: #990000;
overflow: auto;
float: left;
width: 150px;
height: 100%;
}


-->

</style>


  <script type="text/javascript">

    myvar = 'xxx';

    function mytestfunc()
    {
      alert('mytest func');
    }


    sidebar_width = 0;
    function myresize()
    {
      set_map_width();
    }

    window.onresize = myresize;

    function set_map_width(sbar)
    {
      if (sbar != null)
      {
        sidebar_width = sbar;
      }
      el = document.getElementById('if1');
      if1.style.width = window.innerWidth - 300 - sidebar_width;
      //alert('resized');
    }

   
  </script>

<span id='sidebar'>

side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz
side barz side barz side barz side barz side barz side barz side barz side barz side barz

</span>

<script type='text/javascript'>

    $(function(){
    $('#sidebar')
        .draggable()
        .resizable();
    });

    $('#sidebar')
        .resizable({
            start: function(e, ui) {
                // alert('resizing started');
            },
            resize: function(e, ui) {
     
            },
            stop: function(e, ui) {
                // alert('resizing stopped');
                    if1 = document.getElementById('if1');
                    // if1.setStyle('position', 'absolute');
                    if1.setStyle('left','500px');
            }
        });



 function hide_sidebar()
   {
   // alert('parent');
   sbar = document.getElementById('sidebar');
   sbar.style.display = 'none';
   sidebar_width = 0;
   set_map_width();
   }

 function show_sidebar()
   {
   // alert('parent');
   sbar = document.getElementById('sidebar');
   sbar.style.display = 'inline';
   set_map_width(200);
   }

  function send_content(cont)
  {
  sbar = document.getElementById('sidebar');
  sbar.innerHTML = cont;
  }




</script>


<iframe id='if1' name='tony' src='http://myhost/test/myframe'
width="800px;" Height="100%;"
>
</iframe>