✔ Per Mousdown einen Layer vergößern

M

Mc_Schlummi

Mitglied
Ich habe folgedes Problem!
Wie kann ich ein Layer mit z.B onmousedown vergößern. Wichtig ist, dass sich der Layer nur vertikal vergößern soll. Sobald die Maus (onmouseup) los gelassen wird, soll der der Layer sich nicht weiter vergößern oder verkleinern.
Ich habe das Internet durchgeforstet aber nichts brauchbares gefunden. Es wäre toll, wenn einer von Euch mir weiterhelfen könnte.
 
Zuletzt bearbeitet:
Hi,

solange der Mausknopf gedrückt gehalten wird, läuft eine Funktion periodisch ab. Hierfür stellt JS die Methode setTimeout zur Verfügung. Rückgabe dieser Methode ist ein Timerhandle.
Innerhalb der periodisch ablaufenden Funktion wird über das style-Objekt des Elements die Höhe inkrementiert bzw. dekrementiert.

Wird der Knopf wieder los gelassen, wird der über den Timerhandel und die Methode clearTimeout die periodische Verarbeitung beendet.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">
  <!--
function qpSlider(objOpts){
  var opts = {
    delay: 100,       // Verzögerung zwischen den Einzelschritten (je kleiner, je schneller)
    step: 1,          // Grösse der Einzelschritte (Pixel)
    hTimer: null
  };

  // Kein Argument übergeben
  if(!arguments.length) return;
  // Keine ID im Optionsobjekt
  if(typeof objOpts.id == "undefined") return;

  for(var strKey in objOpts){
    opts[strKey] = objOpts[strKey];
  }

  function init(){
    if(document.getElementById(opts.id) == null) return;

    opts.elem = document.getElementById(opts.id);
    opts.elem.style.height = parseInt(opts.elem.offsetHeight) + "px";

    // Events registrieren
    opts.elem.onmousedown = function(){
      slide();
    }

    opts.elem.onmouseup = function(){
      window.clearTimeout(opts.hTimer);
    }
  }

  function slide(){
    // Grössenänderung
    opts.elem.style.height = (parseInt(opts.elem.style.height) + opts.step) + "px";
    // Funktion periodisch aufrufen
    opts.hTimer = window.setTimeout(function(){slide();}, opts.delay);
  }

  init();

  return opts;
}

window.onload = function(){
  myOpts = qpSlider({
    id: 'biggerDiv'
  });
}
 //-->
</script>
</head>
<body>
<button onclick="myOpts.step *= -1;">Richtung ändern</button>
<div id="biggerDiv" style="background: #f00; height: 50px;">DIV</div>
</body>
</html>

Die Funktion qpSlider erwartet ein Objekt als Argument. Dieses muss in der Eigenschaft id die ID des Objekts enthalten, dessen Höhe geändert werden soll.

Alle weiteren Eigenschaften können optional übergeben werden.

Rückgabe der Funktion ist ein Optionsobjekt, mit dessen Hilfe zum Beispiel die Richtung der Grössenänderung angepasst werden kann (siehe Beispiel).

Ciao
Quaese
 
Ich häng mich mal kurz mit rein.
Code: 
  // Kein Argument übergeben
  if(!arguments.length) return;
Wo kommt arguments her? Sag mir bitte nicht es gibt in JavaScript auch so magische Variablen, die "einfach da sind". :confused:
 
Hi,

arguments ist eine Eigenschaft des Function-Objekts (siehe JavaScript Reference).

Eigentlich müsste das Funktionsobjekt (hier: qpSlider) mit angegeben werden. Da es jedoch in dessen Gültigkeitsbereich läuft, ist es nicht notwedig.

Ciao
Quaese
 
Hallo Quaese,
vielen Dank für diese Lösung. Ich wäre auf diesen Weg nicht gekommen. Nur habe ich folgendes Problem, das mir der IE und FF mir sagen das myOpts nicht definiert ist. Der Layer soll dann vergrößert und verkleinert werden, wenn man auf den Layer klickt und dann halt mit mousedown verlängern will.
Mit folgendem Scriptausschnitt rufe ich den Layer auf, der vergrößert/verkleinert werden soll.
Code: 
function show_banner(e)
    {
        var xpos;
        var ypos;
        xpos=e.clientX+document.body.scrollLeft;
        ypos=e.clientY+document.body.scrollTop;
        document.getElementById("layer2").style.top=ypos+"px";
        document.getElementById("layer2").style.left=xpos+"px";
        document.getElementById("layer2").style.cursor="n-resize";
        document.getElementById("layer2").style.visibility="visible";
        document.getElementById("layer1").style.visibility="visible";
        document.onclick=myOpts.step *=1;

    }

