Website Chia sẻ Kiến thức Công Nghệ & Kết nối Cộng đồng Online - DOTNET GROUP

Hướng dẫn cách hiển thị hình ảnh cần chọn khi share link trên mạng xã hội

Đôi khi bạn muốn chia sẻ link trên mạng xã hội nhưng ảnh gợi ý lại không như mong muốn, do đó bạn sẽ phải suy nghĩ cách làm thế nào để ra được anh như mong muốn

Hướng dẫn truy cập webcam và chụp hình bằng Javascript

Dưới đây là cách sử dụng webcam-easy.js để xây dựng ứng dụng web có thể bật webcam và chụp hình ảnh nhanh.

Làm thế nào Hover với Bootstrap Dropdown

Trường hợp khi xây dựng chức năng menu với Bootstrap, nhưng lại gặp lỗi chỉ click được, còn hover thì không. Hướng dẫn dưới này sẽ giúp bạn Hover với Bootstrap Dropdown

Tìm hiểu về cách hoạt động của Bootstrap Grid 4

Bootstrap Grid được sử dụng để bố trí giao diện một cách đặc thù, đặc biệt sử dụng cho Responsive Layouts. Hiểu cách thức hoạt động sẽ giúp hiểu thêm về Bootstrap. Lưới được tạo thành từ nhóm Rows & Columns bên trong 1 hoặc nhiều Containers.

Hướng dẫn xây dựng đồng hồ bấm giờ bằng JavaScript

Bài này sẽ hướng dẫn các bạn code làm Đồng hồ bấm giờ bằng Javascript

Hướng dẫn sử dụng CSS Flexbox - Phần 2

Trong CSS, từ trước tới nay nếu chúng ta muốn dàn layout của trang thì sẽ sử dụng các thuộc tính float và kỹ thuật clear float để chia cột website như ý muốn. Hoặc muốn thuận tiện hơn thì sử dụng các CSS Grid Framework để tiết kiệm thời gian.

Hướng dẫn sử dụng CSS Flexbox - Phần 1

Cài đặt CLI cho môi trường vue chuyên nghiệp hơn

Vue.js cung cấp một CLI giúp nhanh chóng khởi tạo nền tảng (scaffolding) cho các ứng dụng một trang. Vue-CLI chuẩn bị sẵn các cài đặt phong phú cho một quy trình front-end hiện đại.

Cài đặt Vue thông quan NPM

Chúng tôi khuyên bạn nên sử dụng NPM khi muốn xây dựng một ứng dụng lớn với Vue. NPM hoạt động rất tốt với các module bundler (các công cụ đóng gói module) như Webpack hoặc Browserify.

Dùng cặp thẻ script trực tiếp để sử dụng thư viện Vue.js

Chỉ cần tải file thư viện về rồi sử dụng nó trong thẻ script. Vue sẽ được đăng ký thành một biến toàn cục.

Cài đặt Vue Devtools

Chúng tôi khuyên bạn nên cài add-on Vue Devtools vào trình duyệt. Add-on này giúp bạn kiểm tra và debug (kiểm lỗi) ứng dụng Vue với giao diện thân thiện.

Phần 11 CSS3 - Sử dụng Sass

Mặc dù Bootstrap được xây dựng dựa trên Less, nhưng nó cũng hỗ trợ Sass. Chúng tôi duy trì nó trong một kho Github riêng biệt và quản lý các bản cập nhật bằng mã biến đổi (conversion script).

Phần 10 CSS3 - Sử dụng Less

CSS của Bootstrap được xây dựng dựa trên Less, một bộ tiền xử lý với các chức năng được thêm vào như biến số, mixins và các chức năng dành cho việc dịch CSS. Việc sử dụng một số lượng lớn các biến và mixins trong cả framework sẽ giúp chúng ta sử dụng các tập tin Less thay vì các tập tin CSS đã được dịch sẵn.

Phần 9 CSS3 - Các tiện ích responsive

Đối với nhu cầu phát triển các ứng dụng thân thiện với thiết bị di động, chúng tôi sử dụng những class tiện ích này để ẩn và hiện nội dung trên các thiết bị khác nhau thông qua media query. Ngoài ra, các class tiện ích dành cho việc đóng/mở nội dung để in ra cũng được thêm vào.

Phần 8 CSS3 - Hình ảnh

Hình ảnh trong Bootstrap 3 có thể hiển thị tương thích với các thiết bị di động bằng cách sử dụng class .img-responsive class. Class này sẽ thiết lập max-width: 100%; và height: auto; lên ảnh để chúng có thể co giãn theo tỷ lệ tương đối với phần tử cha của chúng.

Phần 7 CSS3 - Nút

Sử dụng bất cứ class nào sẵn có của nút để style cho nút.

Phần 6 CSS3 - Forms

Các thành phần của form (form-control) tự động nhận một số style chung.

Phần 5 CSS3 - Bảng

Đối với các style đơn giản —chỉ cần các dòng kẻ phân chia giữa các dòng—bạn chỉ cần thêm class cơ sở .table vào bất kỳ thẻ mà bạn muốn sử dụng. Điều này dường như là thừa thãi, tuy nhiên để có thể sử dụng rộng rãi bảng cho các plugin khác như calendar và date pickers, chúng tôi đã lựa chọn để tách biệt với các style tùy biến của bảng.

