To doprowadza mnie do szaleństwa: mam mały kawałek jquery, który przesuwa trzy div w poziomie.

SKRZYPCE

Edytuj 3:Demo na żywo; pełna strona internetowa pokazująca, jak chcę, aby działała..aż do Dostaję mniej niż 775 pikseli. Zmień rozmiar okna, aby zobaczyć, co mam na myśli.

EDIT, według popularnego popytu. Czego chcę: na małych ekranach powiedzmy od 700 i niżej. Chcę, aby jeden panel wypełnił ekran. Na czas.

2ND edit:Działa dobrze w ponad 700px. Poniżej tego; Chciałbym, aby ekran pokazywał tylko jeden panel naraz, a gdy jest to pożądane (kliknięcie na bieżącym panelu), następny panel przesunie się na boki. To znaczy. Brak ułożonych kolumn, co jest klasycznym, responsywnym projektem. Proszę zobaczyć Fiddle. Wszystko jest dobre, dopóki nie zminimalizujesz okna przeglądarki lub nie użyjesz urządzenia mobilnego.

Definiuję panel1 i panel2 jakofixed widthi użyj css calc, aby zachować trzeci panel w 100% minus panel1 (200px) i panel2 (200px):(calc 100% - 400px)

To działa dobrze, dopóki nie przejdę na małe ekrany. Potem wszystko się kręci: panele układają się jeden na drugim pionowo (chcę ukryć nieaktywne panele), a ze względu na ustaloną szerokość „widzę” drobne kawałki spłaszczonych paneli po prawej stronie. Najlepiej, aby każdy panel wypełniał małe ekrany w 100%.

Potrzebuję pomocy w tym:

Muszę też

znajdź sposób na zastąpienie tej definicji JS odległości przesuwu pikseli do%

 var margins = {
        panel1: 0,
        panel2: -200,
        panel3: -400,               
    }

..i dlatego też mogę wykonać moje css calc (100% - 20%) lub coś takiego.

.. lub przynajmniej znaleźć sposób na ukrycie paneli na małych ekranach.

Wszystkie wskaźniki były bardzo doceniane.