per Klick visible<->hidden wechseln

LARP · 25 September 2008

ich habe zwei divs, die drag&drop- fähig sind,...
nun habe ich aber schon einige möglichkeiten ausprobiert, aber ich bekomme keine SINVOLLE möglichkeit hin, die per buttonklick oder so zwischen visible und hidden zu wechseln

wäre um jede hilfestellung echt dankbar!!

HTML:

<html>
<head>
<title>Fenster</title>

PHP:

<script type="text/javascript">

var dragobjekt = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;


function draginit() {


  document.onmousemove = drag;
  document.onmouseup = dragstop;
}


function dragstart(element) {


  dragobjekt = element;
  dragx = posx - dragobjekt.offsetLeft;
  dragy = posy - dragobjekt.offsetTop;
}


function dragstop() {


  dragobjekt=null;
}


function drag(ereignis) {

  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  if(dragobjekt != null) {
    dragobjekt.style.left = (posx - dragx) + "px";
    dragobjekt.style.top = (posy - dragy) + "px";
  }
}

</script>

HTML:

</head>
<body onLoad="draginit()">
<div id="rot" style="position:absolute; top:55px; left:114px; height:100px; width:100px; background-color: #999999; visibility: visible;" >
<div id="rot" onMouseDown="dragstart(rot)" style="position:absolute; background:#00ff00; left: 0px; width: 100px; top: 0px; height: 38px; visibility: visible;">    x   </div> 
</div>
<div id="blau" style="position:absolute; top:55px; left:245px; height:100px; width:100px; background-color: #336699;" >
<div id="rot" onMouseDown="dragstart(blau)" style="position:absolute; background:#ff9900; left: 0px; width: 100px; top: 0px; height: 38px; visibility: visible;"> </div> 
</div>
</body>
</html>

mister_nu · 25 September 2008

So als kleiner Gedankenanstoß:

Code:

if (document.getElementById(element_id).style.display == "none")
{
   document.getElementById(element_id).style.display = "inline";
}
else
{
   document.getElementById(element_id).style.display = "none";
}

Astrodan · 25 September 2008

An sich richtig, aber nicht komplett.. und evntl. nen Fehler *denk*

a) Bei manchen Browsern gilt das Attribut anfänglich nicht als gesetzt, es sollte demnach vorher im Code extra gesetzt werden, sonst kann es sein, dass das Element beim ersten Klick nicht reagiert.

b) divs sind standardmäßig "display: block" (statt inline), und sollten deshalb auch als block / none gesetzt werden.

Bei b) bin ich mir aber grad nicht 100%ig sicher

DaPhreak · 25 September 2008

Astrodan schrieb:
b) divs sind standardmäßig "display: block" (statt inline), und sollten deshalb auch als block / none gesetzt werden.

Bei b) bin ich mir aber grad nicht 100%ig sicher

b) kann ich bestätigen, da ich genau das Problem grade vor ein paar Tagen hatte, ein div zu verstecken oder anzuzeigen :arrow:

block ist richtig (div ist block, span ist inline, das ist ansich auch der Hauptunterschied zwischen div und span).

ice-breaker · 25 September 2008

wäre nicht visibility deutlich besser angebracht ?

DaPhreak · 25 September 2008

ice-breaker schrieb:
wäre nicht visibility deutlich besser angebracht ?

Visibility macht das Element nur unsichtbar. Display gibt zusätzlich den belegten Platz frei (restlicher Content "rutscht hoch"). Je nach dem ob man das will also...

LARP · 25 September 2008

so gelöst!

PHP:

<script type="text/javascript">
var dragobjekt = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;


function draginit() {


  document.onmousemove = drag;
  document.onmouseup = dragstop;
}


function dragstart(element) {


  dragobjekt = element;
  dragx = posx - dragobjekt.offsetLeft;
  dragy = posy - dragobjekt.offsetTop;
}


function dragstop() {


  dragobjekt=null;
}


function drag(ereignis) {

  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  if(dragobjekt != null) {
    dragobjekt.style.left = (posx - dragx) + "px";
    dragobjekt.style.top = (posy - dragy) + "px";
  }


}

</script>

PHP:

<script type="text/javascript">


function fensterfinden(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=fensterfinden(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function fensterzu() { //v0.1
  var i,p,v,obj,args=fensterzu.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=fensterfinden(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function femsterauf() { //v0.1
  var i,p,v,obj,args=femsterauf.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=fensterfinden(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
</script>

Astrodan · 25 September 2008

Ich will mich ja nicht beschweren, ist ja dein Code.. aber sowas wie oirdentlich formatieren hast du auch noch nicht gelernt, oder?

Nebenbei seh ich noch nicht, was das, was du da gemacht hast mit dem urspünglichen Problem zu tun hat. Allerdings ist dein Code durch magelhafte Bennenung und fehlende formatierung so unlesbar, dass ich bisher verzichtet habe ihn mir näher anzuschauen.

per Klick visible<->hidden wechseln

LARP

Gesperrt

mister_nu

Well-known member

Astrodan

Gamma Cephei

DaPhreak

Primus inter pares

ice-breaker

return void

DaPhreak

Primus inter pares

LARP

Gesperrt

Astrodan

Gamma Cephei

Ähnliche Themen