Archivlink: javarea.de Forum > JavaScript > position ändern - aber wie ???
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > position ändern - aber wie ???

Pages: [1]
geschrieben von Raver2 am 16.03.2005 - 20:58
hi,
wie kann ich bei einem <div>-tag die position änder, die ich anfangs mit CSS festgesetzt habe?

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 

CSS :
div#divtagid {
	position:absolute;
	top:-100;
	left:100;
    }


................................
JS (ansatzweise)
<script>
    <!--
    function dropdown(id) {
	doc.getelementById(id).style.top='50';
    }
    //-->
    </script>


................................
HTML
[<a href="#" onmouseover="dropdown('divtagid');">NaviLink</a>]

	<div id="divtagid">
	[<a href="#">DD-Link1</a>]<br>
	[<a href="#">DD-Link2</a>]
	</div>

geschrieben von Daniel am 16.03.2005 - 21:00
es heisst getElementById

geschrieben von Raver2 am 16.03.2005 - 21:22
...andere Frage (auch zu diesem DD-menü)
wie finde ich die X und Y position von einem Link (<a>) heraus???
weil ich wollte so den DD-menu zuteilen an welche posi. es sich ausrichten soll...

geschrieben von Daniel am 16.03.2005 - 21:26
http://de.selfhtml.org/javascript/o..../event.htm

Aber gleich als Tipp: Es ist scheisse sowas vernünftig Browserkompatibel zu schreiben. Und um 25 Fragen vorzubeugen hier etwas, was dir in einer Variable (mouse.left / mouse.top) immer die Aktuelle Mousezeigerposition speichert. Das kannst als Beispiel/Denkanstoß nehmen.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 

<script language="JavaScript" type="text/javascript">
        /* Aktuelle Mausposition */
        var mouse;
        function Mouse_Position(evt)
        {
            if(!evt)
                evt = window.event;
            mouse = {
                left: evt.pageX ? evt.pageX : evt.clientX,
                top: evt.pageY ? evt.pageY : evt.clientY
            };
        }
        document.onmousemove=Mouse_Position;
    </script>

geschrieben von Raver2 am 16.03.2005 - 22:05
ich habe dieses Script im netz gefunden....aber es gibt nur "[object Object]" aus:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 

http://www.droeppez.de/download/js-....ition.html 




function getPosition(element)
/* der Aufruf dieser Funktion ermittelt die absoluten Koordinaten
   des Objekts element */
{
  var elem=element,tagname="",x=0,y=0;
  
/* solange elem ein Objekt ist und die Eigenschaft offsetTop enthaelt
   wird diese Schleife fuer das Element und all seine Offset-Eltern ausgefuehrt */
  while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined"))
  {
    y+=elem.offsetTop;     /* Offset des jeweiligen Elements addieren */
    x+=elem.offsetLeft;    /* Offset des jeweiligen Elements addieren */
    tagname=elem.tagName.toUpperCase(); /* tag-Name ermitteln, Grossbuchstaben */

/* wenn beim Body-tag angekommen elem fuer Abbruch auf 0 setzen */
    if (tagname=="BODY")
      elem=0;

/* wenn elem ein Objekt ist und offsetParent enthaelt
   Offset-Elternelement ermitteln */
    if (typeof(elem)=="object")
      if (typeof(elem.offsetParent)=="object")
        elem=elem.offsetParent;
  }

/* Objekt mit x und y zurueckgeben */
  position=new Object();
  position.x=x;
  position.y=y;
  return position;
}

function alertPosition(elementId)
/* gibt eine Meldung mit x und y des zu elementId gehoerenden Elements aus */
{
  var a,element;

/* Element-Objekt zur ID ermitteln */
  element=document.getElementById(elementId);
 
/* Position bestimmen und melden */
  a=getPosition(element);
  window.alert("Position "+elementId+": ("+a.x+","+a.y+")");
}

geschrieben von Daniel am 16.03.2005 - 22:18
Das Script geht. IE und auch FF.

geschrieben von Raver2 am 17.03.2005 - 08:36
sry, musste alertPosition('ELEMENTid')

geschrieben von Daniel am 17.03.2005 - 10:07
erst denken - dann posten!

geschrieben von Raver2 am 17.03.2005 - 17:40
so...hier das fertige script:

ganz ohne der navigationsleiste eine Position zuzuweisen funzt das DD-menü
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81: 
82: 
83: 
84: 
85: 
86: 
87: 
88: 
89: 
90: 
91: 
92: 
93: 
94: 
95: 
96: 
97: 
98: 
99: 
100: 
101: 
102: 
103: 
104: 
105: 
106: 
107: 
108: 
109: 
110: 
111: 
112: 
113: 
114: 
115: 
116: 
117: 
118: 
119: 
120: 

<!--
	CSS:    
    //-->

<style>
span.navilink {
	font-size:8pt;
	color:black;
	font-family:arial;
    }
    span.navilink:hover {
	color:#555555;
    }
    div.dropdown {
	position:absolute;
	left:-500;
	width:100px;
	border:1px;
	border-width:0px 1px 1px 1px;
	border-style:solid;
	border-color:#cccccc;
	background:#eeeeee;
    }
</style>



<!--
	JS:    
    //-->
    
    
    
<script>
    <!-- 
function getPosition(element)
{
  var elem=element,tagname="",x=0,y=0;

  while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined"))
  {
    y+=elem.offsetTop; 
    x+=elem.offsetLeft;
    tagname=elem.tagName.toUpperCase();

    if (tagname=="BODY")
      elem=0;

    if (typeof(elem)=="object")
      if (typeof(elem.offsetParent)=="object")
        elem=elem.offsetParent;
  }

  position=new Object();
  position.x=x;
  position.y=y;
  return position;
}

function dropdown(selfid, id) {
	var a,element;

	element=document.getElementById(selfid);
	elementheight=document.getElementById(selfid).offsetHeight;
	
	a=getPosition(element);
	document.getElementById('dropdown'+id).style.left = a.x;
	document.getElementById('dropdown'+id).style.top = a.y+elementheight;
}
    
function dropup(id) {
	document.getElementById('dropdown'+id).style.left = '-500px';
    }
    //-->
    </script>
    
    <!--
	HTML:    
    //-->
    
    
    
    
<a href="#" class="navilink" onmouseover="dropdown('link1', 'A');" onmouseout="dropup('A');">
	<span class="navilink" id="link1">NaviLink</span>
	</a>
		<div id="dropdownA" class="dropdown" onmouseover="dropdown('link1', 'A');" onmouseout="dropup('A');">
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link2</a>
		</div>
	|
	<a href="#" class="navilink" onmouseover="dropdown('link2', 'B');" onmouseout="dropup('B');">
	<span class="navilink" id="link2">NaviLink</span>
	</a>
		<div id="dropdownB" class="dropdown" onmouseover="dropdown('link2', 'B');" onmouseout="dropup('B');">
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link2</a>
		</div>
	|
	<a href="#" class="navilink" onmouseover="dropdown('link3', 'C');" onmouseout="dropup('C');">
	<span class="navilink" id="link3">NaviLink</span>
	</a>
		<div id="dropdownC" class="dropdown" onmouseover="dropdown('link3', 'C');" onmouseout="dropup('C');">
		<a href="#" class="dropdownlink">DD-Link1</a><br>
		<a href="#" class="dropdownlink">DD-Link2</a>
		</div>


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.