Tự động resize ảnh trong nội dung bài viết


Khi bạn đăng 1 ảnh lên blog hoặc diễn đàn bạn sẽ gặp ngay phải vấn đề đó là ảnh của bạn quá to so với
kích cỡ nội dung của blog diễn đàn đó dẫn đến ảnh sẽ bị “chửa” ra ngoài nhìn rất mất thẩm mĩ hoặc tệ hơn
là một phần của bức ảnh sẽ “bị mất” do phần tử cha được gán overflow:hidden

Để giải quyết vấn đề này nếu bạn là Webmaster bạn cần phải sử lý:

1. Đưa ảnh về đúng kích cỡ
2. Giữ lại Aspect Ratio (tỷ lệ) của bức ảnh đó để ảnh không bị méo

bạn có thể code css như sau:

Tại thẻ div Container (chứa ảnh) viết cho thẻ img

divContainer img {

    max-width: 550px;
    height: auto !important;
    width: expression(this.width > 550 ? 550: true);
}

max-width: 550px chiều rộng tối đa của ảnh là 550px
height: auto tự động co giãn chiều cao để phù hợp với tỷ lệ bức ảnh

 

Hoặc để đơn giản như  sau:

 

#divContainer img {
max-width: 95%;

}

Để ở 95% vì không muốn hình ảnh đầy form, gây xấu, các bạn có thể để 100% tùy vào nhu cầu

Như vậy khi đưa lên bất kỳ ảnh nào trong thẻ div Container sẽ bị resize về cỡ 550px tuy nhiên code trên mới
chỉ chạy được trên: Firefox 3.0 trở lên, Opera 10, IE 7 trở lên, Google Chrome, Safari 4

IE 6 không hỗ trợ.

Advertisements

Xóa khoảng trắng của chuỗi với JQuery


Khi người dùng nhập dữ liệu vào textbox có thể bị thừa ra các khoảng trống ở đầu hoặc cuối textbox.

JQuery cung cấp hàm $.trim() để xóa các khoảng thừa ở đầu hoặc cuối chuỗi người dùng nhập vào textbox.

Ở đây bạn có thể bắt sự kiện OnBlur của textbox sau đó dùng hàm trim() của JQuery để xóa khoảng trống:

 

$(function () {
           $('input.textbox').blur(function () {                   
               $(this).val(
                   $.trim($(this).val())
               );
           });
       });
với mỗi thẻ input có class là textbox bạn sẽ gán sự kiện blur vào để với mỗi textbox đó bạn sẽ lấy được giá trị người dùng nhập hiện tại lên và dùng hàm trim() để xóa khoảng trắng.

tôi có textbox như sau:

<input id="Text1" type="text" class="textbox" /><br /><br />
<input id="Text2" type="text" class="textbox" />

Dùng JQuery để gọi ASP.NET Handler (ASHX)


ASP.NET Handler được dùng để trả về cho client một nội dung động từ QueryString (bạn có thể trả về dạng Image,Xml,JSON hoặc file văn bản …)

Tại sao phải sử dụng file ASHX mà không phải là ASPX?

– Nhanh hơn: khi bạn sử dụng file Ashx để trả dữ liệu về cho client sẽ nhanh hơn từ 5–>10%
khi bạn sử dụng file aspx vì file ashx chỉ sử lý 1 sự kiện duy nhất đó là ProcessRequest.

Viết Code JQuery để post dữ liệu lên ASHX

 

<scriptlanguage="javascript"type="text/javascript"src="Scripts/jquery-1.4.1.js"></script>
<scriptlanguage="javascript"type="text/javascript">
    $(function () {
        $("#btnSay").click(function () {
            $.post("Hello.ashx", { txtName: $("#txtName").val() }, function (result) {
                alert(result);
            });
        });
    });
</script>
Html Code
<input type="text" name="txtName" id="txtName" />
<input type="button" name="btnSay" id="btnSay" value="Say" />
Viết Code trong file ASHX để trả dữ liệu về cho client
public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    context.Response.Write("Hello " + context.Request["txtName"]);
}
 click vào nút btnSay để xem giá trị ở Textbox

jQuery – hàm xử lý style


Bài viết này nói về một số hàm dùng để can thiệp vào style của một element.
css: Dùng để lấy giá trị của một property của element trên website hoặc thiết lập giá trị cho css cho property.
.css (css property name): trả về giá trị của một property.
.css (css property, value): thiết lập giá trị cho một css property của element.
.css ( {list of properties} ): dùng để thiết lập một nhóm các thuộc tính css.
Read more of this post

Calculate Sum of ASP.NET CheckBox Values using jQuery


Trong bài này, chúng ta sẽ thấy làm thế nào để thêm nhiều giá trị của ASP.NET jQuery sử dụng Checkboxes . Ví dụ này có thể hữu ích trong khi tính toán các giá trị trong Checkbox
Read more of this post

Chuyển đổi control DropDownList trong ASP.NET thành control MultiSelect ListBox dùng jQuery


Trong bài viết này, mình sẽ hướng dẫn các bạn chuyển đổi từ một control DropDownList trong ASP.NET thành một ListBox có thể chọn lựa nhiều Items. Lưu ý trong bài viết cần phải có sự kết hợp của Jquery và tương thích với các trình duyệt IE7, IE8, Firefox 3, Chrome 2 và Safari 4.
Read more of this post

Tạo ứng dụng web Ajax với JQuery


Gói RAR gồm các video hướng dẫn bạn chi tiết cách tạo ứng dụng web Ajax với JQuery
Read more of this post