Popup Box Yapma!

  • Konuyu başlatan Konuyu başlatan mstfcck
  • Başlangıç tarihi Başlangıç tarihi
M

mstfcck

Asistan
Katılım
18 Mart 2010
Mesajlar
174
Reaksiyon puanı
5
Puanları
0
[MENTION=27855]mortalrocky[/MENTION] oke. Teşekkürler. :)

Ama sağlıklı çalışabilmesi için şu konumlandırma olayını iyice çözmem gerekicek, arada bir bu konuyu tekrar hortlatırım .d

--- Mesaj Güncellendi ---

Aklıma gelmişken bir şey daha :)

Yukarıda vermiş olduğum örnekte, link'in üzerine imleci getirdiğinizde popup açılıyor, çektiğinizde de gizleniyor.
Problem şu, imleci hızlı hızlı linkin üzerine getirip çektiğinizde. Ne kadar yaptıysanız bu işlemi sürekli popup açılıp kapanıyor.
Bunun için bi çözüm öneriniz varmı? Ve de açılan popup'ın üzerine geldiğimde kapanmasın gibi vs. vs. Çünkü linkten imleci çekince kapanıyor.
 
annttiigs

annttiigs

Profesör
Katılım
7 Şubat 2007
Mesajlar
2,589
Reaksiyon puanı
24
Puanları
218
timer koy :) belirli bir zaman geçmezse popup'ı açma ;)
 
orcnd

orcnd

Dekan
Katılım
13 Ekim 2008
Mesajlar
6,394
Reaksiyon puanı
255
Puanları
243
jquery'de kullandığın animasyonları stop(true,true) komutu ile durdurabilirsin.

fadeIn'den hemen önce kullanırsan fadeOut işlemini durdurmuş olursun böylece fade in fade out'u beklememiş olur
 
M

mstfcck

Asistan
Katılım
18 Mart 2010
Mesajlar
174
Reaksiyon puanı
5
Puanları
0
annttiigs dedi ki:
timer koy :) belirli bir zaman geçmezse popup'ı açma ;)
Genişletmek için tıkla ...

Teşekkürler :)

orcnd dedi ki:
jquery'de kullandığın animasyonları stop(true,true) komutu ile durdurabilirsin.

fadeIn'den hemen önce kullanırsan fadeOut işlemini durdurmuş olursun böylece fade in fade out'u beklememiş olur
Genişletmek için tıkla ...

Ama aradığım tam olarak böyle bişeydi :) Teşekkürler hocam :)

--- Mesaj Güncellendi ---

İki tane örnek yaptım bakın bakalım nasıl olmuş :)

<!DOCTYPE html>
<html>
<head>
<meta http-*****="Content-Type" **********text/html; charset=utf-8">
<meta http-*****="content-language" **********tr">
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var SubMenuShowTime = 500;
var SubmenuHideTime = 500;
$(".menu").hover(
function () {
var position = $(this).position();
var i = $(this).index();
var ort = Math.abs( Math.round( ($(".menu").eq(i).width() - $(".menu-ex").eq(i).width()) / 2) );

$(".menu-ex").eq(i)
.css({ top: position.top+100, left: position.left-ort, opacity: 0})
.stop(true,true).fadeIn(0)
.animate({ top: position.top+110, opacity: 1}, SubMenuShowTime);

var x = Math.abs(Math.round( $(".menu-ex").eq(i).width()) / 2);
$(".up").eq(i).css({ left: x-15 });
},
function () {
var position = $(this).position();
var i = $(this).index();
$(".menu-ex").eq(i)
.animate({ top: position.top+110, opacity: 0 }, SubmenuHideTime)
.stop(true,true).fadeOut(0);
}
);
});
</script>

