Hi,
I have a JQuery content slider that i am hoping to use on a site. I basically have various divs filled with information, which can then be swung left or right on the page via pagination or 'prev' & 'next' buttons. Now the problem seems to be with the aligning of the page numbers & 'prev'/'next' buttons, I cannot for the life of me get them to sit below my content, they only sit above it?!?! I have all the above code encapsulated within a div called 'documentsContent' which needs to be there (for other reasons), even though when i remove the start and end tag for this div, everything lines up great...Is this to do with floats? or something in the Javascript (of which i am not too clued up on!!
XHTML -
Code:
<div class="documentsContent">
<div id="mySlides">
<div><p>First Div</p></div>
<div><p>Second Div</p></div>
<div><p>Third Div</p></div>
<div><p>Fourth Div</p></div>
</div>
<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<span class="jFlowControl">4</span>
<span class="jFlowNext">Next</span>
</div>
</div>
CSS -
Code:
.documentsContent {
width: 500px;
float: left;
background: #edf4f4;
border: 1px solid #b8d5d4;
display: none;
margin-left: 25px;
padding: 15px 15px 0 0;
}
.documentsContent p {
padding-left: 15px;
line-height: 1.5em;
}
#myController {
float:left;
}
#myController span {
color: #FFF;
background: #000;
margin-right: 10px;
cursor: pointer;
}
#jFlowSlide{
border: 10px solid #F00;
}
#myController span.jFlowSelected {
background: #F00;
}
.jFlowPrev, .jFlowNext{
cursor: pointer;
}
#mySlides {
float: left;
}
and the JS -
Code:
(function(A){A.fn.jFlow=function(K){var B=A.extend({},A.fn.jFlow.defaults,K);var G=Math.floor(Math.random()*11);var I=B.controller;var C=B.slideWrapper;var H=B.selectedWrapper;var J=0;var E=A(I).length;var F=function(M,L){A(B.slides).children().css({overflow:"hidden"});A(B.slides+" iframe").hide().addClass("temp_hide");A(B.slides).animate({marginLeft:"-"+(L*A(B.slides).find(":first-child").width()+"px")},B.duration*(M),B.easing,function(){A(B.slides).children().css({overflow:"auto"});A(".temp_hide").show()})};A(this).find(I).each(function(L){A(this).click(function(){if(A(B.slides).is(":not(:animated)")){A(I).removeClass(H);A(this).addClass(H);var M=Math.abs(J-L);F(M,L);J=L}})});A(B.slides).before('<div id="'+C.substring(1,C.length)+'"></div>').appendTo(C);A(B.slides).find("div").each(function(){A(this).before('<div class="jFlowSlideContainer"></div>').appendTo(A(this).prev())});A(I).eq(J).addClass(H);var D=function(L){A(C).css({position:"relative",width:B.width,height:B.height,overflow:"hidden"});A(B.slides).css({position:"relative",width:A(C).width()*A(I).length+"px",height:A(C).height()+"px",overflow:"hidden"});A(B.slides).children().css({position:"relative",width:A(C).width()+"px",height:A(C).height()+"px","float":"left",overflow:"auto"});A(B.slides).css({marginLeft:"-"+(J*A(B.slides).find(":eq(0)").width()+"px")})};D();A(window).resize(function(){D()});A(B.prev).click(function(){if(A(B.slides).is(":not(:animated)")){var L=1;if(J>0){J--}else{J=E-1;L=J}A(I).removeClass(H);F(L,J);A(I).eq(J).addClass(H)}});A(B.next).click(function(){if(A(B.slides).is(":not(:animated)")){var L=1;if(J<E-1){J++}else{J=0;L=E-1}A(I).removeClass(H);F(L,J);A(I).eq(J).addClass(H)}})};A.fn.jFlow.defaults={controller:".jFlowControl",slideWrapper:"#jFlowSlide",selectedWrapper:"jFlowSelected",easing:"swing",duration:400,width:"100%",prev:".jFlowPrev",next:".jFlowNext"}})(jQuery);
many thanks
