I have been grappling with a coding problem for hours on end and I have hit a wall. Assistance is needed.
On a staging page, the code was tested and found to be functioning properly. However, on the live page, the same code fails to respond as expected. I am struggling to understand why kwicks jq appears to be disregarding the HTML in the header of jujumamablog.com. <-- this is my query.
I am utilizing kwicks for jQuery. To ensure that the code was working correctly before attempting integration into the live site, a sample page was created. The sample page can be accessed here:
The code for the workingsample page is detailed below:
<!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 initially thought integrating this would be a straightforward 'plug-and-play' scenario. How mistaken I was.
The objective was to smoothly run this stylish piece. Despite being aware of other issues with the main site (jujumamablog.com), such as load time concerns, I was instructed to ignore those for now.
Edit-----------
I need to clarify further. The above code does function, but I am perplexed by the fact that when I attempt to insert it into the live page (jujumamablog.com, where there are other scripts and whatnot) it ceases to work.
Thank you in advance.