Jak dynamicznie dostosować wysokość ramki z formularzem do szerokości ekranu? Responsywne IFRAME
piątek, 2 marzec 18, 12:45Zabezpieczenia 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.
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.