Автоматическая высота IFrame

Готовые уроки IFrame + ВКонтакте API
hahaha
Сообщения: 86
Зарегистрирован: 04 янв 2012, 14:52

Re: Автоматическая высота IFrame

Сообщение hahaha »

ukhov писал(а):
hahaha писал(а):ukhov
ну тоесть да
здесь помогает только мой скрипт :D
http://flapps.ru/forum/topic4257.html#p30725
он каждую секунду вычисляет и обновляет высоту, а не только при входе.
Согласен, но не пайму как вставить в него код коментов, вставляю сам виджет пропадает...может чет не так делаю
Аватара пользователя
ukhov
Модератор
Модератор
Сообщения: 1343
Зарегистрирован: 04 янв 2011, 21:19

Re: Автоматическая высота IFrame

Сообщение ukhov »

hahaha писал(а):
ukhov писал(а):
hahaha писал(а):ukhov
ну тоесть да
здесь помогает только мой скрипт :D
http://flapps.ru/forum/topic4257.html#p30725
он каждую секунду вычисляет и обновляет высоту, а не только при входе.
Согласен, но не пайму как вставить в него код коментов, вставляю сам виджет пропадает...может чет не так делаю
у меня такое тоже было. это конфликтуют скрипты ВК. для этого

Код: Выделить всё

<script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script>
поставь не в начале, а в конце, но перед вызовом высоты. то есть вот так:

Код: Выделить всё

<html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></head> <div id=page><body>TEST</body></div> <script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script><script type="text/javascript">function h_update_1() {VK.callMethod("resizeWindow", 721, $('#page').height()+Number(20));setTimeout(h_update_1, 1000);} setTimeout(h_update_1, 1000);</script></html>
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: Автоматическая высота IFrame

Сообщение Александр »

ukhov писал(а):здесь помогает только мой скрипт
topic4257.html#p30725
он каждую секунду вычисляет и обновляет высоту, а не только при входе.
В первом сообщении код тоже изменяет автоматически постоянно.

Код: Выделить всё

setInterval(newSizeWindow, 100);
Глеб
Сообщения: 57
Зарегистрирован: 16 дек 2009, 19:27

Re: Автоматическая высота IFrame

Сообщение Глеб »

Подскажите а как этот код прикрепить к DLE сайту?))
Глеб
Сообщения: 57
Зарегистрирован: 16 дек 2009, 19:27

Re: Автоматическая высота IFrame

Сообщение Глеб »

А Все не надо разобрался))))
Глеб
Сообщения: 57
Зарегистрирован: 16 дек 2009, 19:27

Re: Автоматическая высота IFrame

Сообщение Глеб »

