Witam
Mam problem z wyłączeniem widoczności div’ów w które są poza kontenerem gdzie powinny być widoczne
Bo jeżeli dam overflow: hidden to owszem nie widać tych obrazków co nie są w tym konterze chyba że się przewinie obrazki tylko że problem jest tego typu że każdy obrazek posiada rozwijane w dół menu i wtedy jak jest overflow:hidden to ucina te menu po rozwinięciu.
Czy da się jakoś tylko w poziomie overflow użyć? Próbowałem z overflow-x, overflow-y ale efekt podobny…
Taki układ można zakodować na milion sposobów więc bez kodu ciężko zaproponować jakiekolwiek rozwiązanie. Zależnie od tego jak zakodowany jest widok inaczej trzeba będzie rozwiązać problem.
W 96 linijce jest wczytywana phtml’ka z rozwijanym menu
Problem trudny do rozwiązania czy podałem za mało informacji?
Za mało i źle podane, nie mam interpretera php w oczach, ani nie jestem wstanie domyśleć się CSSa. Nie rozumiem czemu od razu kodujesz (na to wygląda) stronę do php, no ale ja wielu rzeczy nie rozumiem. Nie chce mi się też już o wszystko prosić, jeśli ktoś potrzebuje pomocy i sam nie umie podać potrzebnych rzeczy no to sorki.
Powiem tak problem jest tak skomplikowany że trudno mi nawet podać wszystkie informacje które są niezbędne.
No to ja nie pomogę bo mi się minuty do wróżbity Macieja skończyła, a moja szklana kula w naprawie :(. Jak wróci z serwisu to może coś się uda wykombinować.
A tak serio to nie wiem co może być skomplikowanego we wrzuceniu kodu html, css i js na portal typu jsfiddle. Z opisu i obrazka w pierwszym poście to nawet nie wiem do końca z czym mam do czynienia, a zachowanie jakie ten prawdopodobnie slaider dodaje na elementach, może mieć wpływ na ewentualne rozwiązanie.
Na bazie tego co dałeś mogę Ci jedynie dać taką odpowiedź.
Musisz użyć pozycjonowania absolutn dla tego menu w css, tak by wyrwać menu z kontekstu obiektu, który ma nadany atrybut overflow. Ewentualnie możesz menu dla poszczególnych zdjęć dodać poza obiektem z overflow i wyświetlać je przy pomocy JS w odpowiednim miejscu pod zdjęciem.
Tutaj ktoś opisał ten problem https://github.com/OwlCarousel2/OwlCarousel2/issues/1908 ale rozwiązania nadal jako takiego nie ma
Bo też nie podał kodu slaidera 
. Rozwiązanie jest proste, pozycjonowanie absolutne dla menu w celu wyrwania go z kontekstu drzewa DOM, ale jak ma wygląda dokładnie kod CSS i czy wymagane są jakieś poprawki w html to bez kodu nikt Ci nie powie. Dopiero jak szklana kula wróci mi z serwisu to będę mógł pomóc.
Wymyśliłem jedną funkcję poniżej tylko że nie działa do końca jak chce
jQuery(function() {
jQuery('.owl-item:not(.active)').hide(2000);
jQuery('.owl-item').change(function() {
if(jQuery('.owl-next').click('.owl-next')) {
jQuery('.owl-item:not(.active)').show(2000);
}
})
})
Bo wszystkie item’y które powinny być widoczne mają klasę owl-item active i faktycznie funkcja działa bo inne poza są niewidoczne z tym że chciałbym zrobić w tej funkcji że po kliknięciu w paginację jeden owl-item powinien być widoczny bo wejdzie w miejsce gdzie powinien się wyświetlać. Jest możliwość zrobienia takiego czegoś? 
To co Ty piszesz i to nie tylko w tym wątku, ale w szczególności tutaj, to jest to po prostu czarna magia. Zupełnie nie potrafię, się z Tobą porozumieć. Ciężko mi jest też wymyślić o co może Ci chodzić. Raz, że cały Twój post zazwyczaj składa się z 2 trzech zdań, przecinki to gatunek zagrożony wyginięciem, to do tego jeszcze nie dasz całego kodu z niewiadomego powodu. Momentami mam wrażenie, jakbyś zaczynał się uczyć programowania, ale jednocześnie realizował jakieś zlecenie na modyfikację czy stworzenie strony. A Twoja praca wyglądała w ten sposób, że jak czegoś nie wiesz, nie umiesz to zapytasz na forum i Ci powiedzą. Ewentualnie skopiujesz jakiś przykładowy kod, a nóż widelec może zadziała do Twojego problemu.
Kodu nie dam całego bo wszystko składka się z kilku plików a w dodatku w kodzie są wczytywane phtml’ki przez co wszystko jest rozdzielone na mniejsze pliki.
Poniżej podaje jak wygląda kod po odpaleniu strony chodzi o sam slider i każde kliknięcie next w sliderze oznacza że dopisze do pierwszego elementu owl-item klasę active a do pierwszego z active zabiera.
<div class="owl-item active" style="width: 270px; margin-right: 24px;">
<div class="owl-item active" style="width: 270px; margin-right: 24px;">
<div class="owl-item active" style="width: 270px; margin-right: 24px;">
<div class="owl-item active" style="width: 270px; margin-right: 24px;">
<div class="owl-item" style="width: 270px; margin-right: 24px; display: none;">
<div class="owl-item" style="width: 270px; margin-right: 24px; display: none;">
<div class="owl-item" style="width: 270px; margin-right: 24px; display: none;">
<div class="owl-item" style="width: 270px; margin-right: 24px; display: none;">
I teraz za pomocą jQuery chcę osiągnąć efekt że jak pierwszy element z klasą owl-item ma dopisywaną klasę active to pierwszy element z klasą owl-item-active staje się niewidoczny.
Zrobiłem taki skrypcik (wklejałem go powyżej) ale nie działa on do końca dobrze.
<script type="text/javascript">
jQuery(function() {
jQuery('.owl-item:not(.active)').hide();
jQuery('.owl-next').click(function() {
if(jQuery('.owl-carousel').change()) {
jQuery('.owl-item:not(.active)').next().show();
}
})
})
</script>
Może ktoś podpowiedzieć co robię źle w skrypcie?
W takim razie musisz jakoś przechwycić to zdarzenie dopisywania klasy do obiektu. Jak to zrobić nie mam pojęcia bo to zależy od tego przez co i w jaki sposób ta klasa jest dopisywana. Jeśli jest jakiś event dispatcher to możesz się pod niego podpiąć i wykonać swoją funkcję, a jak nie musisz się “wpiąć” w kod który odpowiada za dopisywanie klasy i dodać do niego wywołanie swojego kodu.
No teraz ogólnie jest dobrze bo od razu ukrywa owl-item które mają być ukryte tyle że po paginacji owl-item robią się show wszystkie, a owl-item-active który przestaje być active nadal jest widoczny.
Nie wiem po co Ty chcesz ukrywać dodatkowo slajdy slajderu bo to powinien zapewniać już sam skrypt sladera.
Bo zmieniłem overflow na visible bo inaczej rozwijane menu było ucinane na dole.
No to gratuluje pomysłu, rozwiązałeś prosty problem zamieniając go na skomplikowany.
Na podstawie skryptów sliderów z jakimi miałem do czynienia obawiam się, że żaden nie oferował potrzebnego Ci do rozwiązania problemu odpowiedniego eventu. Do tego tylko nieliczne miały jakąkolwiek obsługę eventów. Oczywiście możliwe jest też, że nie zwróciłem uwagi na taką możliwość.
Dlatego też masz trzy opcje. Pierwsza to musisz poszukać skryptu slidera z odpowiednimi eventami które pozwolą Ci naprawić problem. Druga zmodyfikować kod obecnego skryptu tak by obsługiwał możliwość wywołania jakiś funkcji w momencie wystąpienia zdarzenia jakim jest ukrywanie slideów. Minusem będzie to, że będziesz miał problemy z ewentualną aktualizacją skryptu. Trzecia opcja to napisanie własnego skryptu do obsługi slidera.
Trzecia opcja w tym przypadku będzie najlepsza