Jump to content

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

Ruskat
Ruskat
in Web-программирование

Featured Replies

Posted
comment_53299

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

Код таков...

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/6933-iframe-resizer-ispolzovat-bolee-odnogo/
    Share on other sites
    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">

  • Цитата
    comment_53311

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

    Не понял.

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

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

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

    Не понял.

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

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

    Пример:

    #resizable{

    код css

    }

    Так понятно?

  • Цитата
    • Author
    comment_53315

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

  • Цитата
    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>

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

  • Цитата
    • Author
    comment_53317

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

  • Цитата
    comment_53318

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

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

  • Цитата
    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>
  • Цитата
    comment_53329

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

     

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

    Edited by PiratRu

  • Цитата
    • Author
    comment_53332

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

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

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

  • Цитата
    • Author
    comment_53356

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

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

  • Цитата
    comment_53357

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

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

     

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

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

    jQuery.noConflict();

  • Цитата
    • 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)
			}
  • Цитата
    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 by Fedya

  • Цитата
    • 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

  • Цитата
    comment_53392


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

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

    А нужно было:


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

  • Цитата

    • Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Ответить в этой теме...
    Go to topic listing

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

    • No registered users viewing this page.