Phần 4 CSS3 - Code

Khi bạn muốn sử dụng những đoạn mã gợi ý trên cùng 1 dòng, hãy đóng gói nó bằng thẻ



Phần 3 CSS3 - Typography
Tất cả các thẻ tiêu đề của HTML


Phần 2 CSS3 - Hệ thống lưới của BootStrap
Bootstrap chứa một hệ thống lưới responsive, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm các class được định nghĩa trước để thuận tiện cho việc xây dựng bố cục, cùng với đó một bộ các mixin để tạo ra nhiều bố cục theo ngữ nghĩa..


Phần 1 CSS3 - Tổng quan của CSS
Nắm được những phần chính trong kết cấu của Bootstrap, bao gồm cả cách tiếp cận của chúng tôi tới việc phát triển web tốt hơn, nhanh hơn và mạnh hơn.


Hướng dẫn tạo video background cho website
Đây là thời đại mà mọi thứ được support tận răng, nhà nhà sài plugin, người người sử dụng library. Tiện dụng, nhanh gọn nhưng … thừa thãi là những gì chúng ta có thể nói về các loại mì ăn sẵn thế này. Chúng ta có thể dễ dàng tìm ra hàng tá plugin phù hợp có thể giúp giải quyết vấn đề trên.


TypeScript là gì? TypeScript và Javascript
Nếu bạn đã từng muốn học Angular2 thì người ta sẽ khuyên bạn là nên học TypeScript trước, điều này hoàn toàn hợp lý bởi Angular2 cho phép bạn nhiều sự lựa chọn thư viện để phát triển, bạn có thể chọn Javascipt thuần hoặc chọn TypeScript đều được.


Các lỗi Javascript cần khắc phục
Chắc hẳn ai cũng biết về javascript. Và dưới đây là top 10 lỗi javascript thường gặp được rollbar thu thập với hơn 1000 project.


Thay đổi đường dẫn đến Ảnh dùng Jquery
Dùng Jquery để thay đổi thuộc tính src trong thẻ Img thành src khác


Đăng nhập Website thông qua Facebook SDK
Đăng nhập thông qua Facebook là cách dễ dàng để tích hợp đăng nhập hệ thống Website. Đăng nhập facebook cho phép người dùng có thể đăng nhập vào ứng dụng web với tài khoản người dùng facebook đã đăng ký trên website.


Căn giữa phần tử trong CSS
Có nhiều định dạng để căn giữa các phần tử trong thẻ, một vài cách thích hợp để làm bên dưới


Tạo bộ công cụ hỗ trợ trực tuyến đẹp mắt
Để đáp ứng nhu cầu tương tác giữa người dùng với website của bạn. Một cách để thể hiện sự quan tâm của bạn đối với khách hàng chính là có thể trả lời những vướng mắc thông qua hình thức hỗ trợ trực tuyến.


Khắc phục lỗi xác minh các trường dữ liệu trong HTML5 với các button độc lập
Giả sử: Bạn có 1 Textbox và nhiều Button xử lý khác nhau như button Add và button Cancel. Thì làm thế nào để khi nhấn button Add thì xử lý việc Add và kiểm tra các trường dữ liệu nhập, còn button Cancel thì xử lý việc Cancel


Cách định dạng tiền tệ trong Jquery
Làm cách nào chỉ để nhập số chứ không được nhập chữ và nếu nhập số thì phải hiển thị cho được cái đơn vị tiền tệ bên cạnh, cũng như dấu phân cách đơn vị.


Hướng dẫn làm menu cố định, di chuyển theo thanh trượt
Bài viết này sẽ hướng dẫn cách làm thế nào để cố định vị trí di chuyển.


Hướng dẫn sử dụng map và area trong HTML Responsive
Trường hợp các bạn muốn làm một map, với nhiều địa điểm trên bản đồ, sau khi thực hiện được, vướng mắc gặp phải là co giãn trên nhiều thiết bị di động không được. Tọa độ bị sai lệch đi rõ rệt.


Điều hướng trang (Redirect) trong JavaScript
Bạn có thể gặp tình huống khi bạn click vào một URL để tới trang X nhưng bạn được điều hướng tới trang Y. Nó xảy ra là do Page Redirection – Điều hướng lại trang. Khái niệm này khác với: JavaScript – Refresh trang


Đo kích thước màn hình để tự động chuyển trang bằng javascript
Ở đây tôi giới thiệu một mẹo nhỏ dùng javascript đo kích thước màn hình thiết bị, tùy kích thước màn hình thì nó sẽ tự động chuyển trang. Hiện tượng này tương tự như khi truy cập dantri.vn trên di động.


Thay đổi hình ảnh kích thước khác nhau của cửa sổ
Thay vì sử dụng background-image bạn có thể sử dụng img trực tiếp và hình ảnh hiển thị cả chiều rộng của khung nhìn bằng cách sử dụng max-width: 100%; thì sẽ không áp dụng được bất kỳ padding hoặc margin đến div container vì chúng sẽ làm tăng tổng chiều rộng của khung. Sử dụng quy tắc này, bạn có thể có một hình ảnh rộng bằng chiều rộng của trình duyệt và chiều cao cũng sẽ thay đổi theo tỉ lệ.