Не могу понять как сделать(((

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>{headers}<link rel="shortcut icon" href="{THEME}/images/favicon.ico" /><link media="screen" href="{THEME}/style/my.css" type="text/css" rel="stylesheet" /><link media="screen" href="{THEME}/style/layer5.css" type="text/css" rel="stylesheet" /><link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" /><script src="{THEME}/js/tooltip.js" type="text/javascript"></script><script type="text/javascript" src="{THEME}/js/cufon.js"></script><script type="text/javascript" src="{THEME}/js/font.js"></script><script type="text/javascript"> Cufon.replace('h1#blog-title a', { color: '-linear-gradient(#f5ecc1, 0.50=#fff, 0.50=#f5ecc1, #fff)'  }); Cufon.replace('h3.sidetitl,.eTitle,.gTableTop,.gTableTop a'); $('input:checkbox').checkbox({cls:'checkbox'}); $('input:radio').checkbox({cls:'radio'}); $('#casing form').utTransform();</script><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script><script type="text/javascript" charset="cp1251" >$(function() {    VK.init(function() {        setInterval(newSizeWindow, 100);        function newSizeWindow() {            VK.callMethod("resizeWindow",827,$('.wrapper').height());        }   });});</script></head><body>{AJAX} <div id="wrapper"> <div id="topbar"> <div class="today"> <!-- clock hack -->Пн, <span id="clock">00:00:00 AM</span><script src="{THEME}/js/clock.js" type="text/javascript"></script><!-- / clock hack --> </div> <div class="usrblock">{login}</div>  </div> <div class="clear"> </div> <div id="header">  <h1 id="blog-title"><span><a href="/">Здравствуйте!</a></span></h1>  <div id="search">    <form action="" name="searchform" method="post"><input type="hidden" name="do" value="search" /><input type="hidden" name="subaction"  value="search" /><input style="width: 180px; margin: 0pt; padding: 3px 5px; border: medium none; font: 100% Tahoma,Arial,Helvetica,sans-serif; color:  rgb(255, 255, 255); float: left; background: none repeat scroll 0% 0% rgb(66, 66, 66); display: inline;" maxlength="80" size="1" id="story" name="story"  value="Поиск..." onblur="if(this.value=='') this.value='Поиск...';" onfocus="if(this.value=='Поиск...') this.value='';" type="text" /><input style="width: 61px;  height: 22px;" src="{THEME}/images/searh.gif" title="Быстрый поиск" alt="Поиск по сайту" type="image"></form>  </div><div style="display:none;"><a href="http://shablony-dle.ru/">block</a></div></div>   <div id="menu">    <div id="uMenuDiv2" class="uMenuH" style="position:relative;">      <ul class="uMenuRoot"> <li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn- mc"><div class="uMenuItem"><a href="/"><span>Меню 2</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div  class="umn-bc"><div class="umn-footer"></div></div></div></div></li><li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn- mc"><div class="uMenuItem"><a href="/"><span>Меню 3</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div  class="umn-bc"><div class="umn-footer"></div></div></div></div></li><li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn- mc"><div class="uMenuItem"><a href="/"><span>Меню 4</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div  class="umn-bc"><div class="umn-footer"></div></div></div></div></li><li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn- mc"><div class="uMenuItem"><a href="/"><span>Меню 5</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div  class="umn-bc"><div class="umn-footer"></div></div></div></div></li><li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn- mc"><div class="uMenuItem"><a href="/"><span>Меню 6</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div  class="umn-bc"><div class="umn-footer"></div></div></div></div></li><li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn- mc"><div class="uMenuItem"><a href="/"><span>Меню 7</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div  class="umn-bc"><div class="umn-footer"></div></div></div></div></li><li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn- mc"><div class="uMenuItem"><a href="/index.php?do=stats"><span>Статистика</span></a></div></div></div></div><div class="umn-bl"><div  class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li><li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn- mc"><div class="uMenuItem"><a href="/index.php?do=feedback"><span>Обратная связь</span></a></div></div></div></div><div class="umn- bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>      </ul>    </div>  </div>  <div class="clear"> </div>   <div id="casing">    <div id="content">       <div class="content">  <table align="center" border="0" cellspacing="0" cellpadding="0" width="25" class="infTable">    <tr>          </tr>  </table>  {speedbar}   <div id="allEntries">{info}{content} </div>   <div class="clear"> </div> </div> </div>  <div class="left"> <div class="sidebar"> <!-- <block2> --><div class="sidebox">  <h3 class="sidetitl">Категории</h3>  <div class="indent">    <ul>      <li><a href="/anime/">Аниме</a></li>      <li><a href="/boevik/">Боевик</a></li>      <li><a href="/">Вестерн</a></li> <li><a href="/">Военный</a></li> <li><a href="/">Детектив</a></li> <li><a href="/">Документальный</a></li> <li><a href="/">Драма</a></li> <li><a href="/">История</a></li> <li><a href="/">Комедия</a></li> <li><a href="/">Криминал</a></li> <li><a href="/">Мелодрама</a></li> <li><a href="/">Мультфильм</a></li> <li><a href="/">Ужасы</a></li>     </ul>    <table border="0" cellspacing="1" cellpadding="0" width="100%" class="catsTable">      <tr>        <td style="width:100%" class="catsTd" valign="top"><a href="/" class="catName">-------</a></td>      </tr>    </table>  </div></div><!-- </block2> -->    </div> </div> <div class="clear"></div>  </div>   <div id="footer">     <div class="fleft"> ©  2012<br />   </div>  <div class="fright" id="codeblock">   </div>  <div class="clear"></div></div></div></body></html> 
RussProg
Сообщения: 1
Зарегистрирован: 13 мар 2012, 18:47

Re: Автоматическая высота IFrame

Сообщение RussProg »

Я у себя реализовал так:

Код: Выделить всё

    $(function(){$("body").bind('resize', function(e){             var height = $("body").height();             if(height<=600) height=600;             VK.callMethod("resizeWindow",827,height);             });}); 
Но для работы требуется jQuery и плагин "jQuery resize event" http://benalman.com/projects/jquery-resize-plugin/

Строка if(height<=600) height=600; нужна для того что бы iframe не становился меньше 600 пикселей.
sakogr
Сообщения: 19
Зарегистрирован: 09 дек 2011, 19:32

Re: Автоматическая высота IFrame

Сообщение sakogr »

Народ подскажите как сделать автоматическую высоту в iFrame, я попробовал этот метод, но у меня ничего не получилось с высотой + каждый раз всё это прописывать для каждый страницы это очень не удобно.
Вот исходный код страницы:

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU" lang="ru-RU"><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <title>Приветствие - • iFacts - Лучшие факты из сети</title>    <meta name="description" content="Лучшие факты из сети" /><meta name="keywords" content="" /><meta name="generator" content="Parallels Web Presence Builder 10.4.4" />    <link rel="stylesheet" type="text/css" href="../css/style.css?template=generic" />    <!--[if IE 7]>        <link rel="stylesheet" type="text/css" href="../css/ie7.css?template=generic" />    <![endif]-->    <script language="JavaScript" type="text/javascript" src="../js/style-fix.js"></script>    <script language="JavaScript" type="text/javascript" src="../js/css_browser_selector.js"></script>    <link type="text/css" href="../css/header-c12b2b78-3d13-6140-ffce-db187b2d96b6.css?template=generic" rel="stylesheet" /><link type="text/css" href="../css/search-google.css?template=generic" rel="stylesheet" /><!--[if IE]><style type="text/css">.background3-black{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/background3-black.png?template=generic",sizingmethod=scale,enabled=true);} </style><![endif]--><style type="text/css">body{background-image: url("..//attachments/Background/1.jpg?1332589599");background-position: top left;background-repeat:repeat;}#watermark{background-image: url("..//attachments/Background/3.png?1332589599");background-position: top left;background-repeat:repeat;}.header{background-image: url("..//attachments/Background/body-background_2.jpg?1332589599");background-position: center center;background-repeat:repeat;}.column2{background-image: url("..//attachments/Background/5.png?1332589599");background-position: top left;background-repeat:repeat;}.content{background-image: url("..//attachments/Background/=D0=BB=D0=BD=D1=80=D0=BB=D0=B1.jpg?1332589599");background-position: top left;background-repeat:repeat;}</style><link rel="shortcut icon" href="../favicon.ico?1332589599"> </head><body id="template" class="background-custom">    <div class="site-frame">        <div id="wrapper" class="container-content external-border1-white">    <div class="external-top"><div><div><div><div></div></div></div></div></div>    <div class="external-side-left">        <div class="external-side-left-top">            <div class="external-side-left-bottom">                <div class="external-side-right">                    <div class="external-side-right-top">                        <div class="external-side-right-bottom">                            <div id="watermark" class="pageContentText background-custom border-none">                                <div id="watermark-content" class="container-content">                                    <div id="header" class="header background-custom border-none">    <div id="header-top" class="top"><div><div></div></div></div>    <div id="header-side" class="side"><div id="header-side2" class="side2">        <div class="container-content">            <div id="header-content">                <div class="container-content-inner" id="header-content-inner">    <div class="widget widget-header" id="widget-c12b2b78-3d13-6140-ffce-db187b2d96b6"><div class="widget-content"><div class="header-logo"><a href="../"><img src="../attachments/Logo/32x32.jpg?template=generic" alt="" /></a></div><div class="header-title"><a href="../">• iFacts </a></div><div class="header-subtitle"><a href="../">Лучшие факты из сети</a></div><img src="../attachments/builtin/Header/academic_01.png?template=generic" class="header-image" alt="" /></div></div>     <div class="widget widget-advertisement" id="widget-c240200a-41ea-5f08-49a8-1744a94869ae">            <div class="widget-content"><center><iframe src="http://elephant.fotostrana.ru/banner?adv_id=35759&ref_id=978761135&format=iframe&gid=1%2C2&place=600x90" frameborder=0 width="600" height="90" marginwidth=0 marginheight=0 scrolling=no></iframe></center></div>        </div>     <div class="widget widget-search" id="widget-c2dd479f-60fa-851e-52e4-7cfabf138e1d">            <div class="widget-content"><div id="widget-search-form-c2dd479f-60fa-851e-52e4-7cfabf138e1d" class="widget-search-form"></div><script src="//www.google.com/jsapi" type="text/javascript"></script><script type="text/javascript">//<![CDATA[google.load('search', '1', {language : 'ru_RU'});google.setOnLoadCallback(function() {    var content     = document.getElementById('content-content-inner'),        resultsEl   = document.createElement('div'),        searcher    = new google.search.WebSearch(),        control     = new google.search.SearchControl(),        options     = new google.search.SearcherOptions();     content.appendChild(resultsEl);    resultsEl.className = 'widget-search-results';     searcher.setSiteRestriction('http://ifacts.my-mood.ru/');    options.setRoot(resultsEl);    options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);    control.addSearcher(searcher, options);    control.setResultSetSize(google.search.Search.LARGE_RESULTSET);    control.setNoResultsString('По вашему запросу ничего не найдено. Результаты могут быть недоступны, если ваш сайт не опубликован или не индексирован поисковой системой.');    control.setSearchCompleteCallback(this, function(searchControl, searcher) {        var cssClass        = ' widget-search-active';        content.className   = content.className.replace(cssClass, '');        content.className   += cssClass;    });     control.draw('widget-search-form-c2dd479f-60fa-851e-52e4-7cfabf138e1d');}, true);//]]></script></div>        </div></div>            </div>        </div>    </div></div>    <div id="header-bottom" class="bottom"><div><div></div></div></div></div>                                    <div id="columns">                                                                                                                        <div id="content" class="content background-custom border-none">    <div id="content-top" class="top"><div><div></div></div></div>    <div id="content-side" class="side"><div id="content-side2" class="side2">        <div class="container-content">            <div id="content-content">                <div class="container-content-inner" id="content-content-inner">    <div class="widget widget-script" id="widget-a72ef514-afcd-e60e-dcee-faabbfbe261c">            <div class="widget-content">    <script language='JavaScript'>    var time = 60;    var page = "http://ifacts.my-mood.ru/";    function countDown(){    time--;    gett("container").innerHTML = time;    if(time == -1){    window.location = page;    }    }    function gett(id){    if(document.getElementById) return document.getElementById(id);    if(document.all) return document.all.id;    if(document.layers) return document.layers.id;    if(window.opera) return window.opera.id;    }    function init(){    if(gett('container')){    setInterval(countDown, 1000);    gett("container").innerHTML = time;    }    else{    setTimeout(init, 50);    }    }    document.onload = init();    </SCRIPT>              <span id='container'></span></div>        </div>     <div class="widget widget-text" id="widget-7715a563-597c-4769-b3e8-72703ee7c693">            <div class="widget-content"><p style="text-align: center;"><span style="text-decoration: underline; font-size: 24px;"><span style="font-style: italic; font-weight: bold;">Здравствуй дорогой друг</span></span></p><p style="text-align: center;"><span style="text-decoration: underline; font-size: 24px;"><span style="font-style: italic; font-weight: bold;">Приветсвую тебя в приложении с лучшими интересными фактами из сети!</span></span></p><hr /><p style="text-align: center;"><span style="font-weight: bold; font-style: italic; font-size: 18px;">Перейти в раздел с интересными фактами можно нажав на загаловок или на иконку расположенные на баннере.</span></p><p style="text-align: center;"><span style="font-weight: bold; font-style: italic; font-size: 18px;">Так же нажав</span> "<a class=" link" href="http://ifacts.my-mood.ru/interesnye-fakty/"><span style="text-decoration: underline; font-weight: bold; font-style: italic; font-size: 20px;">Сюда</span></a>"</p><hr /></div>        </div>     <div class="widget widget-text" id="widget-d7be76fa-f315-0ef3-5549-68f035d30ab0">            <div class="widget-content"><p style="text-align: center;"><span style="font-size: 18px; font-weight: bold; font-style: italic;">Предлагаем тебе добавить ссылку на приложения в меню слева или пригласить друзей в наше приложение нажав на одну из этих кнопок.</span><span style="text-decoration: underline;"><span style="font-size: 18px; font-weight: bold; font-style: italic;"><br /></span></span></p><script type="text/javascript" src="http://vkontakte.ru/js/api/xd_connection.js?2"></script><center><a onclick="VK.callMethod('showSettingsBox', 256);"><img onmouseover="this.src='http://ifacts.my-mood.ru/data/documents/2_1.png';" onmouseout="this.src='http://ifacts.my-mood.ru/data/documents/1_1.png';" src="http://ifacts.my-mood.ru/data/documents/1_1.png" alt="" /> </a></center><script type="text/javascript" src="http://vkontakte.ru/js/api/xd_connection.js?2"></script><center><a onclick="VK.External.showInviteBox();" href="../javascript%05;"><img onmouseover="this.src='http://ifacts.my-mood.ru/data/documents/2_2.png';" onmouseout="this.src='http://ifacts.my-mood.ru/data/documents/1_2.png';" src="http://ifacts.my-mood.ru/data/documents/1_2.png" alt="" /> </a></center></div>        </div>     <div class="widget widget-text" id="widget-f13cf8a6-3075-487b-9f1d-21f185867e01">            <div class="widget-content"><p style="text-align: center;"><span style="text-decoration: underline;"><span style="font-size: 18px; font-style: italic; font-weight: bold;">На пожертвование приложения можете дать голос(-а-)</span></span></p><script type="text/javascript" src="http://vkontakte.ru/js/api/xd_connection.js?2"></script><center><a onclick="VK.callMethod('showPaymentBox', 0);"><img onmouseover="this.src='http://ifacts.my-mood.ru/data/documents/2.png';" onmouseout="this.src='http://ifacts.my-mood.ru/data/documents/1.png';" src="http://ifacts.my-mood.ru/data/documents/1.png" alt="" /></a></center></div>        </div>     <div class="widget widget-text" id="widget-bf84803d-d125-bb67-0124-51b4c9f2c220">            <div class="widget-content"><hr /><p style="text-align: center;"><span style="font-weight: bold; font-style: italic;"><span style="font-size: 18px;">Чтоб ознакомиться с нашими другими проектами перейдите</span> "<a class=" link" href="../nashi-proekty/"><span style="text-decoration: underline;"><span style="font-size: 20px;">Сюда</span></span></a>"</span></p></div>        </div>     <div class="widget widget-text" id="widget-4abed529-9b58-10d5-498e-675e07368bae">            <div class="widget-content"><hr /></div>        </div></div>            </div>        </div>    </div></div>    <div id="content-bottom" class="bottom"><div><div></div></div></div></div>                                    </div>                                    <div id="footer" class="footer background3-black background border-none">    <div id="footer-top" class="top"><div><div></div></div></div>    <div id="footer-side" class="side"><div id="footer-side2" class="side2">        <div class="container-content">            <div id="footer-content">                <div class="container-content-inner" id="footer-content-inner">    <div class="widget widget-text" id="widget-588ed9da-9b4a-a5d2-2e3f-bcce7cc0cbc8">            <div class="widget-content"><p style="text-align: center;">iFacts © 2012.</p></div>        </div></div>            </div>        </div>    </div></div>    <div id="footer-bottom" class="bottom"><div><div></div></div></div></div>                                </div>                            </div>                        </div>                    </div>                </div>            </div>        </div>    </div>    <div class="external-bottom"><div><div><div><div></div></div></div></div></div></div>    </div>    <script type="text/javascript" src="../js/anti_cache.js"></script> </body></html>
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: Автоматическая высота IFrame

Сообщение Александр »

sakogr
Ты привел очень много когда. Конкретно покажи в какой момент возникает проблема. Код нужно не просто вставить, а логически применить.
sakogr писал(а):+ каждый раз всё это прописывать для каждый страницы это очень не удобно.
Используй шаблоны и подключение js файлов.
sakogr
Сообщения: 19
Зарегистрирован: 09 дек 2011, 19:32

Re: Автоматическая высота IFrame

Сообщение sakogr »

Александр писал(а):sakogr
Ты привел очень много когда. Конкретно покажи в какой момент возникает проблема. Код нужно не просто вставить, а логически применить.
sakogr писал(а):+ каждый раз всё это прописывать для каждый страницы это очень не удобно.
Используй шаблоны и подключение js файлов.
Я всё сделал по инструкции как написано, но у меня всё равно ничего не получается, я пользуюсь конструктором "Web Presence builder 10.4.4"
Ответить