Pagination Slot Combination

[Todge]

Feb 19, 2019 7:46:06 GMT -8 @smithj said:

Feb 19, 2019 6:07:39 GMT -8 @smithj said:

Thank you so much!  It works!

Todge one problem. On a threads list that has one page, the pagination doesn't look good: 

Can you please try this instead..

<script type="text/javascript">
   // Change Pagination Layout...

   $(document).ready(function(){
       var plinks = $('.ui-pagination-slot a');
       
       if(plinks.length == 1 || $(plinks[1]).html() == '')
       {
           return;
       }
       else
       {
           $(plinks[0]).attr('style','border-right: transparent; border-radius: 5px 0px 0px 5px');
           $(plinks[0]).parent().css('margin-right','0px');
       }
   
       for(p=1; p<plinks.length-1; p++)
       {
           $(plinks[p]).attr('style','border-left: transparent; border-right: transparent; border-radius: 0px');
           if($(plinks[p+1]).html().match(/[\.|\d]/))
           {
               $(plinks[p]).parent().css('margin-right','0px');
           }
           else
           {
               break;
           }
       }
   
       $(plinks[p]).attr('style','border-left: transparent; border-radius: 0px 5px 5px 0px');
   });
</script>

[Former Member]

Feb 19, 2019 11:58:14 GMT -8 Todge said:

Feb 19, 2019 7:46:06 GMT -8 @smithj said:

Todge one problem. On a threads list that has one page, the pagination doesn't look good: 

Can you please try this instead..

<script type="text/javascript">
 // Change Pagination Layout...

 $(document).ready(function(){
 var plinks = $('.ui-pagination-slot a');

 if(plinks.length == 1 || $(plinks[1]).html() == '')
 {
 return;
 }
 else
 {
 $(plinks[0]).attr('style','border-right: transparent; border-radius: 5px 0px 0px 5px');
 $(plinks[0]).parent().css('margin-right','0px');
 }

 for(p=1; p<plinks.length-1; p++)
 {
 $(plinks[p]).attr('style','border-left: transparent; border-right: transparent; border-radius: 0px');
 if($(plinks[p+1]).html().match(/[\.|\d]/))
 {
 $(plinks[p]).parent().css('margin-right','0px');
 }
 else
 {
 break;
 }
 }

 $(plinks[p]).attr('style','border-left: transparent; border-radius: 0px 5px 5px 0px');
 });
</script>

Thank you!

[Todge]

No worries..

[Former Member]

Todge sorry to bother you again, but there are just a few issues with the pagination.

So... the background is a bit messed up, because of the spaces in between the numbers. Also, the 18 at the end is messed up too, as there is no space between the 1 and the 8.

Also, on a page that has one slot, can the number be in the center please?

[Todge]

Feb 26, 2019 8:28:55 GMT -8 @smithj said:

Todge sorry to bother you again, but there are just a few issues with the pagination.

So... the background is a bit messed up, because of the spaces in between the numbers. Also, the 18 at the end is messed up too, as there is no space between the 1 and the 8.

Also, on a page that has one slot, can the number be in the center please?

That's strange.. All I changed was the border and margin of the cells, it shouldn't have any impact on the content, but I'll take a look.

Playing with the pagination is rather fickle, so give me some time to try and work out what may be going on.

[Todge]

@smithj , how are you adding the border radius to the pagination buttons? I think that that may be clashing with the code I gave you, as it works fine on my forum even if I completely round the ends.

[Former Member]

Feb 28, 2019 13:44:24 GMT -8 Todge said:

@smithj , how are you adding the border radius to the pagination buttons? I think that that may be clashing with the code I gave you, as it works fine on my forum even if I completely round the ends.

The border radius is fine. The only problem is some number alignment and the background. I assume the problem with the background is that the background is for every individual slot, so if I can give all the number slots that background it might work. And the only other problem is the combination of double digit numbers.

[Todge]

Feb 28, 2019 15:34:20 GMT -8 @smithj said:

Feb 28, 2019 13:44:24 GMT -8 Todge said:

@smithj , how are you adding the border radius to the pagination buttons? I think that that may be clashing with the code I gave you, as it works fine on my forum even if I completely round the ends.

The border radius is fine. The only problem is some number alignment and the background. I assume the problem with the background is that the background is for every individual slot, so if I can give all the number slots that background it might work. And the only other problem is the combination of double digit numbers.

I'm not saying there is anything wrong with the border radius, but something is causing the cell contents to be displayed incorrectly. The code I gave you works, at least on a standard forum, so I assume the problem is being caused by a clash between the code and your theme.

Try removing the part of your theme that adds the radii to the pagination and use the code to add it instead and see if that solves the issue.

