Jump to content
Forumu Destekleyenlere Katılın ×
Paticik Forumları
2000 lerden beri faal olan, çok şukela bir paylaşım platformuyuz. Hoşgeldiniz.

fix reklam

khazadum

Son yazan: khazadum
yeri: Programlama

 Paylaş

Öne çıkan mesajlar

khazadum Enthusiast

khazadum

Mesaj tarihi:
Mesaj tarihi:
Selam,

Sitenin altına scroll ile kayan reklam yapmak lazım oluyor arada sırada. Bu melet için çok uğraşmıştım. Dursun burda da lazım olan olursa kullanır.

Herşeyden önce bir jquery kütüphanesi çağırmak lazım onun için;



	<script src="http:// code.jquery.com/jquery-1.9.1.js"></script>

	<script src="http:// code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


bu kodlar yeterli olacaktır. Daha sonra jquery kütüphanesini kullandığımız için bir aç/kapa fonksiyonu yazalım;



	<script type="text/javascript">

	$(document).ready(function(){

	 $(".click").click(function(){

	 var reklam = -1;

	 return function() {

	 $(".reklamvar").animate({top: (reklam = ++reklam % 2) ? 0:100}, {duration: 500});

	 };

	 }());

	});

	</script>


daha sonra sitemizin en altında sabitçe durmasını engellemek ve scroll ile kaymasını sağlamak için bir css yazalım;



	#reklam {

	 position:fixed;

	 bottom:0;

	 width:100%;

	}


sitenin şekli şemaline göre reklam alanını ayarlayalım. Ben genelde genişlik (width) olarak bin piksel kullanıyorum. Sizin wrapper'inizin genişliği kaçsa artık ayarlayıverin;



	#reklam .ortala {

	 width:1000px;

	 margin:0 auto;

	}


Daha sonra bir klas oluşturuyoruz. Bu oluşturduğumuz klas reklamı kapat fonksiyonunun tamamını kapsayacak. Kapat butonuna basıldığında oluşturduğumuz klas kapanacak;



	.reklamvar {

	 position:relative;

	 text-align:center;

	 width:1000px;

	 background:#000 url(images/reklambg.jpg) repeat-x;

	 moz-border-radius: 10px 10px 0px 0px;

	 -webkit-border-radius: 10px 10px 0px 0px;

	 float:left;

	}


Şimdi gelelim reklam içeriğimizin olduğu klas’a. Reklamlarımız background'umuza yapışmasın diye padding ile kaydırıyoruz reklam içeriğimizi;



	.reklamvar .reklamicerik {

	 float:left;

	 padding:16px 0 0 20px;

	}


ve son olarak gelelim kapatma fonksiyonumuza. Bir background-image ile kapat butonu yapıyoruz css ile;



	.click {

	 float:right;

	 background:url(images/arrow.png) no-repeat top center;

	 width:50px;

	 height:135px;

	 margin-top:10px;

	}


Javascript ve CSS ile işimiz bitti. Şimdi gelelim HTML kodumuza;



	<div id="reklam">

	 <div class="ortala">

	 <div class="reklamvar"><a href="http:// khazadum.com" target="_blank"><img src="images/reklam.jpg" class="reklamicerik" /></a> <a href="#" class="click"></a></div>

	 </div>

	</div>


bitti bu kadar. Eğer klas isimlerini değiştirecekseniz, javascript fonksiyonundaki klasları da değiştirmeyi unutmayın. Sonradan çalışmıyor diye ekşimeyin başıma;

Ahada çalışan örnek,

Çalışan örneği indir,