Hướng dẫn xây dựng hàm Slide trong Jquery
Bài này hướng dẫn làm hiểu ứng chuyển động lên xuống bằng click chuột thông qua Jquery


Tùy chọn nhúng code Youtube vào Website
Dưới đây là một số vấn đề gặp phải khi nhúng video YouTube lên trang web


Tạo Captcha sử dụng JQuery
Captcha giúp tiết kiệm rác bằng cách xuất chuỗi ngẫu nhiên tạo ra các chữ cái hoặc số mà bạn phải gõ vào hộp văn bản để kiểm tra và nhận dạng.


Chuyển động hình ảnh liên tục bằng JavaScript
Trong ví dụ này, tôi sẽ chỉ cho bạn cách để làm động phần tử và làm cho nó chuyển động lên xuống vô hạn. Với sự giúp đỡ của jQuery.


Hướng dẫn thiết lập Website hiển thị Responsive
Trong lúc mình có gắn cái khung nhận ý tưởng viết bài theo yêu cầu có độc giả, thì trong đó có đến 7% các yêu cầu viết bài liên quan đến việc cho giao diện website hiển thị theo dạng Responsive.


Tự động tìm và chọn tệp tin CSS phù hợp với kích thước màn hình
Chào các bạn, nếu các bạn đang là một lập trình viên thiết kế Website ắt hẳn các bạn đều muốn Website của mình có thể hiển thị tốt trên mọi kích thước màn hình đúng không nào?


Hướng dẫn làm thẻ neo mũi tên lên xuống
Nhìn hình để thực hiện


Hướng dẫn làm menu ngang có mũi tên sau khi chọn tab tương ứng
Xem hình để biết rõ hơn


Hướng dẫn tạo thẻ neo cho trang web
Đây là chức năng giúp bạn muốn đến vị trí nào trong trang hiện tại.


Một số Slide hình ảnh tin tức tuyệt vời dành cho Web
Tổng cộng có 6 Demo, tự mình lựa chọn Demo thích hợp


Hướng dẫn cách xoá bỏ thuộc tính tự động xuống dòng ở h1, h2
Như tiêu đề, khi chèn thẻ h1,h2 vào post, mặc định nó sẽ xuống dòng. Vậy làm cách nào để nó không tự động xuống dòng nữa?


Tạo hiệu ứng đẹp mắt khi scroll với WOW.js
Sử dụng một jQuery có tên là WOW để làm các chuyển động đó cho các đối tượng trên web.


Hướng dẫn làm chữ, ảnh chuyển động mượt mà, nhẹ nhàng
Bài này giúp sử dụng thuần thục JS giúp chuyển động chữ hoặc ảnh giống như marquee


Tự động cuộn nội dung với JS
Mục đích để cuộn nội dung cần hiển thị, chạy theo đoạn script cho sẵn


Hướng dẫn làm Slide với style CSS3
Bài này hướng dẫn cách sử dụng style CSS3 để làm Slide trình chiếu ảnh hay bài viết


Hiệu ứng zoom ảnh với CSS3
Trong bài viết này tôi sẽ thảo luận ví dụ về hiệu ứng zoom ảnh sử dụng thuộc tính transform và transition của CSS3. Zoom có nghĩa là làm cho kích thước của phần tử lớn hơn hoặc nhỏ hơn so với kích thước hiện tại của nó.


Hiển thị tất cả cookie sử dụng Javascript
Cách đơn giản để show thông tin cookie trên trình duyệt sử dụng đoạn mã Javascript


Responsive Navigation Menu sử dụng Twitter Bootstrap 3.0
Trong các phiên bản tiếp theo của Bootstrap, có rất ít thay đổi trong các lớp Menu điều hướng css.


[HTML5]Web Form 2.0
Một số kiểu input, output trong HTML5


[HTML5]Sự kiện
Khi người dùng truy cập trang web, họ làm những việc như nhấp chuột trên văn bản, hình ảnh và các liên kết nhất định, di chuột qua chẳng hạn,... Đây là những ví dụ về việc JavaScript gọi sự kiện.


[HTML5]Thuộc tính
Như đã giải thích trong phần trước, các phần tử có thể chứa các thuộc tính được sử dụng để thiết lập các thuộc tính khác nhau của phần tử.


[HTML5]Cú pháp
Ngôn ngữ HTML 5 có thể "tùy chỉnh" cú pháp HTML tương thích với HTML 4 và các văn bản XHTML1 trên web, nhưng không tương thích với các tính năng SGML bí truyền của HTML 4.


[HTML5]Tổng quan
HTML5 là phiên bản lớn tiếp theo của HTML chuẩn thay thế HTML 4.01, XHTML 1.0, và XHTML 1.1. HTML5 là tiêu chuẩn cho cấu trúc và trình bày nội dung trên World Wide Web


