Popup Box Yapma!

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.

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.

hehe facebookon ilgili sayfasini download edip incelesen daha basit olucakti sanki :P

kizanlik dedi: ↑

@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...

kosasker dedi: ↑

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.

orcnd dedi: ↑

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 ---

burns206 dedi: ↑

hehe facebookon ilgili sayfasini download edip incelesen daha basit olucakti sanki :P

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

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

re13el dedi: ↑

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?

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

HTML5 de kullanılmış olabilir.

~J.c--W_ dedi: ↑

HTML5 de kullanılmış olabilir.

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

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

cgrszone dedi: ↑

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.

mstfcck dedi: ↑

Buna benzer şeyler yapıyorum Jquery ile.

Tamam işte :) Stili de CSS ile verdinmi bitti gitti :)

cgrszone dedi: ↑

Tamam işte :) Stili de CSS ile verdinmi bitti gitti :)

Hocam o kadar kolay olmuyor ya :)

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 left:offset-left; top:offset-top; inş anlatabilmişimdir :D

mortalrocky dedi: ↑

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 left:offset-left; top:offset-top; inş anlatabilmişimdir :D

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

mstfcck dedi: ↑

Hocam o kadar kolay olmuyor ya :)

Bana niye kolay geliyo? Bende mi sorun var?

şö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.

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

mstfcck:

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.

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 :)

İş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?

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

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.

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

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

mortalrocky dedi: ↑

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

Evet iyi fikir.

orcnd dedi: ↑

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.

annttiigs dedi: ↑

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? mortalrocky 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?

mstfcck 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 :D