How to check if plugin is loaded in jQuery

May 14th, 2012 | by | jquery

May
14

This is a short simple quick tip, I re-use a lot of my code, ( it’s called going green ) anyway sometimes I forget to remove some common jQuery plug-in call’s that I use a lot like Lightboxes, Choosen Selects, jEditable, etc, etc. So I find just adding a quick check to make sure the method exists before calling it is very helpful.

One way of checking if a method exists is like this

  if($.fn.pluginname != 'undefined')

Or the short-hand version

if($.fn.pluginname)

Just replace “pluginname” with whatever your calling like below

 
// Verify there is a method named "chosen", then verify we need to use it.
if ($.fn.chosen)
{
	/*
	 Adds Chosen jQuery Select Box if Class Exists on Page.
	 */
	if ( $(".chzn-select").length > 0 )
	{
		$(".chzn-select").chosen();
	}
}
No tags for this post.

No Comments »

Making a Two-Column layout in CodeIgniter Bonfire

May 10th, 2012 | by | bonfire, codeigniter, twitter bootstrao

May
10

picture of 2 column layout or Bonfire using Twitter Bootstrap

Ok so I’ve been told the stock default navigation is confusing which I always thought it made total sense but whatever, I’ve been asked a few times on how to make a 2 column layout for so here’s some of the changes I made to my personal admin template that seem to help out.

Step one the Admin theme, I personally found navigation on Mobile’s a bit hard myself so I added a Breadcrumb under my Sub Navigation. I also changed my CSS to make the Sub-Navigation into Pill Navigation to make them more Obvious to user’s, Since not all my Admin Pages would look correct with a 2 Column layout I made a new Theme file called “two_left.php” in the Admin folder.

Here’s a Screenshot of the finished product to get you started on what were trying to make so you get a idea in your head first of the end product.

picture of 2 column layout or Bonfire using Twitter Bootstrap

Basic 2 Column Layout for Bonfire using Twitter Bootstrap's Navigation List


Ok so onto the changes, First Let’s add the breadcrumb navigation as that really helps in navigation namely on a touchscreen. Bonfire provides a awesome helper function to generate this for you so let’s make the changes.

First we need to edit our “admin/index.php file”

On about Line 11 of the current index file the container should start so just add this one line and that’ll add the Breadcrumbs.

<?php // Find this line ?>
<div class="container-fluid body">
 
  <?php // Add this line below it ?>
  <?php echo breadcrumb( NULL, TRUE, TRUE); ?>

And that will add the breadcrumb navigation, easy eh?

Ok now how to make a two column layout in Bonfire, let’s just copy the index.php to a new file I called mine “two_left.php”

This is what mine looks like

<?php
Assets::add_js(array(
                    Template::theme_url('js/bootstrap.min.js'),
                    Template::theme_url('js/chosen.jquery.min.js'),
                    Template::theme_url('js/jwerty.js')
               ),
               'external',
               true
);
?>
<?php echo theme_view('partials/_header'); ?>
 
<div class="container-fluid body">
   <div class="row-fluid">
     <div class="span12">
        <?php echo breadcrumb(NULL, TRUE, TRUE); ?>
      </div>
   </div>
 
   <div class="row-fluid">
     <div class="span2">
       <?php echo Template::block('sidebar'); ?>
     </div>
 
     <div class="span10">
       <?php echo Template::message(); ?>
       <?php echo Template::yield(); ?>
     </div>
   </div>
 
</div>
 
<?php echo theme_view('partials/_footer'); ?>

Ok so it’s basically the same template, I just registered a block named “sidebar” inside and added a 2 column grid layout using Twitter’s awesome grid system.

Now How to use this Sidebar Block?

I personally hard code my links as each site is different and I use different sidebar’s for different modules but this is the basic one I use for most of my layout’s, now the Sidebar block will look in your views folder first and work its way into the Template folder. So Let’s look at my method inside of my base Admin Controller that’s blank by default in Bonfire.

Open up “application/controllers/admin/content.php”

