Categories
User Interface Design & Usability Web Design

Colorful CSS Notification Box

Hôm nay đang lướt mấy website của mình, thấy mấy cái notification box dễ thương nên viết bài này chia sẽ tới các bạn – những web designer quan tâm đến các ô thông báo thành công, báo lỗi…trên website.

Do kinh nghiệm và quan sát nên mình thấy có 4 loại box chính thường xuất hiện trong các website.

Categories
Javascript Web Design Web Programming

Javascript và những điều cần biết

javascript-fundamental-banner

Nếu bạn là 1 Web Developer, thì hẳn các bạn cũng đã từng Code Javascript ít nhất 1 lần. Javascript chính là nhân tố sống còn trong các thiết kế web hiện nay bởi nó giúp cho cái web khô khan của chúng ta trở nên mượt mà và vận hành trơn tru hơn.

Hôm nay mình sẽ chia sẽ tới các bạn một số kinh nghiệm cũng như 1 số lời khuyên khi các bạn viết Javascript. Phạm vi bài này sẽ không phải hướng dẫn các bạn code Javascript mà nó sẽ giúp các bạn có 1 cái nhìn toàn diện hơn về các vấn đề mà 1 Coder cần quan tâm khi làm việc với Javascript.

Các vấn đề mình sẽ đề cập tới là:
1.Tại sao phải là Javascript?
2.Sử dụng Javascript IDE nào?
3.Minified Code là gì?
4.Obfuscated Code là gì?
5.Tại sao phải học thêm jQuery?

Categories
Graphic Design Web Design

Tạo hiệu ứng Lightbox cho Gallery ảnh với prettyPhoto

prettyPhoto-plugin-jquery
Hi mọi người,
Hôm nay mình sẽ giới thiệu một đồ nghề rất hiệu quả cho các bạn thiết kế website – đó là plugin prettyPhoto cho jQuery. Trước tiên, nếu bạn nào chưa biết thì mình cũng giới thiệu lightbox là cái gì trong web.

Kỹ thuật lightbox có lẽ các bạn đã gặp nhiều mà không để ý thôi. Đại khái nó là thế này nè, bạn vào 1 trang thiên về hình ảnh hay showroom, sau khi click vào link của 1 hình, website sẽ bị mờ đi, sau đó sẽ có 1 cái hình được load và hiện ra nổi bật giữa trang web. đó là lightbox trong website (cái khái niệm này mượn trong lĩnh vực nhiếp ảnh). Xem hình dưới đây sẽ hiểu phần nào:
prettyphoto-lightbox

Categories
Javascript Web Design

Tạo box HTML có góc bo tròn với Curvy Corners

Hôm nay mình chia sẽ với các bạn một thư viện khá hiệu quả trong việc thiết kế giao diện cho website trong trường hợp bạn muốn tạo các box có góc bo tròn, nhưng không sử dụng image, đó là sử dụng 1 plugin của jquery, đó là curvy Corner.

Thư viện này có chức năng cũng tương đối hoành tráng, dung lượng đã minify là 27KB, nếu gzip chắc sẽ khoảng 15kB thôi. Còn chức năng cơ bản thì bo tròn các box bạn muốn.

curvycorner

Categories
Javascript

Vấn đề hàm String.replace() của javascript chỉ replace một lần mà thôi.

Tình cờ phát hiện hàm String.replace() của javascript chỉ replace lần xuất hiện đầu tiên mà thôi. Ví dụ:

var myString = 'my blog of my friend here';

alert(myString.replace('my', 'his')); //output : "his blog of my friend here" . Not "his blog of his friend here".

xem ví dụ cũng đã hiểu, phrase “my” chỉ bị thay thế một lần mà thôi, hix hix..điều này đôi khi bạnkhông muốn vì đã replace thì replace cho hết luôn chứ (ví dụ như hàm str_replace() của PHP sẽ thay thế toàn bộ)

– Để giải quyết vấn đề này trước mắt mình thấy có 2 cách, cách hay sử dụng nhất là sử dụng regex pattern thay cho search string, mình sửa lại như sau thì sẽ có kết quả như ý muốn:

alert(myString.replace(/my/g, 'his')); //output : "his blog of his friend here".

Trong nhiều trường hợp mình không dùng cách sử dụng pattern được, thì có một giải pháp khác, đó là add thêm hàm replaceAll vào String object để sau này dùng. Cái hàm này chôm của một kiếm khách nào đó trên giang hồ. Cách này nên sử dụng cẩn thận, vì có thể sẽ bị infinitive loop nếu dùng không cẩn thận.

Prototype của nó như sau:

// Replaces all instances of the given substring.
String.prototype.replaceAll = function(
strTarget, // The substring you want to replace
strSubString // The string you want to replace in.
){
var strText = this;
var intIndexOfMatch = strText.indexOf( strTarget );

// Keep looping while an instance of the target string
// still exists in the string.
while (intIndexOfMatch != -1){
// Relace out the current instance.
strText = strText.replace( strTarget, strSubString )

// Get the index of any next matching substring.
intIndexOfMatch = strText.indexOf( strTarget );
}

// Return the updated string with ALL the target strings
// replaced out with the new substring.
return( strText );
}

Sau khi khai báo prototype này, thì bạn chỉ cần sử dụng như sau

alert(myString.replaceAll('my', 'his')); //output : "his blog of his friend here".

———-

Hy vọng chút ít kinh nghiệm sẽ giúp các bạn trong tương lai.

Categories
Web Programming

jQuery, AJAX và IE7

Hôm nay gặp cái bug thật là đáng ghét bởi vì IE7.
Như các bạn cũng biết mình sử dụng AJAX để load một phần trang web mà thồi (vd như mình dàn trang trong một thẻ div). Đối với một trang web bình thường, mình khai báo một chức năng jquery trong đoạn
$(document).ready(function()
{
...
});

ví dụ như thêm chức năng mouseover/mouseout cho một selector nào đó. Và các chức năng được khai báo sẽ được tự thực hiện đối với các selector(class/id) tìm được trong toàn bộ trang HTML.
Việc này diễn ra bình thường trong FF,IE6. Nhưng hôm nay, vì lý do test nên khi xài IE7 tự nhiên thấy sao không trigger được các chức năng được khai báo đối với các nội dung được load bởi AJAX.

Theo suy đoán, có lẽ IE7 khi sử dụng AJAX để load nội dung vào 1 thẻ (div chẳng hạn), thì nội dung này (DOM) sẽ không được jquery nhận ra các selector, do đó các chức năng của selector trong nội dung AJAX này sẽ không hoạt động.
Mình đã thử mang các hàm khai báo chức năng jquery này ra ngoài đoạn
$(document).ready(function()
{
...
});
mà mang vào load cùng với nội dung của AJAX, và đã thành công, ít ra là thành công thêm với IE7.
Một chút chia sẽ với các bạn.