Jak dynamicznie dostosować wysokość ramki z formularzem do szerokości ekranu? Responsywne IFRAME

piątek, 2 marzec 18, 12:45

Zabezpieczenia w przeglądarkach bardzo utrudniają stworzenie responsywnej pływającej ramki (IFRAME). Oto, jak sobie z tym poradzić.

impleOTO pozwala umieścić ramkę z formularzem oferowanego produktu bezpośrednio w jednorazowej ofercie. Dzięki temu Klient nie wychodzi ze strony, a my możemy w adresie formularza ukryć kupon.

Najlepiej wykorzystać do tego specjalną flagę:

{IFRAME:https://adres-formularza:SZER:WYS}

Jako SZER wpisujemy 100% (chyba, że koniecznie chcemy zdefiniować szerokość w pixelach, wtedy wpisujemy wartość liczbową, np. 500)

Jako WYS wpisujemy zazwyczaj 1000-2000 pixeli - w przypadku formularzy na Ekademii jest to zwykle około 1200-1500 pixeli.

I wszystko wygląda fajnie... pod warunkiem, że stronę oglądamy tylko w jednej rozdzielczości. Gdy spróbujemy zmniejszyć okno, responsywny formularz staje się zwykle wyższy i jego część znika - konieczne jest przewinięcie ramki, a to oznacza, że znaczna część osób oglądających ofertą na telefonie NIE domyśli się, że formularz trzeba przewinąć, albo będzie miała z tym problem.

Najprostszym (mało eleganckim) rozwiązaniem jest ustawić wysokość ramki na maksymalną wysokość formularza - np. w widoku właściwym dla smartfona. Ale wtedy na dużym ekranie, pod formularzem znajdzie się mnóstwo pustego miejsca, które czyni link umożliwiający zignorowanie oferty mało widocznym - nie wygląda to dobrze i sugeruje ukrywanie tego linku.

Najlepszym rozwiązaniem jest użycie prostej definicji styli, która dostosuje wysokość ramki do szerokości ekranu.

Korzystając z modyfikacji flagi {IFRAME}

Dodaliśmy nową opcję do flagi IFRAME. Teraz oprócz definicji wysokości, można zdefiniować dodatkowe 3 wysokości dla różnych szerokości ekranu:

{IFRAME:https://adres-formularza:SZER:WYS1/WYS2/WYS3/WYS4}

WYS1 jest obowiązkowa - oznacza szerokość standardową ramki oraz dla ekranów +1200px
WYS2 - dla ekranów 992px - 1199px
WYS3 - dla ekranów 768px - 991px
WYS4 - dla ekranów do 768px oraz dla smartfonów

np.

{IFRAME:https://adres-formularza:100%:1400/2000/2400/2600}

Identyczny rezultat można uzyskać również...

Definiując style ręcznie


impleOTO nadaje wszystkim pływającym ramkom kolejne, unikalne identyfikatory: iframe1, iframe2 itd.

Pierwsza/jedyna ramka będzie miała identyfikator iframe1.

Skorzystamy z pola: Kody JS, CSS (opcjonalnie) - które gwarantuje nam, że edytor oferty nie zmodyfikuje wpisanego kodu.

Responsywny iframe

Cała definicja styli wygląda tak:

@media (max-width: 768px) {
#iframe1 {height:2500px;}
}

@media (min-width: 768px) and (max-width: 991px) {
#iframe1 {height:2150px;}
}

@media (min-width: 992px) and (max-width: 1199px) {
#iframe1 {height:2000px;}
}

@media (min-width: 1200px) {
#iframe1 {height:1500px;}
}

(pogrubienia nie pełnią żadnej roli)

Jak widać, w zależności od szerokości ekranu, zmieniana jest wysokość ramki - naturalnie wartości wysokości należy dostosować do konkretnego przypadku.
Komentarze