pillinetwork hesabınızla giriş yapın.

Etiket:

javascript hakkındaki yazılar:

soru:jquery ile div alanının içine linkler yardımı ile html sayfası yüklemek

Yapmak istediÄŸim ÅŸu;

\

sağdaki menü alanındaki linke tıklayınca sol bölümdeki div alanına ilgili html sayfasının çağrılması.Her link bir html sayfasını çağıracak.
Örneğin: Link1-->1.html, Link2-->2.html.....
Aslında bir tek link için yapmıştım ama öteye taşıyamadım.Kodlar şöyle idi;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
$('#metin').load('index.html');
});
});
</script>
</head>
<body>
<a href ="#index.html">tıkla</a>
<br />
<br />
<p id="metin">ben <strong>eski</strong> bir içeriğim</p>
</body>


Bunu istediğim tarzda nasıl yapabilirim.Yardımcı olabilecek arkadaşlara teşekkürler.
Spacer
Spacer
/* Etiketler: , , */
/* ersenbarlas yazdı. 12 Temmuz 2010 15:41. 3 yorum var */

Web önyüzü nasıl olmalı?


\

Web önyüzü(frontend) temel olarak üç öÄŸeden oluÅŸur.


İşaretleme dili
HTML, XHTML, WML gibi işaretleme dilleri. Bunlar sayfanın ana iskeletini oluşturur

Stil dosyaları
CSS. Bunlar ise iskeletin üzerine giydirilen görsel öÄŸeleri belirler.


Dinamik öÄŸeler
JavaScript . JavaScript ise sayfalarda, istemci(client) tarafında dinamik istekler yapmamıza yardımcı olur.


Web önyüz kodlamada yapılan en büyük yanlışlardan birisi de bu üç öÄŸenin birbiri içersinde gereÄŸinden fazla yer almasıdır. Bu üç öÄŸenin etkileÅŸimi kaçınılmaz olsa da, bu etkileÅŸimi en aza indirmek, hem daha güzel/anlaşılır kodlar üretmek, hem de daha hızlı ve kararlı web önyüzleri üretmemizde faydalı olur.

Bu yazıda, nasıl daha standart, anlaşılabilir, güzel, sade web önyüz kodları üretebileceÄŸinizi anlatmaya çalışağım. Bir web önyüzü;

Spacer
Spacer
/* Etiketler: , , , , , */
/* osmanyuksel yazdı. 30 Haziran 2010 11:51. 4 yorum var */

Konami Kodu İle Ziyaretçilerinizi Şaşırtın

Konami Kodu
Konami Kodu

Efsanevi oyun şirketi Konami'nin, oyunlarında kullandığı 'hile' kodu Konami Code , son zamanlarda internet üzerinde tekrar popüler olmaya başladı. Çoğu web sitesi, Konami Kodu ile ziyaretçilerine çeşitli süprizler hazırlıyor. Örneğin, JQUERY'nin sitesine girip Konami Kodunu uygulayın.
Konami Kodu : YUKARI - YUKARI - AŞAĞI - AŞAĞI - SOL - SAĞ - SOL - SAĞ - B - A (Bazı sitelerde en sonda ENTER tuşuna basmak gerekiyor.)

Diğer Konami Kodu içeren sitelere bu adresten ulaşabilir (Siteye girmek için ne yapmanız gerekiyor bilin bakalım :) ) yada bildirgec'te yayınlanmış şu yazıyı inceleyebilirsiniz.

Ben de bu yazımda sizlere Konami Kodu'nu sitenize nasıl ekleyebileceğinizi anlatacağım.

Spacer
Spacer
/* erayalakese yazdı. 13 Nisan 2010 14:50. 2 yorum var */

Ufak bir JSon problemi ve çözümü

Geçenlerde ajax tabanlı bir uygulama üzerinde harıl harıl çalışırken Firebug'ın ReferenceError u ile birhayli sorun yaşadım. Json olarak aldığım data verilerini tabii ki klasik yöntem ile elde edebiliyordum.

Örn: response.name, response.point gibi..

ancak farkettim ki key değeri içerisinde "-, +" gibi karakterler bulunduğunda bu sorunla karşılaşıyorum.

