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

Posted 29 января, 201411 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 января, 201411 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. Можно ли как-то это решиль?

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

Цитата

29 января, 201411 yr

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

Не понял.

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

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

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

Цитата

29 января, 201411 yr

Не понял.

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

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

Пример:

#resizable{

код css

}

Так понятно?

Цитата

29 января, 201411 yr

Author

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

Цитата

29 января, 201411 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>

<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 января, 201411 yr

Author

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

Цитата

29 января, 201411 yr

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

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

Цитата

29 января, 201411 yr

<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 января, 201411 yr

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

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

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

Цитата

29 января, 201411 yr

Author

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

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

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

Цитата

29 января, 201411 yr

Author

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

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

Цитата

29 января, 201411 yr

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

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

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

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

jQuery.noConflict();

Цитата

29 января, 201411 yr

Author

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 января, 201411 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>

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

		
<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 января, 201411 yr by Fedya

Цитата

AUYKGN
1

29 января, 201411 yr

Author

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 января, 201411 yr

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

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

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

А нужно было:

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

Цитата

Sign In

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

Featured Replies

Join the conversation

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

Account

Navigation

Search