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 »
May 04, 2016 9:12pm
Streamlining Your SEO Efforts by Using Web Design Analytics - Business 2 Community
Streamlining Your SEO Efforts by Using Web Design AnalyticsBusiness 2 CommunityWhen it comes to your website, you will want to collect as much data as possible to help you in the process of Search Engine Optimization (SEO). This is probably the biggest task many website owners have to grapple with. SEO, web design and site ...and more
May 04, 2016 5:20am
Staxoweb Launches New Web Development Public Awareness Campaign - Free Press Release Center (press release)
Staxoweb Launches New Web Development Public Awareness CampaignFree Press Release Center (press release)Staxoweb, one of the United Kingdom's leading Web Solutions Specialists, launched a new public awareness campaign. With too many business owners today commissioning websites that do not deliver results, the new Staxoweb campaign will spread...
May 04, 2016 1:35am
Zend Expressive im Blick - entwickler.de (Blog)
entwickler.de (Blog)Zend Expressive im Blickentwickler.de (Blog)Middleware? Zend\Expressive? Verstehen Sie nur Bahnhof? Wir haben also einiges vor in diesem Artikel &hellip; am Ende jedenfalls werden wir leichtgewichtige in krzester Zeit Webanwendungen mit dem neuen PSR-7-Middleware-Microframewor- k aufbauen.
May 03, 2016 9:34pm
Deals: Learn To Be A Web Developer And Save Big - Gizmodo Australia
Gizmodo AustraliaDeals: Learn To Be A Web Developer And Save BigGizmodo AustraliaThe web development business is lucrative and professionals who know how to code websites are in high demand. Get the skills you need to succeed in this sector with The Complete Web Developer Course, marked down to just $19 AUD [$14 USD] for...
Read More »