Blog
Anasayfa Javascript Jquery ile Metin Boy...
Jquery ile Metin Boyutu Büyütme ve Küçültme
Aykut Erdoğan Tarafından Yazıldı!
3351 Okunma
Javascript
Merhaba arkadaşlar. Bu makalemizde yukarıdaki görselde de görüldüğü üzere butonlar ile metinlerimizi sayfa yenilenmeden anlık olarak boyutlarını büyültebileceğiz/küçültebileceğiz. Genelde haber sitelerinde kullanılan bir yöntemdir. Öncelikle html ve css kodlarımızı yazacağız. Sonrasında javascript kodlarımıza geçeceğiz.
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
<img src="a+.jpg" alt="Büyült" id="buyuk" />
<img src="a-.jpg" alt="Küçült" id="kucuk" />
</p>
Bu kodlarımızı body etiketleri arasında yazıyoruz. Şimdi css kodumuza geçelim.
<style type="text/css">
p {
width:100%;
font-family: Tahoma;
}
</style>
Bu kodumuzu head etiketleri arasına yazıyoruz. Burada p etiketimizin sayfa genişliğinin tamamını kaplamasını sağladık ve yazı tipimizi belirledik. Şimdi javascript kodlarımıza geçelim.
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function(){
$('img').click(function(){
var parag = $('p');
var yaziboyut = parag.css('fontSize');
var yaziboyutu = parseFloat(yaziboyut, 10);
var yazison = yaziboyut.slice(-2);
if(this.id == 'buyuk') {
yaziboyutu *= 1.2; //yazı boyutunu 1.2 ile çarparak büyütüyor.
}
else if (this.id == 'kucuk'){
yaziboyutu /=1.2; //yazı boyutunu 1.2'ye bölerek küçültüyor.
}
parag.animate({fontSize: yaziboyutu + yazison},600);
});
});
</script>
Son olarak asıl işi yapan kısma geldik. Olmazsa olmazımız olan jquery kütüphanemizi sayfamıza ekledik. Burada html img elemanının tıklama eventine fonksiyonumuzu yazdık. Tıklanılan görselin id'si büyükse yazıyı büyütecektir, küçükse küçültecektir. Javascript kodlarımızı head etiketleri arasına yazıyoruz. Anlaşılmayan bir yer olursa yorum yoluyla sorabilirsiniz. Görüşmek dileğiyle...
yaklaşık 4 yıl önce
jquery, javascript, text zoom, parsefloat, slice
Yorumlar
1 Yorum
 
Nihat Yazdı!
yaklaşık 4 yıl önce
Lazım olabilecek birşey. Teşekkürler.
 
Yorum Yap
Makalelerden Haberdar Ol
Sponsorlu Bağlantılar
Çok Okunanlar
Jquery ile Veritabanında...
 26930 Okunma
Php ve Ajax ile Sayfa Yen...
 13229 Okunma
Php ve Xml ile Dinamik Si...
 9870 Okunma
Javascript ile Saat Yapı...
 8357 Okunma
Pdo ile Mysql'den Ve...
 7225 Okunma
Son Yorumlar
Metin Ersal
Teşekkürler...
Ümit Akdeniz
Çok teşşekür ede...
Ahmet K.
Sözlüğün &cced...
Zekeriya Yavuz
Tesekkurler gayet başarılı ...
Aykut Erdoğan
Mail adresinize gönderild...
TAKİPTE KALIN!
Mesaj Gönder
Tasarım - Kodlama : Aykut Erdoğan
 
