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

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; ?>

I wonder if you need to move the `
` as a direct child of `#tabs` (move outside of `
`) — Patrick Moore, Jan 17 '14 at 20:24
@SetSailMedia Removing the div and puttting the ul as a direct child of tabs didn't work. Anyway, it was working fine with that structure before. — David Matos, Jan 17 '14 at 20:30
@HüseyinBABAL You can inspect the source code in the page. Anyway, I'll edit my post to add a bit of the HTML, the whole thing is really long :) — David Matos, Jan 17 '14 at 20:30

Hüseyin BABAL · Accepted Answer · 2014-01-17T21:03:56.967

2

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.

edited Jan 17 '14 at 21:03

answered Jan 17 '14 at 20:44

Hüseyin BABAL

15,400
4
51
73

Thanks a lot, that resolved part of the problem! (sorry I can't upvote, not enough reputation points yet). Now the only problem is that whenever I click on a tab, the page moves down instead of staying in the same position as it did before. – David Matos Jan 17 '14 at 20:51
Your new problem is a conflict with localScroll.js. Need to find a way to make your tabs not influenced by that script. +1 to Huseyin – Patrick Moore Jan 17 '14 at 21:02
I have added solution for scroll problem – Hüseyin BABAL Jan 17 '14 at 21:04
Scroll problem fixed! Again, thanks a lot to you both! – David Matos Jan 17 '14 at 21:12

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

1 Answers1