I’m trying to use Nivo’s banner slider plugin (http://nivo.dev7studios.com/) and Kwick’s plugin for sliding door navbar menu (http://www.kriesi.at/wp-content/extra_data/kwicks_tutorial/kwicks_final.html) on single page. However, everything seems to work perfect in Firefox and chrome but IE throws an error.
I’m new to jQuery. I also tried using noconflict() method but i think i’m not doing it rite.
Please have a look in to it.
HTML File Code :
<html>
<head>
<style type='text/css'>
#slider {
position:relative;
//See the "style-pack" below for image
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
</style>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type='text/javascript' src='kwicks.js'></script>
<script type='text/javascript' src='custom.js'></script>
<!-- Slider Code -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500, //Slide transition speed
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
<!-- Slider Code end-->
</head>
<body>
<center>
<div id="slider">
<img src="images/walle.jpg" alt="" />
<img src="images/monstersinc.jpg" alt="" />
<img src="images/nemo.jpg" alt="" />
<img src="images/up.jpg" alt="" />
</div>
</center>
<br><br>
<center>
<div class="navigation_menu" align="center">
<ul class="kwicks">
<li id="kwick1"><a href="#">Home</a></li>
<li id="kwick2"><a href="#">Contact</a></li>
<li id="kwick3"><a href="#">Downloads</a></li>
<li id="kwick4"><a href="#">Search</a></li>
</ul>
</div></center>
</center>
</body>
</html>
Kwicks.js File Code :
(function($){
$.fn.kwicks = function(options) {
var defaults = {
isVertical: false,
sticky: false,
defaultKwick: 0,
event: 'mouseover',
spacing: 0,
duration: 500
};
var o = $.extend(defaults, options);
var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height
var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top
return this.each(function() {
container = $(this);
var kwicks = container.children('li');
var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // normWoH = Normal Width or Height
if(!o.max) {
o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
} else {
o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
}
// set width of container ul
if(o.isVertical) {
container.css({
width : kwicks.eq(0).css('width'),
height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'
});
} else {
container.css({
width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',
height : kwicks.eq(0).css('height')
});
}
// pre calculate left or top values for all kwicks but the first and last
// i = index of currently hovered kwick, j = index of kwick we're calculating
var preCalcLoTs = []; // preCalcLoTs = pre-calculated Left or Top's
for(i = 0; i < kwicks.size(); i++) {
preCalcLoTs[i] = [];
// don't need to calculate values for first or last kwick
for(j = 1; j < kwicks.size() - 1; j++) {
if(i == j) {
preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing) : j * o.min + (j * o.spacing);
} else {
preCalcLoTs[i][j] = (j <= i ? (j * o.min) : (j-1) * o.min + o.max) + (j * o.spacing);
}
}
}
// loop through all kwick elements
kwicks.each(function(i) {
var kwick = $(this);
// set initial width or height and left or top values
// set first kwick
if(i === 0) {
kwick.css(LoT, '0px');
}
// set last kwick
else if(i == kwicks.size() - 1) {
kwick.css(o.isVertical ? 'bottom' : 'right', '0px');
}
// set all other kwicks
else {
if(o.sticky) {
kwick.css(LoT, preCalcLoTs[o.defaultKwick][i]);
} else {
kwick.css(LoT, (i * normWoH) + (i * o.spacing));
}
}
// correct size in sticky mode
if(o.sticky) {
if(o.defaultKwick == i) {
kwick.css(WoH, o.max + 'px');
kwick.addClass('active');
} else {
kwick.css(WoH, o.min + 'px');
}
}
kwick.css({
margin: 0,
position: 'absolute'
});
kwick.bind(o.event, function() {
// calculate previous width or heights and left or top values
var prevWoHs = []; // prevWoHs = previous Widths or Heights
var prevLoTs = []; // prevLoTs = previous Left or Tops
kwicks.stop().removeClass('active');
for(j = 0; j < kwicks.size(); j++) {
prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/, '');
prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/, '');
}
var aniObj = {};
aniObj[WoH] = o.max;
var maxDif = o.max - prevWoHs[i];
var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
kwick.addClass('active').animate(aniObj, {
step: function(now) {
// calculate animation completeness as percentage
var percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio : 1;
// adjsut other elements based on percentage
kwicks.each(function(j) {
if(j != i) {
kwicks.eq(j).css(WoH, prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
}
if(j > 0 && j < kwicks.size() - 1) { // if not the first or last kwick
kwicks.eq(j).css(LoT, prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
}
});
},
duration: o.duration,
easing: o.easing
});
});
});
if(!o.sticky) {
container.bind("mouseleave", function() {
var prevWoHs = [];
var prevLoTs = [];
kwicks.removeClass('active').stop();
for(i = 0; i < kwicks.size(); i++) {
prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/, '');
prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/, '');
}
var aniObj = {};
aniObj[WoH] = normWoH;
var normDif = normWoH - prevWoHs[0];
kwicks.eq(0).animate(aniObj, {
step: function(now) {
var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif : 1;
for(i = 1; i < kwicks.size(); i++) {
kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
if(i < kwicks.size() - 1) {
kwicks.eq(i).css(LoT, prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
}
}
},
duration: o.duration,
easing: o.easing
});
});
}
});
};
})(jQuery);
jquery.nivo.slider.pack.js File Code :
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(9($){$.1k.1o=9(2b){b 3=$.2g({},$.1k.1o.21,2b);N g.H(9(){b 4={f:0,u:\'\',W:0,r:\'\',L:n,1j:n,1S:n};b 5=$(g);5.1T(\'7:4\',4);5.e(\'2o\',\'2m\');5.1f(\'1o\');b d=5.2n();d.H(9(){b l=$(g);b 1t=\'\';6(!l.J(\'B\')){6(l.J(\'a\')){l.1f(\'7-2h\');1t=l}l=l.1m(\'B:1r\')}b 18=l.x();6(18==0)18=l.t(\'x\');b 1b=l.y();6(1b==0)1b=l.t(\'y\');6(18>5.x()){5.x(18)}6(1b>5.y()){5.y(1b)}6(1t!=\'\'){1t.e(\'P\',\'1q\')}l.e(\'P\',\'1q\');4.W++});6(3.19>0){6(3.19>=4.W)3.19=4.W-1;4.f=3.19}6($(d[4.f]).J(\'B\')){4.u=$(d[4.f])}k{4.u=$(d[4.f]).1m(\'B:1r\')}6($(d[4.f]).J(\'a\')){$(d[4.f]).e(\'P\',\'1A\')}5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\');23(b i=0;i<3.h;i++){b G=U.29(5.x()/3.h);6(i==3.h-1){5.O($(\'<D A="7-c"></D>\').e({2a:(G*i)+\'1c\',x:(5.x()-(G*i))+\'1c\'}))}k{5.O($(\'<D A="7-c"></D>\').e({2a:(G*i)+\'1c\',x:G+\'1c\'}))}}5.O($(\'<D A="7-K"><p></p></D>\').e({P:\'1q\',z:3.1U}));6(4.u.t(\'w\')!=\'\'){b w=4.u.t(\'w\');6(w.24(0,1)==\'#\')w=$(w).1d();$(\'.7-K p\',5).1d(w);$(\'.7-K\',5).1z(3.o)}b m=0;6(!3.1p&&d.1g>1){m=1E(9(){F(5,d,3,n)},3.1u)}6(3.S){5.O(\'<D A="7-S"><a A="7-27">2k</a><a A="7-25">2i</a></D>\');6(3.1R){$(\'.7-S\',5).26();5.1V(9(){$(\'.7-S\',5).2j()},9(){$(\'.7-S\',5).26()})}$(\'a.7-27\',5).1C(\'1F\',9(){6(4.L)N n;T(m);m=\'\';4.f-=2;F(5,d,3,\'1y\')});$(\'a.7-25\',5).1C(\'1F\',9(){6(4.L)N n;T(m);m=\'\';F(5,d,3,\'1x\')})}6(3.M){b 14=$(\'<D A="7-M"></D>\');5.O(14);23(b i=0;i<d.1g;i++){6(3.1P){b l=d.1B(i);6(!l.J(\'B\')){l=l.1m(\'B:1r\')}6(3.1O){14.O(\'<a A="7-1s" 1a="\'+i+\'"><B E="\'+l.t(\'1a\')+\'" 2e="" /></a>\')}k{14.O(\'<a A="7-1s" 1a="\'+i+\'"><B E="\'+l.t(\'E\').2l(3.1M,3.1N)+\'" 2e="" /></a>\')}}k{14.O(\'<a A="7-1s" 1a="\'+i+\'">\'+(i+1)+\'</a>\')}}$(\'.7-M a:1B(\'+4.f+\')\',5).1f(\'1h\');$(\'.7-M a\',5).1C(\'1F\',9(){6(4.L)N n;6($(g).2f(\'1h\'))N n;T(m);m=\'\';5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\');4.f=$(g).t(\'1a\')-1;F(5,d,3,\'1s\')})}6(3.1X){$(2s).2F(9(1D){6(1D.1Q==\'2D\'){6(4.L)N n;T(m);m=\'\';4.f-=2;F(5,d,3,\'1y\')}6(1D.1Q==\'2C\'){6(4.L)N n;T(m);m=\'\';F(5,d,3,\'1x\')}})}6(3.1W){5.1V(9(){4.1j=Q;T(m);m=\'\'},9(){4.1j=n;6(m==\'\'&&!3.1p){m=1E(9(){F(5,d,3,n)},3.1u)}})}5.2E(\'7:X\',9(){4.L=n;$(d).H(9(){6($(g).J(\'a\')){$(g).e(\'P\',\'1q\')}});6($(d[4.f]).J(\'a\')){$(d[4.f]).e(\'P\',\'1A\')}6(m==\'\'&&!4.1j&&!3.1p){m=1E(9(){F(5,d,3,n)},3.1u)}3.20.1w(g)})});9 F(5,d,3,17){b 4=5.1T(\'7:4\');6((!4||4.1S)&&!17)N n;3.1Y.1w(g);6(!17){5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\')}k{6(17==\'1y\'){5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\')}6(17==\'1x\'){5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\')}}4.f++;6(4.f==4.W){4.f=0;3.2d.1w(g)}6(4.f<0)4.f=(4.W-1);6($(d[4.f]).J(\'B\')){4.u=$(d[4.f])}k{4.u=$(d[4.f]).1m(\'B:1r\')}6(3.M){$(\'.7-M a\',5).2B(\'1h\');$(\'.7-M a:1B(\'+4.f+\')\',5).1f(\'1h\')}6(4.u.t(\'w\')!=\'\'){b w=4.u.t(\'w\');6(w.24(0,1)==\'#\')w=$(w).1d();6($(\'.7-K\',5).e(\'P\')==\'1A\'){$(\'.7-K p\',5).2c(3.o,9(){$(g).1d(w);$(g).1z(3.o)})}k{$(\'.7-K p\',5).1d(w)}$(\'.7-K\',5).1z(3.o)}k{$(\'.7-K\',5).2c(3.o)}b i=0;$(\'.7-c\',5).H(9(){b G=U.29(5.x()/3.h);$(g).e({y:\'R\',z:\'0\',11:\'10(\'+4.u.t(\'E\')+\') Z-Y -\'+((G+(i*G))-G)+\'1c 0%\'});i++});6(3.j==\'1l\'){b V=2H 2G("1K","12","1H","1e","1G","13","1I","1v");4.r=V[U.22(U.1l()*(V.1g+1))];6(4.r==2I)4.r=\'1v\'}6(3.j.2p(\',\')!=-1){b V=3.j.2t(\',\');4.r=$.2A(V[U.22(U.1l()*V.1g)])}4.L=Q;6(3.j==\'2r\'||3.j==\'1K\'||4.r==\'1K\'||3.j==\'12\'||4.r==\'12\'){b q=0;b i=0;b h=$(\'.7-c\',5);6(3.j==\'12\'||4.r==\'12\')h=$(\'.7-c\',5).1n();h.H(9(){b c=$(g);c.e(\'1L\',\'R\');6(i==3.h-1){I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o)},(s+q))}q+=1i;i++})}k 6(3.j==\'2q\'||3.j==\'1H\'||4.r==\'1H\'||3.j==\'1e\'||4.r==\'1e\'){b q=0;b i=0;b h=$(\'.7-c\',5);6(3.j==\'1e\'||4.r==\'1e\')h=$(\'.7-c\',5).1n();h.H(9(){b c=$(g);c.e(\'28\',\'R\');6(i==3.h-1){I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o)},(s+q))}q+=1i;i++})}k 6(3.j==\'1G\'||3.j==\'2u\'||4.r==\'1G\'||3.j==\'13\'||4.r==\'13\'){b q=0;b i=0;b v=0;b h=$(\'.7-c\',5);6(3.j==\'13\'||4.r==\'13\')h=$(\'.7-c\',5).1n();h.H(9(){b c=$(g);6(i==0){c.e(\'1L\',\'R\');i++}k{c.e(\'28\',\'R\');i=0}6(v==3.h-1){I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o)},(s+q))}q+=1i;v++})}k 6(3.j==\'1I\'||4.r==\'1I\'){b q=0;b i=0;$(\'.7-c\',5).H(9(){b c=$(g);b 1J=c.x();c.e({1L:\'R\',y:\'s%\',x:\'R\'});6(i==3.h-1){I(9(){c.C({x:1J,z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({x:1J,z:\'1.0\'},3.o)},(s+q))}q+=1i;i++})}k 6(3.j==\'1v\'||4.r==\'1v\'){b i=0;$(\'.7-c\',5).H(9(){$(g).e(\'y\',\'s%\');6(i==3.h-1){$(g).C({z:\'1.0\'},(3.o*2),\'\',9(){5.16(\'7:X\')})}k{$(g).C({z:\'1.0\'},(3.o*2))}i++})}}};$.1k.1o.21={j:\'1l\',h:15,o:2v,1u:2y,19:0,S:Q,1R:Q,M:Q,1P:n,1O:n,1M:\'.1Z\',1N:\'2x.1Z\',1X:Q,1W:Q,1p:n,1U:0.8,1Y:9(){},20:9(){},2d:9(){}};$.1k.1n=[].2w})(2z);',62,169,'|||settings|vars|slider|if|nivo||function||var|slice|kids|css|currentSlide|this|slices||effect|else|child|timer|false|animSpeed||timeBuff|randAnim|100|attr|currentImage||title|width|height|opacity|class|img|animate|div|src|nivoRun|sliceWidth|each|setTimeout|is|caption|running|controlNav|return|append|display|true|0px|directionNav|clearInterval|Math|anims|totalSlides|animFinished|repeat|no|url|background|sliceDownLeft|sliceUpDownLeft|nivoControl||trigger|nudge|childWidth|startSlide|rel|childHeight|px|html|sliceUpLeft|addClass|length|active|50|paused|fn|random|find|_reverse|nivoSlider|manualAdvance|none|first|control|link|pauseTime|fade|call|next|prev|fadeIn|block|eq|live|event|setInterval|click|sliceUpDown|sliceUpRight|fold|origWidth|sliceDownRight|top|controlNavThumbsSearch|controlNavThumbsReplace|controlNavThumbsFromRel|controlNavThumbs|keyCode|directionNavHide|stop|data|captionOpacity|hover|pauseOnHover|keyboardNav|beforeChange|jpg|afterChange|defaults|floor|for|substr|nextNav|hide|prevNav|bottom|round|left|options|fadeOut|slideshowEnd|alt|hasClass|extend|imageLink|Next|show|Prev|replace|relative|children|position|indexOf|sliceUp|sliceDown|window|split|sliceUpDownRight|500|reverse|_thumb|3000|jQuery|trim|removeClass|39|37|bind|keypress|Array|new|undefined'.split('|'),0,{}))
custom.js File Code :
function my_kwicks(){
$('.kwicks').kwicks({
duration: 300,
max: 200,
spacing: 0
});
}
$(document).ready(function(){
my_kwicks();
});
nivo-slider.css File Code :
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:70%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
//right:0px;
left:908px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
style.css File Code :
body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
background-image:url(no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 125px;
height: 40px;
margin-right: 0px;
background-image:url(kwicks_sprite.jpg);
background-repeat:no-repeat;
}
.kwicks a{
display:block;
height:40px;
text-indent:-9999px;
outline:none;
}
#kwick1 {
background-position:0px 0px;
}
#kwick2 {
background-position:-200px 0px;
}
#kwick3 {
background-position:-400px 0px;
}
#kwick4 {
background-position:-600px 0px;
}
#kwick1.active, #kwick1:hover {
background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
background-position: -600px bottom;
}
#kwick1 a{
background-image:url(end.jpg);
background-repeat:no-repeat;
background-position: left 0px;
}
#kwick1 a:hover{
background-position: left -80px;
}
#kwick4 a{
background-image:url(end.jpg);
background-repeat:no-repeat;
background-position: right -40px;
}
#kwick4 a:hover{
background-position: right -120px;
}
Somebody Please Help.
that line should be on top of all your js codes…
you may want to put
$('#slider').nivoSlider({ ...... })inside the ready handler in custom.js file. So that everything will be like this,and your custom.js file is like this,
and for best expected result, your html should be valid. validate your page here.