Iframe resizer - использовать более одного - Web-программирование - IPBMafia.ru - поддержка Invision Community, релизы, темы, плагины и приложения

Posted 29 января, 201410 yr

Привет всем! Искал и нашел полезшую вещичку, как изменение размера фрейма мышью.

Код таков...

   <script type="text/javascript" src="__ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="__ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="__ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
		<script>
            $(function() {
                $("#resizable").resizable();
            });
        </script>
        <div style="text-align: center;margin: 0;" class="resizeDiv" id="resizable">
                <iframe class="iframetest" src="__coub.com/embed/nq16lr?muted=false&amp;autostart=false&originalSize=false&hideTopBar=false&noSiteButtons=false&startWithHD=false"
                    width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
        </div>
		<script>
            $(function() {
                $("#resizable1").resizable();
            });
        </script>
        <div style="text-align: center;margin: 0;" class="resizeDiv" id="resizable1">
                <iframe class="iframetest" src="__coub.com/embed/nq16lr?muted=false&amp;autostart=false&originalSize=false&hideTopBar=false&noSiteButtons=false&startWithHD=false"
                    width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
        </div>

но вот проблемка в том, что для каждого такого ресайзера нужен уникальный идентификатор. Например resizable или resizable1. Можно ли как-то это решиль?

Цитата

29 января, 201410 yr

comment_53307

Привет всем! Искал и нашел полезшую вещичку, как изменение размера фрейма мышью.

Код таков...

   <script type="text/javascript" src="__ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="__ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="__ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
		<script>
            $(function() {
                $("#resizable").resizable();
            });
        </script>
        <div style="text-align: center;margin: 0;" class="resizeDiv" id="resizable">
                <iframe class="iframetest" src="__coub.com/embed/nq16lr?muted=false&amp;autostart=false&originalSize=false&hideTopBar=false&noSiteButtons=false&startWithHD=false"
                    width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
        </div>
		<script>
            $(function() {
                $("#resizable1").resizable();
            });
        </script>
        <div style="text-align: center;margin: 0;" class="resizeDiv" id="resizable1">
                <iframe class="iframetest" src="__coub.com/embed/nq16lr?muted=false&amp;autostart=false&originalSize=false&hideTopBar=false&noSiteButtons=false&startWithHD=false"
                    width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
        </div>

но вот проблемка в том, что для каждого такого ресайзера нужен уникальный идентификатор. Например resizable или resizable1. Можно ли как-то это решиль?

В стилях пропиши resizable. И перед <div style вставь <div id="resizable">

Цитата

29 января, 201410 yr

comment_53311

В стилях пропиши resizable. И перед

Не понял.

Напишите подробнее, пожалуйста.

В стилях пропиши resizable.

Это добавить в ipb_styles.css?

Цитата

29 января, 201410 yr

comment_53314

Не понял.

Напишите подробнее, пожалуйста.

Это добавить в ipb_styles.css?

Пример:

#resizable{

код css

}

Так понятно?

Цитата

29 января, 201410 yr

Author

comment_53315

zhenyasim, Это не проблема... Проблема появится, если в одном посте или на странице использовать два или больше даных скриптов. идентификатор resizable или с каким-либо другим именем должен меняться, если используется несколько. Иначе после первого второй работать не будет из-за одинаковых ID.

Цитата

29 января, 201410 yr

comment_53316

Тогда попробуй так:

<script type="text/javascript" src="__ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="__ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="__ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
        <script>
$(function() {
$("#resizable").resizable();
});
</script>
<div style="text-align: center;margin: 0;" class="resizeDiv" id="resizable">
<iframe class="iframetest" src="__coub.com/embed/nq16lr?muted=false&amp;autostart=false&originalSize=false&hideTopBar=false&noSiteButtons=false&startWithHD=false"
width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>

<iframe class="iframetest" src="__coub.com/embed/nq16lr?muted=false&amp;autostart=false&originalSize=false&hideTopBar=false&noSiteButtons=false&startWithHD=false"
width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>

Но не уверен, что сработает.

Цитата

29 января, 201410 yr

Author

comment_53317

zhenyasim, не плохо для синхронного ресайза. Но они же разные...

Цитата

29 января, 201410 yr

comment_53318

zhenyasim, не плохо для синхронного ресайза. Но они же разные...

Для одного поста - вполне нормально. Для страницы, я сказал вариант выше.

Цитата

29 января, 201410 yr

comment_53328

<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div style="text-align: center;margin: 0;" class="resizeDiv">
	<iframe class="iframetest" src="__coub.com/embed/nq16lr?muted=false&amp;autostart=false&originalSize=false&hideTopBar=false&noSiteButtons=false&startWithHD=false"	width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>

<div style="text-align: center;margin: 0;" class="resizeDiv">
	<iframe class="iframetest" src="__coub.com/embed/nq16lr?muted=false&amp;autostart=false&originalSize=false&hideTopBar=false&noSiteButtons=false&startWithHD=false"	width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>

