Community Forums › Forums › Archived Forums › Design Tips and Tricks › Where to drop JavaScript
Tagged: javascript, js
- This topic has 1 reply, 2 voices, and was last updated 8 years, 3 months ago by
Victor Font.
-
AuthorPosts
-
November 19, 2016 at 8:36 am #196361
BlakeN
ParticipantHi,
I'm looking to add some JavaScript to the AltitudePro theme and I'm not sure where to drop it. The code is for a price table.
I see the global.js file in the child theme but do not want to drop it there since it will get updated. Here is what I need to add. Any help is greatly appreciated.
jQuery(document).ready(function($){
//hide the subtle gradient layer (.pricing-list > li::after) when pricing table has been scrolled to the end (mobile version only)
checkScrolling($('.pricing-body'));
$(window).on('resize', function(){
window.requestAnimationFrame(function(){checkScrolling($('.pricing-body'))});
});
$('.pricing-body').on('scroll', function(){
var selected = $(this);
window.requestAnimationFrame(function(){checkScrolling(selected)});
});function checkScrolling(tables){
tables.each(function(){
var table= $(this),
totalTableWidth = parseInt(table.children('.pricing-features').width()),
tableViewport = parseInt(table.width());
if( table.scrollLeft() >= totalTableWidth - tableViewport -1 ) {
table.parent('li').addClass('is-ended');
} else {
table.parent('li').removeClass('is-ended');
}
});
}//switch from monthly to annual pricing tables
bouncy_filter($('.pricing-container'));function bouncy_filter(container) {
container.each(function(){
var pricing_table = $(this);
var filter_list_container = pricing_table.children('.pricing-switcher'),
filter_radios = filter_list_container.find('input[type="radio"]'),
pricing_table_wrapper = pricing_table.find('.pricing-wrapper');//store pricing table items
var table_elements = {};
filter_radios.each(function(){
var filter_type = $(this).val();
table_elements[filter_type] = pricing_table_wrapper.find('li[data-type="'+filter_type+'"]');
});//detect input change event
filter_radios.on('change', function(event){
event.preventDefault();
//detect which radio input item was checked
var selected_filter = $(event.target).val();//give higher z-index to the pricing table items selected by the radio input
show_selected_items(table_elements[selected_filter]);//rotate each pricing-wrapper
//at the end of the animation hide the not-selected pricing tables and rotate back the .pricing-wrapperif( !Modernizr.cssanimations ) {
hide_not_selected_items(table_elements, selected_filter);
pricing_table_wrapper.removeClass('is-switched');
} else {
pricing_table_wrapper.addClass('is-switched').eq(0).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
hide_not_selected_items(table_elements, selected_filter);
pricing_table_wrapper.removeClass('is-switched');
//change rotation direction if .pricing-list has the .bounce-invert class
if(pricing_table.find('.pricing-list').hasClass('bounce-invert')) pricing_table_wrapper.toggleClass('reverse-animation');
});
}
});
});
}
function show_selected_items(selected_elements) {
selected_elements.addClass('is-selected');
}function hide_not_selected_items(table_containers, filter) {
$.each(table_containers, function(key, value){
if ( key != filter ) {
$(this).removeClass('is-visible is-selected').addClass('is-hidden');} else {
$(this).addClass('is-visible').removeClass('is-hidden is-selected');
}
});
}
});November 19, 2016 at 9:13 am #196363Victor Font
ModeratorChild themes rarely, if ever, get updated. Each page has a meta box where you can insert jQuery. You can insert it in the Genesis/Settings header script area, which will load it on all pages. If you want to load it conditionally for a single page, you can also wrap it in a php conditional in functions.php.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet? -
AuthorPosts
- The topic ‘Where to drop JavaScript’ is closed to new replies.