This is our Default Admin Home Controller.

I added this code to my index method

 
public function index() 
{
  // Set View to application/admin/content/index.php
  Template::set_view('admin/content/index');
 
  // Set up a Block to Display in the left column.
  Template::set_block('sidebar', 'admin/content/sidebar');
 
  // Use Template "two_left.php"  Instead of the Standard "index.php" for a layout.
  Template::render('two_left');
        }

Ok so the magic methods here that make it all happen are simple, we set the Template Block we registered in Our Theme file, and in the call to Template::render we tell it to load two_left instead of index. Easy stuff.

Now the Sidebar is up to you but here’s a example I use it’s not Dynamic and Doesn’t check permissions, that’s up to you but it’s just a example to get you rolling.

This file is located at “views/admin/content/sidebar.php”

 
<!-- Start of views/admin/sidebar.php -->
 
<div class="well" style="padding: 8px 0;">
        <ul class="nav nav-list">
 
                <li class="nav-header">Admin Navigation</li>
 
                <li >
                        <a href="<?= site_url(SITE_AREA); ?>"><i class="icon-home"></i> Home</a>
                </li>
                <li><a href="<?= site_url(SITE_AREA . '/content/albums'); ?>">
                        <i class="icon-film"></i> Photo Albums</a>
                </li>
                <li>
                        <a href="<?= site_url(SITE_AREA .'/content/articles'); ?>">
                                <i class="icon-pencil"></i> Main Pages
                        </a>
                </li>
 
                <li>
                    <a href="<?= site_url(SITE_AREA . '/content/calendar'); ?>" >
                            <i class="icon-calendar"></i> Calendar
                    </a>
                </li>
 
                <li class="divider"></li>
 
                <li class="nav-header">Admin Settings</li>
 
 
                <li>
                        <a href="<?= site_url(SITE_AREA . '/settings/users/edit/' . $current_user->id); ?>">
                                <i class="icon-user"></i> Profile
                        </a>
                </li>
                <li >
                        <a href="<?= site_url(SITE_AREA . '/settings/settings') ?>">
                                <i class="icon-cog"></i> Settings</a>
                </li>
                <li class="divider"></li>
                <li><a href="#"><i class="icon-flag"></i> Help</a></li>
        </ul>
</div>
 
<!-- End of views/admin/sidebar.php -->

Anyway I hope this help’s someone out and get’s them some ideas on how powerful Bonfire’s template system is.

Here’s one more picture of how you can use it inside of a Module to display different items in your menu list

picture of sidebar navigation with a table of data in one column

No tags for this post.

1 Comment »

CSS Coding Conventions and being a team playa! – Rant

May 9th, 2012 | by | css tricks and tips, web development

May
09

Ok, there’s already been a metric uckton of CSS Style Guides written, and they were not written by evil insane google clown’s posse drinking corporate kool-aid while sacrificing a unicorn to honor the gods of Windows and other properitory while little umpa lumpa’s were doing the Dance in he forrst, no these guides were actually written for a purpose and a reason. Anyone that does web development daily knows this can be a stress-ful job namely when doing multipul projects, going back and updating code you wrote 5 years ago, etc, etc. These guides were wrote to **HELP** you do this job easier, and all you have to do is READ THE DAMN MANUAL! Yes I know no man want’s to read a manual we can duck tape anything into shape and those screws and bolts were just extras, but you know what that costs more in the long run.

In this business we have to work with other people, yes even if were anti-social pissed off cubicle living wage-slaves ( btw I don’t work in a cubicle but I have had to pull out the office space action on quite a few fax machines, printers, etc )
we still have to work with others, and even worse then we have to work with our OWN CODE that we wrote 2 yrs, 4 yrs, shit I work with code I wrote 7 and 8 yrs ago sometimes as scary as it sounds I still do have some of my original clients and still have some very old work out there still running solid to this day and ever so often I have to update it, but this post wasn’t inspired by my own coding habits of years ago. It was inspired by something I’m just not gonna mention atm, Anyway
before I ramble and rant. Let’s just get down to business shall we?