sorunun çözümü basitmiş ama biliyorsunuz ki "sinekte küçük ama mide bulandırır".

1
2
3
4
5
6
7
var data = [
{ "name": "Magic Johnson", "mvp": 8, "asist": 10141, "point": 17707, "all-star": 12},
{ "name": "Michael Jordan", "mvp": 14, "asist": 5633, "point": 32292, "all-star": 14},
{ "name": "Kareem Abdul-Jabbar", "mvp": 8, "asist": 5660, "point": 38387, "all-star": 19}
];
console.debug("All Star" + ":" + data[1].all-star);

Spacer
Spacer
/* Etiketler: , , , , */
/* golduck yazdı. 02 Nisan 2010 11:49. 4 yorum var */

Yepyeni Özellikleriyle jQuery 1.4

JavaScript devi jQuery, yeni versiyonları ve özellikleri ile karşımıza çıkıyor. Ocak ayı içerisinde jQuery 1.4 versiyonunu yayınlayan kütüphane 25 Ocak'ta da jQuery 1.4.1 versiyonunu yayımladı.Buradan indirebilirsiniz.

Bu yazımda jQuery'nin 1.4.1 versiyonunun birkaç özelliğine değineceğim.

Spacer
Spacer
/* sundowatch yazdı. 04 Şubat 2010 17:59. 5 yorum var */

JQuery ile fluid grid oluÅŸturmak

Bir web sayfasına magazin/gazete görünümünde gird oluşturmak JQuery ile çok basit bir şekilde olmaktadır. Aşağıda kullanılan yöntem ve fonksiyonlar çok basit olması nedeniyle bir çok kişi tarafından rahatlıkla uygulanabilir. Bunları adımlayarak yapacak olursak:

1- Basit bir html sayfası oluşturalım:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
<title>Fluid grid</title>
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
</head>
<body>
<div class="box"><p><span>01</span>01 Numaralı kutu...</p></div>
<div class="box alt"><p><span>02</span>02 Numaralı kutu...</p></div>
<div class="box"><p><span>03</span>03 Numaralı kutu...</p></div>
<div class="box alt"><p><span>04</span>04 Numaralı kutu...</p></div>
<div class="box"><p><span>05</span>05 Numaralı kutu...</p></div>
<div class="box alt"><p><span>06</span>06 Numaralı kutu...</p></div>
<div class="box"><p><span>07</span>07 Numaralı kutu...</p></div>
<div class="box alt"><p><span>08</span>08 Numaralı kutu...</p></div>
<div class="box"><p><span>09</span>09 Numaralı kutu...</p></div>
</body>

Spacer
Spacer
/* Etiketler: , , , , , */
/* rhymes yazdı. 04 Ocak 2010 11:31. 5 yorum var */

JQuery ile paket sitelere istemci taraflı çözümler

Merhabalar, uzun bir aradan sonra JQuery'nin kurtarıcı olduğu bir hikaye ile karşınızdayım. Aslında burada çok az kod paylaşacağım ama bu tip bir sorunla karşılaşanlar için iyi bir çözüm olacağına eminim. Hem de kodaman yapısına çok uygun olacak bir paylaşım olduğunu düşünüyorum.

Hikayemiz şöyle : bir paket e-ticaret sitesi kullanıyoruz ve tema yönetim sistemi var ancak sadece istemci taraflı kodlara yani css html vs javascript müdahele edebiliyoruz. hazır bir paket olduğu için sunucu tarafında kod değiştirme gibi gereksinimler tam bir çile oluyor ve paketi satan firmamız ya değişikliklere ek ve biraz da yüksek ücretler, yada bu bir paket sistem o tarz birşey eklemeyiz gibi cevaplar veriyorlar.

Spacer
Spacer
/* vectro yazdı. 28 Aralık 2009 11:33. 2 yorum var */

Javascript - PreLoader Yapalım

Bazen web sayfalarımızda çeşitli miktarlarda resim dosyası kullanabilmekteyiz. Bu resim dosyaları web sitemizin arayüzünde kullandığımız doku dosyaları olabileceği gibi bir fotoğraf galerisinin dosyaları da olabilir.

