Personal notes
Prevents window resize event from triggering code on every pixel. Helpful for performing match heights and other intensive JS functions.
var resizeTimer;
$(window).on('resize', function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// Code here
}, 250);
});
Go To Top smooth scroll
$('a[href^="#"]').click(function() {
$('html, body').animate({
scrollTop: $("body").offset().top
}, 700);
});
Smooth scroll to an element ID on the page
$("#clickedElement").click(function() {
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 700);
});
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$("header").addClass("scrolling");
} else {
$("header").removeClass("scrolling");
}
});
EXAMPLE
HTML
19054567890
JS
jQuery(function($) {
$(document).ready(function() {
$(".tel").each(function () {
var href = "";
href = $(this).attr("href");
if (href == "" || href == null) {
href = $(this).text();
href = href.replace(/\s+/g, '');
href = href.replace(/[{()}]/g, '');
href = href.replace(/-/g, '');
href = href.replace(/\./g, '');
}
if (href.indexOf("tel") < 0) {
$(this).attr("href", ("tel:" + href));
}
});
});
});
CSS
a, .a {
text-decoration: none;
border-bottom: 1px solid #f28f2d;
//replace #f28f2d with colour of choice
-moz-transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
-webkit-transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
}
a:hover, a:focus, .a:hover, .a:focus {
color: #f28f2d;
}
var $window = jQuery(window);
function checkWidth() {
var windowsize = $window.width();
if (windowsize > 1400) {
jQuery("#first-tab").click(function() {
//do something
});
} else {
jQuery("#first-tab").click(function() {
//do something
});
}
}
// Execute on load
checkWidth();
// Bind event listener
jQuery(window).bind('resize', checkWidth);
$(window).scroll( function() {
var scroll_count = 0;
if ( $(this).scrollTop() > 250 && $(this).width() > 768 ) {
$(".nav-menu").addClass("positionfixed");
if ( scroll_count < 1 ) {
$(".nav-menu").hide();
$(".positionfixed").fadeIn();
}
scroll_count = 1;
} else {
$(".nav-menu").show();
$(".nav-menu").removeClass("positionfixed");
scroll_count = 0;
}
});