+- 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: wysuwany box + funkcja click (rozwiązany) (/thread-wysuwany-box-funkcja-click-rozwiazany)
wysuwany box + funkcja click (rozwiązany) - harvester2001 - 09-05-2012
Witam
Mam kod do wysuwania boxa z boku strony, box się wysuwał po najechaniu na wystającą część boxa.
Potrzebuje go przerobić by po kliknięciu myszką na wystającą część boxa, box się wysuną.
Udało mi się zrobić że po kliknięciu się wysuwa ale nie potrafię go kliknięciem schować.
Bardzo proszę o poprawkę.
Dziękuję
Kod:
<script type="text/javascript">
$(function(){
$("#wysuwane").css("left","-210px");
$("#wysuwane").click(
function () {
$("#wysuwane").animate({left: "0px"}, 1000 );
$(this).addClass("zamknij");
}, ////[color=#FF0000] tutaj już coś popsułem[/color]////
function () {
$("#wysuwane").click({left: "-210px"}, 1000 );
$(this).removeClass("zamknij");
}
);
});
</script>RE: wysuwany box + funkcja click - harvester2001 - 09-05-2012
Eee coś nie chce zadziałać teraz to jeszcze bardziej się rozjechało.
W head mam wpisane to:
Kod:
<script type="text/javascript">
$(function(){
$("#wysuwane").css("left","-210px");
$("#wysuwane").click(
function () {
$("#wysuwane").animate({left: "0px"}, 1000 );
$(this).addClass("zamknij");
},
function () {
$("#wysuwane").click({left: "-210px"}, 1000 );
$(this).removeClass("zamknij");
}
);
});
</script>HTML:
<div id="FB"></div>
<div id="wysuwane">
<div id="wewnatrz"></div>
</div>
CSS :
#wysuwane{
background: url(../zdjecia/fe2.png) no-repeat scroll 0 0 transparent;
padding: 20px;
width: 230px;
height: 295px;
position: fixed;
margin-top: -160px; /*połowa wysokości panelu w górę */
left: 0px;
top: 50%;
cursor: pointer;
}
#wewnatrz{
float:left;
width: 230px;
display:block;
margin-left:0px;
cursor: pointer;
}
.zamknij
{
background-position: 0px 0px -242px 0px;
}
#FB{
visibility:hidden;
width:0px;
height:0px;
}
Wtedy box się wysuwa ale się nie chowa ale..
jak zastosuję ten kod który mi napisałeś to box nie jest schowany tylko od razu jest wysunięty i nie reaguje na "kliknięcie" w żaden sposób.
;(
RE: wysuwany box + funkcja click - szym - 09-05-2012
Kod PHP:
$(document).ready(function() {
$("#wysuwane").css("left","-210px");
$("#wysuwane").bind("click", function() {
if($("#wysuwane").css("left")=='-210px'){
$("#wysuwane").animate({left: "0px"}, 1000 ).addClass("zamknij");
} else {
$("#wysuwane").animate({left: "-210px"}, 1000 ).removeClass("zamknij");
}
})
});
RE: wysuwany box + funkcja click - Kartofelek - 09-05-2012
Ja bym pewnie zastosował zmienną jako przełącznik, bo nie przypominam sobie by click pozwalał na wykorzystanie kilku funkcji
Kod:
var wysunitete = false;
$("#wysuwane").click(function() {
if (wysuniete) {
.....
wysuniete = false;
return false;
} else {
......
wysuniete = true;
return false;
}
});Nawet nie trzeba zmiennej bo można wykorzystać np .data(). Opisywać nie będę, bo wszystko jest tutaj: http://jqapi.com/
Ale bez kodu nie wiem czy to dobrze robisz. Bo jeżeli twój #wysuniete to cały blok z facebookiem i czymś tam, to click będzie wywoływany dla każdego elementu w tym
bloku (http://doman.art.pl/kursjs/kurs/mouse.html#babelki). Więc jak klikniesz jakiś like itp to ci wywoła clicka dla #wysuniete ;]
Aby to obejść... zresztą co się będę produkował:
http://doman.art.pl/kursjs/kurs/jquery/hover_boxik.html
(dokładnie pod 3 kodem pod animacją działania boxika)
RE: wysuwany box + funkcja click - harvester2001 - 09-05-2012
"Szym" działa
Chłopaki bardzo ale to bardzo dziękuję za pomoc i wyjaśnienia