Paramparça yerine full kod;



	<!DOCTYPE html>

	<head>

	<script src="http:// code.jquery.com/jquery-1.9.1.js"></script>

	<script src="http:// code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

	 

	<style>

	 

	body {

	height:2000px;

	padding:0;

	margin:0;

	}

	 

	#reklam {

	 position:fixed;

	 bottom:0;

	 width:100%;

	}

	 

	#reklam .ortala {

	 width:1000px;

	 margin:0 auto;

	}

	 

	.reklamvar {

	 position:relative;

	 text-align:center;

	 width:1000px;

	 background:#000 url(images/reklambg.jpg) repeat-x;

	 moz-border-radius: 10px 10px 0px 0px;

	 -webkit-border-radius: 10px 10px 0px 0px;

	 float:left;

	}

	 

	.reklamvar .reklamicerik {

	 float:left;

	 padding:16px 0 0 20px;

	}

	 

	.click {

	 float:right;

	 background:url(images/arrow.png) no-repeat top center;

	 width:50px;

	 height:135px;

	 margin-top:10px;

	}

	</style>

	<script type="text/javascript">

	$(document).ready(function(){

	 $(".click").click(function(){

	 var reklam = -1;

	 return function() {

	 $(".reklamvar").animate({top: (reklam = ++reklam % 2) ? 0:100}, {duration: 500});

	 };

	 }());

	});

	</script>

	</head>

	 

	<body>

	 

	<div id="reklam">

	 <div class="ortala">

	 <div class="reklamvar"><a href="http:// khazadum.com" target="_blank"><img src="images/reklam.jpg" class="reklamicerik" /></a><a href="#" class="click"></a></div>

	 </div>

	</div>

	</body>

	</html>



hadi gg,
Link to comment
Sosyal ağlarda paylaş
khazadum Enthusiast

khazadum

Mesaj tarihi:
  • Konuyu açan
Mesaj tarihi:
ugurz said:

burada bir örneği var:

http://jsfiddle.net/C7LWm/122/show/

bu da twitter bootstrap:

http://twitter.github.io/bootstrap/components.html#navbar

bu işini görmüyor mu ?


teeeeeeeeey..

Ne alakası var abi bootstraple bu olayın? Bootstrap dediğin framework. Benim yaptığım basit bir javascript. teeeeeeeey.

Senin pek bilgin yok galiba şöyle açıklıyım ben sana;

Ben diyorum ki; "Eskişehirde sazova parkı var çok güzel. Gidin görün muhakkak."

Sen diyorsun ki; "Hayır, Eskişehir çok güzel bir yer. Gidin görün."

Bootstrap'ın ne olduğunu biliyorsun değil mi? Benim yazdığım Advertising olayı için fixleme. Sende bootstrapte bi fix header görmüşsün onu söylüyorsun sanırım. O gösterdiğinde kapat aç fonksiyonu da yok bi kere?

Neyse fazla konuşmucam sana abi. Sen her böyle tuto paylaşana "olum bootstrap var ya, neyine yetmiyor" demeye devam et panpa.
Link to comment
Sosyal ağlarda paylaş
ugurz Contributor

ugurz

Mesaj tarihi:
Mesaj tarihi:
Demek istediğim özetle şuydu hali hazırda yapılmış olanı varken tekerleği yeniden icat ederek vakit kaybetmek neden ? Düşündüm ki Belki spesifik bir gerekçesi vardır bir takım cross-browser mobile uyumsuzlukları vardır mevcut eklentilerin ondan ötürü bu tip bir şey yapılabilir ama öyle bir şey de çıkmadı.

Meseleyi saptırmayalım. Ben sen yaptığın bir şeyi paylaşamazsın demedim. Kaldı ki bu tip şeyler öyle de paylaşılmaz her işin bir adabı vardır. Konu hakkında ufak bir dokümantasyon hazırlanır github'a filan düzgün bir biçimde yüklenir. İnsanların beğenisine sunulur.

Aç Kapat fonksiyonu yok bir kere demişsin. Sıfırdan fixed bar hazırlıyorsun da kapat fonksiyonu mu ekleyemiyorsun. İşte ekledim iki dakika sürmedi ->

http://jsfiddle.net/C7LWm/123/show/

Kapat fonksiyonu da nasıl lazımsa benzer mantıkla eklenebilir kolayca.

Bootstrap'ın framework olduğunu biliyorum. Bootstrap'da var demek bootstrap'ı alıp komple kullanman lazım demedim. İşine yarayacak olan kısımlarını alır eklersin projene. Bunu da akıl edebilmen lazımdı ama neyse.
Link to comment
Sosyal ağlarda paylaş
khazadum Enthusiast

