Load More Button

iboard · Jan 6, 2011 · a7bdbab · a7bdbab
1 parent b1fa465
commit a7bdbab
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/app/views/blog/index.js.erb b/app/views/blog/index.js.erb
@@ -1,31 +1,36 @@
-$('.load_more').before( '<p class="page_seperator"><%= @blog_entries.current_page -%>/<%= @blog_entries.total_pages -%></p>'+
-  '<%= escape_javascript(render(:partial => @blog_entries)) -%>');
+$(".pagination").html('<%= escape_javascript(will_paginate(@blog_entries)) %>');
+
+$('.load_more').before( '<div id="page<%= @blog_entries.current_page -%>" style="display: none;">'+
+                          '<p class="page_seperator"><%= @blog_entries.current_page -%>'+
+                          '/<%= @blog_entries.total_pages -%></p>'+
+                          '<%= escape_javascript(render(:partial => @blog_entries)) -%>'+
+                          '</div>');
+
 <% if @blog_entries.total_pages && (@blog_entries.current_page < @blog_entries.total_pages) %>
   <% if params[:tag] %>
     $('#load_more').html( '<%=  escape_javascript(link_to_function(t(:load_more)+" "+
     params[:tag],"insert_load_button( 'load_more','#{t(:loading)}',"+
                     "'#{tag_path(params[:tag], :page => (params[:page] ? (params[:page].to_i+1) : 2), 
                                 :blog_order => params[:blog_order], 
                                 :blog_dir => params[:blog_dir]
-                               )}')" )) -%>');
+                               )}')", :id => "load_more_link" )) -%>');
   
   <% elsif params[:month] %>
     $('#load_more').html( '<%=  escape_javascript(link_to_function(t(:load_more)+" "+
     (params[:month]||"").gsub(/_/,"/"),"insert_load_button( 'load_more','#{t(:loading)}',"+
                   "'#{archive_path(params[:month], :page => (params[:page] ? (params[:page].to_i+1) : 2), 
                               :blog_order => params[:blog_order], 
                               :blog_dir => params[:blog_dir]
-                             )}')" )) -%>');
+                             )}')", :id => "load_more_link" )) -%>');
   <% else %>
     $('#load_more').html( '<%=  escape_javascript(link_to_function(t(:load_more),"insert_load_button( 'load_more','#{t(:loading)}',"+
                     "'#{blog_path(:page => (params[:page] ? (params[:page].to_i+1) : 2), 
                                 :blog_order => params[:blog_order], 
                                 :blog_dir => params[:blog_dir]
-                               )}')" )) -%>');
+                               )}')", :id => "load_more_link" )) -%>');
   <% end %>
-  $('.load_more').show();
+  $('#page<%= @blog_entries.current_page -%>').slideDown();
 <% else %>
   $('#load_more').html('<%= escape_javascript(t(:end_of_list)) -%>');
 <% end %>
 
-$(".pagination").html('<%= escape_javascript(will_paginate(@blog_entries)) %>');
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -201,7 +201,6 @@ function gallery_popup(duration,args) {
 
 }
 
-
 function video_popup(img_url,mobile_url) {
   var new_id = new Date().getTime(); 
   var regexp = new RegExp("popup", "g");  
@@ -256,9 +255,9 @@ function youtube_popup(img_url) {
   $('#overlay').fadeTo(500,1.0);  
 }
 
-
 function insert_load_button(where,txt,path) {
   var target = $("#"+where);
-  target.html("<img src='/images/spinner.gif' title='Loading...' /> "+txt);
+  var id='load_more_link';
+  target.html("<div id='"+id+"'><img src='/images/spinner.gif' title='Loading...' /> "+txt+"</div>");
   $.ajax({ url: path, context: where});
 }
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
@@ -1364,13 +1364,19 @@
   }
 
   .load_more {
-   padding: 5px;
-   background: #A2ADC5;
-   border: 1px solid #444;
-   -moz-border-radius: 5px;
-   -webkit-border-radius: 5px;
-   text-align: center;
-   text-decoration: none;
+    width: 100%;
+  }
+
+  #load_more_link  {
+    display: block;
+    padding: 5px;
+    font-weight: bold;
+    background: #A2ADC5;
+    border: 1px solid #444;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    text-align: center;
+    text-decoration: none;
   }
 
   .page_seperator {