Sezer Çoban

Bir İki Şey Biliyorum, Üç Dört Şey Ekliyorum.

Javascript ve CSS ile Tam Ekran Div’ler

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&ccedil;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&ccedil;erik eski css bilgilerine d&ouml;nd&uuml;r&uuml;l&uuml;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.

 

  • olmadi says:

    çalışmadı yada yapamadım bunları dosya şeklinde uploadlayabilirmisiniz o zaman yapabilirim.

    • Sezer says:

      Çalışan örneğin kaynak koduna kopyalayarak html olarak kaydedebilirsiniz.

  • erhan says:

    ücretli bir oyun temasında görmüştüm çok iyi bir özelli
    teşekkürler

  • ozgur says:

    İş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.

  • keşke says:

    video su olsa idi yada daha acıklansa idi

    • keşke says:

      kodları nreye ekliyoruz

      • Sezer says:

        Body taglari arasina ekleyebilirsiniz.

Your email address will not be published. Required fields are marked *

*