Ok CSS is a “language” I guess, it’s not a cult, a religion, or even a black art that takes a lvl 99 Wizard to Obtain it’s a much loved needed element that every Designer, Developer, Programmer and 12 year old kid should already know if there gonna be in this business. Now I don’t ask you to remember a HolyHack or a trigger hasLayout on demand, I got HBO for on demand what I do ask thou is in your CSS follow some kinda flipping naming conventions that make a little bit of sense.

Like does it actual take you longer to right “left” instead of “lft”? I mean that extra character cost you how much time? Yea exactly, but you know what the difference in adding it does? Anyone that speaks 4th grade english knows it has something to do with LEFT not RIGHT.

Underscopes , Fore Scope and 11 years ago there was a browser browser released and god did it ruin the whole world on browser’s, we had to add hack’s for everything, even a HOVER needed javascript for that bad boy. But you know what, it can’t read a underscope and it actually takes 2 key presses to make a underscore and only one to make a Hyphen, so if your just lazy and don’t want to type or use a editor that actually will fill in your own styles, this will save you the extra key press your missing out on by naming your CSS classes something that makes sense instead of

#bar .foo ul li a unicorn:last-child

I’m not even gonna get onto the ID property in CSS styling, just if you know what a Singleton Pattern is, then your creating a CSS Singleton pattern when you style using ID’s, pushing more weight onto something to style it isn’t the answer 99% of the time. ID’s have there place and sometimes there useful, but not every where.

Comments in your CSS

OMG what? First you want me to document my PHP Code, then you want me to Document my JS code now you want what?!!?!?1
Your dam skippy I do, remember other people see these style sheets, you can’t hide them like your PHP Code. These are out in the public wide open, yea you can minify it but then when the client asks you to make a update (x) years from now and I’m sure your code style will have changed in (x) Years but that’s where comments come into place, Ideally you should have a properly commented style sheet, at the top a HEADER with hopefully a Table of Contents of Some Kind, Maybe even a SWATCH of Colors used that’d be superfly, and through-out your code you should comment the Sections on what they are. You could even go so far as to separate them out like put all the TOP HEADER elements in first, then under that your Elements that go under that, and down the rabbit hole we go.

Now Since there’s already been a metric unicorn’s rear-end of these style guides and conventions out there, I’m just gonna link out to some of them and hopefully you will take 10 minutes out of your day and read a couple them. So dun-dun-dun!

The Blog Roll pleas


  1. Net tuts

    CSS Best Practices – Please read the EDITOR Comments

  2. Web Designer Depot’s

    2009 Edition of CSS Best Practices


  3. Dezinerfolio’s

    CSS Guide – 09

Ok So there’s the goods, now start following some kinda coding conventions and you will be coding like a boss playa, and your other team members won’t want to shoot them-self’s or take one of the Windows machines out back to office space it!@

Comment if you have any good CSS Style Guides.

No tags for this post.

2 Comments »

Fixing Ubuntu 11.xx Laptop Users on Hibernation Issues and Battery Life

May 6th, 2012 | by | ubuntu

May
06

Ubuntu Linux for Humans

Ok so basically if you use 11 series or any of the newer Unity based ’s on a Laptop, then I’m sure you’ve noticed that Hibernation does not work, and even kills your battery eventually since what happens is that instead of actually going into hibernation mode it starts the process then shuts the CPU off. My laptop battery got completely destroyed because of this happening, and now if I just move the wrong way my cord might wiggle and that starts the whole Hibernation bug again. Which is to say annoying as hell namely since it normally takes 3 reboot’s to get the CPU back up and running again. Anyway quick fix, since we no longer have Gnome Config editor this what I found to work for me.

Open up your terminal, ( real linux users are probably reading this in linx anyway so it’s probably already open eh? )

gsettings is the command that controls unity’s and gnome-shell’s settings as far I can find. So, let’s setup our Power Management settings to work a little better.

 
gsettings set org.gnome.settings-daemon.plugins.power percentage-critical 10
gsettings set org.gnome.settings-daemon.plugins.power percentage-action 9
gsettings set org.gnome.settings-daemon.plugins.power use-time-for-policy false

