08.10.2012, Saat: 14:34
Jquery ile zaman ayarlı Yükleniyor - Loading image yapımı + Text Reklam + Duyuru vb. uygulamalar oluşturma.
Merhaba arkadaşlar,
Bu konumuzda Jquery tekniği ile basit bir şekilde sayfa yükleniyor uygulamasını yapacağız. Aynı zamanda yine bu kodlar sayesinde zaman ayarlı, text reklam, duyuru mesajı vb. gibi şeylerin nasıl yapıldığını anlatmaya çalışacağım. Buyrun hemen anlatıma geçelim..
Jquery sayfa yükleniyor, loading image yapımı:
Css kodları:
html kodları:
js kodları 1:
js kodları 2 (zaman ayarlı):
Alternatif olarak, css'den resim yerine arkaplan renk kodu atayıp resimide html olarak ekleme:
Ya da..
Ve ya..
Aynı zamanda, bu uygulama sayesinde, zaman ayarlı text reklam, duyuru vs. gibi şeylerde gösterilebilir..
Örnek:
Yazının gözükmesi için, css kodundan yazıyı gizleyen kodu silmek yeterlidir.
Görünüşü oval yapmak için css kodlarına aşağıdaki css elementlerini ekleyebilirsiniz.
Sabitlemek için css kodlarına aşağıdaki css elementini ekleyebilirsiniz.
Eğer CSS bilgisi yeterli seviyede ise, css kodlarını geliştirip daha farklı uygulamalar içinde kullanılabilir..
Ekteki resmi, ftp'den ''./images'' klasörünün içine yüklemeyi unutmayınız.
Demo Link:
Kaynak: MCTR - XpSerkan
Merhaba arkadaşlar,
Bu konumuzda Jquery tekniği ile basit bir şekilde sayfa yükleniyor uygulamasını yapacağız. Aynı zamanda yine bu kodlar sayesinde zaman ayarlı, text reklam, duyuru mesajı vb. gibi şeylerin nasıl yapıldığını anlatmaya çalışacağım. Buyrun hemen anlatıma geçelim..
Jquery sayfa yükleniyor, loading image yapımı:
Css kodları:
PHP Kod:
.Yukleniyor_CSS {
background: url("images/yukleniyor.gif") repeat scroll 0 0 transparent;
top: 150px; /*-[yukarı-aşağı]-*/
left: 500px; /*-[saga-sola]-*/
width: 100px; /*-[resim genişlik]-*/
height: 100px; /*-[resim yükseklik]-*/
z-index: 2; /*-[gölge]-*/
position: absolute; /*-[pozisyon]-*/
text-indent: -9999em; /*-[yazi gizle]-*/
}
html kodları:
PHP Kod:
<div class="Yukleniyor_CSS">Sayfa Yükleniyor...</div>
js kodları 1:
PHP Kod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function() {
jQuery('.Yukleniyor_CSS').hide(); //oto göster ve gizle - kendi halinde
});
</script>
js kodları 2 (zaman ayarlı):
PHP Kod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function(){
jQuery('.Yukleniyor_CSS').fadeOut(5000); //zaman ayarı 5 saniye
});
</script>
Alternatif olarak, css'den resim yerine arkaplan renk kodu atayıp resimide html olarak ekleme:
PHP Kod:
background-color: #333;
PHP Kod:
<div class="Yukleniyor_CSS">
<img src="http://destek.mybb.com.tr/images/spinner_big.gif" alt="Yükleniyor..." />
</div>
Ya da..
PHP Kod:
background: #333 url("http://destek.mybb.com.tr/images/spinner_big.gif") repeat scroll 0 0 transparent;
Ve ya..
PHP Kod:
background-color: #333;
background-image: url("http://destek.mybb.com.tr/images/spinner_big.gif") repeat scroll 0 0 transparent;
Aynı zamanda, bu uygulama sayesinde, zaman ayarlı text reklam, duyuru vs. gibi şeylerde gösterilebilir..
Örnek:
PHP Kod:
<div class="Yukleniyor_CSS">Reklam, Yazı, Duyuru içeriği buraya gelecek.</div>
Yazının gözükmesi için, css kodundan yazıyı gizleyen kodu silmek yeterlidir.
PHP Kod:
text-indent: -9999em; /*-[yazi gizle]-*/
Görünüşü oval yapmak için css kodlarına aşağıdaki css elementlerini ekleyebilirsiniz.
PHP Kod:
border-radius: 5px; //Son sürüm tarayıcılar
-o-border-radius: 5px; //Opera
-ms-border-radius: 5px; //MSI
-moz-border-radius: 5px; //Mozilla
-khtml-border-radius: 5px; //Konqueror, ABrowse, Apple Safari, Nokia
-webkit-border-radius: 5px; //Chrome
Sabitlemek için css kodlarına aşağıdaki css elementini ekleyebilirsiniz.
PHP Kod:
position: fixed; //Sabitleme kodu
Eğer CSS bilgisi yeterli seviyede ise, css kodlarını geliştirip daha farklı uygulamalar içinde kullanılabilir..
Ekteki resmi, ftp'den ''./images'' klasörünün içine yüklemeyi unutmayınız.
Demo Link:
Kod:
http://www.mybbdepo.com/
Kaynak: MCTR - XpSerkan
MyBB.Com.TR XpSerkan.Com FB.Com/XpSerkan
Google: +MyBBGrup FaceBook: #MyBBGrup Twitter: @MyBBGrup YouTube: ►MyBBGrup
MyBB Destek MyBB Tema MyBB Eklenti MyBB Seo
≧◔◡◔≦ I Love You MyBB (>‿♥)
Google: +MyBBGrup FaceBook: #MyBBGrup Twitter: @MyBBGrup YouTube: ►MyBBGrup
MyBB Destek MyBB Tema MyBB Eklenti MyBB Seo
≧◔◡◔≦ I Love You MyBB (>‿♥)