Page Top
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var topBtn = $('#page-top'); // Nhập id hoặc class topBtn.hide(); $(window).scroll(function() { if ($(this).scrollTop() > 300) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); topBtn.click(function() { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); |
Click scroll page theo ID
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$('.text-slide a').click(function () { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top - 50 }, 900); return false; } else { $('html,body').animate({ scrollTop: target.offset().top - 0 }, 900); } } }); |
Menu toogle
1 2 3 |
$('.icon-menu-sp').click(function() { $('.menu').slideToggle('blind'); }); |
Đặt height bằng nhau cho div
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
// Các thẻ div có class được khai báo sẽ có chiều cao bằng nhau. equalheight = function(container) { var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(), $el, topPosition = 0; $(container).each(function() { $el = $(this); $($el).height('auto') topPostion = $el.position().top; if (currentRowStart != topPostion) { for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } rowDivs.length = 0; currentRowStart = topPostion; currentTallest = $el.height(); rowDivs.push($el); } else { rowDivs.push($el); currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); } for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } }); } // Khi load lại cửa sổ thì thực hiện hàm. $(window).load(function() { equalheight('.row-plan'); // Nhập class }); // Khi resize cửa sổ thì thực hiện hàm. $(window).resize(function() { equalheight('.row-plan'); // Nhập class }); |
Kiểm tra trình duyệt với Js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// Opera 8.0+ var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ var isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ "[object HTMLElementConstructor]" var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification); // Internet Explorer 6-11 var isIE = /*@cc_on!@*/false || !!document.documentMode; // Edge 20+ var isEdge = !isIE && !!window.StyleMedia; // Chrome 1+ var isChrome = !!window.chrome && !!window.chrome.webstore; // Blink engine detection var isBlink = (isChrome || isOpera) && !!window.CSS; if(isChrome) {alert('Chrome');} if(isOpera) {alert('Opera');} if(isFirefox) {alert('Firefox');} if(isSafari) {alert('Safari');} if(isIE) {alert('IE');} if(isEdge) {alert('Edge');} if(isBlink) {alert('Blink');} |
Css ::beffore or ::after trong Jquery
1 |
$('tenDoiTuong').append("<style>.viTriChen::before{ thuocTinhCss}</style>"); |
Bọc Html xung quanh nội dung bằng .wrapInner()
Html
1 2 3 4 |
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> |
Jquery
1 |
$( ".inner" ).wrapInner( "<div class='new'></div>"); |
Thay thế hình khi vào giao diện SP để đối ứng màn hình Retina
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// Tự động thay thế các hình, không cần phải nhập 2 hình hoặc css nhiều lần. // Hình muốn thay phải có đuôi là _pc. // VD: img1_pc.jpg ...v.v // Lưu ý: đối ứng màn hình Retina: // Hình _pc: kích thước 100% - hình _sp: kích thước gấp đôi (nói chung lớn hơn hình _pc). replace_img = function(target_img) { var width = $(window).width(); console.log(width); $(target_img).each(function() { $el = $(this); if (width <= 1024) { // Bắt width để thực hiện link thay hình $el.attr('src', $el.attr('src').replace('_pc', '_sp')); // Kiểm tra thuộc tính src nếu có "_pc" thì thay bằng "_sp". } else { $el.attr('src', $el.attr('src').replace('_sp', '_pc')); // Kiểm tra thuộc tính src nếu có "_sp" thì thay bằng "_pc". } }); } // Khi load lại cửa sổ thì thực hiện hàm. $(window).load(function() { replace_img('img'); // Nhập id, class hoặc img để thay thế tất cả thẻ tag img }); // Khi resize cửa sổ thì thực hiện hàm. $(window).resize(function() { replace_img('img'); // Nhập id, class hoặc img để thay thế tất cả thẻ tag img }); |
Khắc phục lỗi double trên SP
1 2 3 4 5 6 |
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) { var elements = document.getElementsByTagName('a'); for (var i = 0; i < elements.length; i++) { elements[i].addEventListener('touchend', function() {}); } } |