Makale Önizleme
Jquery ile Veritabanından Sayfa Yenilenmeden Veri...
Merhaba arkadaşlar. Bu makalemizde veritabanından sayfamıza çektiğimiz kayıtları yeni kayıt eklendiğinde, silindiğinde ve güncellendiğinde sayfa yenilenmeden otomatik olarak web sayfamızda göstereceğiz. Örnek olarak Facebook ve Twitter'ı verebiliriz. Bu işlemi php ve jquery yardımı ile yapacağız. Şimdi kodlarımıza geçelim. index.php<!DOCTY...
yaklaşık 4 yıl önce | Javascript
Devamı
Makale Önizleme
Php ve Ajax ile Sayfa Yenilenmeden Veritabanına K...
Merhabalar, bu makalemizde ajax ile veritabanına kayıt işlemini anlatacağım. Öncelikle html kodlarla başlayacağız. Sonrasında javascript ve php kodlarımıza geçeceğiz. Şimdi index.php sayfası html kodlarımıza geçelim. <html> <head> <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /> <title> Ajax Kay...
yaklaşık 5 yıl önce | Javascript
Devamı
Makale Önizleme
Php ve Xml ile Dinamik Site Haritası Oluşturma
Merhaba arkadaşlar. Bu makalemizde sitemizin sayfalarını arama motorlarına sunan sitemap sayfamızı yapacağız. Alışılmışın aksine bu sayfamızı dinamik olarak yani içerik girildikçe kendi kendini güncelleyecek şekilde yapacağız. Öncelikle mantığını anlatayım. Sadece xml ile bunu yapmamız mümkün olmadığından php'den yardım alacağız...
yaklaşık 5 yıl önce | Php
Devamı
Makale Önizleme
Javascript ile Saat Yapımı
Merhaba arkadaşlar. Bu makalemizde javascript yardımıyla saat yapacağız. Mantığını anlatalım öncelikle. O anki saati, dakikayı ve saniyeyi javascript yardımı ile alıyoruz ve bir nesneye atıyoruz. Bu kadar basit. Şimdi kodlarımıza geçelim. <html> <head> <title>Saat</title> <style type="text/css"> #div { f...
yaklaşık 5 yıl önce | Javascript
Devamı
Makale Önizleme
Pdo ile Mysql'den Veri Çekme ve Listel...
Merhaba arkadaşlar. Bu makalemizde pdo ile mysql veritabanımızdan veri çekip listeleyeceğiz. Tekli veri çekmeyi ve çoklu veri çekmeyi anlatacağım. Öncelikle bağlantı kodlarımızı yazacağız. baglanti.phptry{ $db = new PDO('mysql:host=localhost;dbname=pdokayit','root','root'); $db->exec('SET CHARACTER SET utf8...
yaklaşık 3 yıl önce | Php
Devamı
Makale Önizleme
Css Resim Efektleri
Merhaba arkadaşlar. Bu makalemizde css filtre efektlerinden bahsedeceğim. Aynı zamanda örneklerle göstereceğim. Filtre efektleri photoshop ve benzeri programlarla yapabildiğimiz efektleri bir kaç satır kod ile yapabilmemizi sağlıyor. Üstteki görselde görüldüğü üzere toplamda 9 adet efektimiz bulunmaktadır. Aşağıda yapacağımız &oum...
yaklaşık 2 yıl önce | 1 Yorum
Devamı
Makale Önizleme
Jquery ile Veritabanından Sayfa Yenilenmeden Veri...
Merhaba arkadaşlar. Bu makalemizde veritabanından sayfamıza çektiğimiz kayıtları yeni kayıt eklendiğinde, silindiğinde ve güncellendiğinde sayfa yenilenmeden otomatik olarak web sayfamızda göstereceğiz. Örnek olarak Facebook ve Twitter'ı verebiliriz. Bu işlemi php ve jquery yardımı ile yapacağız. Şimdi kodlarımıza geçelim. index.php<!DOCTY...
yaklaşık 4 yıl önce | 13 Yorum
Devamı
Makale Önizleme
Php Sözlük Uygulaması
Merhaba arkadaşlar. Bu dersimizde tr-ing | ing-tr sözlük yapacağız. Öncelikle mantığını anlatmak istiyorum. Forma girilen kelimeyi ve radio butonlar vasıtasıyla seçilen dili cevir.php sayfamıza gönderiyoruz. Burada öncelikle bağlantı kodlarımızı yazıyoruz ardından POST ile aldığımız değerler ile veritabanında sorgulama yapıyoruz ve girilen ke...
yaklaşık 5 yıl önce | 44 Yorum
Devamı
Makale Önizleme
Php ve Ajax ile Sayfa Yenilenmeden Veritabanına K...
Merhabalar, bu makalemizde ajax ile veritabanına kayıt işlemini anlatacağım. Öncelikle html kodlarla başlayacağız. Sonrasında javascript ve php kodlarımıza geçeceğiz. Şimdi index.php sayfası html kodlarımıza geçelim. <html> <head> <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /> <title> Ajax Kay...
yaklaşık 5 yıl önce | 6 Yorum
Devamı
Makale Önizleme
Php Sözlük Uygulaması
Merhaba arkadaşlar. Bu dersimizde tr-ing | ing-tr sözlük yapacağız. Öncelikle mantığını anlatmak istiyorum. Forma girilen kelimeyi ve radio butonlar vasıtasıyla seçilen dili cevir.php sayfamıza gönderiyoruz. Burada öncelikle bağlantı kodlarımızı yazıyoruz ardından POST ile aldığımız değerler ile veritabanında sorgulama yapıyoruz ve girilen ke...
yaklaşık 5 yıl önce | 44 Yorum
Devamı
KISIM SEÇ
 
8 Kategori
75 Makale
89 Yorum
 
 
7 Albüm
29 Tasarım
 
 
7 Proje
Bu Makaleyi Okudunuz mu?
 
  Php ve Ajax ile Sayfa Yenilenmeden Veritabanına Kayıt Yapma