[Sam]

Hello Todge
This is currently the css in in theme template:


<!-- Pagination -->
<style>
                 
.ui-pagination-prev a{
   border: 1px solid #C8C8C8;
   border-radius:10px 10px 0px 0px;    
   font-family: verdana;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding: 0 10px;
   line-height: 20px;
   height: 20px;
   background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
.ui-pagination-next a{
   position:relative;
   right:-15px;
   border: 1px solid #C8C8C8;
   -webkit-border-top-right-radius: 10px;
   -webkit-border-bottom-right-radius: 10px;
   -moz-border-radius-topright: 10px;
   -moz-border-radius-bottomright: 10px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;    font-family: verdana;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding: 0 10px;
   line-height:20px;
   height: 20px;
   background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
.ui-pagination-prev a{
   border: 1px solid #C8C8C8;
   border-radius:10px 0 0 10px;    
   font-family: verdana;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding: 0 10px;
   line-height:20px;
   height: 20px;
   background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
                                                     
.ui-pagination-slot a{  
   float:right;      
   text-align: -webkit-match-parent;
   border: 1px solid #C8C8C8;
   font-family: verdana;    
   list-style: none;
   position:relative;
   right:-7px;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding-left:0px;
   padding: 0 10px;
   letter-spacing:-5px;              
   line-height:20px;
   height: 20px;
}
</style>


This is the code in the Global Header:



<script type="text/javascript">
// Change Pagination Layout...

$(document).ready(function(){
var plinks = $('.ui-pagination-slot a');

if(plinks.length == 1 || $(plinks[1]).html() == '')
{
return;
}
else
{
$(plinks[0]).attr('style','border-right: transparent; border-radius: 10px 0px 0px 10px; background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) ');
$(plinks[0]).parent().css('margin-right','0px');
}

for(p=1; p<plinks.length-1; p++)
{
$(plinks[p]).attr('style','border-left: transparent; border-right: transparent; border-radius: 0px');
if($(plinks[p+1]).html().match(/[\.|\d]/))
{
$(plinks[p]).parent().css('margin-right','0px');
}
else
{
break;
}
}

$(plinks[p]).attr('style','border-left: transparent; border-radius: 0px 10px 10px 0px; ');
});
</script>


Thank you!

[Todge]

Sam, thank you..

Just a heads up, in the CSS you posted above, you have repeated the '.ui-pagination-prev a' CSS, with only a slight change in the border-radius. The lower '.ui-pagination-prev a' css will take precedent, rendering the first border-radius redundent.

[Sam]

Mar 6, 2019 17:39:47 GMT -8 Todge said:

Sam , thank you..

Just a heads up, in the CSS you posted above, you have repeated the '.ui-pagination-prev a' CSS, with only a slight change in the border-radius. The lower '.ui-pagination-prev a' css will take precedent, rendering the first border-radius redundent.

So what should I do to that?

[Todge]

Mar 7, 2019 0:35:45 GMT -8 Sam said:

Mar 6, 2019 17:39:47 GMT -8 Todge said:

Sam , thank you..

Just a heads up, in the CSS you posted above, you have repeated the '.ui-pagination-prev a' CSS, with only a slight change in the border-radius. The lower '.ui-pagination-prev a' css will take precedent, rendering the first border-radius redundent.

So what should I do to that?

You don't HAVE to do anything, but the red in the CSS you posted (below) can be removed as it is being overwritten further down in your code.

<!-- Pagination -->
<style>

.ui-pagination-prev a{
border: 1px solid #C8C8C8;
border-radius:10px 10px 0px 0px;
font-family: verdana;
font-size: 9px;
text-transform: uppercase;
color: #676767;
padding: 0 10px;
line-height: 20px;
height: 20px;
background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
.ui-pagination-next a{
position:relative;
right:-15px;
border: 1px solid #C8C8C8;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px; font-family: verdana;
font-size: 9px;
text-transform: uppercase;
color: #676767;
padding: 0 10px;
line-height:20px;
height: 20px;
background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
.ui-pagination-prev a{
border: 1px solid #C8C8C8;
border-radius:10px 0 0 10px;
font-family: verdana;
font-size: 9px;
text-transform: uppercase;
color: #676767;
padding: 0 10px;
line-height:20px;
height: 20px;
background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}

.ui-pagination-slot a{
float:right;
text-align: -webkit-match-parent;
border: 1px solid #C8C8C8;
font-family: verdana;
list-style: none;
position:relative;
right:-7px;
font-size: 9px;
text-transform: uppercase;
color: #676767;
padding-left:0px;
padding: 0 10px;
letter-spacing:-5px;
line-height:20px;
height: 20px;
}
</style>

[Sam]

Mar 8, 2019 11:21:11 GMT -8 Todge said:

Mar 7, 2019 0:35:45 GMT -8 Sam said:

So what should I do to that?

You don't HAVE to do anything, but the red in the CSS you posted (below) can be removed as it is being overwritten further down in your code.

<!-- Pagination -->
<style>

.ui-pagination-prev a{
border: 1px solid #C8C8C8;
border-radius:10px 10px 0px 0px;
font-family: verdana;
font-size: 9px;
text-transform: uppercase;
color: #676767;
padding: 0 10px;
line-height: 20px;
height: 20px;
background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
.ui-pagination-next a{
position:relative;
right:-15px;
border: 1px solid #C8C8C8;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px; font-family: verdana;
font-size: 9px;
text-transform: uppercase;
color: #676767;
padding: 0 10px;
line-height:20px;
height: 20px;
background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
.ui-pagination-prev a{
border: 1px solid #C8C8C8;
border-radius:10px 0 0 10px;
font-family: verdana;
font-size: 9px;
text-transform: uppercase;
color: #676767;
padding: 0 10px;
line-height:20px;
height: 20px;
background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}

.ui-pagination-slot a{
float:right;
text-align: -webkit-match-parent;
border: 1px solid #C8C8C8;
font-family: verdana;
list-style: none;
position:relative;
right:-7px;
font-size: 9px;
text-transform: uppercase;
color: #676767;
padding-left:0px;
padding: 0 10px;
letter-spacing:-5px;
line-height:20px;
height: 20px;
}
</style>

I see. So how do I get the background to feed into the rest of the buttons?

[Todge]

Mar 11, 2019 4:30:19 GMT -8 Sam said:

Mar 8, 2019 11:21:11 GMT -8 Todge said:

You don't HAVE to do anything, but the red in the CSS you posted (below) can be removed as it is being overwritten further down in your code.

<!-- Pagination -->
<style>

.ui-pagination-prev a{
border: 1px solid #C8C8C8;
border-radius:10px 10px 0px 0px;
font-family: verdana;
font-size: 9px;
text-transform: uppercase;
color: #676767;
padding: 0 10px;
line-height: 20px;
height: 20px;
background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
.ui-pagination-next a{
position:relative;
right:-15px;
border: 1px solid #C8C8C8;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px; font-family: verdana;
font-size: 9px;
text-transform: uppercase;
color: #676767;
padding: 0 10px;
line-height:20px;
height: 20px;
background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
.ui-pagination-prev a{
border: 1px solid #C8C8C8;
border-radius:10px 0 0 10px;
font-family: verdana;
font-size: 9px;
text-transform: uppercase;
color: #676767;
padding: 0 10px;
line-height:20px;
height: 20px;
background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}

.ui-pagination-slot a{
float:right;
text-align: -webkit-match-parent;
border: 1px solid #C8C8C8;
font-family: verdana;
list-style: none;
position:relative;
right:-7px;
font-size: 9px;
text-transform: uppercase;
color: #676767;
padding-left:0px;
padding: 0 10px;
letter-spacing:-5px;
line-height:20px;
height: 20px;
}
</style>

I see. So how do I get the background to feed into the rest of the buttons?

The three remaining blocks of code cover all of the pagination buttons. The red block is being repeated further down, and so was not actually doing anything.

[Sam]

Mar 11, 2019 15:17:25 GMT -8 Todge said:

Mar 11, 2019 4:30:19 GMT -8 Sam said:

I see. So how do I get the background to feed into the rest of the buttons?

The three remaining blocks of code cover all of the pagination buttons. The red block is being repeated further down, and so was not actually doing anything.

So this what I get when the code is like this:





<!-- Pagination -->
<style>
                 
.ui-pagination-next a{
position:relative;
   right:-15px;
   border: 1px solid #C8C8C8;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;    
   font-family: verdana;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding: 0 10px;
   line-height:20px;
   height: 20px;
   background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
.ui-pagination-prev a{
   border: 1px solid #C8C8C8;
border-radius:10px 0 0 10px;    
   font-family: verdana;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding: 0 10px;
   line-height:20px;
   height: 20px;
   background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
                                                     
.ui-pagination-slot a{  
   float:right;      
   text-align: -webkit-match-parent;
   border: 1px solid #C8C8C8;
   font-family: verdana;    
   list-style: none;
position:relative;
   right:-7px;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding-left:0px;
   padding: 0 10px;
   letter-spacing:-5px;              
   line-height:20px;
   height: 20px;
   background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;

}
</style>