Mobile View Issue: Days of week not shortening and dots not opening events pages

[culturecheese]

I thought I’d post here for what worked on our site. The issue was a conflict caused by following the Owl Carousel default instructions for inclusion. To fix the issue we used suggestions from this forum:
https://github.com/OwlFonk/OwlCarousel/issues/247

We did have a jquery conflict, as discussed here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

Our changes that worked were as followed.

1) From our header.php we removed the line of code we had added for owl carousel.
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script&gt;
This removed jquery being called by default with WP and by our added line of code. However, it made the owl carousel stop working soo….

2) We add noconflict wrappers to our script

<script type="text/javascript">
$(function(){
$('#cheese-carousel').owlCarousel({
navigation: true,
navigationText: [
"<a class='carousel-prev2'>test</a>",
"<a class='carousel-next2'>test</a>"
],
});
});

</script> 

changed to

<script type="text/javascript">
(function($) {
$('#cheese-carousel').owlCarousel({
navigation: true,
navigationText: [
"<a class='carousel-prev2'>test</a>",
"<a class='carousel-next2'>test</a>"
],
});
})(jQuery);

</script> 

3) Then we added the following to the end of our functions.php

add_action( 'wp_enqueue_scripts', 'bboyjuss_load_javascript_conditionally' );

function bboyjuss_load_javascript_conditionally() {
        wp_register_script( 'owl-script', get_stylesheet_directory_uri() . '/js/owl-carousel/owl.carousel.min.js', array('jquery'), false, true );
        wp_enqueue_script( 'owl-script' );

        wp_register_style('owl-style-carousel',  get_stylesheet_directory_uri() . '/js/owl-carousel/owl.carousel.css.');
        wp_enqueue_style('owl-style-carousel');

        wp_register_style('owl-style-theme',  get_stylesheet_directory_uri() . '/js/owl-carousel/owl.theme.css.');
        wp_enqueue_style('owl-style-theme');

        wp_register_style('owl-style-transition',  get_stylesheet_directory_uri() . '/js/owl-carousel/owl.transitions.css.');
        wp_enqueue_style('owl-style-transition');
}

And now both the calendar and owl carousel are working. Hope this works for you too Jon.

[Barry]

Fantastic, glad you figured it all out and thanks for sharing the final solution 🙂

[Author]

Posts