Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Could I make a Featured Content Slider with two rows of buttons?

  1. #1
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Could I make a Featured Content Slider with two rows of buttons?

    1) Script Title: Featured Content Slider v2.4

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

    3) Describe problem: As you can see here, I`ve got quite a few buttons (1-37) and so I`d like to have them in two *neatly spaced rows. Is that possible?

    Thank you.

  2. #2
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Two rows of buttons for Featured Content Slider

    1) Script Title: Featured Content Slider v2.4

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

    3) Describe problem: As you can see here, I`ve got quite a few buttons (1-37) and so I`d like to have them in two *neatly spaced rows. Is that possible?

    Thank you.

  3. #3
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    You made two threads for the same thing..................
    Thanks,

    Bud

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    viconia/mesua, we have a strict rule here of one account per person. Please choose one account and let us know which you want to keep; the other will be deleted.
    Additionally, please be patient with responses; waiting 3 minutes between double-posting is inappropriate.
    If you have had any technical problems with your account(s), please let us know. (The best way to discuss it would probably be posting in the "feedback and announcements" section.)

    For the moment I have merged your two threads together, and now you can wait to see if someone has an answer.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Where the page has:

    Code:
    <script type="text/javascript">
    featuredcontentslider.init({
    id: "slider1", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["<", ">"], //labels for "prev" and "next" links. Set to "" to hide.
    enablefade: [true, 0.2], //[true/false, fadedegree]
    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
    })
    </script>
    Add the highlighted:

    Code:
    <script type="text/javascript">
    featuredcontentslider.init({
    id: "slider1", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["<", ">"], //labels for "prev" and "next" links. Set to "" to hide.
    enablefade: [true, 0.2], //[true/false, fadedegree]
    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
    });
    jQuery(function($){
    	var $tocs = $('#paginate-slider1 a').css({lineHeight: '165%'});
    	$tocs.eq(Math.ceil($tocs.size() / 2)).after('<br>');
    });
    </script>
    The browser cache may need to be cleared and/or the page refreshed to see changes.

    Other variations:

    Code:
    jQuery(function($){
    	var $tocs = $('#paginate-slider1 a').css({lineHeight: '165%'});
    	$tocs.eq(Math.ceil($tocs.size() / 2) - 1).after('<br>');
    });
    or:

    Code:
    jQuery(function($){
    	var $tocs = $('#paginate-slider1 a').css({lineHeight: '165%'}), $next;
    	$tocs.last().wrap('<span></span>');
    	$tocs.eq(Math.ceil($tocs.size() / 2) - 1).after(' ' + $('#paginate-slider1 span').html() + '<br>');
    	$next = $('#paginate-slider1 a').filter('.next');
    	$next.eq(0).replaceWith($next.eq(1));
    	$('#paginate-slider1 span').remove();
    });
    Last edited by jscheuer1; 11-25-2012 at 04:53 AM. Reason: add variations
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Or maybe you can reduce the width of the "pagination-slider1" div so the buttons wrap on to 2 lines sooner?
    Code:
    <style type="text/css">
    pagination-slider1 { width:600px; }
    </style>
    
    <div class="pagination" id="paginate-slider1">
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. #7
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Yes, I`m sorry. I forgot that I`ve already registered once for this forum and then later I came across another thread I`d started a while ago. I`ll keep the first one (mesua) if that`s alright. Sorry for the inconvenience again.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Beverleyh View Post
    Or maybe you can reduce the width of the "pagination-slider1" div so the buttons wrap on to 2 lines sooner?
    Code:
    <style type="text/css">
    pagination-slider1 { width:600px; }
    </style>
    
    <div class="pagination" id="paginate-slider1">
    You will need a lot more than that for it to look good. You would also need to center the div, which is usually done with margin. But that's already in use to position it. Then there's the matter of the vertical space between the now wrapped lines and getting the width just right so that it wraps just where you want it. It can be done, but it's complicated. That's why I went with the approach I used. Later I realized even more control could be achieved, so my alternatives became more complex. Here's a perhaps even better method:

    Code:
    <script type="text/javascript">
    featuredcontentslider.init({
    id: "slider1", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["<", ">"], //labels for "prev" and "next" links. Set to "" to hide.
    enablefade: [true, 0.2], //[true/false, fadedegree]
    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
    });
    jQuery(function($){
    	var $tocs = $('#paginate-slider1 a').css({lineHeight: '165%'}), $next;
    	$tocs.last().wrap('<span></span>');
    	$tocs.eq(Math.ceil($tocs.size() / 2)).after(' ' + $('#paginate-slider1 span').html() + '<br>');
    	$next = $('#paginate-slider1 a').filter('.next');
    	$next.eq(0).replaceWith($next.eq(1));
    	$('#paginate-slider1 span').remove();
    	$('#paginate-slider1 a').filter('.next, .prev').css({position: 'relative', top: '0.5em'}).eq(0).css({left: '-2em'}).end().eq(1).css({left: '2em'});
    });
    </script>
    That centers the pagination links into two lines and moves the next/previous buttons slightly to the left and right respectively at an offset of half of the line (click to enlarge the image):

    Click image for larger version. 

Name:	cats.jpg 
Views:	58 
Size:	7.4 KB 
ID:	4838
    Last edited by jscheuer1; 11-25-2012 at 11:00 AM. Reason: add detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Yes, I`m sorry. I forgot that I`ve already registered once for this forum and then later I came across another thread I`d started a while ago. I`ll keep the first one (mesua) if that`s alright. Sorry for the inconvenience again.
    Ok, that's fine. Just keep using that one, and the other (viconia) will be deleted once the administrator has a chance.

    Now back to your code, the more important topic.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    I wa looking at this again, and what Beverleyh says can work fairly well if you change the style for the .pagination div from (around line 531 on the page):

    Code:
    .pagination{
    width: 950px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
    text-align: center;
    background-color: #333333;
    padding: 10px 1px;
    margin-top:-2px;
    height:30px;
    margin-left:15px;
    }
    to:

    Code:
    .pagination {
    	width: 525px;
    	text-align: center;
    	background-color: #333333;
    	padding: 8px 1px 0 25px;
    	margin: 0 auto;
    	line-height: 165%;
    }
    Still not as nice as my last scripted solution I don't think, and the width and the left padding would have to be adjusted if the number of pages change. But it's pretty easy to do and easier for the average person to work with and tweak than the javascript would be.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Featured Content Slider - Stop/Play buttons?
    By amimoto in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-10-2009, 01:20 PM
  2. Featured Content Slider, make it change on hover?
    By A2597 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 04-03-2008, 03:15 PM
  3. Featured Content Slider: Does not allow me to embed more than three buttons
    By masterpower in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-20-2008, 11:33 PM
  4. Featured Content Slider to use REAL URLS in the buttons
    By Acts7 in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 11-20-2007, 08:22 AM
  5. Featured Content Slider, Can I Make My Own Buttons?
    By joshywood in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 03-09-2007, 10:38 PM

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
  •