https://www.spaldingplasticsurgery.com/assets/js/custom.js

1var $ = jQuery.noConflict();
2$(document).ready(function () {
3
4    //commonly accesed DOM elements
5    var main = $('.on-canvas');
6    var mobileNav = $('.mobile-navigation');
7    var offCanvasClick = $('.off-canvas-click');
8    var header = $('header');
9
10    //page width determines offsets or whether a function should run or not
11    //for example parallax() only works on desktop sizes and up
12    var pageWidth = $(window).width();
13
14    //Smooth scroll function (currently not in use due to foundation's media query conflicts)
15    $('body').on('click', '.scroller', function () {
16        var offset = function () {
17            if (pageWidth < 1024) {
18                //mobile header size
19                return 70;
20            } else {
21                //desktop header size
22                return 208;
23            }
24        };
25        $('html, body').animate({
26            scrollTop: $($.attr(this, 'href')).offset().top - offset()
27        }, 800, 'easeOutQuart');
28    });
29
30    $('.js-menu-toggle').on('click', function (e) {
31        e.preventDefault();
32        if (main.hasClass('menu-is-open')) {
33            toggleMenu();
34        } else {
35            toggleMenu();
36        }
37    });
38
39    //triggers the click on main content, to close mobile nav
40    //currently not used
41    //todo: figure out a way to allow this to work with jquery.swipe
42    offCanvasClick.on('click', function (e) {
43        e.preventDefault();
44        if (offCanvasClick.hasClass('active')) {
45            toggleMenu();
46        }
47    });
48
49    //swipe functionality for mobile nav
50    main.swipe({
51        swipeLeft: function (event, direction, distance, duration, fingerCount) {
52            if (pageWidth < 1024) {
53                toggleMenu();
54            }
55        },
56        swipeRight: function (event, direction, distance, duration, fingerCount) {
57            if (main.hasClass('menu-is-open')) {
58                if (pageWidth < 1024) {
59                    toggleMenu();
60                }
61            }
62        }
63    });
64
65    //Menu toggle function
66    function toggleMenu() {
67
68        if (!main.hasClass('menu-is-open')) {
69            $('.js-menu-toggle .title').html('Close');
70        } else {
71            $('.js-menu-toggle .title').html('Menu');
72        }
73
74        //trigger classes for displaying mobile nav
75        main.toggleClass('menu-is-open');
76        mobileNav.toggleClass('menu-is-open');
77        //offCanvasClick.toggleClass('active');
78    }
79
80    //open (or close) submenu items in the lateral menu. Close all the other open submenu items.
81    //@Events: menu:clicked
82    $('.mobile-navigation .has-sub > a, .sidebar .has-sub > a').on('click', function (e) {
83        if (!$(this).parents('header').length && !$(this).parents('footer').length) {
84            e.preventDefault();
85        }
86        if ($(this).hasClass('submenu-open')) {
87            $(this).removeClass('submenu-open').next('ul').slideUp(400).end().trigger("menu:clicked", [$(this)]);
88        } else {
89            $(this).addClass('submenu-open').next('ul').slideDown(400).end().trigger("menu:clicked", [$(this)]);
90            $(this).parent('.has-sub').siblings('.has-sub').children('a').removeClass('submenu-open').next('ul').slideUp(400);
91        }
92    });
93
94    //Bind to event created the menu system
95    $(document).on("menu:clicked", function (event, el) {
96        //if sidebar is clicked
97        if (el.parents('.sidebar').length) {
98
99        }
100        //if mobile nav is clicked
101        else {
102
103        }
104    });
105
106    //generate sub nav scroller links
107    //dropdown();
108
109
110    //new dropdown quick links
111    function dropdown() {
112        if ($('body').hasClass('sub') && !$('.sub-content').hasClass('js-no-links')) {
113            var count = 0;
114            $('.sub-content .content').prepend('<div class="divider"></div>');
115            $('.sub-content .content').prepend('<ul class="subnav">');
116            var ul = $('.subnav');
117            ul.append('<li class="trigger"><a>Select a section<span class="hide-phone"> to jump to</span><span class="arrow"></span></a></li>');
118            var mainLi = $('.trigger');
119            mainLi.append('<ul>');
120            $('.sub-content .content > h3').each(function () {
121                if (!$(this).hasClass('js-exclude')) {
122                    var link = 'title' + count;
123                    $(this).attr('id', link);
124                    var li = document.createElement('li');
125                    var a = document.createElement('a');
126                    $(a).text($(this).text());
127                    $(a).addClass('arrow');
128                    $(a).addClass('scroller');
129                    $(a).attr({href: '#' + link});
130                    $(li).append(a);
131                    mainLi.find('ul').append(li);
132                    count++;
133                }
134            });
135        }
136    }
137
138    $('.subnav .trigger').on('click', function (e) {
139        $(this).find('ul').slideToggle(200);
140    });
141
142
143    function parallax() {
144        var scrolled = $(window).scrollTop();
145        //custom parallax animations
146        //$('.feat > .row, .feat > .row-outer .row').css('bottom',-(scrolled*0.4)+'px');
147        //$('.feat > .row, .feat > .row-outer .row').css('opacity',( 1 - scrolled * 0.62 / 100));
148        /*$('.feat > .row-outer').css('opacity',( 1 - scrolled * 0.22 / 100));*/
149        $('.main-slider .row-outer').css('opacity', ( 1 - scrolled * 0.32 / 100));
150    }
151
152    function headerAnimate() {
153        var scrollTop = $(window).scrollTop();
154        //remove .js-animate from the header HTML in order to prevent header animation
155        if (header.hasClass('js-animate')) {
156            //scroll > n, where n is an arbitrary value, can be different per site
157            if (scrollTop > 120) {
158                header.addClass('scrolled');
159            } else {
160                header.removeClass('scrolled');
161            }
162        }
163    }
164
165    headerAnimate();
166
167    //functions to run on scroll
168    $(window).scroll(function () {
169        //only run parallax if on desktop screen
170        //(mobile parallax interferes with content consumption)
171        if (pageWidth > 1024) {
172            parallax();
173            headerAnimate();
174        }
175    });
176
177    $('.s3accordion > .s3panel > a').on('click', function (e) {
178        e.preventDefault();
179        if (!$(this).parent().hasClass('js-opened')) {
180            $('.js-opened').find('div').slideUp();
181            $('.js-opened').removeClass('js-opened');
182            $(this).next().slideDown();
183            $(this).parent().addClass('js-opened');
184        } else {
185            $(this).next().slideUp();
186            $(this).parent().removeClass('js-opened');
187        }
188    });
189
190    // Scroller - function to scroll down to hashes and consider sticky header/nav
191    if (window.location.hash) {
192        var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
193        var div = "#" + hash;
194        var offset = function () {
195            if (pageWidth < 800) {
196                return 80;
197            } else if (pageWidth < 1024) {
198                //mobile header size
199                return 80;
200            } else {
201                //desktop header size
202                return 200;
203            }
204        };
205        jQuery('html, body').animate({
206            scrollTop: jQuery(div).offset().top - offset()
207        }, 1000, 'easeOutQuart');
208    }
209
210    //form update
211    $('.s3-form').on('valid', function () {
212        $(this).find('.submit').text('Sending...').addClass("is-disabled");
213    });
214
215    // Adds class="here" to active link
216    var pathArray = location.href.split('/');
217    var protocol = pathArray[0];
218    var host = pathArray[2];
219    var url = protocol + '//' + host;
220    $('.links a').each(function () {
221        if (window.location.href == url + $(this).attr('href')) {
222            $(this).addClass('here');
223            //also adds submenu-open to links with dropdowns
224            $(this).parents(".has-sub").addClass("sub-open");
225            $(this).parents(".has-sub").find("> a").addClass("submenu-open");
226        }
227    });
228
229    // WP Fixed Nav
230    if ($('#wpadminbar').length) {
231        $('#wpadminbar').appendTo('body');
232    }
233
234    // here / active function
235    function here() {
236        // adds class here to menu to be active
237        var pathArray = location.href.split('/');
238        var protocol = pathArray[0];
239        var host = pathArray[2];
240        var url = protocol + '//' + host;
241        $('.main-links a, .sub-links a').each(function () {
242            if (window.location.href == url + $(this).attr('href')) {
243                // clicks current category parent link so children are open
244                var category = $(this).parents('ul').attr('data-val');
245                $('.fixed-nav .main-links li.has-sub.' + category + '> a').click();
246
247                // adds here to current child link
248                $(this).addClass('here');
249            }
250        });
251    }
252
253    // active hamburger menu icon
254    $('.icon-holder .icon').on('click', function () {
255        $(this).toggleClass('active');
256        // toggle fixed menu
257        $('.fixed-nav').fadeToggle(350);
258        $('header').toggleClass('open-menu');
259
260        setTimeout(function () {
261            // return menu to default if close/re-open
262            $('.fixed-nav ul li.has-sub > a').removeClass('here');
263            $('.fixed-nav .sub-links ul').removeClass('active');
264            $('.fixed-nav .sub-links').removeClass('mobile-opened');
265            $('header').removeClass('child-open');
266
267            // run active state for menu after clearing
268            here();
269        }, 200);
270    });
271
272    // popup
273    $('.popup-video').magnificPopup({
274        type: 'iframe'
275    });
276
277    // fixed menu
278    $('.fixed-nav ul li.has-sub a').on('click', function(){
279        var val = $(this).attr('data-val');
280        var theme = $(this).attr('data-theme');
281
282        // active state
283        $('.fixed-nav .main-links ul li.has-sub a').removeClass('here');
284        $(this).addClass('here');
285
286        // show sub links if there is any
287        $('.fixed-nav .sub-links ul').removeClass('active');
288        $('.fixed-nav .sub-links ul.' + val).addClass('active');
289
290        // close gallery sublinks
291        $('.fixed-nav .sub-links ul.gallery a.has-links').removeClass('opened');
292        $('.fixed-nav .sub-links ul.gallery li ul').removeClass('opened').hide();
293
294        // toggle mobile class to slide nav
295        $('.fixed-nav .sub-links').addClass('mobile-opened');
296        $('header').addClass('child-open');
297    });
298
299    // add back functionality for mobile menu
300    $('.fixed-nav ul li.back a').on('click', function () {
301        $('.fixed-nav ul li.has-sub > a').removeClass('here');
302        $('.fixed-nav .sub-links').removeClass('mobile-opened');
303        $('header').removeClass('child-open');
304        $('.fixed-nav .sub-links ul').removeClass('active');
305        $('.fixed-nav .sub-links ul.gallery li ul').removeClass('opened').hide();
306        $('.fixed-nav .sub-links ul.gallery a.has-links').removeClass('opened');
307    });
308
309    // gallery popup
310    $('.gallery .popup-gallery').magnificPopup({
311        type: 'image',
312        gallery:{
313            enabled:true
314        }
315    });
316
317    // media accordions
318    $('.accordion-style .accordion-toggle').on('click', function(){
319        var tab = $(this).attr('data-val');
320        $('.accordion-style .accordion-content.' + tab).toggle();
321
322        equalheight('.js-equal-load > *');
323    });
324
325    // gallery links dropdown
326    $('body.gallery li.selector').on('click', function(){
327        if ( pageWidth < 1024 ) {
328            $(this).toggleClass('active');
329        }
330    });
331
332    // tabs
333    $('.tabs .tab-link').on('click', function(){
334        var tab = $(this).attr('data-val');
335        $('.tabs .tab-link, .tab-content .tab').removeClass('active');
336        $('.tabs .tab-link.' + tab).addClass('active');
337        $('.tab-content .tab.tab-' + tab).addClass('active');
338    });
339
340    // home doctor animations
341    $('.home-heart a.more-doc').on('click', function () {
342        var doc = $(this).attr('data-val');
343
344        $('.home-heart').removeClass('more-nassif more-amron').addClass('more-' + doc);
345    });
346
347    $('.home-heart a.back-btn').on('click', function () {
348        $('.home-heart').removeClass('more-nassif more-amron');
349    });
350
351    // show more media
352    $('.media-half a.show-more').on('click', function () {
353        $(this).parents('.half').find('.more-article').slideDown(350);
354        $(this).fadeOut(350);
355    });
356
357    // faq
358    $('.faq .ques .toggle').on('click', function () {
359
360        $('.faq .ques').removeClass('open');
361        $(this).parent().addClass('open');
362
363        // reset heights
364        equalheight('.js-equal > *');
365    });
366
367    //conditional form fields
368    $("[name='select-provider']").change(function () {
369        var value = $("[name='select-provider']").val();
370        if (value == "amron") {
371            $(".other-options").show();
372            $("#procedure").attr('required', 'required');
373            $("#referral").attr('required', 'required');
374        } else {
375            // $(".other-options").hide();
376            $(".other-options-two").hide();
377            // $("#procedure").removeAttr('required');
378            $("#referral").removeAttr('required');
379            $("#referral-source").removeAttr('required');
380        }
381    });
382
383    $("[name='referral']").change(function () {
384        var value = $("[name='referral']").val();
385        if (value === "family" || value === "doctor" || value === "website") {
386            $(".other-options-two").show();
387            $("#referral-source").attr('required', 'required');
388        } else {
389            $(".other-options-two").hide();
390            $("#referral-source").removeAttr('required');
391        }
392    });
393
394});