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 »
April 17, 2014 7:07am
Atlanta's Best Web Design Firm Wins Gold Horizon Interactive Award - The Creative Momentum
ATLANTA, April 17, 2014 /PRNewswire/ --The Creative Momentum, a full-service creative and digital marketing agency specializing in custom website design and development, has been named a Gold Level winner in the Horizon Interactive Awards Competition. This international competition highlights the "best of the best" in interactive media production. "It's always an honor to receive a Gold award ...
April 17, 2014 5:21am
Ten Best Web Design Companies in Egypt Proclaimed in April 2014 by egypt.topseos.com
egypt.topseos.com publishes rankings of best web design services in Egypt for April 2014. (PRWeb April 17, 2014) Read the full story at http://www.prweb.com/releases/- 2014/04/prweb11770702.htm
April 17, 2014 3:26am
Fort Collins Web Development, Video Music & Comedy - Anchored Integrations Proudly Announces the 'Anchored for the ...
Anchored Integrations, offering Fort Collins Web Development and Fort Collins Marketing, partnered up with local Hanging Ellipsis Films to begin marketing the local music and comedy talent with web development, marketing, photo, video and more. In this bold move to establish the Fort Collins music and comedy scenes in a greater light, both Anchored Integrations and Hanging Ellipsis Films display ...
April 16, 2014 8:12pm
Peter Publishing Develops New PHP Cache Program for Websites
To alleviate issues caused by hackers, and to save website developers and web publishers significant development and maintenance time, and to speed up webpages, XFC PHP Cache Program has been created Kuala ...
Read More »