Нека разгледаме пример, при който имаме флаш, ембеднат на размер 100%, в <div> контейнер с id='swfHolder'. В този случай искаме флашът да бъде винаги на 100% от размера на браузъра, но ако браузърът е с размери по-малки от 950x650px или по-големи от 1200x900px флашът да спре да се оразмерява и да запази тези размери.
Ето ембед-кодът за нашия примерен флаш:
<div id='swfHolder' style='width:100%; height:100%;'>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="100%" height="100%" id="sampleSwf" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="sampleSwf.swf" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="/sampleSwf.swf" menu="false" quality="high" bgcolor="#ffffff" width="100%" height="100%" name="sampleSwf" align="middle" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
</div>
Ако оставим нещата на този етап, флашът ще се оразмерява винаги до 100% от размера на браузъра.
За да постигнем целта си трябва да добавим следния JavaScript в <head></head> секцията на html документа:
<script language="JavaScript" type="text/javascript">
<!--
window.onload=resizeHolder;
window.onresize = function(event) {
resizeHolder();
}
function resizeHolder(){
var currH = document.body.clientHeight;
var currW = document.body.clientWidth;
var minHeight = 650;
var minWidth = 950;
var maxWidth = 1200;
var maxHeight = 900;
var holder = document.getElementById("swfHolder");
if(currH < minHeight){
holder.style.height = minHeight+'px';
}else if(currH > maxHeight){
holder.style.height = maxHeight+'px';
}else{
holder.style.height = '100%';
}
if(currW < minWidth){
holder.style.width = minWidth+'px';
}else if(currW > maxWidth){
holder.style.width = maxWidth+'px';
}else{
holder.style.width = '100%';
}
}
// -->
</script>
Нека разгледаме скрипта:
Този ред ще извика функцията за оразмеряване при първото зареждане на страницата.
window.onload=resizeHolder;
От тук извикваме функцията за оразмеряване при всяка промяна в размера на браузъра.
window.onresize = function(event) {
resizeHolder();
}
Ето и самата функция, която осъществява оразмеряването:
function resizeHolder(){
В тези две променливи съхраняваме новия размер размер на браузъра,съответно височина и ширина в пиксели, с който ще сравняваме желания от нас размер
var currH = document.body.clientHeight;
var currW = document.body.clientWidth;
В тези две променливи съхраняваме желаният минимален размер, при който искаме флашът да се показва - съотоветно височина и ширина в пиксели
var minHeight = 650;
var minWidth = 950;
В тези две променливи съхраняваме желаният максимален размер, при който искаме флашът да се показва - съотоветно височина и ширина в пиксели
var maxWidth = 1200;
var maxHeight = 900;
Тове е <div> контейнерът, който съдържа флаша
var holder = document.getElementById("swfHolder");
Следващите if-else ще проверят какъв е текущия размер на браузъра спрямо зададените минимални и максимални размери. Ако той е по-малък от желания минимален размер, контейнерът ще бъде оразмерен до минималния размер, ако е по-голяма от желания максимален размер, контейнерът ще бъде оразмерен до максималния размер. Във всички останали случаи, контейнерът ще бъде оразмерен до 100% от размерите на браузъра.
if(currH < minHeight){
holder.style.height = minHeight+'px';
}else if(currH > maxHeight){
holder.style.height = maxHeight+'px';
}else{
holder.style.height = '100%';
}
if(currW < minWidth){
holder.style.width = minWidth+'px';
}else if(currW > maxWidth){
holder.style.width = maxWidth+'px';
}else{
holder.style.width = '100%';
}
}Ако желаете оразмеряване само по минимален размер, без максимално допустим размер за флаша, то задайте следните стойности за maxWidth и maxHeight:
var maxWidth = currW;
var maxHeight = currH;Ако желаете да ограничите само максималния размер, без минимално допустим размер за флаша, то задайте следните стойности за minWidth и minHeight:
var minWidth = currW;
var minHeight = currH;
Кодът е тестван на повечето браузъри и операционни системи и работи без проблем.
Между другото, този подход може да бъде използван за всеки <div> контейнер, не само за съдържащите флаш, но предполагам вече сте се досетили за това :-)
Cart
Количката Ви е празна.
Коментари
Дай линкче да погледна... най-вероятно в самия флаш имаш скрипт, който позиционира съдържанието по този начин.
RSS на коментарите по тази тема.