MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
xpserkan avatar
Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 5/5 - 1 oy

Jquery zaman ayarlı Yükleniyor - Loading yapımı + Text Reklam + Duyuru


Sponsor Reklam
media venus

Çevrimdışı xpserkan
 Tarih: 08-10-2012, Saat:14:48
(Son Düzenleme: 08-10-2012, Saat:17:00, Düzenleyen: xpserkan.)
#1
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ı:
PHP Kod:
.Yukleniyor_CSS {
    
backgroundurl("images/yukleniyor.gif"repeat scroll 0 0 transparent;
    
top150px;  /*-[yukarı-aşağı]-*/
    
left500px;  /*-[saga-sola]-*/
    
width100px;  /*-[resim genişlik]-*/
    
height100px;  /*-[resim yükseklik]-*/
    
z-index2;  /*-[gölge komutu]-*/
    
positionabsolute;  /*-[pozisyon komutu]-*/
    
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-imageurl("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">ReklamYazı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-radius5px;  //Son sürüm tarayıcılar
 
-o-border-radius5px;  //Opera
 
-ms-border-radius5px;  //MSI
 
-moz-border-radius5px//Mozilla
 
-khtml-border-radius5px;  //Konqueror, ABrowse, Apple Safari, Nokia
 
-webkit-border-radius5px;  //Chrome 

Sabitlemek için css kodlarına aşağıdaki css elementini ekleyebilirsiniz.
PHP Kod:
positionfixed;  //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: http://mybbdepo.com/

Kaynak: Jquery zaman ayarlı Yükleniyor Yapımı Alıntı
MCTR - XpSerkan


Ek Dosyalar Ekran Görüntüleri
   
Cevapla
Bunu Beğenenler: tolganet , TheLegend , GlaDiaToR , Kiliza
Sponsor Reklam
sponsor reklam sponsor reklam

Çevrimdışı xpserkan
 Tarih: 08-10-2012, Saat:14:48
(Son Düzenleme: 08-10-2012, Saat:16:53, Düzenleyen: xpserkan.)
#2
MyBB'de kullanmak için tek bir örnek veriyorum.
Yükleniyor uygulamasını ya da reklam , duyuru artık yaptığınız şeyi sadece ziyaretçilere göstermek için şu adımları uygulayın.

Kullandığınız temanın, Global.css kalıplarına girip en sona aşağıdaki css kodlarını ekleyin.
PHP Kod:
.Yukleniyor_CSS {
    
backgroundurl("images/yukleniyor.gif"repeat scroll 0 0 transparent;
    
top50%;  /*-[yukarı-aşağı]-*/
    
left50%;  /*-[saga-sola]-*/
    
width100px;  /*-[resim genişlik]-*/
    
height100px;  /*-[resim yükseklik]-*/
    
z-index2;  /*-[gölge komutu]-*/
    
positionabsolute;  /*-[pozisyon komutu]-*/
    
text-indent: -9999em/*-[yazi gizle]-*/


Daha sonra, tekrar kullandığınız temanın, Header şablonlarından => header_welcomeblock_guest şablonuna girip şu kodları en üste veya en sona ekleyin.
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>
<div class="Yukleniyor_CSS">Sayfa Yükleniyor...</div> 

Son olarak konudaki resmi ftp'den ./images klasörüne yükleyip, forumdan çıkış yapın ve uygulamanın çalışıp çalışmadığını kontrol edin..

Css kodlarından, uygulamanın sağa/sola , yukarı/aşağı pozisyon ayarlarını yapabilirsiniz..
Cevapla
Bunu Beğenenler: tolganet

! Kerema !
 Tarih: 08-10-2012, Saat:16:02
#3
Demo varmı ?
Cevapla
Bunu Beğenenler:

İzinli TheLegend
 Tarih: 08-10-2012, Saat:16:17
#4
Anlamadım abi.
Cevapla
Bunu Beğenenler:

Çevrimdışı Legans
 Tarih: 08-10-2012, Saat:16:18
#5
bende anlamadım
Cevapla
Bunu Beğenenler:

Çevrimdışı EmreKarakaya
 Tarih: 08-10-2012, Saat:16:34
#6
Hangi bölümü anlamadığınızı söyleyerek daha fazla bilgi alabirsiniz
Cevapla
Bunu Beğenenler:

Çevrimdışı ExcellenTExperT
 Tarih: 08-10-2012, Saat:16:34
(Son Düzenleme: 08-10-2012, Saat:16:35, Düzenleyen: ExcellenTExperT.)
#7
Mesaj yollarken mesela yükleniyor çıkıyor ya serkan abi onu kastediyor.

Örneğin bu sitede mesaj yollarken çıkıyor.
Cevapla
Bunu Beğenenler:

Çevrimdışı xpserkan
 Tarih: 08-10-2012, Saat:17:00
#8
Demo ekledim arkadaşlar , merak edenler bakabilir..

http://mybbdepo.com/

Ayrıca kodlarda eksik varmış , eksikleride düzenledim..
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  jQuery ile Farenin Sağ Tuşuyla Açılan Menü Retribution 2 523 01-06-2015, Saat:08:10
Son Yorum: ufufuk
  Jquery Gizle/Göster __Smile__ 2 684 18-02-2015, Saat:13:36
Son Yorum: __Smile__



Konuyu Okuyanlar: 1 Ziyaretçi