jQuery Selector Tester và Cheat Sheet
Chúng giúp thiết kế biểu thức thông thường và bộ chọn XPath gần như đầy đủ. Có khả năng dán/tải văn bản và sau đó tương tác tìm kiếm tốt hơn nhiều theo vòng đời code/compile/run/test. Nó nhanh hơn và cảm giác tốt hơn nhiều khi thực hiện các expression.


Làm thế nào để thiết lập bộ đếm thời gian trong javascript?
Làm thế nào để thiết lập bộ đếm thời gian trong javascript? Làm thế nào để gọi hàm javascript liên tục?


Hiệu ứng giáng sinh đẹp cho website (tuyết rơi + cây thông)
Mùa giáng sinh lại sắp đến,cùng nhau thay đổi giao diện chào đón NOEL.


7 jQuery Code Snippets mà lập trình web phải có
jQuery đơn giản hóa trong việc phát triển web và đã trở thành bắt buộc trong thư viện Javascript có sẵn. Có rất nhiều đoạn jQuery hữu ích có sẵn nhưng ở đây trong bài viết này tôi sẽ chia sẻ 7 đoạn mã cơ bản và sử dụng rộng rãi mà mỗi nhà phát triển web phải có.


Hiển thị và ẩn ảnh mỗi lần di chuột ngang qua
Tôi có một hình ảnh động, tôi muốn hiển thị và ẩn nó mỗi khi Tôi di chuyển chuột ở các vị trí khác nhau.


jQuery Corner plugin - Nhiều kiểu Bo trò khác nhau
Corner plugin giúp bo tròn các thẻ HTML mà không cần dùng đến ảnh background. Plugin cung cấp cho bạn rất nhiều lựa chọn về bo góc.


jCoverflip - jQuery CoverFlow Plugin
jCoverflip là một jQuery plugin giúp chúng ta tạo ra các coverflow -một giao diện có thể hiển thị hình ảnh hoặc bất kì nội dung nào.


Tạo Caption cho hình ảnh sử dụng jQuery Drop Captions Plugin
jQuery Drop Captions - plugin của jQuery giúp thể hiện caption cho ảnh ấn tượng hơn với hiệu ứng Animation.


Hướng dẫn làm Menu Ngang ẩn hiện và lên xuống được
Khi người dùng kéo xuống xem nội dung, menu tự ẩn để tăng không gian cho người dùng đang hướng tới nội dung
khi người dùng kéo lên, nhiều khả năng là muốn sang trang khác thì menu hiện ra phục vụ người dùng.


Zoom ảnh với hiệu ứng lens
Nếu bạn đang tìm mã javascript để làm hiệu ứng "zoom ảnh" thì imageLens là plugin bạn cần. Plugin cho phép bạn tùy biến kích thước của lens, màu sắc viền lens, chọn một ảnh khác để zoom (không cần load ảnh gốc ngay từ đầu).


Hiển thị ảnh nhỏ trước khi upload hình với jQuery
Với ajaxupload plugin chúng ta có thể thay đổi cách upload ảnh thông thường. Vẫn hai thao tác đơng giản: chọn một file hình và click upload nhưng với ajaxupload bạn có thể dễ dàng xem hình trước khi quyết định upload.


Tạo chỉ dẫn cho trang Web với Guiders.js
Chỉ dẫn, giới thiệu các tính năng quan trọng giúp người dùng hiểu chức năng, cách sử dụng website/application của bạn là việc cần thiết và nên làm. Nhưng trước khi có Guiders.js thì đây là một việc khó khăn.


Hướng dẫn làm Slideshow với Cycle2
Nếu đã từng tìm hiểu về jQuery slideshow plugin, hẳn bạn đã biết jQuery Cycle, một plugin rất phổ biến & lâu đời về slideshow. Mới đây plugin đã được nâng cấp lên phiên bản mới: Cycle2.


Hướng dẫn Cuộn nội dung với Sly
Hẳn bạn đã biết đến dạng slide carousel với plugin rất nổi tiếng carouFredSel. Với Sly bạn còn có nhiều lựa chọn hơn nữa: cuộn ngang, dọc, cuộn nội dung vô tận (ví dụ như khi bạn xem feed ở facebook).


Cloud Zoom: jQuery Plugin giúp phóng to hình ảnh với nhiều tính năng
Cloud Zoom một plugin jQuery tương đối nhẹ, độ tùy chỉnh cao giúp bạn dễ dàng thêm các hình ảnh có thể được phóng to vào trong trang web. Một số tính năng Cloud Zoom hỗ trợ như thêm màu, phóng to ngay trong ảnh, làm mềm mại ảnh.


Chuyển về đầu trang web với jQuery
Xây dựng một website tiện dụng và dễ dùng là việc không đơn giản, bạn phải suy nghĩ và làm rất nhiều việc. Trong đó một phần cần thiết là giúp người dùng dễ dàng trở về đầu trang (với website có nội dung dài). Với plugin autoScroll, bạn sẽ có thể tạo nhanh chức năng này với hiệu ứng đẹp mắt.


