Перейти к содержанию

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

Ruskat

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

 Поделиться

Рекомендуемые сообщения

Ruskat Основной

Ruskat

Опубликовано
Опубликовано

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

Код таков...

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

Ссылка на комментарий
Поделиться на другие сайты
zhenyasim Специалист

zhenyasim

Опубликовано
Опубликовано

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

Код таков...

   <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">

Ссылка на комментарий
Поделиться на другие сайты
LvsF Ментор

LvsF

Опубликовано
Опубликовано

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

Не понял.

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

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

Это добавить в ipb_styles.css?
Ссылка на комментарий
Поделиться на другие сайты
zhenyasim Специалист

zhenyasim

Опубликовано
Опубликовано

Не понял.

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

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

Пример:

#resizable{

код css

}

Так понятно?

Ссылка на комментарий
Поделиться на другие сайты
Ruskat Основной

Ruskat

Опубликовано
  • Автор
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
zhenyasim Специалист

zhenyasim

Опубликовано
Опубликовано

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

<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>

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

Ссылка на комментарий
Поделиться на другие сайты
Ruskat Основной

Ruskat

Опубликовано
  • Автор
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
zhenyasim Специалист

zhenyasim

Опубликовано
Опубликовано

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

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

Ссылка на комментарий
Поделиться на другие сайты
LvsF Ментор

LvsF

Опубликовано
Опубликовано 
<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>
Ссылка на комментарий
Поделиться на другие сайты
PiratRu Основной

PiratRu

Опубликовано
Опубликовано (изменено)

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

 

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

Изменено пользователем PiratRu
Ссылка на комментарий
Поделиться на другие сайты
Ruskat Основной

Ruskat

Опубликовано
  • Автор
Опубликовано

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

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

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

Ссылка на комментарий
Поделиться на другие сайты
Ruskat Основной

Ruskat

Опубликовано
  • Автор
Опубликовано

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

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

Ссылка на комментарий
Поделиться на другие сайты
zhenyasim Специалист

zhenyasim

Опубликовано
Опубликовано

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

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

 

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

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

jQuery.noConflict();

Ссылка на комментарий
Поделиться на другие сайты
Ruskat Основной

Ruskat

Опубликовано
  • Автор
Опубликовано

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)
			}
Ссылка на комментарий
Поделиться на другие сайты
Fedya Восходящая звезда

Fedya

Опубликовано
Опубликовано (изменено) 

<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, то должно работать

Изменено пользователем Fedya
Ссылка на комментарий
Поделиться на другие сайты
Ruskat Основной

Ruskat

Опубликовано
  • Автор
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
LvsF Ментор

LvsF

Опубликовано
Опубликовано


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

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

А нужно было:


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

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

×
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...