Javascript-Div und ein Resizable

Dicker1

Hallo an alle
Ich bins nochmal. Mit einem weiteren Problem mit JS.
Folgendes:

Ich nutze einen <div> und darin ein Iframe als ersatz für ein Popup. Das klappt auch bestens. Nun möchte ich erreichen das dieses div einen Resizable- Event bekommt, damit das div in der größe vom User verändert werden kann.
Meine frag ist nun, wie mache ich das? Ich habe mir schon etliche Tutorials und Onlinehilfen durchgelesen, aber wurde daraus nicht schlau. Könnt ihr mir dabei helfen?

Danke im vorraus
Dicker1

synaptic

is ne herausforderung selbst für mich!
natürlich willst du des mit der maus machen können oder?
ansonsten könntest du ne neue grösse vorgeben und dann die werte übernehmen, mit nem event gekoppelt is das alles nich mehr ganz so trivial, denke ich.

Dicker1

Hallo synaptic
genau das ist mein Plan. Nur ich möchte keine festen Werte eintragen bezw.vorgeben. Da in dem sich öffnenden div Dokumente und/oder pdf's angezeigt werden können, ist eine feste größe nicht machbar.
Ich werde heute noch daran weiter arbeiten. Mal sehen was mir einfällt.

synaptic

ich kann mich frühestens am wochenende dransetzen...
hab vorher zu viel um die ohren, aber poste auch mal deine zwischenschritte

Dicker1

Hallo synaptic

Ich habe nach langen suchen ein Skript gefunden was ich versuche anzupassen.

Es ist folgendes:

Code

function resize_div (element_id, timeout, size_x, size_y, start_size_x, start_size_y) 
{
     var element = document.getElementById (element_id);
         if (!proc) 
              {
                 if (start_size_x)
                      element.style.width = start_size_x;
             if (start_size_y)
                      element.style.height = start_size_y;
                 if (!element.style.width ¦¦ !element.style.height)
                       if (window.getComputedStyle)
                  {
  var style = document.defaultView.getComputedStyle (element, null);
          element.style.width = style.getPropertyValue ('width');
          element.style.height = style.getPropertyValue ('height');
        }
        else if (element.currentStyle)
           {
             element.style.width = element.currentStyle.width;
     element.style.height = element.currentStyle.height;
           }
        else 
          {
            element.style.width = '0px';
            element.style.height = '0px';
  }
    start_size_x = parseFloat (element.style.width);
    start_size_y = parseFloat (element.style.height);


    proc = window.setInterval ('resize_div (\'' + element_id + '\', ' + timeout + ', ' + size_x + ', ' + size_y + ', ' + start_size_x + ', ' + start_size_y + ')');
    return;
    }


  element.style.width.match (/[0-9.]+(.+)/);
  var ex = RegExp.$1 ¦¦ 'px';
  element.style.height.match (/[0-9.]+(.+)/);
  var ey = RegExp.$1 ¦¦ 'px';
  var delta_x, delta_y;
     if (start_size_x != size_x) 
      {
          delta_x = (ex == 'px' ¦¦ ex == 'pt') ? 5 : 0.05;
      var steps = (start_size_x < size_x ? size_x - start_size_x : start_size_x - size_x) / delta_x;
      delta_y = (start_size_y < size_y ? size_y - start_size_y : start_size_y - size_y) / steps;
      }
     else 
      {
          delta_x = 0;
          delta_y = (ey == 'px' ¦¦ ey == 'pt') ? 15 : 0.15;
      }


    if (parseFloat (element.style.width) != size_x ¦¦parseFloat (element.style.height) != size_y)
          {
            var width = parseFloat (element.style.width) + (start_size_x < size_x ? delta_x : -delta_x);
            width = (width > size_x ? width - size_x : size_x - width) < delta_x ? size_x : width;
            element.style.width = width + ex;
            var height = parseFloat (element.style.height) + (start_size_y < size_y ? delta_y : -delta_y);
            height = (height > size_y ? height - size_y : size_y - height) < delta_y ? size_y : height;
            element.style.height = height + ey;
      }
    else 
     {
            window.clearInterval (proc);
            proc = null;
     }
}


var proc;
function init_div_size (element_id, width, height) 
  {
       var element = document.getElementById (element_id);
         if (element)
        {
                element.style.width = width;
                element.style.height = height;
        }
}
</script>

Alles anzeigen

Ich versuche die änderung der Größe dynamisch hinzubekommen.
Auch der Aufruf mit frsten werten will noch nicht klappen.

Gruß
Sven

synaptic

pack das mal bitte in codetags, damit es einfacher zu lesen wird...
danke

Tags