Virtual Pagination Help (Advanced)

[Seafury]

1) Script Title: Virtual Pagination Script

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

3) Describe problem:

First off, I have the pagination script working with a slideshow like it was intended. It's a slideshow of houses, as in real-estate listings. What I would like to do is, when someone clicks the "next" button and a new house comes up, an html file I've created showing details of that listing loads in an iframe lower on the page.

what I was specifically trying to do was add something within this area:

<div class="virtualpage">
<img width="100%" height=206 src="listing/main.jpg" />
</div>

I can make listing details come up if I do something like this.

<a href="listing/mls20070240.html" target="iframe1"><img width="100%" height=206 src="listing/main.jpg"></a>

However, the drawback is that the user has to click on the slideshow picture.

I'm wondering if anyone has a hint about how I could make the listing details come up in the iframe automatically when the slideshow picture (virtual page) is loaded?

Any help is appreciated.

[ddadmin]

Sounds feasible enough, though just so I understand, you're looking to physically embed an iframe tag on the page whereby its src property changes each time the user clicks on a pagination link, with the desired page loading inside the iframe each time? Eg:

<iframe id="paginateiframe" src=""></iframe>

[Seafury]

That's right. The document loaded in the iframe will not be the same as the picture loaded in the slideshow from the pagination link though. It will be an html document describing said picture.

[ddadmin]

Sure thing, just make the below changes:

1) Inside virtualpaginate.js, find and edit the line:

this.currentpage=parseInt(pagenumber)
if (this.iframeref)
this.iframeref.src=this.iframeurls[pagenumber]

The last two lines are new. And at the very end of the .js file, add this new method:

virtualpaginate.prototype.addiframe=function(iframeid, urls){
this.iframeref=document.getElementById(iframeid)
this.iframeurls=urls
this.iframeref.src=urls[this.currentpage]
}

2) Then, for the virtual pagination instance on your page where you wish to display associated iframe content as well, first, define an <iframe> tag, probably directly below your pagination DIV:

<iframe id="virtualiframe" src=""></iframe>

Then, when initializing the script (make sure it follows the iframe, not proceeding), call the new "addiframe()" method:

<script type="text/javascript">
var newscripts=new virtualpaginate("virtualpage", 1, "p")
newscripts.buildpagination("scriptspaginate")
newscripts.addiframe("virtualiframe", ['external.htm', 'external2.htm', 'external3.htm'])
</script>

Where "virtualframe" is the ID of your iframe tag, and the 2nd parameter are a list of external pages, one for each "page" of your content.

[Seafury]

you rock.

[Venu12]

I am trying to virtually paginate a muti-tabbed blog site . The virtual pagination code doesn't work well. Can you please help. I am new to Ajax and a self taught php programmer. The pagination shows up in every fragment and only within <div id="fragment-13"> .... </div> works well. I am using virtualpaginate.js

Here is the code:

<?php
//  database connection
require_once('./includes/base.php');

if($_GET['logout'] == 1){
    @$_SESSION = array();
    @session_unregister($_SESSION['userID']);
    @session_unregister($_SESSION['userName']);
    @session_unregister($_SESSION['userUser']);
    @session_unregister($_SESSION['userPass']);
    @session_destroy();
}

require("./templates/$template/header.php");

?>

<div id="blurb"  align="right">

<script language="javascript">
    function isClear()
        {
            document.myForm[0].value='';
            return true;
        
        }
    </script>
   
    <?php
ob_start();
if(!empty($_SESSION['userID']) and !empty($_POST['user'])){
echo '<form action="search.php" method="post" name="myForm">
<input type="text" value="search here" id="search" size="20" name="search" onFocus="return isClear();"/>
<input type="submit" name="serachuser" value="search"/></form>';
}
?> 
</div>
<br>
<div id="blurb" align="justify">
Hello world <?php echo "$sitename"; ?> is blah, blah, blah.......!
</div>
<br>

 <div id="container-5">
            <ul>
                <li><a href="#fragment-13"><span>Blogs</span></a></li>
                <li><a href="#fragment-14"><span>Links</span></a></li>
                <li><a href="#fragment-15"><span>Images</span></a></li>

            </ul>
            <div id="fragment-13">
                <?php
    

$sql = mysql_query("SELECT users.userUser, posts.postID, posts.postPost, posts.postTime, posts.postComments, userAvatar  FROM users, posts WHERE users.userID = posts.postUserID ORDER BY posts.postTime DESC ");                 
while($row = mysql_fetch_array($sql)){
    $abcd= $row['userName'];
    $abcd = str_replace (" ", "-", $abcd);
 $time = reltime($row['postTime']);

    echo '
    <div class="virtualpage">
     <table width="100%" >
      <td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'"  width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8"  border=1" cellspacing="1" cellpadding="1" ><b>'.$row['postPost'].'</b><br>Posted by:&nbsp;'.$row['userUser'].',&nbsp;<a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['postID'].'">Comments</a>&nbsp;'.$row['postComments'].' ,&nbsp;Time elapsed:&nbsp; '.$time.'</a></td>
    </table><br>
    
    </div>';}




    ?>

<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>


            </div>


</div>



            </div>


            <div id="fragment-14">
                <?php

                 $sql = mysql_query("SELECT users.userUser, links.linksID, links.linksLink, links.linksPost, links.linksTime, links.linksComments,userAvatar FROM users, links WHERE users.userID = links.linksUserID ORDER BY links.linksTime DESC");
while($row = mysql_fetch_array($sql)){
    $abcd= $row['userName'];
    $abcd = str_replace (" ", "-", $abcd);
 $time1 = reltime($row['linksTime']);

    echo '
    <div class="virtualpage">
     <table width="100%" >
      <td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'"  width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8"  border=1" cellspacing="1" cellpadding="1" ><b>'.$row['linksPost'].'</b><br>Posted by:&nbsp;'.$row['userUser'].',&nbsp;<a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['linksID'].'">Comments</a>&nbsp;'.$row['linksComments'].' ,&nbsp;Time elapsed:&nbsp; '.$time1.'</a></td>
    </table><br>
    
    </div>';}

    ?>


 <div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>

            </div>
            <div id="fragment-15">
                <?php
                // testing
                grabimages('SELECT users.userUser, images.imagesID, images.imagesFile, images.imagesPost, images.imagesTime, images.imagesComments FROM users, images WHERE users.userID = images.imagesUserID ORDER BY images.imagesTime DESC LIMIT 20');

                ?>

            </div>
        </div>



 




<?php

// Display footer
require("./templates/$template/footer.php");
?>

<table align="center"><tr><td align="center">
<script type="text/javascript"  defer="defer">
var gallery=new virtualpaginate("virtualpage",10)
gallery.buildpagination("gallerypaginate")
</script>
</td></tr></table>