| | |
| Stránka: 1 z 1
| [ Príspevkov: 11 ] | |
Autor | Správa |
---|
Registrovaný: 10.07.07 Prihlásený: 10.08.16 Príspevky: 128 Témy: 40 | Napísal Lier: 20.02.2014 10:03 | |
|
ahojte, chcel by som urobit animaciu, ak niekto napriklad zoscrolluje na jedno divku, aby nasledne sa v tom divku ine div pohlo. Div Box mam viacero. html Kód: <div id="box"><div id="boxja"></div></div> jquery Kód: if($('#box').is(':visible')) {$(this).children('#boxja').animate({'left': '10%'}, 400);} pozeram na to a zda sa byt vsetko ok. - no nefunguje a neviem kde robim chybu. dakujem za radu
|
|
Registrovaný: 06.02.14 Prihlásený: 19.01.18 Príspevky: 443 Témy: 9 |
to nepojde cez visible. lebo visible je ten div stale. ja na to pouzivam jquery plugin inview. ten ti vie urcit ci je dany element v 'obraze'
|
|
Registrovaný: 10.07.07 Prihlásený: 10.08.16 Príspevky: 128 Témy: 40 | Napísal autor témy Lier: 20.02.2014 11:09 | |
|
Dakjem, no chcem sa opytat ci nei je nieco v Jquery ci zisti ci objekt je na obrazovke a ci je ho vidiet. Ak ano, urobi to a to, a ak nie, tak to a to.
dakujem
|
|
Registrovaný: 29.10.07 Prihlásený: 27.10.23 Príspevky: 1395 Témy: 30 Bydlisko: Bratislava |
Toto by malo zistit ci je na obrazovke. Kód: function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); }
_________________ PC: OS: Windows 11 (64bit) CPU: AMD Ryzen 5 3600 GPU: ASUS TUF RTX3060Ti 8GB RAM: 16GB DDR4-3200MHz Kingston Fury MB: ASUS TUF Gaming B550M WIFI SSD: 1000GB PCIe M.2 NVME Mobil: Xiaomi POCO F2 PRO |
|
Registrovaný: 10.07.07 Prihlásený: 10.08.16 Príspevky: 128 Témy: 40 | Napísal autor témy Lier: 20.02.2014 14:10 | |
|
tak toto je super. No samozrejme mam teraz iny problem Kód: $(window).scroll(function(){ if( $("#bo").is_on_screen() ) { $(this).children("#box").find("#boxja").animate({'left': '10%'}, 400); $('#boxta').animate({'right': '10%'}, 400); } else {$('#boxja').animate({'left': '-230px'}, 100); $('#boxta').animate({'right': '-230px'}, 100); } }); No tak teraz to posiela div bo na kontrolu ci je to vidiet. Co je ok, ked dam najst div boxja - ako this - tak to nefunguje, akonahle vimenim this za #bo, ide to. No samoyrejme oba v jednom #bo (prvom) no na mam 6 pod sebou. Neviem preco to ide iba na prvom.
|
|
Registrovaný: 06.02.14 Prihlásený: 19.01.18 Príspevky: 443 Témy: 9 |
preco by to malo fungovat s this? v tvojom pripade je 'this element' window a nie #boxja. ale kazdopadne skus este raz napisat co chces a v ktorom riadku to myslis, lebo z toho co si napisal nerozumiem nic
|
|
Registrovaný: 10.07.07 Prihlásený: 10.08.16 Príspevky: 128 Témy: 40 | Napísal autor témy Lier: 20.02.2014 15:14 | |
|
OK takze am script: Kód: <script type="text/javascript"> $(document).ready(function(){
function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; return ((elemTop <= docViewBottom) && (elemTop >= docViewTop)); }
$(window).scroll(function () { $('#bo').each(function (i) { if (isScrolledIntoView(this)) { $(this).find("#boxja").animate({'left': '12%'}, 400); $(this).find('#boxta').animate({'right': '12%'}, 400); } else { $(this).find("#boxja").animate({'left': '-230px'}, 100); $(this).find('#boxta').animate({'right': '-230px'}, 100);} }); });
}) </script> no a postupnost div je taka: Kód: <div id="#bo"> <div id="#box"><div id="#boxja"></div></div> <div id="#box"><div id="#boxta"></div></div> </div> <div id="#bo"> <div id="#box"><div id="#boxja"></div></div> <div id="#box"><div id="#boxta"></div></div> </div>
dany prikald mi pekne pohne oboma divkami do stredu, ale iba v jednom #bo. Druhe sa ani nepohne. Dufam, ze terza je to lepsie vysvetlenie. :O
|
|
Registrovaný: 06.02.14 Prihlásený: 19.01.18 Príspevky: 443 Témy: 9 |
nemozes mat viac elementov s rovnakym id, zmen to na class. a id v html sa nepise s "#"
|
|
Registrovaný: 10.07.07 Prihlásený: 10.08.16 Príspevky: 128 Témy: 40 | Napísal autor témy Lier: 20.02.2014 15:27 | |
|
joj sorry jasne to tam nemam .. skusim to zmenit na class
update: ---------------------
no class pohne kazdou, ale nie prave tou class, ktora je vidiet.
|
|
Registrovaný: 10.07.07 Prihlásený: 10.08.16 Príspevky: 128 Témy: 40 | Napísal autor témy Lier: 20.02.2014 15:42 | |
|
no ak zmenim vsetky div na class - tak pohne, ale vsetkym naraz a nie len konkretnym divom ktory je tam. vyriesene - vlastne to class bolo to co bola chyba :Kód: $(window).scroll(function () { $('.box').each(function (i) { if (isScrolledIntoView(this)) { $(this).find(".boxja").animate({'left': '12%'}, 400); $(this).find('.boxta').animate({'right': '12%'}, 400); } else { $(this).find(".boxja").animate({'left': '-230px'}, 100); $(this).find('.boxta').animate({'right': '-230px'}, 100);} }); });
Dakujem Vam
Naposledy upravil Lier dňa 20.02.2014 15:46, celkovo upravené 2
|
|
Registrovaný: 06.02.14 Prihlásený: 19.01.18 Príspevky: 443 Témy: 9 |
$('#bo').each(function (i) { if (isScrolledIntoView(this)) {
to mas blbost. v each nepouzivas this, treba upravit argumenty funkcie na:
$('#bo').each(function (index, element) {
a miesto this pouzivat 'element'. preto ti nepohne tym spravnym, lebo kedze this je iny objekt, tak to nevyhovuje podmienky a vykona sa ta druha.
|
|
| Stránka: 1 z 1
| [ Príspevkov: 11 ] | |
| Nemôžete zakladať nové témy v tomto fóre Nemôžete odpovedať na témy v tomto fóre Nemôžete upravovať svoje príspevky v tomto fóre Nemôžete mazať svoje príspevky v tomto fóre
|
|