SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery slider not working?

    Hi,

    For some reason I cannot get two of my three jquery sliders to work on my page. I have three in total the first one works perfectly.. but the second two do not I have checked and double checked but cannot see the issue.

    The 2nd and 3rd do not display but their buttons prev and next are displayed.. the web address is Site Example

    The jquery which targets each slider is as follows:
    Code JavaScript:
     	<script language="javascript" type="text/javascript">
    $(document).ready(function(){
     
    	$("div#controller").jFlow({
    		slides: "#slides",
    		controller: ".jFlowControl", // must be class, use . sign
    		width: "593px",
    		height: "296px",
    		duration: 400,
    		prev: ".jFlowPrev", // must be class, use . sign
    		next: ".jFlowNext" // must be class, use . sign
    	});
     
    	$("div#controller2").jFlow({
    		slides: "#slides2",
    		controller: ".jFlowControl2", // must be class, use . sign
    		width: "593px",
    		height: "296px",
    		duration: 400,
    		prev: ".jFlowPrev2", // must be class, use . sign
    		next: ".jFlowNext2" // must be class, use . sign
    	});
     
    	$("div#controller3").jFlow({
    		slides: "#slides3",
    		controller: ".jFlowControl3", // must be class, use . sign
    		width: "593px",
    		height: "296px",
    		duration: 400,
    		prev: ".jFlowPrev3", // must be class, use . sign
    		next: ".jFlowNext3" // must be class, use . sign
    	});
     
    });	
     
     
    </script>

    Any ideas?

    Any help would be great thanks

    O

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Validation of the HTML shows that you have some missing closing div tags.
    Errors such as this could be why it's having a hard time working correctly with the page contents.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I managed to validate all pages now and yet they still refuse to appear...

    Is there something else I could be missing?

    it does not work for the three pages

    page 1
    page 2
    page 3

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Using Google Chrome, when I inspect the elements I see that there are only two portfolio items inside maincontentportfolio, while the page shows that there should be three.

    This indicates that the div structure is screwed up in some way.

    From what I see there, the last one appears to be correct. So there something wrong with the div structure somewhere in the first two.

    I suspect that a </div> is missing from the first portfolio.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    I suggest that you get the above issue fixed up.
    Here's the current existing code structure:

    Code html4strict:
    <div id="maincontentportfolio"> 
    	<div class="portfolioitem"> 
    		<div class="portfolioheader"></div><!--Portfolio header end div--> 
    		<div class="portfoliocontent"></div>	<!--end portfoliocontent div-->	
    		<div class="portfoliofooter"></div> 
    		<div class="portfolioitem"> 
    		<div class="portfolioheader"></div> <!--Portfolio header end div--> 
    		<div class="portfoliocontent"></div><!--end portfoliocontent div-->	
    		<div class="portfoliofooter"></div> 
    	</div><!--End of portfolio item --> 
    		<div class="portfoliofooter"></div> 
    	</div><!--End of portfolio item --> 
    	<div class="portfolioitem"> 
    		<div class="portfolioheader"></div> <!--Portfolio header end div--> 
    		<div class="portfoliocontent"></div>	<!--end portfoliocontent div-->	
    		<div class="portfoliofooter"></div> 
    </div><!--end of maincontentportfolio -->

    I believe that is should be more like this:

    Code html4strict:
    <div id="maincontentportfolio"> 
        <div class="portfolioitem"> 
            <div class="portfolioheader"></div><!--Portfolio header end div--> 
            <div class="portfoliocontent"></div><!--end portfoliocontent div--> 
            <div class="portfoliofooter"></div> 
        </div><!--End of portfolio item --> 
        <div class="portfolioitem"> 
            <div class="portfolioheader"></div><!--Portfolio header end div--> 
            <div class="portfoliocontent"></div><!--end portfoliocontent div--> 
            <div class="portfoliofooter"></div> 
        </div><!--End of portfolio item --> 
        <div class="portfolioitem"> 
            <div class="portfolioheader"></div><!--Portfolio header end div--> 
            <div class="portfoliocontent"></div><!--end portfoliocontent div--> 
            <div class="portfoliofooter"></div> 
        </div><!--End of portfolio item --> 
    </div><!--end of maincontentportfolio -->
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FYI:

    A convenient way to check the document structure is HTMLTidy. It will alert you to any issues with open tags and also flags most syntactical errors.

    The Total Validator extension for Firefox provides even better coverage, but does not have the convenience that HTMLTidy offers of being run locally.

    Note: HTMLTidy is incorporated in many HTML editors, such as Quanta Plus or HTML-Kit.

  7. #7
    SitePoint Addict mari's Avatar
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    incase you havnt noticed..... when you click on news in the top navigation the Print remains highlighted in pink in the navigation

  8. #8
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you I will take a look at this today..

  9. #9
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I ammended the sturcture of the print_portfolio page to account for the missed div... I think it is right now, yet it still does not display.. could it be more to do with my jquery?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Thanks for that. It's made things easier but after trying several ideas, I have to say that I'm stumped on this one.

    Perhaps if you approach the developer, they might have some idea as to what's not going right.
    http://www.gimiti.com/kltan/wordpress/

    I know that when it's working successfully it'll be an excellent demonstration of the powers of the jFlow content slider.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •