Html5 - CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Html5 - CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

6 Ocak 2015 Salı

CSS3 box-sizing Özelliği

Örnekte iki kutu yanyana getiriliyor :

Örnek için tıkla

Tanım ve kullanım



CSS3 box-sizing özelliği browsera boyutlandırma (width ve height) özelliklerinin ne içerdiğini anlatmak için kullanılırlar.

Height ve width özelliklerinin varsayılan değerleri olan content-box ve border-box içermelidirler.

24 Kasım 2014 Pazartesi

Css : Tooltip yapımı (ok işaretli)

Her ne kadar html elemanların tooltip özellikleri olsa da bazen kendimiz bir tooltip yapmak zorunda kalabiliriz. Bir tooltip nasıl oluşturulur inceleyelim.

16 Kasım 2014 Pazar

Canvas içerisinde resim döndürme

Muhtemelen canvas context drawImage fonksiyonunu biliyorsunuzdur :

context.drawImage(image, x, y);

14 Kasım 2014 Cuma

Drag&Drop,FileApi ve Canvas kullanarak Resize image (resim boyutlandıma)

Normalde resim kaydetmek oldukça basit bir işlem. Bir form içine File input oluşturarak bu işin üstesinden gelinebilir. Fakat bu resim için ön çalışa yapılması gerekirse ne olacak ? Diğer bir deyişle, resmi kaydetmeden önce resize (yeniden boyutlandıra) yapmanız ve dosya türü PNG ve JPG türünde kayıt edilmesi gerekseydi ?  Canvas burada devreye giriyor.

12 Kasım 2014 Çarşamba

FileSystem API'yi keşfetmek

Filesystem API 2014 yılın Nisan ayında bir web uygulaması olarak ilan edildi fakat farklı tarayıcıların teknik özellikleri enine boyuna hesap edilmemişti. Şimdi ise, bu api Chrome tarayıcsına özgü bir yapıda ve ne yazık ki farklı tarayıcılar tarafından geliştirilemiyor veya uygulanamıyor. Ayrıca W3C standarlarına uygun olarak geliştiriliyor.

7 Kasım 2014 Cuma

Uncaught TypeError: Cannot call method 'getContext' of null

HTML5 ile gelen canvas elemanı sayfa ilk yüklendiğinde oluşturulmalı veya oluşturulan canvas fonksiyonu çağırılmalıdır. Şayet js canvas nesnesinden önce çalışırsa canvas oluşturulamayabilir. Mozilla mdc sitesinde yer alan çözüm metodu aşağıdadır :

1 Kasım 2014 Cumartesi

Html5 Canvas Resim Döndürme (Image rotate)

Bu makalede canvas içerisinde bir image nesnesinin nasıl döndürüleceği anlatılacaktır. Anlatım kodlar üzerindedir.

Gereksinim : <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

HTML : 

30 Ekim 2014 Perşembe

HTML 5 Canvas Nedir ?


<canvas> bir web sayfası üzerinde grafik çizmek için kullanılan bir araç veya elemandır.



Canvas Nedir ?


Html5 <canvas> eleamanı script vasıtasıyla (genellikle JavaScript) grafik çizmek için kullanılır.

<canvas> sadece grafik özelliklerini kapsar.  Aslında çizim yapmak için script kullanmanız gerekiyor.

Canvas ile çizim  yapmak için birkaç metod bulunuyor : boxes (kutular), circles (daireler), text (yazı) ve ek olarak image (resim).

Örneklerle anlamaya çalışalım :

Örnek  1 (dikdörtgen çizmek): 
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>



14 Ekim 2014 Salı

Html form button elemanını code-behind sayfasında çağırmak

Html form button elemanını code behind sayfasında çağırmak



Aklınıza <asp:button> elemanı varken bunu neden yapayım diye bir soru gelebilir. Ancak durum hiçte göründüğü gibi değil bir örnek vermek gerekirse. Diyelim ki bir formunuz var ve bu formdaki alanların kontrolünü veya doğrulamasını Html5 validation özelliklerini kullanarak yaptınız. Fakat sayfanıza iki veya daha fazla butonlarınız var. Birinci buton formu post etsede ikinci buton farklı bir işlev yapıyor olacak.  İkinci butona tıkladığınızda sizden validation kontrollerini doğrulamanız istenecek fakat siz bu butonlar başka bir olay yapıyordunuz. İlk çözüm butona formnovalidation eklemek olacaktır. Bu sayede bu buton bağımsız olarak çağrılmış olacak. Sayfayı chrome ve firefox'ta açtınız. Herşey yolunda fakat bir de IE'de açın. O da ne ? Çalışmıyor mu ? Merak etmeyin bununda çözümü var. İsterseniz çözümü bu http://msdn.microsoft.com/en-us/library/ie/hh772935(v=vs.85).aspx bağlatıdan detaylı olarak inceleyebilirsiniz. IE 'de <asp:button> elamanına verilen bu özellik desteklenmiyor. Html form elemanı olan bir elemana verildiğinde ise tıkır tıkır çalışıyor. Önce html butonumuza formnovalidate özeliği atıyoruz daha sonra onclick="__doPostBack('btnSubmit', 'Giris');" özelliğini atıyoruzki post olduğunda code behinde sayfasından çağrılabilsin.

