Div konumuna göre başka divi konumlandırma

Ahmet79 · 18/08/2007, 15:31

Herkese selamlar.
Konumu veritabanından alınan verilere göre değişen bir div'in konumuna bağlı olarak başka bir div çıksın istiyorum. Böyle bi şey nasıl olur.

Askenaz · 18/08/2007, 16:00

Javascript + CSS

mkarabulut · 18/08/2007, 16:20

@Askenaz : Bu çok açık değil mi? Adam gelip JS bölümüne sormuş zaten. Adama bir de bunu JS ile yapabilirsin demeye gerek yok.

Vaktim olunca buna bir yanıt yazacağım. Quirksmode FindPos fonksiyonu, style.position = 'absolute', style.left, style.top gibi şeylerle bi şeyler karalayacağım. Sanırım senin bir önceki soruna da yanıt olacaktır.

Askenaz · 18/08/2007, 16:38

Aslında bende açıkça çözümü anlatacaktım ama daha sonra soru birçok konuyu içinde barındırdığı için takıldığı yerlerde soru sorması gerektiğini söylemek için öyle birşey yazmıştım ama ben işin mantığı konusunda biraz bilgi vereyim en iyisi..

Önce 1. div'in pozisyonunu bulup, daha sonra bu div'in pozisyonuna göre 2. div'in pozisyonunu yine css parametreleri ve direktifleriyle belirleyebilirsiniz..

Şimdilik kısaca bir bilgi verdim, kısa zamanda konuyla ilgili örnek bir kod yazarım eğer vaktim olursa..

mkarabulut · 18/08/2007, 16:41

Neyse artık...

Ufak bir örnek. Kodları incele. Olabildiğince basit olmasına çalştım

Kod:

<html>
<head>
<script language=javascript>
function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft
            curtop += obj.offsetTop
        }
    }
    return [curleft,curtop];
}

function ShowMenu(obj)
{
  var pos = findPos(obj);
  var div = document.getElementById('DIV_Menu');

  div.style.position = 'absolute';
  div.style.left = pos[0] + 'px';
  div.style.top  = pos[1] + 'px';
  div.style.display = 'inline';
  div.innerHTML = 'Üzerine gelinen içerik : ' + obj.innerHTML;
}

function HideMenu()
{
   document.getElementById('DIV_Menu').style.display = 'none';
}
</script>
<body>

<div style="border:1px solid blue;background-color:whitesmoke;width:300px;padding:10px;">
    <div onmouseover="ShowMenu(this)" onmouseout="HideMenu()">Bu satırın üstüne gelin (DIV)</div>
    <br>
</div>

<div id="DIV_Menu" style="display:none;width:100px;background-color:red;color:white;"></div>
</body>
</html>

Ahmet79 · 18/08/2007, 17:03

<html>

<head>
<meta http-equiv="Content-Language" content="tr">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Katman konumlandırma denemesi</title>
<script>
function dene(){
var i=document.getElementById('ilkdiv').style.height;
document.getElementById('sonrakidiv').style.top=i+ '50px';

}

</script>
</head>

<body bgcolor="#9F9E60" onload=dene();>

<p> </p>
<div style="position: absolute; width: 194px; height: 31px; z-index: 1; left:67px; top: 19px" id="ilkdiv">
Deneme Çalışması</div>

<div style="position: absolute; width: 194px; height: 31px; z-index: 1; left:67px; " id="sonrakidiv">
İkinci Katman</div>
</body>

</html>

gibi bir deneme yaptım ama olmadı.

mkarabulut · 18/08/2007, 17:16

Bir kere style tanımlamalarına güvenerek yapmak yerine dinamik olarak DIV'in konumunun hesaplanması daha sağlıklıdır, ama sen bizim metodu tercih etmiyorsun sanırım.

İkinci olarak style.height değeri bir string'dir, yani onu tamsayı olarak kullanmak istiyorsan parseInt(div.style.height) tarzında dönüştürme yapıp kullanman gerekir (ki sende ki problemin kaynağı bu olabilir).

Kolay gelsin.

Ahmet79 · 18/08/2007, 17:24

Öncelikle ilginiz için teşekkür ederim
Senin metodun daha kullanışlı ama benim css bilgim zayıf olduğu için karmaşık geldi. Sanırım sizin metodunuz daha kullanışlı çok teşekkür ederim. Şurayı söylermisin ikinci katmanı birinci üzerinde değilde mesela 30 px altında çıkarmak istiyorum. Nasıl değiştirmem gerekir.

mkarabulut · 18/08/2007, 17:36

Şöyle bi şey olmalı (benim koda göre)

Kod:

...
div.style.top = (pos[1] + 30) + 'px';
...

Veya nesnenin tam olarak altında göstermek için de nesnenin o an ki boyunu eklemek daha iyi bir sonuç üretebilir.

Kod:

...
div.style.top = (pos[1] + obj.offsetHeight) + 'px';
...

Ahmet79 · 18/08/2007, 17:44

Çok teşekkür ederim yardımın için.

18/08/2007, 15:31	#1 (permalink)
Ahmet79 Üye Üyelik Tarihi: 05/2007 Yer: Zonguldak Mesaj: 480	Div konumuna göre başka divi konumlandırma Herkese selamlar. Konumu veritabanından alınan verilere göre değişen bir div'in konumuna bağlı olarak başka bir div çıksın istiyorum. Böyle bi şey nasıl olur.