OMG What did I just do!

  1. The First Command Sets The percentage remaining at which a “critical battery” notification appears.
  2. The Second Command Sets The percentage of the battery when the critical action is performed. Only valid when use-time-for-policy is false.
  3. So The Last Command sets time based notifications. If set to false, then the percentage change is used instead, which may fix a broken ACPI BIOS.

Ok, I hope this fixes some of your Ubuntu issues, it’s been awhile since I had to post a Ubuntu Linux related post and I figured fixing my own most annoying issue wouldn’t hurt. This btw was used on a Toshiba A665-S6070 model which Toshiba’s are the worst for trying to use anything but Winblows on, I’ve tried many times to make a HackinTosh out of this thing and due to the crappy BIOS and other crap parts used in it I will never buy another Toshiba again in my life. Cheers (:/)

Tags: , ,

No Comments »

A quick tip on CodeIgniter and Bonfire’s Model for evil!

April 27th, 2012 | by | bonfire, codeigniter

Apr
27

Yes its 2am and I can’t sleep so let’s make a quick post on using ’s Model for evil :P Ok that was just joke. Anyway Basically Bonfire’s Model was based on a lot of theory’s and code from other CI CRUD happy models. Let’s make it work for You in a way wasn’t designed for! N to 1 Relation’s on DB Tables are easy with our MY_Model core, not many people figured this out but setting up the table and key inside a protected variable, that means we can change them and come replace them at will! Let’s say you have a Photo Album, well Photo Albums normally contain Album Data then have related DB table to store photos, so that requires 2 models? Nah just requires the darkside….

Anyway here’s the situtation I have a DB table originally enough named “albums” and another very originally named “photos” and I don’t want to load to models to do the same thing, so let’s just make one model do it all, by adding one simple method to your Modules Model, I’m not very good at explaining this stuff so here’s some code and use the source luke!

 
protected $table = 'albums';
protected $key   = 'id';
 
/*
 * @var string The other table.
 */
protected $n_to_n_table = 'photos'
 
/*
 * @var string The other table the other key.
 */
protected $n_to_n_key = 'photo_id';
 
 
 
// Changes Table and Key to Other Stuff
public function set_table ($table = TRUE)
{
  // Check 
  if ( $table === TRUE )
  {
    // Personally I just hard code these back to make sure there right.
    $this->table = 'albums';
    $this->key   = 'id';
  } else {
    // Since you called this method with false, set the other table.
    $this->table = $this->n_to_n_table;
    $this->key   = $this->n_to_n_key;
  }
 
  // Make it method chain-able all the cool kids are doing it.
  return $this;
}
 
// This is just a quick example of finding all the photos
// Use your imagination and you can see this could be useful.
public function find_photos()
{
  // Ok simple usage, set_tables to Other DB table, Find All then Set Back.
  return $this->set_table(FALSE)->find_all()->set_table(TRUE);
}

Ok I hope the code was enough to explain what I’m doing with my table madness,
another usage of adding some extra methods could be for adding joins, likes, etc into your model.

Here’s a example of setting the LIKE clause since MY_Model doesn’t have a LIKE in it yet.

 
 
/**
Sets the LIKE section of the DB Query to whatever the param is set to.
 
@param string $field Field to search in. 
@param string $value Value to search for.
@param string $how   Where to put the % things, before, after, both.
 
@return  MY_Model|$this
*/
public function set_likes($field = '', $value = '', $how = 'before')
{
    // This is just a error prevention thing I do personally.
   if ($field == '' || $value == '')
   {
      return $this;
   }
 
   $this->db->like($field, $value, $how);
   return $this;
}

The above method just Set’s the LIKE SQL clause in a method chainable format.

Anyway that’s enough ramblings hope someone learned something from it.

BTW I do drink Guinness more Guinness = more articles.

Tags: , , , , ,

2 Comments »