PDA

View Full Version : Could I make a Featured Content Slider with two rows of buttons?



viconia
11-24-2012, 10:11 PM
1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem: As you can see here (http://www.zbengui.com/), 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.

mesua
11-24-2012, 10:14 PM
1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem: As you can see here (http://www.zbengui.com/), 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.

ajfmrf
11-25-2012, 12:33 AM
You made two threads for the same thing..................

djr33
11-25-2012, 01:15 AM
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.

jscheuer1
11-25-2012, 04:32 AM
Where the page has:


<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:


<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:


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

or:


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();
});

Beverleyh
11-25-2012, 09:40 AM
Or maybe you can reduce the width of the "pagination-slider1" div so the buttons wrap on to 2 lines sooner?


<style type="text/css">
pagination-slider1 { width:600px; }
</style>

<div class="pagination" id="paginate-slider1">

mesua
11-25-2012, 11:35 AM
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.

jscheuer1
11-25-2012, 11:50 AM
Or maybe you can reduce the width of the "pagination-slider1" div so the buttons wrap on to 2 lines sooner?


<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:


<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):

4838

djr33
11-25-2012, 01:05 PM
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.

jscheuer1
11-25-2012, 01:30 PM
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):


.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:


.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.

mesua
11-25-2012, 02:42 PM
@ jscheuer1

I`ve tried it but for some reason, even after emptying my cache and refreshing my page, there doesn`t seem to be any change in the layout of the buttons. I`ve tried it in different browsers...still nothing.

I`ve also tried Beverleyh`s idea, but...didn`t get lucky.

Any ideas what I`m missing?

jscheuer1
11-25-2012, 05:31 PM
You're almost there. Add the highlighted:


<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]
autorotate: [false, 3000],
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>

By way of explanation, that property, even if the first value is false, is required. Otherwise the code throws an error. For some reason that error is too late to prevent the slider from working. But it comes before the added code for the pagination div, so that code is never run. Once the error is fixed, the pagination code does run and produces the desired result.

mesua
11-25-2012, 07:38 PM
Yeeeeeey! It`s working now. Thanks a lot for everything :)

jscheuer1
11-26-2012, 01:08 AM
Great! Here's an optional variation you can try:


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();
$('#paginate-slider1 a').filter('.next, .prev').css({position: 'relative', top: '0.5em'}).eq(0).css({left: '-2em'}).end().eq(1).css({left: '2em'});
});

As you probably noticed, the top line of pagination links is longer than the bottom. It would be difficult or impossible (you would have to make all the page links the same width and ensure that there were an even number of them) to make them the same though. What the above variation will do is make the top one shorter. It's a subtle thing, but I think it looks a little better that way.

mesua
11-27-2012, 06:42 PM
Thanks a lot!

jscheuer1
11-28-2012, 12:57 AM
You're welcome. I noticed something else about the installation, and in investigating how best to explain and correst it, I also noticed that the script credit appears to be missing from the page. See:

http://www.dynamicdrive.com/notice.htm

for the usage terms, which state (among other things) that the script credit must appear on each page that is using the script. So where you have:


<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/contentslider-n-b-l-t-r.js' type='text/javascript'></script>

That should be:


<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/contentslider-n-b-l-t-r.js' type='text/javascript'>

/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

The other thing I noticed is that since you have (near the top of contentslider-n-b-l-t-r.js):


enablepersist: true, //persist to last content viewed when returning to page?

and because you're using the same id (slider1) for both the first and second chapter of the graphic novel, when the user leaves chapter 1 at - say panel #29, if he then goes to chapter #2, that starts at panel #29. So you either have to, using a text only editor like NotePad, edit contentslider-n-b-l-t-r.js and change that value to false, or change the id of one of the chapters. If you change the id of one of the chapters, you have to change it in the init and the markup, including for the pagination as well as in the added code for the pagination links where it appears a number of times. Like on the chapter 2 page, do a global search and replace on slider1 for slider2. Then when the next chapter comes out, make it slider3.

mesua
11-28-2012, 12:43 PM
Thank you. I`ve added the script credit, I hope everything`s ok. Renamed the sliders as well, so now that`s sorted although I have a few more questions about the slider now that I think of it. I don`t know if this is straying too much from the initial thread, but here it goes:


1) If for the current chapter I`m going to add yet another row of buttons (I`ll be adding new panels), do I need to make any changes to the script you`ve given me? Change it from:


($tocs.size() / 2) - 1)

to


($tocs.size() / 3) - 1)

perhaps?

2) So now, when someone reads chapter 1 , stops at panel #29 and then goes on to chapter 2, they get to see panel #1. But if they go back to chapter 1 again, they land on whichever panel number they were when they left. Is there a way to `reset` the slider so that they would land on the first panel?

3) If, say, the chapter gets waaaay too long and the slider buttons just don`t look good on the page anymore, can I change the current slider so that it works like this:

< 1 2 3 ... 10 >

Thank you :)

jscheuer1
11-28-2012, 04:22 PM
($tocs.size() / 2) - 1)

Will always divide the number of panels in half, so unless you have a ton of them, it need not be changed. And changing it to / 3 will give you a third of them on top, all the rest on the bottom, so that's probably not a solution. It could be part of a solution if then the second third of them had a break put after them and then the next/prev buttons were placed a little lower. But now we're getting into a solution that needs to be rewritten for each situation. A better solution would be one that works in both cases and even in other cases where there are a lot more panels.


What you're asking for here is a way to disable the setting and reading of the cookie aka the persist behavior. To disable persistence, using a text only editor like NotePad, open up the contentslider-n-b-l-t-r.js file and near the top where it has:


enablepersist: true, //persist to last content viewed when returning to page?

Change that to false and save that and use that version.

However, it's a nice feature to have the user return to where they were, like a bookmark in a real book allows you to return to the page you were reading when you last left it. If you decide to keep it, leave that value as true or change it back if you've already tried it as false and decided you prefer it to be enabled.


I'm pretty sure that this can be done and would be one approach as I alluded to in my answer to #1 above. It might be a little complicated. When I have more time I will have a look at just what it might entail.

mesua
11-28-2012, 05:01 PM
Ok, that`s fine. I`ll keep things as they are at the moment, really pleased with how it looks and works. Thanks again for your time and advice :)