Độ lớn thực sự của Box
Ở bài viết về Box Model trong CSS, mình đã giới thiệu với các bạn về các thành phần của Box Model, nhưng đó chỉ là những khái niệm cơ bản. Bài viết này chúng ta sẽ cùng tìm hiểu về độ lớn thực sực sự của Box (ta có thể gọi là các tính toán trong Box model).


Margin và Padding trong CSS
Trong bài Box Model trong CSS mình cũng có giới thiệu qua về Margin và Padding, bài viết này chúng ta sẽ tìm hiểu kỹ hơn và cách viết tắt đối với margin và padding.


Box model trong CSS
Box model (mô hình hộp)  là cách mà CSS định dạng khối không gian bao quanh một thành phần. Trong HTML tất cả các thành phần đều tồn tại một hộp bao quanh nó.


Class và ID trong CSS
Như chúng ta đã biết mỗi lệnh trong CSS sẽ định dạng cho một hoặc nhiều thành phần HTML nào đó trong trang web (các thẻ trong HTML). Nhưng có khi trong thiết kế chúng ta mong muốn một số thành phần nào đó sẽ có những định dạng khác như khác về màu sắc, đường viên, size chữ. . .


CSS Attribute selectors
Attribute selectors là cách chọn các thành phần trong tài liệu HTML dựa vào thuộc tính của một hay nhiều thẻ HTML nào đó, với Attribute selectors chúng ta có thể chọn được các đối tượng mà không cần phải khai báo thêm các Class hoặc Id vào trong thẻ HTML mà vẫn có thể hướng được đến các thành phần đó.


Sử dụng !important trong CSS
Importantđược sử dụng để thay đổi thứ tự ưu tiên của CSS, khi một quy luật nào đó được gán important thì nó sẽ có mức ưu tiên cao nhất, cho dù thành phần đó có khai báo CSS cục bộ hay CSS nội tuyến.


Thuộc tính Z-index trong CSS
Tiếp theo bài viết CSS absolute position, hôm nay mình sẽ giới thiệu với các bạn về z-index trong CSS.
Để tìm hiểu về z-index, mình xin đưa ra ví dụ về việc sử dụng CSS absolute position để xếp chồng các thành phần lên nhau:


CSS Absolute Position là gì?
Nói dễ hiểu nhất, Absolute position là cách định vị trí của một thành phần bên trong không gian thành phần chứa chúng (thành phần mẹ), mà không phụ thuộc vào margin  hay float. Và khi sử dụng absolute position, bạn có thể xếp các thành phần chồng lên nhau (Ví dụ: bạn có thể chồng một đoạn văn bản lên trên một ảnh).


Hướng dẫn sử dụng SpriteMe
Trong bài viết CSS Image Spires là gì? Chúng ta đã biết được tác dụng và cách thức để sử dụng Image Sprices.


CSS Image Sprites là gì?
Để hiểu CSS Image Sprites là gì? chúng ta cùng xem xét cách thiết kế Navigation như hình bên dưới, nếu theo cách thông thường bạn phải cần ít nhất ít nhất 8 hình ảnh để làm ảnh nền (Nếu tính cả 4 ảnh cho hiệu ứng Rollover).


Đánh giá bài viết với jRating
jRating - một plugin rất mềm dẻo của jQuery giúp bạn nhanh chóng tạo được hệ thống đánh giá dạng ajax.


Ad Gallery-jQuery Gallery Plugin-slideshow: Hiển thị bộ sưu tập hình ảnh với Thickbox và Lightbox
Ad Gallery là plugin của jQuery giúp bạn nhanh chóng tạo các gallery ảnh, các trang showcase.


Tạo form liên hệ với Contactable
Contactable là plugin của jQuery giúp bạn tạo được form liên hệ/ phản hồi đơn giản và tiện dụng hơn.


jQuery Sticky Tooltip: Cuộn chuột qua Tooltip hiển thị hình ảnh tương ứng
Sticky Tooltip - plugin của jQuery giúp website chúng ta có thêm nhiều thông tin hơn bằng cách sử dụng tooltip.


jQuery lavaLamp menu
lavaLamp là plugin của jQuery, giúp chúng ta dễ dàng tạo hiệu ứng động cho menu của trang web (tất nhiên bạn có thể áp dụng lavaLamp vào các thành phần khác, không nhất thiết ở menu).


Rotator - Chuyển động từng ký tự, chữ, hình ảnh
Lớp nhỏ này, phục vụ như một rotator chung cho các loại hình khác nhau của bộ sưu tập. Chuyển động tự động theo các hướng khác nhau từng giá trị với mức độ khác nhau


Ngoại lệ trong JavaScript
Tương tự như ngôn ngữ lập trình khác, ngoại lệ trong JavaScript được xử lý bằng lệnh try, catch


Phóng to hình ảnh bằng cách di chuột qua sử dụng JavaScript và jQuery
Tải về ứng dụng kèm theo và sử dụng tập tin js cũng như tập tin jquery theo cách bên dưới bạn sẽ phóng to được hình ảnh khi di chuột qua.


Xây dựng ứng dụng Web có Cấu trúc sử dụng Backbone.js
Backbone.js là một JavaScript phía máy khách (front-end) framework  giúp tổ chức mã của bạn và làm cho nó dễ dàng hơn để bạn có thể phát triển ứng dụng web duy nhất trên trang.


