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

Question

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

633 Views Asked by Eric Brown At 19 April 2025 at 13:13

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

Original Q&A

There are 2 best solutions below

JP Hellemons On 01 November 2012 at 12:47

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
});

**Chris** · Accepted Answer

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>

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

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in KWICKS

Trending Questions

Popular # Hahtags

Popular Questions