khazadum

Mesaj tarihi:
  • Konuyu açan
Mesaj tarihi:
ugurz said:

Demek istediğim özetle şuydu hali hazırda yapılmış olanı varken tekerleği yeniden icat ederek vakit kaybetmek neden ? Düşündüm ki Belki spesifik bir gerekçesi vardır bir takım cross-browser mobile uyumsuzlukları vardır mevcut eklentilerin ondan ötürü bu tip bir şey yapılabilir ama öyle bir şey de çıkmadı.


Yeni yeniden icat ettim yahu? Açıkla şunu? Neyine vakit kaybedeyim. Çok büyük büyük bir siten var ve böyle bir reklam yapmayı planlıyorsun. Include et bakalım bootstrap'i sonra içinden çıkabiliyor musun?

ugurz said:

Meseleyi saptırmayalım. Ben sen yaptığın bir şeyi paylaşamazsın demedim. Kaldı ki bu tip şeyler öyle de paylaşılmaz her işin bir adabı vardır. Konu hakkında ufak bir dokümantasyon hazırlanır github'a filan düzgün bir biçimde yüklenir. İnsanların beğenisine sunulur.


Github yokken nasıl paylaşıyordun tutolarını? Adabsız bir şekilde mi? jsfiddle yokken? O zaman yetkili abilere söyleyelim bölümü kapatsınlar, biz githubtan yapalım buraya link atalım. Gerek yok anlatmaya veya yazmaya. Yazdığın şeyin saçmalığını bir kere daha okuduğunda göreceksin. Neyin adabı ya apsdoıpoasıdasopdı

ugurz said:

Aç Kapat fonksiyonu yok bir kere demişsin. Sıfırdan fixed bar hazırlıyorsun da kapat fonksiyonu mu ekleyemiyorsun. İşte ekledim iki dakika sürmedi ->

http://jsfiddle.net/C7LWm/123/show/

Kapat fonksiyonu da nasıl lazımsa benzer mantıkla eklenebilir kolayca.


Elllam o kadar güzel bir fonksiyon yazmışsın ki kapatınca hakketten kapanıyor yani. Bu yazında çok saçma bi tez. Nefes alan her canlının JavaScript bilmesini mi bekliyorsun? Sen hiç ticaret yapmamışsın belli. Adam benden html tasarım alıyor ve bu ne, ne yapıcam, ne işe yarar diyor. Artı benim koyduğum tutoya iyi bak o senin kafanda kurup söyleyemediğin toogle olayı değil :) Reklamın belirli bi kısmını içeri gönderme. Kİ BU DA BOOTSTRAP'TE YOK.

ugurz said:

Bootstrap'ın framework olduğunu biliyorum. Bootstrap'da var demek bootstrap'ı alıp komple kullanman lazım demedim. İşine yarayacak olan kısımlarını alır eklersin projene. Bunu da akıl edebilmen lazımdı ama neyse.


O zaman senin mantığında hiçbir geliştirme olmasın. Bir kişi bişey yapsın herkes alsın onu kullansın. Adamda biraz dikkatli yapsın herşeye uyumlu olsun bunun haricinde kimse hiçbirşey kullanmasın.

Böyle bir mantık mı var abi? Sana yine hatırlatıyorum; "BOOTSTRAP BİR FRAMEWORK'TÜR." Framework'ün ne olduğunu öğren bence. Framework'ü niye kullandığını öğren bence.

Zaten frameworkler ihtiyaçtan oluşturulmuştur. Bak ben ne dedim. Kapat/aç fonksiyonu mu var dedim. JS ile yaptın. Bootstrap'te var mı? Ham halinde? Burada herkesin senin gibi JS bilgisini olmasını bekliyorsan uzay çağında yaşamalısın dostum. Bu dünyada yok öyle bir yer.

yoruldum ya la.
Link to comment
Sosyal ağlarda paylaş
 Paylaş
Konu listesine dön
×
×
  • Yeni Oluştur...