Xây dựng Biểu đồ chỉ với JavaScript
Trong bài viết này, chúng ta sẽ nghiên cứu và tìm hiểu về một trong những cách xây dựng biểu đồ sử dụng thường xuyên nhất cung cấp đồ thị JavaScript mịn và đồ họa tuyệt đẹp được gọi là "High Charts".


Bộ đếm thời gian giảm dần
Với bộ định thời gian đơn giản này, bạn sẽ dễ dàng thông báo cho khách truy cập biết trang web sẽ chuyển tới. Đoạn mã khá ngắn gọn và rất dễ để chỉnh sửa phù hợp nhu cầu, vì vậy đoạn mã chỉ thuần JavaScript và bạn phải sử dụng CSS để trang trí thêm nếu muốn có một hiệu ứng bắt mắt hơn.


Bộ đếm giờ giảm dần
Một đoạn mã JavaScript khác để hiển thị thời gian giảm dần. Người thiết kế có thể thay đổi mốc thời gian này. Một hiệu ứng tương tự như các website MediaFire và RapidShare.


Tính thời gian từ một thời điểm
Hiệu ứng JavaScript này sẽ hiển thị số năm, số tháng và số ngày đối với một thời điểm được chọn.


Đồng hồ đếm ngược
Đoạn mã này sẽ tạo một đồng hồ đếm ngược trên trang web (trong ví dụ là 10 phút), khi hết thời gian thì đoạn mã JavaScript sẽ chuyển sang một địa chỉ khác. Hiệu ứng rất thích hợp cho những bài kiểm tra trực tuyến.


Đếm ngược sự kiện
Tương tự như hiệu ứng Số ngày còn lại nhưng đoạn mã JavaScript JavaScript này sẽ thông báo cho bạn nếu sự kiện bạn cài đặt đã qua rồi.


Số ngày giữa hai thời điểm
Bạn có thể dùng hiệu ứng JavaScript này để tìm số lượng ngày giữa hai thời điểm nào đó.


Số ngày còn lại
Hiển thị số ngày còn lại cho đến thời điểm">thời điểm định trước. Mã nguồn tuy ngắn nhưng rất hiệu quả.


Tìm các ngày lễ
Nhập vào số ngày bất kì bạn sẽ được thông báo cách ngày lễ lớn gần nhất trong bao nhiêu ngày.


Tính thời gian
Người dùng một vào một thời điểm">thời điểm và hiệu ứng sẽ tính xem từ thời điểm đó đến hiện tại đã được bao nhiêu ngày.


Đồng hồ bấm giờ
Một đoạn mã JavaScript khác để tạo hiệu ứng hiển thị một đồng hồ bấm giờ trên trang web.


Ngày đếm ngược
Hiệu ứng dựa vào ngày hệ thống để đếm ngược số ngày còn lại của năm hiện tại.


Đếm giây
Hiệu ứng sẽ đếm thời gian từ lúc bạn nhấn nút Start với nút Finish.


Đếm số ngày còn lại trong tháng
Hiệu ứng sẽ tính xem tháng hiện hành còn bao nhiêu ngày.


Một tháng có bao nhiều ngày thứ ...
Hiệu ứng sẽ tính xem tháng hiện hành có bao nhiêu ngày thứ Tư.


Đếm thời gian rê chuột vào ảnh
Hiệu ứng sẽ cho ta biết thời gian ta rê con trỏ chuột vào ảnh trong bao lâu.


Sử dụng javascript để Reset FreeTextBox
Đây là mã nguồn mở bên thứ ba FreeTextBox (FTB) editor. Với sự giúp đỡ của bài viết này, bạn có thể thiết lập lại  FreeTextBox editor bằng cách sử dụng javascript. Điều này là rất đơn giản nhưng mã phức tạp.


Vô hiệu hóa Kéo, chuột phải trên trang Web
Vô hiệu hóa Kéo, chuột phải trên trang Web


[Template]Source code web bán hàng sử dụng JS để đặt hàng
Sử dụng 3 plug-in chính : 
1 : Orbit Slideshow làm slideshow ảnh
2 : Fancybox để popup ảnh sản phẩm
3 : JScart để thực hiện việc mua bán sản phẩm


Code Like Facebook Page
Để tạo được ứng dụng Like của facebook trên trang web mình, thực hiện bài viết bên dưới


THEMEFEST – WOWWAY – INTERACTIVE & RESPONSIVE HTML PTFOLIO
Download ThemeForest, WowWay Interactive & Responsive HTML Portfolio, HTML Template


Skydreamer HTML5 responsive vCard
Xứng đáng làm trang cá nhân


Tạo Button checkboxes,Radio kiểu mới với css3
Đoạn code mẫu này giúp bạn tạo các dấu check mới mà không cần dùng javascript phức tạp, đơn giản chỉ với CSS3


Bộ giao diện người dùng cực đẹp dành cho Design
Tập tin PTS, giúp Design tiết kiệm thời gian để design giao diện theo ý muốn


