Make column heights equal with some JS

XAdmin

It goes in the customizer javascript box, and you apply the class “equalize” to the columns you want to be equal height. /*Make columns equal height*/ (function($){ $(window).bind(‘ready load resize’, function(){ var max = 0, mobile = $(window).width(); if ( mobile > 767 ){ $(“.equalize .x-column”).each(function(index, el) { if( $(this).height() > max ){ max = $(this).height(); } }); $(“.equalize .x-column”).css(‘height’, max); } }); })(jQuery);

Fade Fixed Navbar on scroll

x.sirc

var opacity = 1; var lastScrollTop = 0; jQuery(window).scroll(function(){ var st = jQuery(this).scrollTop(); if(st == 0) jQuery(‘.x-navbar’).css(‘opacity’,’1′); if (opacity > 0.7 && (st > lastScrollTop)){ jQuery(‘.x-navbar’).css(‘opacity’,’-=0.01′); opacity -= 0.01; } else if(opacity < 1) { jQuery(‘.x-navbar’).css(‘opacity’,’+=0.01′); opacity += 0.01; } lastScrollTop = st; });

Add parallax to all devices (touch or non-touch enabled)

Mike

You will need to add this script after the cornerstone-site-body script gets enqueued Use “cornerstone-site-body” as a dependency when registering via wp_register_script/wp_enqueue_script For reference: https://community.theme.co/forums/topic/parallax-not-working-in-chrome-and-windows-8/#post-1194968 (function($){ xData.api.map(‘section’, newSectionSetup); function newSectionSetup( params ) { var $this = $(this); var backgroundSetup = function() { if ( $this.hasClass(‘parallax’) ) { if ( $this.hasClass(‘bg-image’) ) speed = 0.1; if ( $this.hasClass(‘bg-pattern’) ) speed = 0.3; if ( speed ) $this.parallaxContentBand(‘50%’, speed); } }; if ( document.readyState === ‘complete’ ) { backgroundSetup(); } else { jQuery(window).load( backgroundSetup ); } } })(jQuery);

Hyperlink Featured List Item

distillerycreative

/* Place the following code in your page’s Custom Javascript area and make sure you add my class to the specific featured list item that you will want to link. */ ======================= (function($){ var data = { ‘.my-class .x-feature-box-title’: ‘http://yourlinkhere’, ‘.my-class2 .x-feature-box-title’: ‘‪#‎yoursecondlinkhere‬’, // for additional links, copy the above line and replace the first class and the link } $.each(data, function(i, v) { var text = $(i).text(); $(i).html(‘<a href=”‘ + v + ‘”>’ + text + ‘</a>’); }); =========================

Open an Accordion list item from a link (Updated 2nd Jan 2017)

XAdmin

My sincere apologies, wrong code was placed originally: NOW UPDATED Rick M If you want to open an accordion list item from a link on a different page, ADD this to Appearance > Customize > Custom > Edit Global Javascript: jQuery( function( $ ) { var target_hash = window.location.hash; var id_index_table = { ‘#faq1’ : 1, ‘#faq2’ : 2, ‘#faq3’ : 3, }; $(document).ready( function() { var target_index = id_index_table[ target_hash ]; if ( target_hash !== ” && target_index > 0) { $( $( ‘a.x-accordion-toggle’ ).get( target_index – 1 ) ).click(); $(‘html,body’).stop().animate({scrollTop: $( $( ‘a.x-accordion-toggle’ ).get( target_index – 1 ) … Read More

Image Hover Effect Without CSS

Karen Cooper

This jQuery javascript and html can be dropped in anywhere, it requires no css, so if you need to create an image hover effect in just a couple places on your site simply edit to match your content and insert this code. Great for custom hover social icons. <a href=”TARGET URL GOES HERE”><img src=”URL OF FIRST IMAGE GOES HERE” onmouseover=”this.src=‘HOVER IMAGE URL GOES HERE’” onmouseout=”this.src=’URL OF FIRST IMAGE GOES HERE AGAIN’” /></a>

Fixed Position Up – Down Button allowing visitors to jump automatically through sections clicking same button

XAdmin

Add a script to your X Theme web pages, tied to a fixed-position “down/up arrow” button, allowing the visitor to jump automatically through the sections of a long page, simply through repeated clicks of the same button? If you want this to work only on one page then add all code to the page custom CSS and JS (1) Two fixed-position buttons are created, with up and down icons. They float at the edge of the home page, on top of other content, using fixed positioning and z-index. These will need to be styled accordingly. CSS for this (added to … Read More

Visited Accordions Colour Change when Visited

XAdmin

add the following code under Customizer > Custom > Global Javascript: jQuery(function($){ $(“.x-accordion-heading .x-accordion-toggle”).on(‘click touchend’, function(event) { event.preventDefault(); if( $(this).hasClass(‘first-click’) ){ $(this).removeClass(‘first-click’).addClass(‘sencond-click’); } else { $(this).addClass(‘first-click’); } }); }); add the following CSS under Customizer > Custom > Global CSS: .x-accordion-heading .x-accordion-toggle.sencond-click { background-color: green !important; color: #fff; } This will only change the state for the current page session.

Auto-collapse sibling menus in mobile menu

bobbybosler

`jQuery(document).ready(function($) { var closedMenuLink = $(‘.x-navbar .mobile .x-nav li.menu-item-has-children>a’); closedMenuLink.click(function(e) { e.preventDefault(); if ($(this).parent(‘.menu-item-has-children’).hasClass(‘open’)) { $(this).parent(‘.menu-item-has-children’).removeClass(‘open’); } else { $(this).parent(‘.menu-item-has-children’).addClass(‘open’); } }); }); jQuery(document).ready(function($) { var newClosedMenuLink = $(‘.x-navbar .mobile .x-nav li.menu-item-has-children>a’); newClosedMenuLink.click(function(e) { e.preventDefault(); $(this).parent(‘.menu-item-has-children’).siblings(‘.menu-item-has-children.open’).find(‘.sub-menu.collapse’).slideToggle(300); $(this).parent(‘.menu-item-has-children’).siblings(‘.menu-item-has-children.open’).removeClass(‘open’); }); });`

Show and hide certain sections based on button click

Donald McGuinn

Make sure to add the class section-expandable and id #services to your section Then add services-trigger-button as ID of your button. jQuery(document).ready(function($){ $(‘#services.section-expandable’).slideToggle(0); $(‘#services-trigger-button’).on(‘touchend click’, function(){ $(‘#services.section-expandable’).slideToggle( “slow” ); }); });