Home/ Questions/Q 384697
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T15:24:21+00:00

I’ve been working on my problem for the past few hours and am at

  • 0

I’ve been working on my problem for the past few hours and am at the end of my rope. I need help.

I have a staging page where I tested the code and verfied that it works, but on the live page, the code refuses to budge. I can’t figure out why kwicks jq seems to be ignoring the html on the jujumamablog.com header. <– this is my question.

I’m using the kwicks for jQuery. I created a working sample page so I could be sure that the code was working before trying to integrate into the live area of the site. The sample page can be found here: http://jujumamablog.com/jujumama/dev.html

The code for the workingsample page is as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
    <title>Kwicks Examples: Example 1</title>
    <script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
    <script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>

    <script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
            <style type="text/css">

    /* defaults for all examples */
    .kwicks {
        list-style: none;
        position: relative;
        margin: 0;
        padding: 0;
    }
    .kwicks li{
        display: block;
        overflow: hidden;
        padding: 0;
        cursor: pointer;
    }

    /* example 1 */
    #example1 .kwicks li{
        float: left;
        width: 98px;
        height: 200px;
        margin-right: 2px;
    }
    #example1 #kwick1 { 
        background-color: #53b388;
    }
    #example1 #kwick2 {
        background-color: #5a69a9;
    }
    #example1 #kwick3 {
        background-color: #c26468;
    }
    #example1 #kwick4 { 
        background-color: #bf7cc7;
    }
    #example1 #kwick5 { 
        background-color: #bf7cc7;
        margin-right: none;
    }
    </style>

<script type="text/javascript">
    $().ready(function() {
        $('.kwicks').kwicks({
            max : 205,
            spacing : 5
        });
    });
</script>

</head>

<body>
        <div id="example1">
            <ul class="kwicks">

                <li id="kwick1"></li>
                <li id="kwick2"></li>
                <li id="kwick3"></li>
                <li id="kwick4"></li>
                <li id="kwick5"></li>
            </ul>
        </div>
        <div style="clear:both;"></div>

</body>

I was hoping that this would be a fairly simple ‘plug-and-play’ instance. Boy, was I wrong.

My task was to get this slick piece running smoothly. I know there are other issues with the main site (jujumamablog.com), load time specifically, which I was told to ignore for the time being.

Edit———–

I need to be a bit more clear here. The above code works, I’m wondering why, when I try to put the code into the live page (jujumamablog.com, where there are other scripts and -ish) that this stops working.

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks like you are including jQuery a second time, and since all those plugins are just methods of jQuery, you blow them all away.

    The first one is on line 65, and the second is on line 91. All the plugins added between those two, are destroyed.

    As a side note, you should consider consolidating all those scripts into one, then compress them with YUI compressor or whatever you prefer, and finally, if possible, put it at the bottom instead of at the top.

    • 0