Layer 1 wird für die Eingabe benötigt und soll nicht verändert werden. Layer 2 soll vertikal veränderbar sein.
Den Layernamen habe ich bereits angepasst.

Mc_Schlummi
 
Hi,

hast du für das Element mit der ID layer2 die Funktion qpSlider aufgerufen und somit die Funktionalität initialisiert?

Etwas in der Art
Code: 
function show_banner(e)
    {
        var xpos;
        var ypos;
        xpos=e.clientX+document.body.scrollLeft;
        ypos=e.clientY+document.body.scrollTop;
        document.getElementById("layer2").style.top=ypos+"px";
        document.getElementById("layer2").style.left=xpos+"px";
        document.getElementById("layer2").style.cursor="n-resize";
        document.getElementById("layer2").style.visibility="visible";
        document.getElementById("layer1").style.visibility="visible";
        myOpts = qpSlider({id: 'layer2'});;

    }
sollte dafür sorgen, dass das Element vertikal vergrössert wird, solange die Maustast über ihm platziert und gedrückt ist.

Ciao
Quaese
 
Hi ,
so langsam komme ich dem Ziel näher. Das nächste Problem was nun besteht ist, dass
Code: 
var test=document.getElementById(opts.id);
              alert(test);
// Alles nur Testzwecken

die Variable test NULL ausgibt.
Die Initialisierung der Variable opts erfolgt fehlerfrei.
Code: 
var opts={
              delay: 100,
              step: 1,
              hTimer: null
          };

Ich kann den Layer einblenden, kann Ihn an die richtige Position setzen aber ich kann ihn nicht verlängern :(
mfg.
Mc_Schlummi

Gib mir PHP und MYSQL und die Welt ist OK
Zum Vergrößern anklicken....
 
Hi,

das gewünschte Element wird mit der Funktion qpSlider initialisiert. Dazu muss die ID dieses Elements als Argument übergeben werden. Wurde das Element initialisiert, stehen auch die Dimensionsänderungen zur Verfügung.

Willst du auf die Optionen des Funktionsobjekts zugreifen, so kann das nur über das zurückgegebene Objekt erfolgen.

Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">
  <!--
function qpSlider(objOpts){
  var opts = {
    delay: 100,       // Verzögerung zwischen den Einzelschritten (je kleiner, je schneller)
    step: 1,          // Grösse der Einzelschritte (Pixel)
    hTimer: null
  };

  // Kein Argument übergeben
  if(!arguments.length) return;
  // Keine ID im Optionsobjekt
  if(typeof objOpts.id == "undefined") return;

  for(var strKey in objOpts){
    opts[strKey] = objOpts[strKey];
  }

  function init(){
    if(document.getElementById(opts.id) == null) return;

    opts.elem = document.getElementById(opts.id);
    opts.elem.style.height = parseInt(opts.elem.offsetHeight) + "px";

    // Events registrieren
    opts.elem.onmousedown = function(){
      slide();
    }

    opts.elem.onmouseup = function(){
      window.clearTimeout(opts.hTimer);
    }
  }

  function slide(){
    // Grössenänderung
    opts.elem.style.height = (parseInt(opts.elem.style.height) + opts.step) + "px";
    // Funktion periodisch aufrufen
    opts.hTimer = window.setTimeout(function(){slide();}, opts.delay);
  }

  init();

  return opts;
}

function show_banner(e){
  var xpos;
  var ypos;
  xpos=e.clientX+document.body.scrollLeft;
  ypos=e.clientY+document.body.scrollTop;
  document.getElementById("layer2").style.top=ypos+"px";
  document.getElementById("layer2").style.left=xpos+"px";
  document.getElementById("layer2").style.cursor="n-resize";
  document.getElementById("layer2").style.visibility="visible";
  document.getElementById("layer1").style.visibility="visible";
  myOpts = qpSlider({id: 'layer2'});

  var tester = document.getElementById(myOpts.id);
  alert(tester);
}
 //-->
</script>
</head>
<body>
<div id="layer1" style="background: #f00; height: 50px; visibility: hidden;">DIV</div>
<div id="layer2" style="background: #0f0; height: 50px; width: 50px; visibility: hidden;">DIV 2</div>
<button onclick="show_banner(event);">show_banner</button>
</body>
</html>

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück