Twitter Bootstrap 3 Code Igniter Pagination Tutorial

November 07, 2013 9:54 AM

Both Code Igniter and Twitter Bootstrap 3 come with pagination utilities out of the box.  Marrying the two is extremely simple as you will see in the code sample below.  This tutorial does not cover the data model.  All data for this exercise has been mocked.   Go here for a good tutorial on the Code Igniter pagination class.

 

<?php

$this->load->library('pagination');

$config = array();
$config["base_url"] = base_url(); 
$config['total_rows'] = '27522'; 
$config["per_page"] = 12;
$config["uri_segment"] = 6; 

// twitter bootstrap markup
$config['full_tag_open']   = '<ul class="pagination pagination-sm">';
$config['full_tag_close']  = '</ul>';
$config['num_tag_open']    = '<li>';
$config['num_tag_close']   = '</li>';
$config['cur_tag_open']    = '<li class="active"><span>';
$config['cur_tag_close']   = '<span class="sr-only">(current)</span></span></li>';
$config['prev_tag_open']   = '<li>';
$config['prev_tag_close']  = '</li>';
$config['next_tag_open']   = '<li>';
$config['next_tag_close']  = '</li>';
$config['first_link']      = '&laquo;';
$config['prev_link']       = '&lsaquo;';
$config['last_link']       = '&raquo;';
$config['next_link']       = '&rsaquo;';
$config['first_tag_open']  = '<li>';
$config['first_tag_close'] = '</li>';
$config['last_tag_open']   = '<li>';
$config['last_tag_close']  = '</li>';

$this->pagination->initialize($config);
// pass the parameters for per_page, page number, order by, sort, etc here

// generate links
$data['links'] = $this->pagination->create_links();

// pass the data to the view
$this->load->view('links',$data);

 

The markup generated from Code Igniter:

  <ul class="pagination pagination-sm">
    <li><a href="/">&laquo;</a></li>
    <li><a href="/27468">&lsaquo;</a></li>
    <li><a href="/27456">2289</a></li>
    <li><a href="/27468">2290</a></li>
    <li class="active"><span>2291<span class="sr-only">(current)</span></span></li>
    <li><a href="/27492">2292</a></li>
    <li><a href="/27504">2293</a></li>
    <li><a href="/27492">&rsaquo;</a></li>
    <li><a href="/27516">&raquo;</a></li>
  </ul>

 

Share this on
 
 
 

0 Comments

Twitter Bootstrap 3 Menu Generator

August 21, 2013 11:55 AM

Customize and generate a custom bootstrap 3 menu using this tool.  It works great after migrating from an older version of bootstrap to bootstrap 3.  You can customize all colors in the menu and the generated css can be copied and pasted to your site.

 

Click the link below to get started now..
http://bootstrap3-menu.codedorigin.com/

Share this on
 
 

0 Comments

Responsive Share This

July 19, 2013 11:14 AM

In this article we will show you how to create a responsive Share this bar for your website.

Prerequisites

Before adding the share this bar to your website, you will need to head over to ShareThis.com and get the code.

Adding responsive ShareThis to your site

There are a few minor tweaks we will make to the code.

Header code

In the header section, we will modify the var switchTo5x assignment. In the example below, we are using document.documentElement.clientWidth to get the width of the client viewing area and setting the variable from there.

Do not forget to replace ZXXXZXX-aa14-4674-a945-ae01d9asd45gsad with your publisher key from ShareThis.com

