Ufak bir oyun scripti için pop up açmadan tarayıcı içerisinde tam ekran yapma gibi bir kod yapısına ihtiyaç duydum. Amacım kullanıcı oyunu küçük büyük ekranda oynamak istediğinde tarayıcı alanı kadar alanda orantılı olarak tam ekran oynayabilmesini sağlamaktı. Pop up ile tam ekran açmak basit yöntem ama popup engelleyicilere takılıyor. Bunun için javascript ve css ile basit bir örnek hazırladım.

Mantık, kullanıcının ekran çözünürlüğünden tarayıcı genişlik ve yüksekliğini alıp tüm içeriğin üzerine gelecek şekilde tam ekran yerleştirmek. Öncelikli olarak jquery kütüphanesini sayfamıza çağırıyoruz:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Basit html yapımız: 

</p>
<div id="kapat" onclick="kapat()" style="display:none; position:absolute; top:0; right:0; z-index:-999">KAPAT</div>
<div id="icerik"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="400" width="600"><param name="quality" value="high" /><param name="movie" value="http://www.sezercik.net/content/uploads/flash/araba-park-etme.swf" /><embed height="400" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://www.sezercik.net/content/uploads/flash/araba-park-etme.swf" type="application/x-shockwave-flash" width="600"></embed></object></div>
<div style="margin:0 auto; width:600px; height:200px; background:#F00;"><a href="javascript:buyut();">B&uuml;y&uuml;t</a></div>
<p>

 

kapat idli div, tam ekran yaptığımızda tekrar eski haline getirme işlemini gerçekleştirecek.  icerik idli div flash nesnemizin olduğu kısım. En altta bulunan link ise büyütme olayını gerçekleşritiyor. Arkaplanları farklı renklendirerek daha belirgin hale getirmeye çalıştım.

Css kodları:

.bigger { top:0; right:0; bottom:0; left:0; position: absolute; } #icerik { background:#F3F; text-align:center; } .icerik2 { background:#F3F; text-align:center; width:640px; height:480px; z-index:999; }

.bigger sınıfı tam ekran pozisyonunu ayarlıyor, .icerik ise küçük içeriği konumlandırıyor.

Javascript kodları :

function buyut() { $('#icerik').css({ width: $(window).width(), //pencere genişliği height: $(window).height() // pencere yuksekliği }).addClass("bigger"); var witd = $(window).height()*(640/480); // monitorler dikdortgen oldugu için yuksekliği tam yapıp genişliği ona gore orantıladık $('#icerik object').attr('width',witd).attr('height',$(window).height()); // degerlerimizi verdik $('#icerik embed').attr('width',witd).attr('height',$(window).height()); $('#kapat').show(); } function kapat() { // içerik eski css bilgilerine döndürülüyor. $('#kapat').hide(); $('#icerik').css({ width: "640", height: "480" }).removeClass("bigger").addClass("icerik2"); $('#icerik object').attr('width',"640").attr('height',"480"); $('#icerik embed').attr('width',"640").attr('height',"480"); }

Kodlar bu kadar. 

Çalışan örneği görmek için buraya tıklayın.