Posted on

Auto Tel Link (a tag In The Current Version of Framework)

CategoriesDevelopment, Front End, jQuery / JavaScript

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;
}
Posted on

Link Style (a tag) Default Setup

CategoriesCSS, Development, Front End

EXAMPLE

HTML

Link item style

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;
}
Posted on

Custom Fancybox CSS Style

CategoriesCSS, Development, Front End

EXAMPLE
Here is an example implementation of fancy box on the Albany Pump website.

CSS File

body {  
  // fancybox skin style
  .fancybox-skin {
  	// -webkit-box-shadow:none;
  	// -moz-box-shadow: none;
  	// box-shadow:none;
  	// background:none;
  }

  // close button
  .fancybox-close {
  	// background: url(../images/IMAGE-NAME.png) no-repeat;
  	// background-size: 20px 20px;
  	// top: -40px;
  }
  .fancybox-close:hover, .fancybox-close:focus {
  }

  // fancybox caption text area
  .fancybox-text {
  }

  // fancybox next control button
  .fancybox-next span {
  }
  .fancybox-next span:hover, .fancybox-next span:focus {
  }

  // fancybox previous control button
  .fancybox-prev span {
  }
  .fancybox-prev span:hover, .fancybox-prev span:focus {
  }

  .fancybox-title.fancybox-title-float-wrap {
  	span {
  	}
  	> .child {
  	// border-radius: 0px;
  	// background-color: rgba(0,112,60,0.85);
  	// white-space: normal;
  	// text-shadow: none;
  	}
  }
}
Posted on

jQuery Window Resize

CategoriesDevelopment, Front End, jQuery / JavaScript
    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);
Posted on

Custom Gravity Forms – Columns styling

CategoriesDevelopment, Front End, Plugin Frontend Additions

Custom Class Usage

Gravity Forms Custom CSS Link

Checkboxes and Lists Fields
gf_list_2col = 2 columned List
gf_list_3col = 3 columned List
gf_list_4col = 4 columned
gf_list_5col = 5 columned

Two Columns of Text Fields side by side
gf_left_half = The left column
gf_right_half = The right column

Three Columns side by side
gf_left_third = Left column
gf_middle_third = Middle column
gf_right_third = Right column

gf_inline
This places the field inline horizontally with other fields but does not create equally-spaced column layouts. This is useful for different sized fields or when you simply want a horizontal layout without actual column spacing.

—————————————–  CODE  ———————————–

CSS File

ul.gform_fields {
  // gravity form container
  .gform_wrapper .gform_body {
  	width: auto;
  }

  // labels
  .gfield .gfield_label,
  .ginput_container label {
  }

  // sub labels
  .gform_wrapper .field_sublabel_above .ginput_complex.ginput_container label {
  }

  // gform body
  .gform_wrapper .gform_body {
  	width: auto;
  }

}


// submission errors
  .gfield_error {
  }

// submit button
  .gform_button, input[type="submit"] {
  }

// submit hover, submit focus
  .gform_button:hover, input[type="submit"]:hover, .gform_button:focus, input[type="submit"]:focus {
  }
Posted on

WordPress Theme Options – Favicon, Header, and Footer

CategoriesBack End, Development, WordPress Functions and Hooks

You can use this code to get the wordpress backend theme option selected images.

PHP File

// Favicon
$website_favicon_array = wp_get_attachment_image_src(get_option('theme_options_website_favicon')[0], '');
$website_favicon = $website_favicon_array[0];

// Header Logo
$header_logo_array = wp_get_attachment_image_src(get_option('theme_options_website_logo')[0], '');
$header_logo = $header_logo_array[0];

// Footer Logo
$footer_logo_array = wp_get_attachment_image_src(get_option('theme_options_website_footer_logo')[0], '');
$footer_logo = $footer_logo_array[0];
Posted on

Fixed Menu On Scroll (with Desktop only Logic) jQuery

CategoriesDevelopment, Front End, jQuery / JavaScript
	$(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;
		 }
	 
 });