View Full Version : Virtual Pagination - own buttons

09-22-2007, 06:37 AM
1) Script Title: Virtual Pagination

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

3) Describe problem:

When looking at the Virtual Pagination page, there is a demo to the bottom left (where the words castle, park, harvest and country are within a box each, as well as < and >).

I want to do something similar, but without < and >.
Also want to use the same buttons as on this page: http://justtesting.atspace.com/test.htm

So for example, someone wants to read more about dogs. They then click on the green button named "dogs". Next to it may a button named "cats" be.
I also want to have at least some pixel space between each button.

Please help me with this, would be very grateful

09-22-2007, 08:23 AM
Those look like form buttons. Since this script generates regular links (<a>) for the pagination, the easiest way without modifying the script itself is just to use CSS to style the links so they resemble form buttons, something like:

<style type="text/css">

.paginationstyle a{
background-color: #d1ec4c;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;

.paginationstyle a:visited{
color: black;

.paginationstyle a:hover{
border-style: inset;
background-color: #e3f48e;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/


This assumes the DIV containing your pagination links have a CSS classname of "paginationstyle", something like:

<div class="paginationstyle">
<a href="#">ds</a> <a href="#">ds</a> <a href="#">ds</a>

09-22-2007, 08:48 AM
But the form buttons donīt look the same in explorer and firefox. In explorer, I donīt have any border around the buttons. In firefox it looks normal.

I also donīt know how to make a button another color after it is chosen, compared to the other buttons?

Tried to move this part shown below above the first <div class="virtualpage4">, but it didnīt work

<!-- Pagination DIV for Demo 4 -->
<div id="galleryalt" class="paginationstyle" style="width: 300px; text-align: left">
<a href="#" rel="previous"><</a> <span class="flatview"></span> <a href="#" rel="next">></a>

<!-- Initialize Demo 4 -->
<script type="text/javascript">
var gallery=new virtualpaginate("virtualpage4", 1)
gallery.buildpagination("galleryalt", ["castle", "park", "harvest", "country"])

09-22-2007, 10:24 AM
The only problem left now is to make the current box marked, so one knows which box they are visiting when looking at them.

How do I fix that?

09-23-2007, 06:52 AM
Just like with the original pagination links, you can make the selected one stand out by styling the .selected selector:

.paginationstyle a.selected{
background-color: yellow

In this case, the selected button will have a background color of yellow.