Как масштабировать и уменьшить содержимое внутри фрейма iframe на примере формы приема яндекс-денег

Как масштабировать и уменьшить содержимое внутри фрейма iframe на примере формы приема яндекс-денегВ первой части мы немного поговорили о монетизации, и моем к ней отношении, ну а это — часть техническая: как установить форму для приема денег на поддержку сайта, кнопку сбора пожертвований с помощью яндекс денег или прямых переводов с кредиток, ну или просто кнопку «поддержать сайт или проект». И самое важное: как впихнуть на свой блог, в узкую колонку, iframe с формой перевода яндекс.денег в виде пожертвований так, чтобы все внутри него масштабировалось, и было без полос прокрутки, или не тупо обрезалось с краю.

Итак, сначала к вопросу — как вообще добавить на свой сайт модуль сбора пожертвований и материальной помощи на благие дела и его развитие.

Полез на яндекс, смотреть, какие варианты перечислений на кошелек существуют. Основных — два (ну, вернее — есть еще и просто кнопки, но они — совсем ущербные, их даже не рассматриваем):

Форма приема платежей, выглядит так:

Форма приема платеже яндекс

В ширину — около 450 пикселей, в высоту — от 177 до 213, в зависимости от того, хотим ли мы выводить дополнительно оплату через кредитки, или же только яндекс.деньги. Можно настроить и сразу выводить назначение платежа, добавить поле с комментарием плательщика, вывести один из четырех вариантов текста на кнопке — «перевести, купить, оплатить или подарить», вбить сумму по умолчанию.

Вторая форма — это форма приема пожертвований и благотворительных взносов:

Форма приема пожертвований Яндекс

Основное отличие от первого варианта — ширина, она от 469 до 498 пикселей, опять же — в зависимости от того, выбрана ли опция приема не только яндекс-денег, но и возможность принять пожертвование с кредитки, в высоту — максимум 201 пиксель. Ну и выбор вариантов текста на кнопке — побольше: «Пожертвовать, подарить, перевести, отправить, поддержать». В остальном — примерно тоже самое.

Вот ниже — две сгенерированные формы в максимальном исполнении рядом:

Две формы рядом

Ну, т.е. в целом — обе формы предлагают приблизительно одинаковый функционал, лишь немного отличаясь в дизайне. Так что выбирать нужно, основываясь исключительно на своем вкусе. Идем по нужной ссылке (необходимо быть залогиненым в яндекс.деньгах — думаю, никого этому учить не нужно), и делаем ту, что больше понравилась — либо приема платежей, либо приема пожертвований. Мне, откровенно говоря, гораздо больше нравится нижняя форма, из-за того, что она невысокая, и не займет много места по высоте.

Далее — полученный на сайте яндекса код необходимо вставить либо себе в пост (туда, где эта форма должна выводиться), либо — в соответствующее место в single.php и/или index.php. Но вот беда — обе формы не влезают в мою колонку, ограниченную 400 пикселями по ширине. Нет, конечно, если бы это была картинка — то всегда можно было бы ее ужать и отмасштабировать, применив стандартные функции html и css типа height и width, чтобы получилось что-то вроде:

<img alt="Форма оплаты" height="400px" width="400px" src="/img/forma.jpg" style="float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 0px; " >

Но вот незадача — данная платежная форма выводится в iframe. Ну, то есть по сути — у вас на сайте выводится часть другого сайта, воздействовать на который вы можете очень уж ограниченно. В результате — выглядело это так:

Изначально вставленный код, полученный от Яндекса

Видно, что кнопка «Перевести» — практически начисто обрезана. Если вы попытаетесь применить функции height и width — то форма просто напросто обрежется у вас с правого края, и будет выглядеть точно также; а если вы в свойствах iframe изменете scrolling=»no» на yes или auto — то этим добьетесь только того, что добавятся полосы прокрутки, и прокручивать-то вы, конечно, сможете — но выглядеть это будет не слишком красиво (примерно, как представленный в колонке код — но с ним уж точно ничего не сделаешь).  Часа два, наверное, я гуглил, как же все-таки мне впихнуть невпихуемое, а именно — как ужать форму приема яндекс денег, вернее — ее содержимое на 498 пикселей под колонку в 400 пикселей (а кстати, в примере, который будет приведен на этой странице — аж 510 пикселей в 400). Наконец, на одном из сайтов, в комментарии, нашел такую строчку:

$('iframe').contents().find('body').css({ zoom: 0.5, transform: "scale(0.5)", transformOrigin: "0 0" })

Понял, что надо копать в этом направлении. И нашел отличную статью, в которой как раз описывается, как вставить в свой сайт страницу с другого сайта, при этом изменив ее масштаб, т.е. уменьшив масштаб содержимого iframe. Необходимая строчка звучала следующим образом:

<div style='transform-origin: 0 0; transform: scale(0.5); margin-bottom:-5000px;'><iframe src='http://site1.ru/page1.aspx' frameborder='0' scrolling='no' width='1400px' height='17700px'>
 Your browser does not support iframes.
</iframe> 
</div>

Преобразовав свою запись в нечто подобное, используя

transform: scale(0.5);

и убрав

margin-bottom:-5000px; width='1400px' height='17700px'

и вставив вместо адреса сайта тот код, который предоставил яндекс, я — Бинго!: получил зуммирование формы, но вот беда — она была смещена очень сильно влево, и никакие попытки сделать ей float:left или align:left — не помогали. Этот div, html блок — ну никак не хотел выравниваться по левому краю. Выглядело это так:

Уменьшеный вариант

В результате, вычислив, на сколько пикселей он смещен, я убрал из строчки кода

transform-origin: 0 0

И добавил

margin-left: -45px;

И тут же все стало просто замечательно! В результате код стал выглядеть следующим образом:

<div style='transform: scale(0.8); margin-left: -45px;'>
<iframe frameborder="0" allowtransparency="true" scrolling="no" src="https://money.yandex.ru/embed/donate.xml?КОД ЯНДЕКСА" width="510" height="201"></iframe>
</div>

 

Ну а в живую — это выглядит так:

Если кто-то хочет протестировать и отправить копеечку в благодарность за полезный урок — добро пожаловать, можно пробовать прямо из формы выше 🙂

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Один комментарий
  1. крутяк, спасибо большое! сработало)

    дня 1,5-2 мучался с этой проблемой

    удачки!!!

    [жаль рекламы нет — прокликал бы в знак багодарности везде]

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Subscribe without commenting

QR Code Business Card