brianjlandau (owner)

Revisions

gist: 174054 Download_button fork
public
Public Clone URL: git://gist.github.com/174054.git
Embed All Files: show embed
on_page_update.html #
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div id="map"></div>
 
<div id="map-side-bar">
  <div class="map-location" data="{id: 1, point: {lng: -122.2678847, lat: 37.8574888}, category: 'market'}">
    <a href="#" class="map-link">Berkeley Bowl</a>
    <div class="info-box">
      <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 2, point: {lng: -122.4391131, lat: 37.7729943}, category: 'restaurant'}">
    <a href="#" class="map-link">Nopalito</a>
    <div class="info-box">
      <p>The best authentic Mexican restaurant in San Francisco.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 3, point: {lng: -122.4481651, lat: 37.8042096}, category: 'museum'}">
    <a href="#" class="map-link">Exploratorium</a>
    <div class="info-box">
      <p>A hands-on museum of science, art, and human perception in San Francisco.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 4, point: {lng: -122.2940333, lat: 37.8752067}, category: 'food'}">
    <a href="#" class="map-link">ACME Bread</a>
    <div class="info-box">
      <p>Best Bread in the Bay.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 5, point: {lng: -122.2690830, lat: 37.8796000}, category: 'restaurant'}">
    <a href="#" class="map-link">Chez Panisse</a>
    <div class="info-box">
      <p>Alice Waters' restaurant. Birthplace of California cuisine.</p>
    </div>
  </div>
</div>
 
<div class="footer">
  <p id="pagination"></p>
</div>
on_page_update.js #
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
  $(document).bind('init_finished.quickpaginate', function(e){
    $('#map').jMapping({location_selector: '.map-location:visible'});
  });
  $(document).bind('paginate.quickpaginate', function(e, direction, page){
    $('#map').jMapping('update');
  });
  $('#map-side-bar .map-location').quickpaginate({
    perpage: 2, showcounter: false,
    pager: $("p#pagination")
  });
});