JQuery: Fullscreen(Tam Ekran)

JQuery: Fullscreen(Tam Ekran) özelliği kullanımını öğrenelim.

Merhaba;

Bu dersimiz de yeni nesil temalarda sık yaygınlaşmaya başlayan Fullcreen(Tam Ekran) özelliği videolardan artık web sayfalara kadar ilerledi bu yenilikle web sayfaları daha dinamik web tasarımları oluşturmaya başlayacaktır.jQuery.fullscreen eklentisi ile web sayfalarımızı Tam Ekran olarak kullanmayı ve basit bir şekilde sitemize eklemeyi öğrenelim.

23.05.2014 (v2.0) Tarihli Düzenlemeler
[list]
[*] Sade ve Açıklamalı olarak paylaşıma sunuldu.
[*] Scrollbar eklentisi makaleye eklendi.
[*] Scrollbar ve Fullscreen eklentisi bir arada kullanıldı.
[*] CSS dosyası eklendi.
[/list]

08.05.2014 (v1.1) Tarihli Düzenlemeler
[list]
[*] Sade ve Açıklamalı olarak paylaşıma sunuldu.
[*] Ders niteliğinde biçimlendirildi.
[*] Kaynak dosya ve demo sayfa kullanıcılara beğenisine sunuldu.
[/list]

Fullscreen Eklenti Dosyası

<script type="text/javascript" src="jquery.fullscreen-0.4.1.js"></script>



Scroollbar Hide(Gizli) Eklenti
Mouse üzerine gelince scrollbar aktif olucaktır.

<link rel="stylesheet" href="jquery.mCustomScrollbar.css">

<script src="jquery.mCustomScrollbar.concat.min.js"></script>



Tam Ekran Yap / Tam Ekran Kapat Buton

<script type="text/javascript">

    $(function() {

        $('.tamekranyap').click(function() {  /* Tem ekran yap butonu  class="tamekranyap" ayrıca id="" değeri olarak da atayabilrisiniz.*/

            $('body').fullscreen();

            return false;

        });



        $('.tampekrankapat').click(function() { /* Tem ekran kapat butonu  class="tampekrankapat" ayrıca id="" değeri olarak da atayabilrisiniz.*/

            $.fullscreen.exit();

            return false;

        });

    });

    </script>



Scrollbar Eklenti

<script src="jquery.mCustomScrollbar.concat.min.js"></script>    <!-- Scrollbar Eklenti Dosyası -->

            <script>

                (function($){

                    $(window).load(function(){

                        

                        $("#scrollbarmetin").mCustomScrollbar({   /*id="scrollbarmetin"*/

                            autoHideScrollbar:true,                  /*Otomatik Gizleme true(Aktif) false(Kapalı)*/

                            theme:"rounded"

                        });

                        

                    });

                })(jQuery);

            </script>



v1.2 İndex.html

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>jQuery.fullscreen Tam Ekran Yapımı</title>

    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="jquery.mCustomScrollbar.css">

    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript" src="jquery.fullscreen-0.4.1.js"></script>

    <script type="text/javascript">

    $(function() {

        $('.tamekranyap').click(function() {  /* Tem ekran yap butonu  class="tamekranyap" ayrıca id="" değeri olarak da atayabilrisiniz.*/

            $('body').fullscreen();

            return false;

        });



        $('.tampekrankapat').click(function() { /* Tem ekran kapat butonu  class="tampekrankapat" ayrıca id="" değeri olarak da atayabilrisiniz.*/

            $.fullscreen.exit();

            return false;

        });

    });

    </script>

</head>

