CODEWITHSUNDEEP
javascriptjquerykwicks
Eric Brown
Eric Brown

Reputation: 51

Using two of the same jQuery plugin (Kwicks) on the same page

I'm using the jQuery plugin 'Kwicks' on a site and having some conflicts.The plugin is working fine for the navigation, but I want to do the same thing for a separate, smaller nav (still using Kwicks) for social media at the top of the page. I've tried everything a novice such as myself could do but still cannot get the second Kwicks nav to function.

Here is the site: http://www.webexplosive.com/accu1

Upvotes: 0

Views: 621

Answers (2)

JP Hellemons
JP Hellemons

Reputation: 6047

jsFiddle: http://jsfiddle.net/jphellemons/CXu4n/

$('.kwicks-horizontal').kwicks({
    size: 125,
    maxSize : 250,
    spacing : 2,
    behavior: 'menu' ,
    easing: 'easeOutBounce' ,
    isVertical: false
});
$('.kwicks-vertical').kwicks({
    size: 200,
    maxSize : 300,
    spacing : 1,
    behavior: 'menu' ,
    easing: 'easeOutBounce' ,
    isVertical: true
});

Upvotes: 0

Chris
Chris

Reputation: 6631

First of all include you're javascript files into the head section of the page and its only needed once.

<head>
 <script src='js/jquery-1.8.1.min.js' type='text/javascript'></script>
 <script src='js/jquery.easing.1.3.js' type='text/javascript'></script>
 <script src='js/jquery.kwicks.js' type='text/javascript'></script>
</head>

Second you're reference to the menus are the same, so the plugin will be confused and will only get one ( depends on how the plugin handles the selector )

So to fix the problem give you're ul tags a id attribute like menu1 and menu2 ( unique )

<ul class='kwicks1 kwicks-vertical' id='menu1'>
    ...
</ul>
<ul class='kwicks kwicks-horizontal' id='menu2'>
   ...
</ul>

<script>
$(document).ready(function () {
    $('#menu1').kwicks({
        size: 125,
        maxSize: 250,
        spacing: 2,
        behavior: 'menu',
            easing: 'easeOutBounce',
            isVertical: true
    });
    $('#menu2').kwicks({
                size: 125,
                maxSize : 250,
                spacing : 2,
                behavior: 'menu' ,
                easing: 'easeOutBounce'
            });
});
</script>

Upvotes: 1

Related Questions