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 23, 2014 3:51pm
SitePoint Celebrates 15th Birthday by Partnering with New Relic to Distribute 5,000 Learnable Memberships
LOS ANGELES, Oct. 23, 2014 /PRNewswire-iReach/ -- SitePoint, one of the worlds leading resources for web developers and one of the top 700 global websites, is partnering with the web application and performance management service, New Relic to distribute 5,000 free memberships to its learning platform, Learnable. SitePoint is excited to partner with New Relic for a second year and to share our ...
October 23, 2014 3:39pm
Work At BI - Front-End Developer / Web Design Opening
Mario Seekr Business Insider is looking for a highly skilled front-end developer / web designer to help us create new story experiences and solve business/design/tech problems. Ideal candidates will have a passion for design, acommand of HTML and CSS, experience using Bootstrap,and knowledge of Less and/or Sass. Proficiency in Sass, Bootstrap, Javascript and JQuery are a plus. You will play ...
October 23, 2014 1:40pm
Square 2 Marketing Makes A Bold Move To Dominate Inbound
The world's leading inbound marketing and inbound sales agency just got savvier. The acquisition of web design and development firm Savvy Panda enables Square 2 Marketing to offer
October 23, 2014 8:00am
Wix.com Launches New Campaign to Put Stars Back in the New York City Night Sky
NEW YORK -- Wix.com Ltd. , a leading global web development platform with more than 55 million registered users worldwide, revealed today a new campaign to put the stars back into the New York City night ...
Read More »