achohanc6
Forum Replies Created
-
This is what is in this file:
/*
Reference: How to use jQuery’s $ function anywhere:(function( $ ) {
})(jQuery);
*///Came with Joints WP, several fixes
function joints_wp_fixes(){
(function( $ ) {
// Remove empty P tags created by WP inside of Accordion and Orbit
$(‘.accordion p:empty, .orbit p:empty’).remove();// Makes sure last grid item floats left
$(‘.archive-grid .columns’).last().addClass( ‘end’ );// Adds Flex Video to YouTube and Vimeo Embeds
$(‘iframe[src*=”youtube.com”], iframe[src*=”vimeo.com”]’).each(function() {
if ( $(this).innerWidth() / $(this).innerHeight() > 1.5 ) {
$(this).wrap(“<div class=’widescreen flex-video’/>”);
} else {
$(this).wrap(“<div class=’flex-video’/>”);
}
});
})(jQuery);
}/*
Smooth Scrolling JS
Automatically detects changes to the pages hash and scrolls the user to the corresponding element. Checks on load if there is a hash, and attempts to find it.
Element should be set up with the following attributes:
<div data-scroll-name=’UNIQUENAME’
data-scroll-speed=’Jquery Speed’ optional, defaults to ‘slow’
data-scroll=offset=’-200′ offset in px you’d like the scroll to stop at. Good for accomodating header bars. Defaults to -50.
>Call the watcher to queue up the doer
*/
//Watcher
function watchForSmoothScrolls(){
jQuery(window).bind(‘hashchange’, function(){
var newHash = location.hash.substring(1);
scrollTo(newHash);
});
var newHash = location.hash.substring(1);
scrollTo(newHash);
}//Doer
function scrollTo(anchor){
var $elem = jQuery(“[data-scroll-name='”+ anchor +”‘]”);
if($elem.length == 0){
console.warn(‘Attempted to auto-scroll to element with data-scroll-name [‘ + anchor + ‘], but could not find any elements with that name.’);
return false;
}
var scroll_speed = $elem.attr(‘data-scroll-speed’);
if(!scroll_speed){
scroll_speed = ‘slow’;
}
var scroll_offset = parseInt($elem.attr(‘data-scroll-offset’));
if(!scroll_offset){
scroll_offset = -100;
}jQuery(‘html,body’).animate({scrollTop: ($elem.offset().top + scroll_offset)},scroll_speed);
}/*
Full size hero videos
HTML (put directly in banner-block, parent is full size. Have overflow hidden.)
<div id=’hero-vid-holder’>
<iframe src=”http://player.vimeo.com/video/<?= $hero_vid ?>?background=1&loop=1″ width=”100%” height=”100%” frameborder=”0″ webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>CSS
#hero-vid-holder {
width: 100%;
height: 775px;
iframe {
width: 100%;
height: 100%;
}
}
*///Watcher
function watchForHeroVideos(){
jQuery(window).on(‘resize’, heroVideoSizer).resize();
}//Doer
function heroVideoSizer(){
$container = jQuery(‘#hero-vid-holder’);
aspect_ratio = 9 / 16;
min_height = $container.parent().height();
window_width = jQuery(window).width();
container_height = aspect_ratio * window_width;if(container_height < min_height){
//Center the vid
margin_left = -1 * ((min_height – container_height) / 2);//Set the width
container_width = min_height / aspect_ratio;
container_height = ‘100%’;} else {
//Set the height
container_width = ‘100%’;
margin_left = ‘0px’;
}$container
.css(‘height’, container_height)
.css(‘width’, container_width)
.css(‘margin-left’, margin_left);
}/*
For when you have to validate an email. Works with black magic
*/
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}/*
Video modals
Simple use:
<div data-video-url='<?= $url ?>’>Video!</div>With an image + mask
<div class=”video-with-overlay” data-video-url='<?= $url ?>’>
” />
<div>
/assets/images/homepage-video-mask.png” />
<i class=”fa fa-play-circle-o” aria-hidden=”true”></i>
</div>
</div>
*/function registerVideoModals(){
jQuery(“[data-video-url]”).each(function(){
$this = jQuery(this);
video_url = $this.attr(“data-video-url”);if (/vimeo/i.test(video_url)) {
//IN
// https://vimeo.com/16536655
//OUT
// https://player.vimeo.com/video/16536655
video_id = /[^/]*$/.exec(video_url)[0];
video_iframe_src = “http://player.vimeo.com/video/” + video_id;
this_id = “video-modal-” + guid();
iframe = jQuery(“<iframe src='” + video_iframe_src + “‘ frameborder=’0′ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>”);
close_button = jQuery(“<button class=’close-button’ data-close aria-label=’Close video’ type=’button’>”)
.append(jQuery(‘<i class=”fa fa-times-circle-o” aria-hidden=”true”></i>’));
modal = jQuery(“<div class=’reveal video-modal’ id='” + this_id + “‘ data-reveal data-reset-on-close=’true’>”)
.append(close_button)
.append(iframe);jQuery(“body”).append(modal);
$this.attr(“data-open”, this_id);
var elem = new Foundation.Reveal(modal);
}});
}function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + ‘-‘ + s4() + ‘-‘ + s4() + ‘-‘ +
s4() + ‘-‘ + s4() + s4() + s4();
}function bindFileUploads(){
jQuery(‘.gf_file_upload input’).bind(‘change’, function(){
fpath = jQuery(this).val();
filename = fpath.split(“\\”).pop();
jQuery(‘.gf_file_upload label’).attr(‘data-filename’, filename).attr(‘data-status’, ‘DONE’);});
}