Thursday, August 28, 2014

Codeigniter form validation set_value and set_checkbox problem fixed

For example, I have two fields in my form first_name and last_name
I have set the validation rule only for first_name. 'set_value' should work for both the fields regardless of rule ? Right ?
- No, set_value or set_checkbox or set_select only works against the items you have chosen to validate using the form_validation class.

Solution
Simple way to fix this problem is to overwrite the core 'MY_form_helper.php' with some functions.
- Copy the following code and save it and name it as 'My_form_helper.php' and placed under 'application/helpers' folder. It will overwrite the core functions.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
/**
* Form Value
*
* Grabs a value from the POST array for the specified field so you can
* re-populate an input field or textarea.  If Form Validation
* is active it retrieves the info from the validation class
*
* @access   public
* @param   string
* @return   mixed
*/
if (!function_exists('set_value')) {
 
        function set_value($field = '', $default = '') {
                $OBJ = & _get_validation_object();
 
                if ($OBJ === TRUE && isset($OBJ->_field_data[$field])) {
                        return form_prep($OBJ->set_value($field, $default));
                } else {
                        if (!isset($_POST[$field])) {
                                return $default;
                        }
 
                        return form_prep($_POST[$field]);
                }
        }
 
}
 
if (!function_exists('set_checkbox')) {
 
        function set_checkbox($field = '', $value = '', $default = '') {
                $OBJ = & _get_validation_object();
 
                if ($OBJ === TRUE && isset($OBJ->_field_data[$field])) {
                        return form_prep($OBJ->set_checkbox($field, $value, $default));
                } else {
                        if (!isset($_POST[$field])) {
                                return '';
                        }
                        else{
                                if($_POST[$field] == $value)
                                {
                                        return 'checked=\'checked\'';
                                }
                        }
                }
        }
 
}
 
/* End of file MY_form_helper.php */
/* Location: ./application/helpers/MY_form_helper.php */ 
This will overwrite the core functions MY_form_helper.php and will work with all the fields regardless of validation rules.
Enjoy :)
Source: http://pastebin.com/h70F9esF

Tuesday, August 19, 2014

Simple Two Column CSS Responsive Layout

HTML STRUCTURE
Here is a simplified example of the HTML.
<div id="main">
<div class="wrap">
 
                <div id="primary">
                    <div id="content" role="main">
                        <p>Article content...</p>
                    </div>
                </div>
 
                <div id="secondary">
                    <div class="widget">
                        <p>Sidebar content...</p>
                    </div>
                </div>
 
            </div>
        </div>
CSS RESET
We'll use the CSS reset.
/* =Reset
-------------------------------------------------------------- */
 
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0;
}
 
html,
body,
div{
    margin: 0;
    padding: 0;
}

SINGLE COLUMN LAYOUT FOR MOBILE
We’ll start with just one column for the mobile layout, with the content column coming first and the sidebar below it. Before we get to that, lets add some color so we can tell the different elements apart.
/* =Color
-------------------------------------------------------------- */
 
#header{
    background: #cccccc;
}
 
#main{
    background: #dddddd;    
}
 
#secondary {
    border: 1px solid #bbbbbb;
}
The #header is gray and the #main section is lighter gray. Now let’s move on to the actual structure.
/* =Structure
-------------------------------------------------------------- */
 
.wrap{
    max-width: 1140px;
    margin: 0 auto;
    padding: 1em;
}
 
.wrap:after {
    content: "";
    display: table;
    clear: both;
}
 
#primary{
    max-width: 720px;
    margin: 0 auto;
}
 
#secondary{
    max-width: 400px;
    margin: 0 auto;
    padding: 1em;
}
Starting at the beginning, the .wrap divs have a maximum width of 1140px and are centered on larger devices by the setting the margin to “0 auto”. The padding is to keep the text from touching the borders of the browser on smaller screens.
The code in the .wrap:after section is to make sure each .wrap div contains all floated elements inside it, rather than letting the floated elements overlap the edges. This is often called a “clearfix” hack.
The #primary section sets a maximum width for the main content column. We don’t ever want a content column getting really wide because wide columns are more difficult to read. Here we’re limiting this column to 720px and centering it using “margin: 0 auto;” for when the screen is larger than 720px.
The #secondary section limits the sidebar width to 400px. Sidebar content is rarely intended to be displayed in a wide area. Since the sidebar will not be wider than 400px in the full two column layout, we limit it here also. This way the sidebar will appear in a consistent manner regardless of the screen size. Just like the other elements, we center it using “margin: 0 auto” and then give it a padding of 1em so the content doesn’t touch the border we gave it earlier.
Here’s what it should look like on mobile.

TWO COLUMN CSS LAYOUT
Here’s where we finally get to use CSS media queries. This is what it looks like:
/* =Media Queries
-------------------------------------------------------------- */
 
@media screen and (min-width : 900px) {
    #primary{
        float: left;
        width: 65%;
        padding-right: 1em;
    }
 
    #secondary{
        float: right;
        width: 35%;
    }
}
First let’s look at the @media screen line. This line determines when the enclosed CSS is applied. In this case, it is applied when the website is being displayed on a screen that has a width of 900px or more.
The #primary section is floated to the left and given a width of 65%. Then 1em of padding is added on the right to prevent the enclosed content from touching the sidebar that will be positioned next to the right of the main content.
The #secondary section is floated to the right and given a width of 35%, so that it sits next to the #primary section.
Here’s what it looks like on the desktop.

Finally, if we wanted the sidebar to be on the left and the content on the right, we would only need to change the float directions of the #primary and #secondary columns in the media query section of the stylesheet and change “padding-right” to “padding-left” on the #primary div.
/* =Media Queries
-------------------------------------------------------------- */
 
@media screen and (min-width : 900px) {
    #primary{
        float: right;
        width: 65%;
        padding-left: 1em;
    }
 
    #secondary{
        float: left;
        width: 35%;
    }
}
That’s all.If you have any questions or comments, feel free to let me know via the contact page. Thanks! Source: http://themefoundation.com/two-column-css-layout/