<body>

    

    <div class="content"> 

    

        <!-- Butonumuz -->

        <a href="#" class="btn tamekranyap">Tam Ekran [Yap]</a> / <a href="#" class="btn tampekrankapat">Tem Akran [Kapat]</a>

        

     

            <div id="scrollbarmetin" class="metin">

                <h2>Makale V1.2</h2>

                <hr />

                <p>

                    Belgesel hipotez (İngilizce: Documentary Hypothesis [DH]) veya Wellhausen hipotezi; Tevrat'ın, yani Musa'nın beş kitabının, birbirlerinden bağımsız, paralel ve tam hikâyelerden oluştuğunu ve redaktörler (düzenleyiciler) tarafından bir dizi düzenlemelerden geçtikten sonra son hâlini aldığını iddia eden hipotez. Kesin olmamakla birlikte, uzmanlar arasında hikâyelerin genel olarak dört kaynaktan birinden geldiği görüşü hâkimdir.

                    Tutarsız metinleri uzlaştırmaya ve geleneksel açıklamaları reddedip uyum sağlamaya çalışırken bazı 18. ve 19. yüzyıl dinbilimcileri; Tevrat'ın, kendi içinde tam ve bağımsız olan ve zaman zaman tutarsız kaynaklardan gelen hikâyelerden oluştuğuna kanaat getirdiler. Bu hipotez 19. yüzyılda gelişti ve temel olarak 4 ana kaynağın varlığı görüşünde birleşildi. Bu kaynaklar, MÖ 10. yüzyılda yazıldığı düşünülen Yahvist ((J) - Jahwist) ve MÖ 8 ila 6. yüzyıllar arası yazıldığı düşünülen Elohist (E), Tesniyeci ((D) - Deuteronomist) ve Ruhbani ((P) - Priestly source) kaynaklardır.[1] Kaynaklar, redaktörler (R) tarafından derlenip son halini aldı. Son derleme MÖ 6 ile 5. yüzyıllar arasında gerçekleşmiştir.

                    <br><br>Julius Wellhausen'in bu hipoteze katkısı JEDP kronolojik sırasını sunmak oldu. İsrail'in dinî tarihine ve bu zamandan beri yükselen ruhban sınıfının gücüne uyumlu olarak şu formülü sundu:

                    Yahvist kaynak (J): ~MÖ 950'lerde, güneydeki Yehuda Krallığı'nda yazıldı.

                    Elohist kaynak (E): ~MÖ 850'lerde kuzeydeki İsrail Krallığı'nda yazıldı.

                    <br><br>Tesniyeci kaynak (D): ~MÖ 600'lerde Kudüs'te dinî reformlar zamanında yazıldı.

                    Ruhbani kaynak (P): ~MÖ 500'lerde Babil'de, sürgündeki Harun soyundan gelen rahipler tarafından yazıldı.

                    Tevrat Redaktörleri: önce JE, sonra JED ve ardından JEDP olarak derlenip ~MÖ 450'lerde Tevrat son hâlini aldı.

                    Belgesel hipotez, 20. yüzyılda dinbilimcilerinin odaklandığı konu olurken Tevrat'ın kaynağı konusundaki çeşitli modellerin ana çerçevesini oluşturdu.[2] Çeşitli düşünürler bu hipoteze eklemeler yapıp zamanla geliştirdi. Fakat, 20. yüzyılın sonlarına doğru, Whybray'in bu hipotezi çürütmeye çalışan tezleriyle Belgesel hipotez taraftarları sayısında düşüş gerçekleşti. Bunun üzerine, Rolf Rendtdorff ve Thomas L. Thompson gibi dinbilimciler, Wellhausen hipotezinin özünden uzaklaşarak Tevrat'ın temellerini bulmak için farklı görüşler ortaya attılar. Sayıları azalmasına rağmen bugün başta Amerika Birleşik Devletleri'nde olmak üzere Belgesel hipotezin doğruluğuna inananlar hâlen mevcuttur.

                </p>

            </div>        

        

        

            <a href="fullscreenv11" class="btn">V1.1 DEMO</a> / <a href="fullscreenv12" class="btn">V1.2 DEMO</a>

            <br><br>

            <a href="fullscreenv11.zip" class="btn">V1.1 İNDİR</a> / <a href="fullscreenv12.zip" class="btn">V1.2 İNDİR</a>

            <br><br><br><br>    

            Kaynak: 

            <a href="http://www.jqueryrain.com/?L_dwB4rN">Scrollbar</a>    



            

            

            <script src="jquery.mCustomScrollbar.concat.min.js"></script>

            <script>

                (function($){

                    $(window).load(function(){

                        

                        $("#scrollbarmetin").mCustomScrollbar({

                            autoHideScrollbar:true,

                            theme:"rounded"

                        });

                        

                    });

                })(jQuery);

            </script>    

        

    </div>

</body>

</html>



v1.2 Önizleme


v1.2 Scrollbar Önizleme


v1.2 Tam Ekran Önizleme


v1.1 Önizleme


v1.1 Tam Ekran Önizleme


Demo v1.1 Demo v1.2

Not:
- Tam ekran yap butonuna tıklandığı an İster Kullanıcı Tam Ekran Kapat butonunu kullanabilir veya Klavyesinden ESC ile tam ekranı sonlandırabilir. (RESİM 1.1 BAKINIZ)

Kaynak:Scrollbar

Çalışmalarınızda Başarılar Dilerim
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Öncelikle anlatım için teşekkürler. Ancak şöyle bir durum söz konusu. Tam ekran yaptığımızda sayfayı mause orta tekerleği ile aşağı yukarı yapılmıyor. Dolayıısyla uzun yazılarda problem çıkaracaktır. Belkide benden kaynaklı bir durum. Tarayıcı Firefox.
Merhaba; [b]OEmpire[/b] Uzun sayfa 1 den sonrası sorun yaşayabilirsiniz nedeni tam ekran yap komutu algılandığı zaman ekran 1 sayfa olarak konumlandırılıyorken. Bu nedenle jquery scrollbar kullanmanız gerekli. Versiyon 1.2 olarak kısa zamanda ekleyeceğim. İlginizden Dolayı Teşekkür Ederim Çalışmalarınızda Başarılar Dilerim
23.05.2014 (v1.2) Tarihli Düzenlemeler Yapıldı. Çalışmalarınızda Başarılar Dilerim
detaylı yardım talebi için özel mesaj atabildim ancak cevabınızı bekliyorum.
Merhaba;[b]dijiwebb[/b] Yardım talebiniz örnek çalışma ile özel mesaj olarak gönderilmiştir. Çalışmalarınızda Başarılar Dilerim

Yukarı Git