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 »
October 30, 2014 12:42pm
Zadro Web Re-launches Website, Expands Digital Marketing Services
SCHAUMBURG, Ill., Oct. 30, 2014 /PRNewswire/ --It was announced today that Zadro Web has launched a new website at zadroweb.com ( https://zadroweb.com ). The company's new site offers an expanded suite ...
October 30, 2014 10:54am
Winners of the 2014 Semantic Web Challenge Announced at the International Semantic Web Conference Held in Italy
Open Track contestants were required to submit applications that utilize the semantics (meaning) of data and applications had to be designed to operate in an open web environment where information sources are under diverse ownership and control. The first involved providing a demonstration of the application design to the jury. 1st prize: Mining the Web of Linked Data with RapidMiner by Petar ...
October 30, 2014 6:56am
Reminders of a Bygone Internet
The Windows 93 project and the revival of the early Internet experience do more than just shift web design.
October 30, 2014 2:11am
bestwebdesignagencies.com Acknowledges Appetizer Mobile LLC as the Eighth Top iPhone App Development Service for the ...
NAPLES, FL --(Marketwired - October 30, 2014) - bestwebdesignagencies.com has announced the rankings of the 50 best iPhone development firms for October 2014. Appetizer Mobile LLC has been named the eighth best agency due to their effective performance during the bestwebdesignagencies.com thorough evaluation process. The recommendations are released each month to assist customers of web design ...
Read More »