js example to animate scrolling for all anchor tags
Used for CRAD
- // animate scrolling for all anchor links
- jQuery(function($) {
- $.localScroll();
- });
// animate scrolling for all anchor links
jQuery(function($) {
$.localScroll();
});Phone Mask Enforce Style in Input Field
The javascript function is already in TF. Simply call like this:
- <input onblur="return phonemask(this,event);" onkeypress="return phonemask(this,event);" type="text" class="input-text" name="billing_phone" id="billing_phone" placeholder="xxx-xxx-xxxx" value="">
<input onblur="return phonemask(this,event);" onkeypress="return phonemask(this,event);" type="text" class="input-text" name="billing_phone" id="billing_phone" placeholder="xxx-xxx-xxxx" value="">
Price (dollar) Mask Enforce Style in Input Field
The javascript function is already in TF. Simply call like this:
- <input id="nyp" class="ipad_input_text input-text amount nyp-input text" title="nyp" name="nyp" size="10" type="text" value="" onblur="return pricecheck(this,event);" onkeypress="return pricemask(this,event);" placeholder="0000.00"/>
<input id="nyp" class="ipad_input_text input-text amount nyp-input text" title="nyp" name="nyp" size="10" type="text" value="" onblur="return pricecheck(this,event);" onkeypress="return pricemask(this,event);" placeholder="0000.00"/>
Size columns outside of main WP page structure
this is used on the ASHI site
- jQuery(document).ready(function($){
- $(window).load(function(){
- setTimeout( function() {
- var wide = $( window ).width();
- var h1 = $("#mid").height();
- $('#angel-left').css({'height':h1+'px'});
- $('#angel-right').css({'height':h1+'px'});
- console.log("hi");
- }, 50);
- });
jQuery(document).ready(function($){
$(window).load(function(){
setTimeout( function() {
var wide = $( window ).width();
var h1 = $("#mid").height();
$('#angel-left').css({'height':h1+'px'});
$('#angel-right').css({'height':h1+'px'});
console.log("hi");
}, 50);
});Make columns within WP page structure the same height
NOTE: This seems also do-able with the Bootstrap “column-cols-same-height” class – see example on main page of this site.
Used on the ASHI site
- // example code to make a set of columns all the same height
- // do this last
- jQuery(document).ready(function($){
- $(window).load(function(){
- setTimeout( function() {
- var wide = $( window ).width();
- if (wide >=768 && wide < 992) {
- // SMALL Layouts: Make all columns in row 1 the same height
- var h1 = $("#home-about").height();
- var h2 = $("#home-pact").height();
- var max=Math.max(h1,h2);
- max = max + 60;
- $('#home-about').css({'height':max+'px'});
- $('#home-pact').css({'height':max+'px'});
- // SMALL layout row2 no adjustment needed
- // SMALL Layouts: Make all columns in row 3 the same height
- var h3 = $("#home-events2").height();
- var h4 = $("#home-newsletters2").height();
- var max2=Math.max(h3,h4);
- max2 = max2 + 40;
- $('#home-newsletters2').css({'height':max2+'px'});
- $('#home-events2').css({'height':max2+'px'});
- }
- }, 50);
- });
- });
// example code to make a set of columns all the same height
// do this last
jQuery(document).ready(function($){
$(window).load(function(){
setTimeout( function() {
var wide = $( window ).width();
if (wide >=768 && wide < 992) {
// SMALL Layouts: Make all columns in row 1 the same height
var h1 = $("#home-about").height();
var h2 = $("#home-pact").height();
var max=Math.max(h1,h2);
max = max + 60;
$('#home-about').css({'height':max+'px'});
$('#home-pact').css({'height':max+'px'});
// SMALL layout row2 no adjustment needed
// SMALL Layouts: Make all columns in row 3 the same height
var h3 = $("#home-events2").height();
var h4 = $("#home-newsletters2").height();
var max2=Math.max(h3,h4);
max2 = max2 + 40;
$('#home-newsletters2').css({'height':max2+'px'});
$('#home-events2').css({'height':max2+'px'});
}
}, 50);
});
});Top Menu Change Style with Page Scroll
used on the CRAD site
- // various functions from Martha's CRAD project used for fixed menu that changes style as the pageg is scrolled
- function mysite_menu_default_colors() {
- /* note: these hard-coded menu numbers are also in style.less */
- /* art */
- $('#menu-item-149 > a').removeClass('mmwp-menu-current');
- $('#menu-item-149 > a').removeClass('mmwp-menu-art-current');
- $('#menu-item-149 > a').addClass('mmwp-menu-default');
- $('#menu-item-149 > a').addClass('mmwp-menu-art-default');
- $('#menu-item-141 > a').removeClass('mmwp-menu-current');
- $('#menu-item-141 > a').removeClass('mmwp-menu-art-current');
- $('#menu-item-141 > a').addClass('mmwp-menu-default');
- $('#menu-item-141 > a').addClass('mmwp-menu-art-default');
- /* video */
- $('#menu-item-117 > a').removeClass('mmwp-menu-current');
- $('#menu-item-117 > a').removeClass('mmwp-menu-video-current');
- $('#menu-item-117 > a').addClass('mmwp-menu-default');
- $('#menu-item-117 > a').addClass('mmwp-menu-video-default');
- /* photo */
- $('#menu-item-119 > a').removeClass('mmwp-menu-current');
- $('#menu-item-119 > a').removeClass('mmwp-menu-photo-current');
- $('#menu-item-119 > a').addClass('mmwp-menu-default');
- $('#menu-item-119 > a').addClass('mmwp-menu-photo-default');
- /* design */
- $('#menu-item-118 > a').removeClass('mmwp-menu-current');
- $('#menu-item-118 > a').removeClass('mmwp-menu-design-current');
- $('#menu-item-118 > a').addClass('mmwp-menu-default');
- $('#menu-item-118 > a').addClass('mmwp-menu-design-default');
- /* about */
- $('#menu-item-150 > a').removeClass('mmwp-menu-current');
- $('#menu-item-150 > a').removeClass('mmwp-menu-about-current');
- $('#menu-item-150 > a').addClass('mmwp-menu-default');
- $('#menu-item-150 > a').addClass('mmwp-menu-about-default');
- $('#menu-item-142 > a').removeClass('mmwp-menu-current');
- $('#menu-item-142 > a').removeClass('mmwp-menu-about-current');
- $('#menu-item-142 > a').addClass('mmwp-menu-default');
- $('#menu-item-142 > a').addClass('mmwp-menu-about-default');
- }
- function menu_scroll_style() {
- // change color based on how far down the page we've scrolled
- var window_top = $(window).scrollTop();
- //var artpos = $("#art-archive").offset().top-80-60;
- var vidpos = $("#video-archive").offset().top-80-60;
- var photopos = $("#photo-archive").offset().top-80-60;
- var despos = $("#design-archive").offset().top-80-60;
- var aboutpos = $("#about-archive").offset().top-80-60;
- // ART
- if(window_top < vidpos)
- {
- //$('#crad-title').text("ART");
- // set default colors
- mmwp_menu_default_colors();
- // now set for Art active menu
- $('#menu-item-149 > a').removeClass('mmwp-menu-art-default');
- $('#menu-item-149 > a').removeClass('mmwp-menu-default');
- $('#menu-item-149 > a').addClass('mmwp-menu-current');
- $('#menu-item-149 > a').addClass('mmwp-menu-art-current');
- $('#menu-item-141 > a').removeClass('mmwp-menu-art-default');
- $('#menu-item-141 > a').removeClass('mmwp-menu-default');
- $('#menu-item-141 > a').addClass('mmwp-menu-current');
- $('#menu-item-141 > a').addClass('mmwp-menu-art-current');
- }
- // VIDEO
- if(window_top < photopos && window_top >= vidpos)
- {
- //$('#crad-title').text("VIDEO");
- mmwp_menu_default_colors();
- $('#menu-item-117 > a').removeClass('mmwp-menu-video-default');
- $('#menu-item-117 > a').removeClass('mmwp-menu-default');
- $('#menu-item-117 > a').addClass('mmwp-menu-current');
- $('#menu-item-117 > a').addClass('mmwp-menu-video-current');
- }
- }
- function resize_style() {
- // in order to have the title bar not scroll, it need to be position:fixed. However, when that happens
- // it does not automatically inherit it's width from it's parent div, and because that width varies
- // based on screen size we need to set it here at runtime
- var wide = $("#content").width();
- $('#masthead').css({"width":wide});
- }
// various functions from Martha's CRAD project used for fixed menu that changes style as the pageg is scrolled
function mysite_menu_default_colors() {
/* note: these hard-coded menu numbers are also in style.less */
/* art */
$('#menu-item-149 > a').removeClass('mmwp-menu-current');
$('#menu-item-149 > a').removeClass('mmwp-menu-art-current');
$('#menu-item-149 > a').addClass('mmwp-menu-default');
$('#menu-item-149 > a').addClass('mmwp-menu-art-default');
$('#menu-item-141 > a').removeClass('mmwp-menu-current');
$('#menu-item-141 > a').removeClass('mmwp-menu-art-current');
$('#menu-item-141 > a').addClass('mmwp-menu-default');
$('#menu-item-141 > a').addClass('mmwp-menu-art-default');
/* video */
$('#menu-item-117 > a').removeClass('mmwp-menu-current');
$('#menu-item-117 > a').removeClass('mmwp-menu-video-current');
$('#menu-item-117 > a').addClass('mmwp-menu-default');
$('#menu-item-117 > a').addClass('mmwp-menu-video-default');
/* photo */
$('#menu-item-119 > a').removeClass('mmwp-menu-current');
$('#menu-item-119 > a').removeClass('mmwp-menu-photo-current');
$('#menu-item-119 > a').addClass('mmwp-menu-default');
$('#menu-item-119 > a').addClass('mmwp-menu-photo-default');
/* design */
$('#menu-item-118 > a').removeClass('mmwp-menu-current');
$('#menu-item-118 > a').removeClass('mmwp-menu-design-current');
$('#menu-item-118 > a').addClass('mmwp-menu-default');
$('#menu-item-118 > a').addClass('mmwp-menu-design-default');
/* about */
$('#menu-item-150 > a').removeClass('mmwp-menu-current');
$('#menu-item-150 > a').removeClass('mmwp-menu-about-current');
$('#menu-item-150 > a').addClass('mmwp-menu-default');
$('#menu-item-150 > a').addClass('mmwp-menu-about-default');
$('#menu-item-142 > a').removeClass('mmwp-menu-current');
$('#menu-item-142 > a').removeClass('mmwp-menu-about-current');
$('#menu-item-142 > a').addClass('mmwp-menu-default');
$('#menu-item-142 > a').addClass('mmwp-menu-about-default');
}
function menu_scroll_style() {
// change color based on how far down the page we've scrolled
var window_top = $(window).scrollTop();
//var artpos = $("#art-archive").offset().top-80-60;
var vidpos = $("#video-archive").offset().top-80-60;
var photopos = $("#photo-archive").offset().top-80-60;
var despos = $("#design-archive").offset().top-80-60;
var aboutpos = $("#about-archive").offset().top-80-60;
// ART
if(window_top < vidpos)
{
//$('#crad-title').text("ART");
// set default colors
mmwp_menu_default_colors();
// now set for Art active menu
$('#menu-item-149 > a').removeClass('mmwp-menu-art-default');
$('#menu-item-149 > a').removeClass('mmwp-menu-default');
$('#menu-item-149 > a').addClass('mmwp-menu-current');
$('#menu-item-149 > a').addClass('mmwp-menu-art-current');
$('#menu-item-141 > a').removeClass('mmwp-menu-art-default');
$('#menu-item-141 > a').removeClass('mmwp-menu-default');
$('#menu-item-141 > a').addClass('mmwp-menu-current');
$('#menu-item-141 > a').addClass('mmwp-menu-art-current');
}
// VIDEO
if(window_top < photopos && window_top >= vidpos)
{
//$('#crad-title').text("VIDEO");
mmwp_menu_default_colors();
$('#menu-item-117 > a').removeClass('mmwp-menu-video-default');
$('#menu-item-117 > a').removeClass('mmwp-menu-default');
$('#menu-item-117 > a').addClass('mmwp-menu-current');
$('#menu-item-117 > a').addClass('mmwp-menu-video-current');
}
}
function resize_style() {
// in order to have the title bar not scroll, it need to be position:fixed. However, when that happens
// it does not automatically inherit it's width from it's parent div, and because that width varies
// based on screen size we need to set it here at runtime
var wide = $("#content").width();
$('#masthead').css({"width":wide});
}

