Popup Box Yapma!

[mstfcck]

Arkadaşlar,

İstediğim şey aşağıdaki resimdeki gibi açılabilir menubox ve popup boxlar yapmak.
Nette gezmediğim site kalmadı. Doğru düzgün bir çözüm yolu bulamadım.

Kendim yapıyorum fakat. Facebook veya Twitter'daki gibi dinamik çalışmıyor.
Popup box veya menu box sayfada açılınca sayfa kayıyor.
Hazır tool'lardan nefret ettim. O yüzden kendim yapmak istiyorum.

Öğrenmek istediğim bunları sayfada nasıl saklıyorlar ve aktif hale geldiğinde nasıl bu kadar dinamik çalışıyor. Nasıl bir css ve javascript kullanmak gerekiyor.

Bu konuda bilgisi olan arkadaşlardan yardımlarını rica ediyorum.

Resim:

 

[kizanlik]

[MENTION=101142]mstfcck[/MENTION]:

CSS. Mesela tr:hover kullanımı var. Fare TableRow üzerine gelince bi' iş yapıyor.

Çok ayrıntılı konu. CSS öğreten kaynaklara gözatmalısın.

 

[kosasker]

Jquery.ui.dialog' u bu iş için kullanabilirsin. JQuery öğrenmen yerinde olur. Onu çözeyim derken zaten ister istemez CSS ve doğal javascript'in dibine inmiş olacaksın.

 

[orcnd]

Burada 30 tanesini incelemişler

 

[burns206]

hehe facebookon ilgili sayfasini download edip incelesen daha basit olucakti sanki

 

[mstfcck]

@mstfcck:

CSS. Mesela tr:hover kullanımı var. Fare TableRow üzerine gelince bi' iş yapıyor.

Çok ayrıntılı konu. CSS öğreten kaynaklara gözatmalısın.

CSS'nin altını üstüne getirdim...

Jquery.ui.dialog' u bu iş için kullanabilirsin. JQuery öğrenmen yerinde olur. Onu çözeyim derken zaten ister istemez CSS ve doğal javascript'in dibine inmiş olacaksın.

JQuery'de biliyorum baya.

Burada 30 tanesini incelemişler

Bunları daha önce incelemiştim.


Teşekkür ederim ilgileriniz için ama istediklerim bunlar değil. Bunları daha önce ben yüzlerce kez gördüm. Ki bu birazda yetenek istiyor. Sizden istediğim sadece işin mantığı. Örneğin: Bir div'i veya ul'yi sayfada nasıl saklarsın. Bunu aktif hale getirdiğinde ilgili menu resim vb. şeylerin etrafına nasıl doğru şekilde konumlayabilirim. Bunun gibi şeyler. Kendim yapıyorumda. Yeterli görmüyorum. Kendi yaptığınız şeyler varsa lütfen bunlardan örnek verin. Benim bu gibi örneklerle dolu yüzlerce dökümanım var.

Tekrar teşekkürler.

--- Mesaj Güncellendi ---

hehe facebookon ilgili sayfasini download edip incelesen daha basit olucakti sanki

Onu da denediğime emin olabilirsiniz. İndirmedim ama bütün Css'leri inceledim. Sadece facebook'da değil. Bunun gibi birçok sitenin.

 

[re13el]

Ben pek anlamam ama şu siteden css ile ilgili konulara bak istersen.
http://www.w3schools.com

 

[mstfcck]

Ben pek anlamam ama şu siteden css ile ilgili konulara bak istersen.
http://www.w3schools.com

Onun gibi bi site daha verim: http://www.tutorialspoint.com/ ; http://www.w3.com


Bu sitelerde yatıp kalkıyorum.

Teşekkür ederim ama Lütfen örnek site tool vs. şeyler önermeyin. Kendi edindiğiniz tecrüberi istiyorum ben. Paylaşmak isteyen varsa?

 

[re13el]

@mstfcck Ben daha yeni başlıycam inşallah. O sebebten kendi bilgim yok henüz.

 

[ck-xe]

HTML5 de kullanılmış olabilir.

 

[mstfcck]

HTML5 de kullanılmış olabilir.

Html5 veya Css3 kullanmadan da yapmak mümkün.

 

[craftingMaterial]

Bir tane template hazırlayıp veriyi üzerine jQuery ile override edebilirsin. Çok zor bir şey olmasa gerek...

 

[mstfcck]

Bir tane template hazırlayıp veriyi üzerine jQuery ile override edebilirsin. Çok zor bir şey olmasa gerek...

Buna benzer şeyler yapıyorum Jquery ile.

 

[craftingMaterial]

Buna benzer şeyler yapıyorum Jquery ile.

Tamam işte Stili de CSS ile verdinmi bitti gitti

 

[mstfcck]

Tamam işte Stili de CSS ile verdinmi bitti gitti

Hocam o kadar kolay olmuyor ya

 

[mortalrocky]

konumlardırma http://api.jquery.com/offset/ ile yapılıyor. Sayfayanın en üstüne display:none; olan bir div yerleştir. Sonra tıklanması gereken tagın offset-left ve offset top al. Sonra sayfanın en üstüne yerleştirdiğin div'i show et ve css leftffset-left; topffset-top; inş anlatabilmişimdir

 

[mstfcck]