Code behind sayfamızda reques form diyerek butonumuzu çağırdıktan sonra çalışmasını istediğimiz metod veya fonksiyonu çağırıyoruz.

Hmtl :

<input id="Submit1" type="submit" value="submit" formnovalidate name="save" runat="server" onclick="__doPostBack('btnSubmit', 'Giris');"/>

Code behind :

protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
if (Convert.ToString(Request.Form["__EVENTARGUMENT"]) == "Giris")
{
Face_log();//submit action here
}
}
}

public void Face_log()
{
Response.Redirect("defaul.aspx");
}

Kolay gelsin

13 Ekim 2014 Pazartesi

Sorular Cevaplar (1)

Sorular Cevaplar (1)



ResolveUrl - ResolveClientUrl farkı nedir ?

ResolveUrl root'a bağlı url yaratır. ResolveClientUrl ise bulunulan sayfaya bağlı url yaratır.

@font-face ie'de neden çalışmaz ?

Projenizde yer alan fontun uzantısı .otf değilse ie'de çalışmayacaktır.

Html5 novalidate ie'de çalışmıyor

W3scholls yazdığına göre novalidate ie 10 tarafından destekleniyormuş. IE 11 yani son ie'nin son versiyonunda bile hala desteklenmiyor. Aşağıdaki kullanım işinizi görecektir.

<input type="submit" formnovalidate name="save"  />


Bu http://msdn.microsoft.com/en-us/library/ie/hh772935(v=vs.85).aspx bağlantıdan detaylı bilgi edinebilirsiniz.

Ayrıca konuyla ilgili http://abdulhamiterdogan.wordpress.com/2014/10/14/html-form-button-elemanini-code-behind-sayfasinda-cagirmak/ makalede işinize yarayabilir.

Css ile input button value text 'i nasıl gizlenir ?

text-indent:-9999px;

IE Facebook login olduktan sonra boş pop up döndürüyor.

IE -> Internet Options -> Security tab -> Local intranet -> (check) Enable protected mode

InterpolationMode ne demek ?

Bir resim döndürüleceği veya ölçeklendirileceği zaman kullanılan algoritmayı belirleyen numarlandırmadır.

HighQualityBicubic ne demek ?

Bu mod resimleri yüksek kalitede dönüştürür.

Javascript ile önceki sayfaya nasıl dönerim ? 

<script>
     function goBack() {
      window.history.back()
}
</script>

Javascript request url değeri nasıl alınır ? 

var data = '<%=this.Request.QueryString["deger"]%>';

Master Page'de yer alan User Control nasıl gizlenir ? 

 ((UserControl)this.Master.FindControl("AutoComplete1")).Visible = false;

ASP.Net'de belirli bir session nasıl kapatılır ?

Session.Remove("SessionDegeri") yada Session["SessionDegeri"] = null;

fckEditor'de araç çubuğunu kapatıp açan butonu nasıl kaldırabilirim ?

fckconfig.js > FCKConfig.ToolbarCanCollapse = false ;

fckEditor kopyalama ve yapıştırma (Copy-Paste) nasıl engellenir ? 

fckconfig.js :


FCKConfig.Keystrokes = [

  [ CTRL + 67 /C/, false ],

  [CTRL + 86 /V/, false],

] ;

Bir javascript içerisindeki object sayısı nasıl hesaplanır ?

Object.keys(myObject).length



Javascript içerisinde bir değişkenin tanımlı olup olmadığı (defined/undefined) nasıl kontrol edilir.



if(typeof degisken === "defined") / if(typeof degisken === "undefined")

Textbox filtreleme (mask) nasıl yapılır ?

<input type="text" name="field-name" data-mask="00/00/0000" />


data-mask içerisindeki karakter ve sayıları değiştirerek size lazım olan türe göre maskeleyebilirsiniz.

Javascript bind ne yapar ?

bind() bir yada daha fazla olay tutucuyu (event handler) seçilen elemana bağlayarak, olay (event) meydana geldiğinde fonksiyonun çalışmasını sağlar.

JQuery 1.7 versiyondan sonra on() metodu bu metodun yerine tercih edilmiştir.

ASP.Net Html5 girilen değerleri sınırlama

Bazen kullanıcıdan textboxa sınırlı değer girmesini isteriz. Bu durumu karmaşık yollara sapmadan ve hızlı bir şekilde çözmek için Html5 özelliklerinden faydalanabiliriz. Bunun için aslında toolbox'ta yer alan Validation kontrollerinden yararlanabilirdik fakat bu kontroller server-Side çalıştığı için efektif değiller ve kod kalabalığına neden oluyorlar. En iyisi Html5'in bu özelliğinden faydalanmak olacaktır. Html5 ile gelen tüm özellikler her tarayıcı tarafından desteklenmediği için yazdığımız kodları silip baştan yapmamak için dikkatli olmak lazım ama bu özellik kullanılabilir.

Şifreyi 6 karakter ile sınırlama
<asp:TextBox ID="txbSifre" runat="server"  TextMode="Password" Width="200px"
title="Şifre en az 6 karakterli olmalıdır" pattern="^.{6}$" > </asp:TextBox>

Şifreyi 6-10 arası karakter ile sınırlama

<asp:TextBox ID="txbSifre" runat="server"  TextMode="Password" Width="200px"
title="Şifre en az 6 karakterli olmalıdır" pattern="^.{6,10}$" > </asp:TextBox>