[HTML 5]ShopyMart - Giao diện website bán hàng
ShopyMart là 1 bộ giao diện Responsive HTML5 được thiết kế cho các website thương mại điện tử như shop quần áo thời trang. Bạn nào thích vọc thì down về nghiên cứu


Responsive web design: Khái niệm & ứng dụng
Sự phát triển nhanh chóng của các tablet pc và mạng 3G đặt ra một yêu cầu chính đáng cho những người thiết kế web: giao diện trang web phải thích nghi được trên từng loại thiết bị dù cho người đó dùng Iphone, iPad, netbook, BlackBerry, Kindle hay những chiếc điện thoại di động có màn hình nhỏ.


Dựng Layout với thẻ DIV
Việc dựng layout chuẩn hiện nay là dựng layout bằng thẻ DIV. Nghe thì có vẻ hơi phức tạp vì các thẻ DIV không giống như Table, hay chạy qua lại và cũng rất khó canh chỉnh... nhưng thực sự ra rất dễ các bạn ạ, chỉ cần làm theo một vài nguyên tắc là được.


[JQUERY]Chim bay với Jquery
Ngày nay, việc diễn hoạt cho các đối tượng trên website ngày trở nên rất cần thiết, đặc biệt là đối với các website mang tính chất sáng tạo. Trong bài hôm nay, mình sẽ hướng dẫn các bạn dùng Jquery Spritely để diễn hoạt cho các đối tượng như chim bay, mây trôi,….


[JQUERY]Bẻ cong văn bản theo ý muốn
CSS3 transform có thể giúp ta dễ dàng xoay một đối tượng sang nhiều góc độ khác nhau. Tuy nhiên việc xoay từng chữ cái trong đoạn văn bản là rất khó khăn.


Tạo button sử dụng HTML5 và CSS3
Trong bài viết này, tôi sẽ mô tả làm thế nào để tạo ra một nút bằng cách sử dụng HTML5 và CSS3. Tôi sẽ tạo ra nút này không sử dụng Photoshop hoặc bất kỳ hình ảnh nào và tôi sẽ không sử dụng phần tử button của HTML.


Làm tuyết rơi bằng Javascript
Hướng dẫn làm tuyết rơi như thật


Sử dụng API của jQuery Mobile để điều khiển tùy chỉnh độ mịn
Mở rộng jQuery Mobile bằng cách thiết lập các tùy chọn toàn cầu, móc nối vào các sự kiện tương tác và làm việc với các phương thức được trưng ra


Chiều rộng thẻ DIV tự co giản theo nội dung
Tình hình là thẻ DIV nếu ko fix chiều rộng cố định nó sẽ tràn như 100%. Nhưng nếu fix chiều rộng cố định như trường hợp trên thì bất tiện như ví dụ dưới đây.


Cố định header và footer
Với đoạn CSS dưới đây các bạn sẽ cố định được phần header va footer của trang web, phần nội dung sẽ có thanh trượt dọc trong trường hợp nó dài quá độ dài màn hình.
CSS


CSS cho các thẻ theo trạng thái (link, hover, visited, active, focus)
* Các trạng thái của thẻ a:
- link: trạng thái ban đầu (chưa click vô lần nào)
- hover: khi mouse chuột lên link
- visited: link đã từng click vô rồi
- active: lúc click chuột vô thẻ a


Đếm số ký tự trong textbox bằng jquery
Với thủ thuật này, các bạn có thể giới hạn số ký tự nhập vào ô textbox rất đơn giản bằng jquery


Srabon - html template đẹp cho trang admin
Đât là 1 trang html quản trị đẹp. Thích hợp để làm trang quản lí


Hướng dẫn làm trang tin tức nổi bật giống DNGAZ với Jquery
jQuery là một thư viện của Javascript giúp đơn giản hóa cách viết JavaScript và tăng tốc độ xử lý các sự kiện trên trang web.


jQuery -Code gGame bắn chim
Game bắn chim viết bằng jQuery - html5 giống ở http://step.vn nhưng được trang trí lại đẹp mắt hơn 1 tí


HTML5 Desktop Notification Tutorial
Desktop notification là một tính năng thú vị của HTML5. Websites của bạn có thể gửi notification ra ngoài màn hình desktop. Tuy nhiên, hiện tại nó chỉ hổ trợ trình duyệt google chrome. Mời các bạn xem demo


A Tabbed Slider Using jQuery
This article will show you how to create a tabbed Slider using jQuery step by step. Tabs are used for utilizing space efficiently and to provide some stylish effects in a website. jQuery tabs are very popular and they create a fancy look for web pages.


Rounded Tab Menu Using jQuery and CSS
This article will show you how to create a rotating tab menu using jQuery and CSS step by step. We will create a menu with small icons that will rotate when hovering.


Giới thiệu node.js và CoffeeScript
node.js đang là công nghệ rất hot hiện nay. Từ lúc ra đời (2009) đến lúc hot node.js chỉ mất khoảng vài tháng.


10 Super jQuery and Ajax Scripts
In this post I have shared free jQuery and Ajax scripts to help our upcoming web developers. In this list includes – A Drop-Down Menu Plug-in for jQuery, Rotating jQuery Tabs, Sliding Login Panel with jQuery, AJAX Loading Panel, MySql Ajax Table Editor, jQuery YouTube play-list plug-in etc.