HTML malesef ön yükleme yapmak için müsait bir dil değil. CSS de ona keza. Zira html ile sayfaya bir resmi bağladınız ve css ile de display özelliğini none yaptığınızda browserlar (en azında firefox opera chrome gibi gelişmiş tarayıcılar) o resim içeriğini sunucudan istemeyecektir. Böylece sayfa yüklenme süresi kısaltılmış olur. Display özelliği açıldığı anda (gerek javascript ile gerekse de css hover olay seçicisiyle) o elemente linklenmiş imaj dosyası derhal sunucudan talep edilecektir.

Spacer
Spacer
/* lazaronnie yazdı. 01 Aralık 2009 11:04. 12 yorum var */

Asp.Net ve Ajax Kullanırken Gözden Kaçmaması Gerekenler

Bu yazımda asp.net ve ajaxın birlikte kullanıldığı projelerde gözden kaçmaması gereken noktalara değineceğim... Eminim bir çoğunuz bunları zaten biliyordur ama ben zamanında arattığımda elle tutulur bir sonuç bulamadığım için bari benden sonrakiler sıkıntı çekmesin niyetiyle elimden geldiğince toparlamaya çalıştım...

Eğer yaptığınız sitede ajax kısmı çalışmıyorsa bunlara dikkat edin:

1.Javascript dosyasının adı ve yolu...
2.Javascript dosyası

1
<script type="text/javascript" language="javascript" src="../jScript/ajax.js">

bu şekilde tanımlanmalıdır. eğer javascript yerine jscript i seçerseniz internet explorer dışındaki tarayıcılarda sorun yaşarsınız.
3.javascript dosyasındaki foknsiyona gönderilen veriyi kontol edin. Siz gitti sanabilirsiniz ama o veri gitmemiş olabilir. örneğin onclick="user(asd);" şeklinde veri göndermek istiyorsunuz en azından hedef fonksiyona bir alert yazıp asd değişkeni istediğiniz gibi gidiyor mu kontrol edin.
4.html taglarını mutlaka kontol edin eğer sayfa çağırıyorsanız ve o sayfada kapanmamış yada yanlış yazılmış tag varsa buda sizin hata almanıza neden olabilir.
5.çağıracağınız sayfanın içeriğinde gibi bir html markup varsa bunu kaldırın. her ne kadar diğer tarayıcılar sorun çıkarmasa da internet explorer buna müsade etmez ve Bilinmeyen Çalışma Zamanı Hatası alırsınız (Unknown Runtime Error).
6.javascript dosyanızdaki tarayıcıya göre oluşturulan nesneleri kontol edin.
1
2
3
4
5
6
7
8
9
10
11
12
13
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
return xmlhttp;

Spacer
Spacer
/* mmacit yazdı. 23 Kasım 2009 15:09. 2 yorum var */

Jquery mi? Prototype mı?

Merhaba ArkadaÅŸlar,
Uzun zamandır kodaman.org üyesiyim ve yazıları sürekli takip etmekteyim. Bir ara bende bişeyler ekliyeyim diye düşündüm fakat iş yoğunluğundan ancak bu güne zaman bulabildim ve kodaman.org daki ilk yazımı yazıyorum.

Öncelikle kendimden kısaca bahsedeyim. Adım Fatih. Web dünyasında sürekli kullandığım teknolojiler ise XHTML, CSS, XML, XSLT, JavaScript, jQuery, Prototype dır. Şuan Silverlight öğrenmek için çaba harcıyorum.

Neyse gelelim konumuza. Öncelikle kısa bir kaç cümle ile nedir bu jQuery ve Prototype diye özetiyeyim. jQuery ve Prototype hepimizin bildiği gibi JavaScript in gücüne güç katmak için ortaya atılmış library ler yani kütüphanelerdir. Kodlarımızı JavaScript e göre kısaltan, JavaScript ile yapmamız hayli vakit alacak işleri(Drag And Drop yada kütüphaneler ile gelen efektler gibi) kolayca halletmemize yarayan olmazsa olmaz kütüphanelerdir.

Spacer
Spacer
/* diddyob yazdı. 10 Kasım 2009 08:45. 15 yorum var */
1 2 3 4 Sonraki

etiket menüsü

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

son yorumlar

arama

pillinetwork