+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: jQuery pokazujący się div (/thread-jquery-pokazujacy-sie-div)
jQuery pokazujący się div - benny - 27-04-2011
Mam kolejny problem z jQuery.
Jestem bardzo początkujący, pierwsze kroki stawiam od tygodnia i znów napotkałem przeszkodzę.
Chcę, aby po najechaniu na jeden div, pokazywał się drugi. Po opuszczeniu tego pierwszego, ten drugi znikał. Kod mam następujący:
Kod:
$("div#offer-menu")
.mouseover(function(){
$("div.offer").slideDown("500");
})
.mouseout(function(){
$("div.offer").slideUp("500");
});I wszystko działa ok, tylko nie w IE ;/
Może ktoś poratować?
RE: jQuery pokazujący się div - Kartofelek - 27-04-2011
Kod:
$(document).ready(function() {
...tutaj twój kod
});jak rozumiem masz powyższy fragment?
Jeżeli tak, to powinno śmigać.
RE: jQuery pokazujący się div - benny - 27-04-2011
Tak mam ten kod, tylko przed tymi mouseover mam jeszcze kod slidera, w którym mi pomagałeś.. Wygląda to wszystko tak:
Kod:
<script>
Cufon.replace('h1');
$(document).ready(function() {
var $sliders = $('.slider');
$sliders.each(function() {
var $current_slider = $(this);
var $lista = $('.lista', $current_slider);
var $li = $lista.children('li');
if ($li.length > 3) {
var odleglosc = $li.eq(0).outerWidth() + parseInt($li.eq(0).css('margin-left')) + parseInt($li.eq(0).css('margin-right'));
var maxLeft = odleglosc * $li.length - 3 * odleglosc;
$('.next', $current_slider).click(function() {
if ($lista.position().left > -maxLeft) {
$($lista).not(':animated').animate({
'left' : '-='+odleglosc
},500);
}
else {
$($lista).not(':animated').animate({
'left' : 0
},500);
}
});
$('.prev', $current_slider).click(function() {
if ($lista.position().left<0) {
$($lista).not(':animated').animate({
'left' : '+='+odleglosc
},500);
}
else if ($lista.position().left==0) {
$($lista).not(':animated').animate({
'left' : '-='+odleglosc
},500);
}
});
} else {
$('.next, .prev', $current_slider).click(function() {
$(this).preventDefault();
return false;
});
}
})
var offer_menu = $("div#offer-menu");
var offer = $("div.offer");
$(offer_menu).mouseenter(function(){
$(offer).slideDown("500");
$(offer).mouseenter(function(){
})
$(offer).mouseleave(function leave(){
$(offer).slideUp("500");
})
});
});
</script>Przerobiłem to na mouseenter i mouseleave żeby sprawdzić czy tutaj jest błąd, ale dalej nie działa w IE, a w FF, Operze i Chrome śmiga jak trzeba.
RE: jQuery pokazujący się div - Kartofelek - 27-04-2011
Kod:
var offer_menu = $("div#offer-menu");
var offer = $("div.offer");
$(offer_menu).
.....przeczytaj za karę ten fragment kodu 100 razy
RE: jQuery pokazujący się div - benny - 27-04-2011
Kara dosyć sroga, szkoda, że nie ma uzasadnienia do tej kary bo samo czytanie tego samego 100 razy chyba nic nie da, jeśli nie wie się o co chodzi ;p
Jeśli chodzi o to, że dałem to sobie do zmiennych to nie wiem co to ma wspólnego?
Chcę tego używać później więc głupio by było pisać za każdym razem div#cośtam
Innym moim pomysłem na błąd jest brak '' w offer_menu, ale działa z i bez tego na FF, Chrome, Operze a z i bez tego nie działa w IE.
Więc może jakieś naprowadzenie?
RE: jQuery pokazujący się div - Kartofelek - 27-04-2011
Logika, logika:
Skoro (wedle twojego przykładu):
Kod:
var offer_menu = $("div#offer-menu");to
Kod:
$(offer_menu).Kod:
$($("div#offer-menu"))czyli źle.
Powinno być:
Kod:
var offer_menu = $("div#offer-menu");
var offer = $("div.offer");
offer_menu.mouseenter(function(){...bla bla blaa najlepiej dawaj $ przed zmiennymi zawierającymi pobrane przez jquery obiekty. Ulatwi ci to obeznanie.
Kod:
var $offer_menu = $("div#offer-menu");
var $offer = $("div.offer");
$offer_menu.mouseenter(function(){...bla bla blaA teraz wróć do wcześniej zadanej lektury :}
RE: jQuery pokazujący się div - benny - 27-04-2011
Zmieniłem..
Kod:
offer_menu.mouseenter(function(){
offer.slideDown("500");
offer.mouseleave(function(){
offer.slideUp("500");
});
});Dorzucam dla chętnych udzielenia mi pomocy, styl tego co ma się pojawiać. Może tutaj tkwi problem?
Kod:
div.offer {
display: none;
position: absolute;
top: 120px;
margin-left: 112px;
font-family: Arial;
font-size: 11px;
line-height: 20px;
padding: 10px 0 0 20px;
background: url(../images/offer-tree.png) no-repeat;
}EDIT:
Dodałem offer.css("display", "block") i działa
Dzięki za naprowadzenie!