18/08/2007, 16:20	#3 (permalink)
mkarabulut Luke is back... Üyelik Tarihi: 05/2002 Yer: ../Dark_Side Mesaj: 2,443	@Askenaz : Bu çok açık değil mi? Adam gelip JS bölümüne sormuş zaten. Adama bir de bunu JS ile yapabilirsin demeye gerek yok. Vaktim olunca buna bir yanıt yazacağım. Quirksmode FindPos fonksiyonu, style.position = 'absolute', style.left, style.top gibi şeylerle bi şeyler karalayacağım. Sanırım senin bir önceki soruna da yanıt olacaktır. __________________ Do or do not. There is no try.

18/08/2007, 17:16	#7 (permalink)
mkarabulut Luke is back... Üyelik Tarihi: 05/2002 Yer: ../Dark_Side Mesaj: 2,443	Bir kere style tanımlamalarına güvenerek yapmak yerine dinamik olarak DIV'in konumunun hesaplanması daha sağlıklıdır, ama sen bizim metodu tercih etmiyorsun sanırım. İkinci olarak style.height değeri bir string'dir, yani onu tamsayı olarak kullanmak istiyorsan parseInt(div.style.height) tarzında dönüştürme yapıp kullanman gerekir (ki sende ki problemin kaynağı bu olabilir). Kolay gelsin. __________________ Do or do not. There is no try.

18/08/2007, 17:36	#9 (permalink)
mkarabulut Luke is back... Üyelik Tarihi: 05/2002 Yer: ../Dark_Side Mesaj: 2,443	Şöyle bi şey olmalı (benim koda göre) Kod: ... div.style.top = (pos[1] + 30) + 'px'; ... Veya nesnenin tam olarak altında göstermek için de nesnenin o an ki boyunu eklemek daha iyi bir sonuç üretebilir. Kod: ... div.style.top = (pos[1] + obj.offsetHeight) + 'px'; ... __________________ Do or do not. There is no try.

Benzer Konular
Konu	Konuyu açana göre	Forum	Cevap	En Son Mesaj
sadece tek bir divi refresh etme	jameryqare	Javascript / DHTML / Ajax	2	16/12/2006 13:02
flash IEda başka mozillada başka yerde	neser	Web Tasarım	0	17/05/2006 16:57
layeri konumlandırma	kerberos	Web Tasarım	0	26/06/2005 05:42
Apache, %67 kullanim ile web sunucu alaninda su ana kadarki en guclu konumuna eristi	acemi	GNU / Linux / UNIX / BSD / Pardus	13	08/11/2003 18:50
CSS ile ilgili bir konumlandırma sorusu	mkarabulut	Web Tasarım	3	25/04/2003 13:27

18/08/2007, 16:00	#2 (permalink)
Askenaz İptal Durumu Üyelik Tarihi: 08/2007 Mesaj: 206	Javascript + CSS

18/08/2007, 16:38	#4 (permalink)
Askenaz İptal Durumu Üyelik Tarihi: 08/2007 Mesaj: 206	Aslında bende açıkça çözümü anlatacaktım ama daha sonra soru birçok konuyu içinde barındırdığı için takıldığı yerlerde soru sorması gerektiğini söylemek için öyle birşey yazmıştım ama ben işin mantığı konusunda biraz bilgi vereyim en iyisi.. Önce 1. div'in pozisyonunu bulup, daha sonra bu div'in pozisyonuna göre 2. div'in pozisyonunu yine css parametreleri ve direktifleriyle belirleyebilirsiniz.. Şimdilik kısaca bir bilgi verdim, kısa zamanda konuyla ilgili örnek bir kod yazarım eğer vaktim olursa..

18/08/2007, 17:03	#6 (permalink)
Ahmet79 Üye Üyelik Tarihi: 05/2007 Yer: Zonguldak Mesaj: 480	<html> <head> <meta http-equiv="Content-Language" content="tr"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <title>Katman konumlandırma denemesi</title> <script> function dene(){ var i=document.getElementById('ilkdiv').style.height; document.getElementById('sonrakidiv').style.top=i+ '50px'; } </script> </head> <body bgcolor="#9F9E60" onload=dene();> <p> </p> <div style="position: absolute; width: 194px; height: 31px; z-index: 1; left:67px; top: 19px" id="ilkdiv"> Deneme Çalışması</div> <div style="position: absolute; width: 194px; height: 31px; z-index: 1; left:67px; " id="sonrakidiv"> İkinci Katman</div> </body> </html> gibi bir deneme yaptım ama olmadı.

18/08/2007, 17:24	#8 (permalink)
Ahmet79 Üye Üyelik Tarihi: 05/2007 Yer: Zonguldak Mesaj: 480	Öncelikle ilginiz için teşekkür ederim Senin metodun daha kullanışlı ama benim css bilgim zayıf olduğu için karmaşık geldi. Sanırım sizin metodunuz daha kullanışlı çok teşekkür ederim. Şurayı söylermisin ikinci katmanı birinci üzerinde değilde mesela 30 px altında çıkarmak istiyorum. Nasıl değiştirmem gerekir.

18/08/2007, 17:44	#10 (permalink)
Ahmet79 Üye Üyelik Tarihi: 05/2007 Yer: Zonguldak Mesaj: 480	Çok teşekkür ederim yardımın için.

Seçenekler
Yazdırmaya Uygun Sayfa Sayfayı E-posta İle Gönder