konumlardırma http://api.jquery.com/offset/ ile yapılıyor. Sayfayanın en üstüne display:none; olan bir div yerleştir. Sonra tıklanması gereken tagın offset-left ve offset top al. Sonra sayfanın en üstüne yerleştirdiğin div'i show et ve css leftffset-left; topffset-top; inş anlatabilmişimdir

Pek açık bi anlatım olmadı ama araştıracağım Teşekkürler.

 

[craftingMaterial]

Hocam o kadar kolay olmuyor ya

Bana niye kolay geliyo? Bende mi sorun var?

 

[mortalrocky]

şöyle anlatıyım sayfanın en üstüne <div class="bubble"></div> yerleştir. css'i display:none;position:absolute;z-index:1000;

<a class="tikla">tıkla</a>

.tikla'nın click eventinde tikla'nın ofset top ve left'ini alacaksın ve bubble show edeceksin. Sonra bu değerleri bubble vereceksin.

.bubble( "left: " + offset.left + ", top: " + offset.top);

umarım şimdi daha iyi olmuştur.

 

[orcnd]

jquery'de herhangi bir nesnenin bulunduğu yeri position ile alabilyorsun sonrası keyfine kalıyor

var pos=$('div#menu').position();

$('#popup').css('left', pos.left + 'px').css('top', pos.top + 'px').fadeIn('slow');

gibi şeyler üretebilirsin

 

[sunelan]

http://designwithpc.com/Plugins/Hovercard

 

[kizanlik]

[MENTION=101142]mstfcck[/MENTION]:

Masaüstü uygulamadaki butonu ele alalım.

MouseOver (event bu) --> button.MouseOver { yapılacak işler }

CSS'te de TAGlar var.

<a>
<DIV>

"a:hover { style }" yukarıdaki mantığa benziyor. "hover" event burada. Oluştuğunda, style tanımları çalışıyor.

Temel mantığı bu.

 

[annttiigs]

jquery bunun için biçilmiş kaftandır yapman gerekeni basitçe anlatırsak.

arkada box'un içine çekeceğin datayı hazırlayan bir sayfa. Bu sayfayı ajax çağrıları ile çağırıp sonucu istediğin yerde istediğin formatta ( css yardımı ile ) gösterebilirsin.

--- Mesaj Güncellendi ---

ayrıca popup box diye değil de modal box diye aratırsan çok daha faydalı sayfaları bulabilirsin

 

[mstfcck]

İşte beklediğim cevaplar Herkese çok teşekkürler.

Offset'de Position'da işe yarıyor.

İlk örneği yaptım:

<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; }
.bubble { display:none; position:absolute; z-index:1000px; width:100px; height:150px; background:#ddd; box-shadow:1px 1px 5px #333}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$( ".tikla" ).hover(
function() {
var offset = $(this).offset();
$('.bubble').css('left', offset.left + 'px').css('top', 25+offset.top + 'px').fadeIn('slow');
},
function() {
$('.bubble').delay(1000).fadeOut('slow');
}
);
});
</script>
</head>
<body>
<div class="bubble">
<div>Bu bir denemedir.</div>
</div>
<div style="padding:100px; background:#eee;">
<a class="tikla" href="#">tıkla</a>
</div>
</body>
</html>


Başka neler yapılabilir, fikri olan?

 

[mortalrocky]

a tagındaki title'ları attr ile çekip .bubble bastırabilirsin böylece dinamik bir yapı olur.

 

[orcnd]

offset kullanırsan ekrandaki konumunu verir yani ekranda bulunduğu konumu verir. bu sayfaya sığmayan sayfanın al tarafında kalan scroll yaparak görünebilen şeylerde sıkıntı yaratabilir.

 

[annttiigs]

z-index'i 1000 falan yapmana da gerek yok. sadece diğerlerinden fazla olsun yeter. demek istediğim kendini 1000'e şartlama.

 

[markette]

html5 kullanılmış gibi gözüküyor

 

[mstfcck]

a tagındaki title'ları attr ile çekip .bubble bastırabilirsin böylece dinamik bir yapı olur.

Evet iyi fikir.

offset kullanırsan ekrandaki konumunu verir yani ekranda bulunduğu konumu verir. bu sayfaya sığmayan sayfanın al tarafında kalan scroll yaparak görünebilen şeylerde sıkıntı yaratabilir.

Hocam, peki position mı kullanmalıyım? Sizde tavsiye ediyosunuz.

z-index'i 1000 falan yapmana da gerek yok. sadece diğerlerinden fazla olsun yeter. demek istediğim kendini 1000'e şartlama.

Oke hocam teşekkürler


Bir de sormak istediğim bişey var. Bu ekranda popup olarak gösterdiğim şeyleri sayfada istediğim yerde saklasak sorun olur mu? [MENTION=27855]mortalrocky[/MENTION] sayfanın en üstüne demişti de o yüzden soruyorum. facebook'un sayfalarını inceledim. Adamlar istediği yere koymuşlar. Yapılabilir gibi?

 

[mortalrocky]

[MENTION=101142]mstfcck[/MENTION] tabiki istediğin yere koyabilirsin sonuçta z-indexle her hangibir div'in üstene alabilirsin. Ben sadece örnek verdim. Açtığın popup bütün elementlerin üzerinde olması gerektiği için ben sayfanın en üstüne koyuyorum ve z-index de 999 yapıyorum