How can I include both jQuery UI tabs and LiquidSlider library in my page?

StackOverflow https://stackoverflow.com/questions/21195073

Question

I'm trying to build a website with a dynamic content area which should use the Liquid Slider javascript library to navigate between posts and jQuery UI tabs to switcht between tabs inside each post. The tabs were working fine before, but now that I've included Liquid Slider, the sliding effect works but the tabs won't. There are no errors on the javascript console.

Here's the website (click on "Viaturas" to navigate to the area I'm talking about).

Here's part of my header file:

<head>
    (...)
    <script src="<?php bloginfo('template_directory'); ?>/scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script> 
    <script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.scrollTo-1.4.3.1-min.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.liquid-slider-custom.min.js" type="text/javascript"></script>
</head>

<body>
    <script type="text/javascript">
        $(document).ready(function($) { (...)
         /* Slide navigation*/
            $('#slider-id').liquidSlider();

            /* Tabs navigation*/
            $("#tabs").tabs();

And here's a part of the HTML:

<div class="liquid-slider" id="slider-id">
?php $i = 0; if ($pageposts): ?>
    <?php global $post; ?>
        <?php foreach ($pageposts as $post): ?>
            <?php setup_postdata($post); ?>
            <div>
                <div class='vehicle-model-box'>
                    <span class='car-brand'>".get_post_meta(get_the_ID(),'custom_field_ID_2', true)."</span>
                    <span class='car-model'>".get_post_meta(get_the_ID(),'custom_field_ID_3', true)."</span>
                </div>
                <div id='tabs'>
                    <div class='vehicle-menu-box'>
                        <ul>
                            <li class='car-menu-item-first'><a href='#tab-caracteristicas'>CARACTERÍSTICAS</a></li>
                            <li class='car-menu-item'><a href='#tab-exterior'>EXTERIOR</a></li>
                            <li class='car-menu-item'><a href='#tab-interior'>INTERIOR</a></li>
                            <li class='car-menu-item'><a href='#tab-seguranca'>SEGURANÇA</a></li>
                            <li class='car-menu-item'><a href='#tab-extras'>EXTRAS</a></li>
                            <li class='car-menu-item'><a href='#tab-fotos'>FOTOS</a></li>
                            <li class='car-menu-item'><a href='#tab-partilhar'>PARTILHAR</a></li>
                            <li class='car-menu-item'><a href='#tab-licitar'>LICITAR</a></li>
                        </ul>
                    </div>
                    <div class='vehicle-image-box'>
                        <div id='tab-caracteristicas'></div>
                        <div id='tab-exterior'></div>
                        (... all the other tabs ...)
                    </div>
                </div>
                (... other content ...)
            </div>
        <?php endforeach; ?>
<?php endif; ?>

Was it helpful?

Solution

I think there is something wrong with your function calling order.

First you call: $('#slider-id').liquidSlider();. When you call this, it converts some divs to another elements. Second you call $("#tabs").tabs();. This time, your might not be able to converted ui tab. Maybe you should change order of those two functions.

Edit: Scroll problem.

You are also using jquery localscroll. You used it like $.localScroll({duration:800});. This will convert all your links like <a href="#the_id">your_text</a> to scroll button. To fix this, define a target like;

$('.menu-item').localScroll();

This will only scrollify your links on header.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top