<script type="text/javascript">if(document.documentElement.clientWidth>599) { var switchTo5x=true;} else { var switchTo5x=false;}</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
<script type="text/javascript">if(document.documentElement.clientWidth>599) { stLight.options({publisher: ""ZZXXZXX-aa04-4674-a945-ae01d93e09a7", doNotHash: false, doNotCopy: false, hashAddressBar: false});}</script>

Footer/In Page Code

The second set of code should be placed on the HTML wherever you want the share buttons to show when in mobile mode. Notice again, that we are checking the width and calling the hoverbuttons or the fixed buttons respectively.

Do not forget to replace ZXXXZXX-aa14-4674-a945-ae01d9asd45gsad with your publisher key from ShareThis.com

 

<script>
if(document.documentElement.clientWidth > 599) {
var options={ "publisher": "ZZXXZXX-aa04-4674-a945-ae01d93e09a7", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "linkedin", "pinterest", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
}
else {
document.write("<span class='st_sharethis_vcount' displayText='ShareThis'></span>"+
"<span class='st_facebook_vcount' displayText='Facebook'></span>"+
"<span class='st_twitter_vcount' displayText='Tweet'></span>"+
"<span class='st_linkedin_vcount' displayText='LinkedIn'></span>"+
"<span class='st_pinterest_vcount' displayText='Pinterest'></span>"+
"<span class='st_email_vcount' displayText='Email'></span>");
}
</script>
Share this on
 
 

0 Comments

Gumby 2 Framework CSS Menu Generator

July 16, 2013 1:31 PM

For users of the Gumby 2 Framework, we have developed a menu generator to make rolling out sites quicker and easier.  Simply select the colors for navigion background and text, copy/paste the css into your site, and you're done!

 

Click the link below to get started now..

http://gumby-css.codedorigin.com/

Share this on
 
 

0 Comments

Code Igniter DB Caching with time interval - Expiring DB Cache

June 11, 2013 12:50 AM

This method is very similar to the function found in the article PHP Cache url for specified amount of time.  I adapted it for Code Igniter because the CI db caching system is permenant unless you call method to clear it.  The method below allows you to run a query and cache the results for a specified amount of time..

 

Class MY_Model extends CI_Model
{
  function cache_query($query,$interval=24,$params=array())
  {

    $cache_directory='../cache/';
    if(!is_dir($cache_directory)){
      @mkdir($cache_directory,0777,true);
    }

    if(!is_dir($cache_directory)){
      log_message('error','Cache directory is not writable['.$cache_directory.']');
    }

    // adding the server name to the hash in case multiple sites use the same cache directory

    $cache_file=$cache_directory.md5($_SERVER['SERVER_NAME'].$query.print_r($params,true)).'.json';
    if(!file_exists($cache_file)||filemtime($cache_file)<(time()-(60*60*$interval))){
      $results=$this->query($query,$params)->result_array();
      if($handle=@fopen($cache_file,'w')){
        @fwrite($handle, json_encode($results));
        fclose($handle);
      }
      else{
        log_message('error','Cannot write to cache file');
      }

      log_message('debug','Data loaded from db for query ['.$query.']');
      return$results;
    }

    log_message('debug','Data loaded from cache file ['.$cache_file.'] for query ['.$query.']');
    return json_decode(file_get_contents($cache_file),true);
  }
}
?> 
 
 

0 Comments

Archive »
September 20, 2014 4:10am
Top Mobile App Development Services Recommendations Named by bestwebdesignagencies.com for September 2014
NAPLES, FL --(Marketwired - September 20, 2014) - The independent authority on web services, bestwebdesignagencies.com, has named their ratings of the 10 best mobile app development companies in the web design industry for the month of September 2014. Each month the independent research team at bestwebdesignagencies.com analyzes the best performing mobile app development companies and ranks them ...
September 19, 2014 7:41am
Xaverian Brothers Partner with The Canton Group to Launch New Website
Baltimore-based web and software development firm, The Canton Group, was selected by the Xaverian Brothers to design and develop new website aimed at increasing online donations. (PRWeb September 19, 2014) Read the full story at http://www.prweb.com/releases/- 2014/09/prweb12181551.htm
September 19, 2014 3:10am
100 Top Professional Website Development Agencies Announced by bestwebdesignagencies.com for September 2014
NAPLES, FL --(Marketwired - September 19, 2014) - The independent authority on web services, bestwebdesignagencies.com, has named their rankings of the 100 best custom website development services in the web design industry for the month of September 2014. Each year thousands of web design services are put to the test by an independent research team dedicated to pinpointing remarkable vendors ...
September 18, 2014 9:29am
Lodging Interactive Wins Multiple Industry Awards
Lodging Interactive, a digital marketing firm offering a suite of tailored solutions exclusively to the hospitality industry, has received multiple awards this week for outstanding website design from two organizations - Travel Weekly and the Web Marketing Association.
Read More »