7 AJAX & JavaScript Calendar Scripts
The ease of use, rich and intuitive scheduling solution offered by Google Calendar has inspired many to create CSS and AJAX calendars with similar interface and features. In this post, we take a look at some of these AJAX calendars & JavaScript calendars along with full-fledged calendar scripts similar to Google Calendar, Microsoft Outlook’s Calendar or Apple’s iCal.


Quảng cáo trượt ngang hấp dẫn
Share Source Code Html, javaScript làm quảng cáo trượt ngang đầy hấp dẫn


Happy Kids - Multipurpose HTML Template - giao diện web cho trẻ em dễ thương
Happy Kids is a simple and clean, but still professional children template. It is designed towards kindergartens, daycares, preschools and other small busineses. It’s created by using the latest HTML5 and CSS3 technologies. It comes with 6 different color styles and 9 different background patterns.


Làm Show ảnh như Báo Công An Đà Nẵng
Thể theo yêu cầu, mình sẽ làm cái cái demo như trang Báo Công An Đà Nẵng


Tự động thay thế link ảnh hỏng bằng ảnh khác
Chèn hình ảnh minh họa trong bài viết là một việc không thể thiếu để tăng tính hấp dẫn với người đọc. Tuy nhiên vì một lý do nào đó mà link ảnh bị hỏng làm cho trình duyệt không hiển thị ảnh (khi dùng FireFox) hoặc chỉ hiện một khung ảnh trống rổng kèm theo dấu chéo (IE) và lúc đó bạn và người xem sẽ có cảm giác khó chịu.


Hiện quảng cáo giữa màn hình bằng Jquery
Để làm được quảng cáo như link demo này, chèn đoạn code này vào trong website của bạn.


Tích hợp Google Translate tools tạo trang web đa ngữ
Google cung cấp cho ta công cụ Google Translate để có thể dịch nội dung web site ra nhiều thứ tiếng khác nhau. Bài viết này tôi sẽ minh họa cho bạn cách Add công cụ này vào website để có được website đa ngữ.


Làm Slide Ảnh chuyển động biến tấu
Bài viết này hướng dẫn các bạn cách làm thế nào để kết hợp giữa html, javascript với css để tạo nên sự biến tấu giữa các hình ảnh, làm sinh động trang web của mình.


Tạo Banner quảng cáo với hiệu ứng trượt dọc 2 bên
Banner quảng cáo trượt dọc 2 bên trang web là hình thức quảng cáo rất phổ biến hiện nay trên các Forum\Website lớn. Không những giúp tận dụng “đất”, nó còn dễ dàng gây được sự chú ý của người đọc với hiệu ứng trượt theo khi trang được cuộn lên\xuống.


Quảng Cáo Trượt ngang
Hướng dẫn làm Quảng cáo trượt ngang, gồm 2 button Next và Pre


SHARE TEMPLATE ĐẸP BÁN SERVER, HOSTING
ThemeForest – Rackhost Hosting & Business Theme v1.2 - HTML Template bán host, server


Script hiển thị ngày tháng & lời chào định sẵn theo giờ
Cho phép xem giờ, ngày, tháng, năm & lời chào ngộ nghĩnh cho mỗi thời điểm trong ngày. Bản chất những lời chào là những đoạn text định sẵn bởi tác giả.


Tối ưu việc nạp ảnh với Lazyload
Lazyload là plugin của jQuery cải thiện việc tải hình ảnh ở những trang web dài. Ảnh bên ngoài khung hình sẽ chỉ thể hiện khi người dùng kéo chuột tới.


Giới thiệu về Z-Layout
Z-Layout là một cách tuyệt vời để bắt đầu bất kỳ dự án thiết kế web. Bởi vì nó giúp web hoạt động có hiệu quả trong: hệ thống phân cấp, xây dựng thương hiệu, cấu trúc thiết kế, và kêu gọi hành động. Z-Layout là vũ khí lợi hại nếu nhà thiết kế website biết phối hợp cách bố trí của Z-Layout và ý tưởng của mình.


Hàm đọc số bằng chữ - Javascript
Khi lập trình có liên quan đến số liệu phải tính toán và yêu cầu phải đọc được số thành chữ như đọc tiền thành chữ. Bạn có thể dùng ngôn ngữ lập trình như C#, VB, hay php để thực hiện, Ở bài này mình sẽ viết hàm đọc số thành chữ bằng javascript


Format Number với javascript
Khi lập trình yêu cầu có nhập số liệu cần tính toán, đôi khi bạn cần FormatNumber để phân cách hàng nghìn trong khi nhập liệu. Lúc đó bạn nên dùng hàm trong javascript


SHARE UNDER CONSTRUCTION, COMING SOON TEMPLATE - MẪU TRANG ĐANG BẢO TRÌ ĐẸP
Share Under Construction, Coming Soon Theme, HTML Template, mẫu trang đang xây dựng, trang Under Construction có đếm ngược, code trang đang bảo trì hỗ trợ đếm ngược