Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Location
    London
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to add leading zero to Malsup Cycle Pager?

    I would like to know if it is possible for me to add a leading '0' for the #nav part of the Malsup Cycle Double Pager - for numbers less than 10?

    The script is:

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
        $('.slideshow').each(function(index) {
            $(this).cycle({
    			fx:      	index ? 'fade' : 'scrollHorz',
    			timeout: 	0,
    			speed:   	400,
    			sync:    	false,
    			pager:  	'#nav',
    			prev:    	'#prev',
            	next:    	'#next',
    			pagerAnchorBuilder: function(i) {
    				if (index == 0)
    				
    				// for first slideshow
    				return '<a href="#">'+(i+1)+'</a>';
    				// for 2nd slideshow
    				return '#nav a:eq('+i+')';
            	}
    		});
        });
    });
    </script>
    Also, is it possible to separate each of the #nav numbers with a space, without the need to use CSS3 word-wrap: break-word;? (so it wraps inside a DIV).

    Many thanks for your help.
    Ian

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,346
    Thanks
    11
    Thanked 589 Times in 570 Posts
    something like:

    Code:
    return '#nav a:eq('+("00"+i).slice(-2)+')';
    should support up to 99 anchors.

    use display:inline-block, and float:left to make your nav items wrap inside their container.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Location
    London
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Forgive my lack of Javascript knowledge, but I'm not seeing any prefix of '0' before the numbers (under 10) when I try your code?

    Am I to put it in at a certain place, or change anything that's their?
    - I tried adding your code after the second 'return', and before it;
    - I tried replacing the second 'return';
    - I tried replacing the first 'return';
    - and I tried replacing both of the existing 'return's' with just your 'return'... but none of them show a leading '0'?

    The numbers generated by the #nav are not 'li', as the css for where they appear is simply within a 'div'. Maybe this code needs to be changed to represent a css unordered list, as per Malsup's standard Pager example? (which also eliminates the spacing issue) - but I'm not sure how to do it?

    Any thoughts would be most welcome.
    Ian

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,346
    Thanks
    11
    Thanked 589 Times in 570 Posts
    your second return will never happen, not sure what it should do.

    if the first return is spitting out visible html, then use my slice trick there to fix your padding issue:

    Code:
    				// for first slideshow
    				return '<a href="#">'+("00"+i).slice(-2)+'</a>';
    				// for 2nd slideshow
    				return '#nav a:eq('+i+')';
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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