Results 1 to 3 of 3

Thread: Problem with Ajax Pagination and Tooltip

  1. #1
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with Ajax Pagination and Tooltip

    1) Script Title: ajaxpagination.js

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

    3) Describe problem: Tooltip does not work on loading - but when I refresh the cache it works. If I navigate through the pages using the pagination script the tool tip fails...

    The pagination itself WORKS FINE. However, I'm trying to use a tooltip script on an image hover, and though it works fine if the page is properly cached, it does NOT work as I go from page to page, using the pagination numbers to navigate.

    Oddly, if I click on the picture itself, the tooltip works. You can see what's going on here http://www.siiimple.com/siiimple when you roll over the top three images they do not initially utilize the tooltip script. However, if you click the image, it begins to show the larger image.

    Here is the javascript code associated with the PAGINATION, thought I really don't know where the problem resides:

    Code:
    //Ajax Pagination Script- Author: Dynamic Drive (http://www.dynamicdrive.com)
    //** Created Sept 14th, 07'
    //** Updated Oct 31st, 07'- Fixed bug when book only contains 1 page
    //** Updated Aug 9th 08'- Upgraded to v1.2:
    			//1) Adds ability to limit the range of the visible pagination links shown for a book with many pages
    			//2) Adds Session only persistence to persist the last page user viewed when navigating away then returning to the webpage containing the script.
    			//3) Modified Ajax request function in IE7 to use ActiveXObject object, so script can be tested offline
    
    //** Updated Oct 21st 08'- Upgraded to v1.2.1: Fixed bug with no content showing when there's only one page
    //** Updated Dec 1st 08'- v1.2.2: Fixed bug in FF when only one page in book
    
    var ajaxpageclass=new Object()
    ajaxpageclass.loadstatustext="Requesting content, please wait..." // HTML to show while requested page is being fetched:
    ajaxpageclass.ajaxbustcache=false // Bust cache when fetching pages?
    ajaxpageclass.paginatepersist=true //enable persistence of last viewed pagination link (so reloading page doesn't reset page to 1)?
    ajaxpageclass.pagerange=4 // Limit page links displayed to a specific number (useful if you have many pages in your book)?
    ajaxpageclass.ellipse="..." // Ellipse text (no HTML allowed)
    
    /////////////// No need to edit beyond here /////////////////////////
    
    ...
    And here is the HTML for the index page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <link rel="stylesheet" href="CSS/golden.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="CSS/style.css" type="text/css" media="screen, projection">
    
    <!-- Screenshots -->
    <script src="js/jquery.js" "text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <script src="js/tooltip.js" type="text/javascript"></script>
    
    <!-- Pagination -->
    <link rel="stylesheet" type="text/css" href="CSS/ajaxpagination.css" />
    <script src="js/ajaxpagination.js" type="text/javascript"></script>
    
    <title>siiimple</title>
    <style>
    body {background-color:#fff;}
    .main{background-color:#fff;}
    .g160{background-color:#fac0c0; height:150px;  }
    .g320{background-color:#fff; height:150px;  }  
    .clear{height:100px;}
    img{border:1px solid #444;}
    #screenshot{
    	position:absolute;
    	border:none;
    	background:#333;
    	padding:5px;
    	display:none;
    	color:#fff;
    	}
    #tooltip{
    	position:absolute;
    	border:none;
    	background:#f7f5d1;
    	padding:2px 5px;
    	color:#333;
    	display:none;
    	}
    
    #paginate-bottom{margin-bottom:2em;}
    
    </style>
    
    </head>
    
    <body>
    
    <div class="main">
    
    
    <div id="siiimple"> </div>
    <div id="paginate-bottom"> </div>
    
    <script type="text/javascript">
    
    var siiimple={
    pages: ["page-1.html", "page-2.html", "page-3.html", "page-4.html", "page-5.html"],
    selectedpage: 0 //set page shown by default (0=1st page)
    }
    
    var mybookinstance=new ajaxpageclass.createBook(siiimple, "siiimple", ["paginate-bottom"])
    
    </script>
    
    </body>
    </html>
    Here is the first page that is called:

    Code:
    <?php require('_drawrating.php'); ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <link rel="stylesheet" href="CSS/golden.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="CSS/style.css" type="text/css" media="screen, projection">
    
    <script type="text/javascript" language="javascript" src="js/behavior.js"></script>
    <script type="text/javascript" language="javascript" src="js/rating.js"></script>
    <link rel="stylesheet" type="text/css" href="CSS/rating.css" />
    
    <script src="js/jquery.js" "text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <script src="js/tooltip.js" type="text/javascript"></script>
    
    <title>siiimple</title>
    <style>
    body {background-color:#fff;}
    .main{background-color:#fff;}
    .g160{background-color:#fac0c0; height:150px;  }
    .g320{background-color:#fff; height:150px;  }  
    .clear{height:100px;}
    img{border:1px solid #444;}
    #screenshot{
    	position:absolute;
    	border:none;
    	background:#333;
    	padding:5px;
    	display:none;
    	color:#fff;
    	}
    #tooltip{
    	position:absolute;
    	border:none;
    	background:#f7f5d1;
    	padding:2px 5px;
    	color:#333;
    	display:none;
    	}
    
    
    </style>
    
    </head>
    
    <body>
    
    <div class="main">
    
    <div class="clear" style="height:50px;">&nbsp;</div>
    
    <div class="g960" style="height:50px;">
    <h1 style="width:200px;"><img src="i/siiimple.jpg" style="border:none;"></h1>
    <ul style="float:right; margin-right:10px;">
    <li><a href="about.html">about</a></li>
    <li><a href="contact/index.php">submit</a></li>
    </ul>
    </div>
    
    <div class="clear" style="height:50px;">&nbsp;</div>
    
    <div class="g320"><a href="#" style="border:none;" class="screenshot" rel="large/daring-fireball-large.jpg"><img src="i/daring-fireball.jpg"  style="border:none;"></a><h2><a href="http://www.daringfireball.com">Daring Fireball</a></h2></div>
    
    <div class="g320"><a href="#" style="border:none;" class="screenshot" rel="large/daring-fireball-large.jpg"><img src="i/daring-fireball.jpg"  style="border:none;"></a><h2><a href="http://www.daringfireball.com">Daring Fireball</a></h2></div>
    
    <div class="g320"><a href="#" style="border:none;" class="screenshot" rel="large/daring-fireball-large.jpg"><img src="i/daring-fireball.jpg"  style="border:none;"></a><h2><a href="http://www.daringfireball.com">Daring Fireball</a></h2></div>
    
    
    
    <div class="clear">&nbsp;</div>
    
    <div class="g320"><img src="i/work-at-play.jpg"><h2>Coudal</h2></div>
    
    <div class="g320">
    <a href="http://www.daringfireball.com" class="screenshot" rel="large/daring-fireball-large.jpg"><img src="i/daring-fireball.jpg"></a>
    <h2><a href="http://www.daringfireball.com">Daring Fireball</a>
    <span>4.1.09</span></h2>
    </div>
    
    <div class="g320"><img src="i/epilogue-magazine.jpg"><h2>Epilogue Magazine</h2></div>
    
    <div class="clear">&nbsp;</div>
    
    <div class="g320"><img src="i/london.jpg"></div>
    
    <div class="g320"><img src="i/sp.jpg"></div>
    
    <div class="g320"><img src="i/diseno.jpg"></div>
    
    <div class="clear">&nbsp;</div>
    
    <div class="g320"><img src="i/london.jpg"></div>
    
    <div class="g320"><img src="i/sp.jpg"></div>
    
    <div class="g320"><img src="i/diseno.jpg"></div>
    
    <div class="clear">&nbsp;</div>
    
    <div class="g320"><img src="i/london.jpg"></div>
    
    <div class="g320"><img src="i/sp.jpg"></div>
    
    <div class="g320"><img src="i/diseno.jpg"></div>
    
    <div class="clear" style="height:60px;">&nbsp;</div>
    
    <div class="g960" style="margin-bottom:10px;"><h1>design by justin marcus design</h1></div>
    
    </div>
    
    </body>
    </html>
    Thank you for any help!

  2. #2
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm almost convinced that this is a cache problem with the Ajax pagination script. The tooltip works fine after cache. But obviously the user will not reset their cache after every page...so I'll be forced to give up on the script altogether.

    Does anyone have any suggestions as to how to fix this problem with cache ?

    Thanks!

  3. #3
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The problem is with initialization function.

    initialize the function in the master page or onload of the page again.

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
  •