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üyü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.
çalışmadı yada yapamadım bunları dosya şeklinde uploadlayabilirmisiniz o zaman yapabilirim.
Çalışan örneğin kaynak koduna kopyalayarak html olarak kaydedebilirsiniz.
ücretli bir oyun temasında görmüştüm çok iyi bir özelli
teşekkürler
İşe yarar bir kod gibi. Henüz denemedim ama içeriği büyütüp bir kere kapat’ a bastıktan sonra tekrar büyüt’ e tıklarsak oyun büyüyor fakat kapat çıkmıyor. O yüzden denemedim.
video su olsa idi yada daha acıklansa idi
kodları nreye ekliyoruz
Body taglari arasina ekleyebilirsiniz.
saolun çok işime yaradı. Oyun sitem için kullandım. Gerçekten harika oldu benim için..