Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Aug 2009
    Posts
    2
    Member #
    19738
    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>
    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;
    
    }
    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);

  2.  

  3. #2
    Senior Member Karloff's Avatar
    Join Date
    Oct 2005
    Posts
    744
    Member #
    11702
    don't suppose you could post a link to see what happening, not sure if its the css or the dom throwing something out.....

  4. #3
    Junior Member
    Join Date
    Aug 2009
    Posts
    2
    Member #
    19738
    Quote Originally Posted by Karloff
    don't suppose you could post a link to see what happening, not sure if its the css or the dom throwing something out.....
    Sorry it is only on my localhost at present! Like I mentioned if it take away the div 'documentsContent' all lines up fine!?!? Maybe i need to add something in the JS, but i dont know it that well.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:05 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com