<link rel="StyleSheet" href="Css/menu.css"/>
<style type="text/css">
#content-panel { position:absolute; height:500px; width:100%; }
#content { height:400px; width:1000px; margin-left:auto; margin-right:auto; margin-top:50px; box-shadow:0px 0px 5px #666 }
.menu { display:table; float:left; height:100px; width:100px; background:#ddd; color:#333; font-family:Century Gothic; font-size:22px; }
.menu:hover { height:100px; width:100px; background:#666 color:#fff font-family:Century Gothic; font-size:22px; }
.menu-name { display:table-cell; vertical-align:middle; text-align:center; }
.menu-ex { position:absolute; display:none; padding:5px; background:#444; color:#fff font-size:12px; border-radius:5px; box-shadow:1px 1px 5px #999 }
.up { position:absolute; top:-10px; display:block; background-image:url('up.png'); height:13px; width:32px; }
</style>
</head>
<body>
<div id="content-panel">
<div id="content">


<div style="width:100%; height:100px; background:#eee;">

<div class="menu">
<div class="menu-name">
Home
</div>
<div class="menu-ex">
<span class="up"></span>
Home menusü üzerindesiniz.
</div>
</div>
<div class="menu">
<div class="menu-name">
News
</div>
<div class="menu-ex">
<span class="up"></span>
Gündemden sıcak haberleri sizin için burada topladık.
</div>
</div>
<div class="menu">
<div class="menu-name">
About
</div>
<div class="menu-ex">
<span class="up"></span>
Hakkımızda herşey.
</div>
</div>
<div class="menu">
<div class="menu-name">
Contact
</div>
<div class="menu-ex">
<span class="up"></span>
Bize buradan <a href="#">ulaşın.</a>
</div>
</div>


</div>

</div>
</div>
</body>
</html>




------------------------------------------------


<!DOCTYPE html>
<html>
<head>
<meta http-*****="Content-Type" **********text/html; charset=utf-8">
<meta http-*****="content-language" **********tr">
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var SubMenuShowTime = 500;
var SubmenuHideTime = 100;
$(".menu-item").hover(
function () {
var position = $(this).position();
var i = $(this).index();
$(".sub-menu").eq(i)
.css({ top: position.top-25, left: position.left+150, opacity: 0})
.stop(true,true).fadeIn(0)
.animate({ top: position.top, opacity: 1}, SubMenuShowTime);
},
function () {
var position = $(this).position();
var i = $(this).index();
$(".sub-menu").eq(i)
.animate({ top: position.top-25, opacity: 0 }, SubmenuHideTime)
.stop(true,true).fadeOut(0);
}
);
});
</script>

<link rel="StyleSheet" href="Css/menu.css"/>
<style type="text/css">
#content-panel
{
position:absolute;
height:500px; width:100%;
}
#content
{
height:400px; width:1000px;
margin-left:auto; margin-right:auto; margin-top:50px;
border-radius:5px;
box-shadow:0px 0px 5px #666
}

ul#menu {
list-style-type: none;
padding: 0;
margin: 0;
color:#fff
width:150px;
}
.menu-item {
display: block;
padding:5px;
background:#333;
border-bottom:1px solid #fff
}
.menu-item:hover {
display: block;
padding:5px;
background:#555;
border-bottom:1px solid #fff
}
ul.sub-menu {
position:absolute;
display:none;
list-style-type: none;
padding: 1px;
color:#fff
width:150px;
background:#666
box-shadow:2px 2px 3px #999
}
.sub-menu-item {
display: block;
padding:5px;
background:#333;
border-bottom:1px solid #fff
}
.sub-menu-item:hover {
display: block;
padding:5px;
background:#555;
border-bottom:1px solid #fff
}
</style>
</head>
<body>
<div id="content-panel">
<div id="content">
<ul id="menu">
<li class="menu-item">Menu 1
<ul class="sub-menu">
<li class="sub-menu-item">Item 1</li>
<li class="sub-menu-item">Item 2</li>
</ul>
</li>
<li class="menu-item">Menu 2
<ul class="sub-menu">
<li class="sub-menu-item">Item 3</li>
<li class="sub-menu-item">Item 4</li>
</ul>
</li>
<li class="menu-item">Menu 3
<ul class="sub-menu">
<li class="sub-menu-item">Item 5</li>
<li class="sub-menu-item">Item 6</li>
</ul>
</li>
<li class="menu-item">Menu 4
<ul class="sub-menu">
<li class="sub-menu-item">Item 7</li>
<li class="sub-menu-item">Item 8</li>
</ul>
</li>
<li class="menu-item">Menu 5
<ul class="sub-menu">
<li class="sub-menu-item">Item 9</li>
<li class="sub-menu-item">Item 10</li>
</ul>
</li>
<li class="menu-item">Menu 6
<ul class="sub-menu">
<li class="sub-menu-item">Item 11</li>
<li class="sub-menu-item">Item 12</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>


Yorumlarınızı bekliyorum :)
 
annttiigs

annttiigs

Profesör
Katılım
7 Şubat 2007
Mesajlar
2,589
Reaksiyon puanı
24
Puanları
218
modal box rengini direk değiştirebilirsin :) elini hiç korkak alıştırma :P
 
Cevap yazmak için kayıt ol veya giriş yap

Benzer konular

Lisans Bul
İndirim 30% Discount Coupon Code: Easy CSS Menu - Create CSS dropdown menus in minutes with the CSS menu builder - Mobil uyumlu ve SEO dostu CSS açılır Menü
Cevaplar
0
Görüntüleme
772
Lisans Bul
Lisans Bul
Lisans Bul
İndirim Blumentals - Rapid PHP 2025 Personal-Team License Discount Coupon - PHP ve web geliştirme dillerinde hızlı, verimli ve AI destekli kodlama sunan IDE!
Cevaplar
0
Görüntüleme
610
Lisans Bul
Lisans Bul
E
Yardım Yazılımda Uzman Olma ve Yol Haritası
Cevaplar
3
Görüntüleme
1K
kmurat
kmurat
ahmetabic
Rehber Modern SEO Nedir ve Nasıl Yapılır?
Cevaplar
0
Görüntüleme
1K
ahmetabic
ahmetabic
F
JavaScript İle Basit BBCode Editörü ve Emoji Sistemi Yapımı
Cevaplar
0
Görüntüleme
1K
fatihege
F

SDN Haberleri

Son mesajlar

Üst