Вставка HTML-страницы в другую HTML страницу

[melky]

zoom: N; /* для IE */
transform: scale(...); /* для остальных */

<оффтопик>

жаль, что zoom изменяет размер не векторно, а расторно.

есть ли способ с помощью фильтров изменить размер векторным образом?

</оффтопик>

[devote]

я тут http://webandad.com/ использовал zoom и scale вроде нормально, единственное проблема в ИЕ, то что zoom размер меняет к центру а scale к левому-верхнему углу. Или наоборот, точно не помню уже

[melky]

devote, у него и с фильтром поворота тоже беда - он по-другому поворачивает*. поэтому поворот "как во всех браузерах" можно сделать только тогда, когда есть под рукой элемент, а не CSSStyleDeclaration . и это печально.


*величина "кривизны" зависит от размеров элемента


PS. что-то я вспомнил про expressions... хм, может, еще получится сделать нормальный поворот, не имея на руках элемент.

[devote]

PS. что-то я вспомнил про expressions... хм, может, еще получится сделать нормальный поворот, не имея на руках элемент.

expression конечно хорошо, но вот проблема в том что ИЕ8 не поддерживает expression, тут и попа вся.. а так для эмуляции rotate в IE7 и ниже я пользовался таким хаком:

Работает во всех браузерах кроме ИЕ8

<style type="text/css">
	#to_rotate {
		position: absolute;
		width: 100px;
		height: 100px;
		background-color: #f00;

		filter:expression("progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11="+(this.style.Rotate?1:(this.style.Rotate=0),(this.xWidth?1:(this.xWidth=this.offsetWidth,this.xHeight=this.offsetHeight,1)),(this.style.marginLeft=(-Math.round((this.offsetWidth-this.xWidth)/2))+"px"),(this.style.marginTop=(-Math.round((this.offsetHeight-this.xHeight)/2))+"px"),Math.cos((this.style.Rotate*Math.PI)/180.0))+",M12="+(-(Math.sin((this.style.Rotate*Math.PI)/180.0)))+",M21="+(Math.sin((this.style.Rotate*Math.PI)/180.0))+",M22="+(Math.cos((this.style.Rotate*Math.PI)/180.0))+")");
	}
</style>
<div style="position: relative;">
	<div id="to_rotate">test text</div>
</div>
<script type="text/javascript">
	setInterval(function() {
		var el = document.getElementById('to_rotate');

		// специальное свойство для IE ниже восьмой версии
		el.style.Rotate = (el.style.Rotate||0) + 2;

		// для все остальных
		el.style.OTransform =
		el.style.MozTransform =
		el.style.WebkitTransform =
		el.style.msTransform =
		el.style.transform = "rotate(" + el.style.Rotate + "deg)";
	}, 50);
</script>

[devote]

если кому то нужно кросс-браузерный rotate с помощью скриптов, то вот:

<style type="text/css">
	#to_rotate {
		position: relative;
		width: 100px;
		height: 100px;
		background-color: #f00;
	}
</style>

<div id="to_rotate">test text</div>

<script type="text/javascript">

	function rotateElem( elem, deg ) {

		var style = elem.style;

		if ( elem.ownerDocument && elem.ownerDocument.defaultView ) {
			style = elem.ownerDocument.defaultView.getComputedStyle( elem, null );
		} else if ( elem.currentStyle ) {
			style = elem.currentStyle;
		}

		if ( eval("/*@cc_on @_jscript_version;@*/") <= 5.8 ) {

			var rad = ( deg * Math.PI ) / 180.0,
				cos = Math.cos(rad),
				sin = Math.sin(rad);

			elem.originalWidth = elem.originalWidth || elem.offsetWidth;
			elem.originalHeight = elem.originalHeight || elem.offsetHeight;

			elem.style.filter = style.filter.replace( /progid:DXImageTransform.Microsoft.Matrix\([^)]*\)[;]?/g, "" ) +
				"progid:DXImageTransform.Microsoft.Matrix("+
				"sizingMethod='auto expand',M11="+cos+",M12="+(-sin)+",M21="+sin+",M22="+cos+")";

			elem.style.marginLeft = -Math.round( ( elem.offsetWidth - elem.originalWidth ) / 2 );
			elem.style.marginTop =- Math.round( ( elem.offsetHeight - elem.originalHeight ) / 2 );
		} else {
			var Transform = (
				style.transform ||
				style.OTransform ||
				style.MozTransform ||
				style.WebkitTransform ||
				style.msTransform
			)+"";

			elem.style.OTransform =
			elem.style.MozTransform =
			elem.style.WebkitTransform =
			elem.style.msTransform =
			elem.style.transform =
				Transform.replace( /(none|[\s]?(rotate|matrix)\([^)]*\))/g, "" ) + " rotate(" + deg + "deg)";
		}
	}

	setInterval((function(){
		var start = 0;
		return function() {
			rotateElem( document.getElementById('to_rotate'), start+=2 );
		}
	})(), 50);

</script>

работает во всех браузерах.

[melky]

expression конечно хорошо, но вот проблема в том что ИЕ8 не поддерживает expression, тут и попа вся..

вот вот... ни expressions, ни -ms-transform.

тогда.. придется только для него получать список элементов (слава Богу, он поддерживает querySelectorAll - кстати, не без глюков?).

получается объёмненько, если так ветвиться - три раза. но это уже лучше, чем ничего

[devote]

кстати, не без глюков?

да вроде не наблюдалось. Единственное что CSS3 селекторы он не держит, а так норм вроде.

[hadzhimuratov]

Deff, спасибо,страница уменьшилась : )
А можно задать какой то определенный размер страницы в % или px????

Теперь объясните пожалуйста как вставить эту страницу в DIV???

Если источником будет являться страница с php, в которую я буду вставлять свою html-страницу, то что изменится???
Если можно то привидите пожалуйста пример способа реализации.
Очень благодарен за ответы.

[Раед]

Теперь объясните пожалуйста как вставить эту страницу в DIV???

Страницы обычно в iframe вставляют

[hadzhimuratov]

Раед, да, но только когда я вставляю страницу уменьшенную в iframe, то размер опять становиться прежним : (