<script type="text/javascript">
$(".resizeDiv").each(function() {
	var res = $(this).uniqueId();

	$( res ).resizable();
});
</script>

Цитата

Ruskat and AUYKGN
2

29 января, 201410 yr

comment_53329

А вообще поставь себе ОперуАС и не парься! там море фишек и ресайз любых фреймов есть, и не нужно засорять кодами ксс. Удобная канеш штука, давно пользую ресайз, но в браузере.

пс: статус твой порадовал, не в обиду - так, для юмора. вспомнил немцеф и эротику. :D:

Edited 29 января, 201410 yr by PiratRu

Цитата

29 января, 201410 yr

Author

comment_53332

LvsF, огромнейшее спасибо. Работает...

PiratRu, 1) АС - не проблема, но всем её не навяжешь.

2) Я же специально с фреймленным видео-роликом выложил, чтобы любое видео мона было ресайзить. Или же изображение. Хочу такой ББ-код сделать.

Цитата

29 января, 201410 yr

Author

comment_53356

BB-код облом пока... Не отображается редактор при включенном code.jquery.com/jquery-1.8.3.js

Как их помирить?

Цитата

29 января, 201410 yr

comment_53357

LvsF, огромнейшее спасибо. Работает...

Я почти тоже самое подсказал, только div забыл упомянуть.

BB-код облом пока... Не отображается редактор при включенном code.jquery.com/jquery-1.8.3.js

Как их помирить?

jQuery.noConflict();

Цитата

29 января, 201410 yr

Author

comment_53358

zhenyasim, куда вставить???

jquery-1.8.3.js

строка 162 -163:

			} else if ( !context || context.jquery ) {
				return ( context || rootjQuery ).find( selector );

			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			}

Цитата

29 января, 201410 yr

comment_53365

<script type="text/javascript" src="__ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="__ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="__ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
		<script>
            $(function() {
                $("#resizable").resizable();
            });
        </script>
        <div style="text-align: center;margin: 0;" class="resizeDiv" id="resizable">
                <iframe class="iframetest" src="__coub.com/embed/nq16lr?muted=false&amp;autostart=false&originalSize=false&hideTopBar=false&noSiteButtons=false&startWithHD=false"
                    width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
        </div>
		<script>
            $(function() {
                $("#resizable1").resizable();
            });
        </script>
        <div style="text-align: center;margin: 0;" class="resizeDiv" id="resizable1">
                <iframe class="iframetest" src="__coub.com/embed/nq16lr?muted=false&amp;autostart=false&originalSize=false&hideTopBar=false&noSiteButtons=false&startWithHD=false"
                    width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
        </div>

Это (код из первого поста) замени на это

		
<script type="text/javascript" src="__ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="__ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
<script>
             jQuery(document).ready( function(){
                jQuery(".resizeDiv").resizable();
            });
        </script>
        <div style="text-align: center;margin: 0;" class="resizeDiv">
                <iframe class="iframetest" src="__coub.com/embed/nq16lr?muted=false&amp;autostart=false&originalSize=false&hideTopBar=false&noSiteButtons=false&startWithHD=false"
                    width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
        </div>

        <div style="text-align: center;margin: 0;" class="resizeDiv">
                <iframe class="iframetest" src="__coub.com/embed/nq16lr?muted=false&amp;autostart=false&originalSize=false&hideTopBar=false&noSiteButtons=false&startWithHD=false"
                    width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
        </div>

если речь идет о ipb, то должно работать

Edited 29 января, 201410 yr by Fedya

Цитата

AUYKGN
1

29 января, 201410 yr

Author

comment_53368

Fedya, спасибо, заработало...
В голове:

<!-------resizer------->
<link rel="stylesheet"href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
            .resizeDiv
            {
                border: 1px solid  #6FA8DC;
                width: 320px;
                height: 240px;
            }
</style> 
<!-------resizer end------->
(перед вызовом прототайпа)
<script type='text/javascript' src='__ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js'></script>

В теле:

<div style="text-align: center;margin: 0; padding: 0; display:inline-block" class="resizeDiv">9+49849484</div>
или ВВ-код:
<div style="text-align: center;margin: 0; display:inline-block" class="resizeDiv">{content}</div>

В ногах...

<!---resss---->
<script>
             jQuery(document).ready( function(){
                jQuery(".resizeDiv").resizable();
            });
        </script>
<!------ress end---->
		
		
		<script type='text/javascript'>
			if( $('primary_nav') ){	ipb.global.activateMainMenu(); }
		</script>
			</body>

resizer.xml

Цитата

30 января, 201410 yr

comment_53392

Я почти тоже самое подсказал, только div забыл упомянуть.

Где то же самое?

Вы просто из одного div'а перенести фрейм в другой. Не более. Было 2 div'а, стал один. Проще говоря, код для одного блока. Если их будет несколько на странице, то будет работать только первый.

А нужно было:

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

Цитата

Sign In

Iframe resizer - использовать более одного

Featured Replies

Join the conversation

Последние посетители 0

Account

Navigation

Messages

Уведомления

Search