Tech FAQs

Foundation orbit slider inside reveal modal has no height

2015-04-24T11:56:00.001-07:00

Orbit slider inside foundation reveal modal sets height 0 some reason. Here is the simple way to fix that issue:

$(document).on('opened.fndtn.reveal', '[data-reveal]', function(){
  $(window).trigger('resize');
});

Foundation data orbit open specific slide on load

2015-04-24T11:32:00.002-07:00

Here is the simple way to open the the particular slide on page load:

$.fx.off = true;
$("[data-orbit-slide='"+index+"']").trigger("click");
$.fx.off = false;

Above code will first disable the jquery effects & then triggers the particular slide and then enables the jquery effect. This way we can open any slide without animation.

Note: Here index is slide number(index always starts with 0).

How to add different styles to last row of css grid layouts

2015-04-05T11:43:00.000-07:00

Here is the simple way to add different styles for last row elements of css grid layout.

li:nth-child(Xn):nth-last-child(-n+Y) ~ li {
}

X is the no.of columns in the grid and Y is the (no.of columns+1)

For example, we have 3 column grid layout with border bottom for each grid item, and we don't want to border bottom for last row items.

li:nth-child(3n):nth-last-child(-n+4) ~ li {
    border-bottom: 0px;
}

Ex: 4 column grid layout

li:nth-child(4n):nth-last-child(-n+5) ~ li {
    border-bottom: 0px;
}

Ex: 5 column grid layout

li:nth-child(5n):nth-last-child(-n+6) ~ li {
    border-bottom: 0px;
}

Note: Above code will only work, if you have two or more than two rows.

get url parameters and values using jquery

2015-03-22T11:12:00.000-07:00

Here is the simple method to get url parameters & values using jquery.

function getUrlParams() {
    var url = document.location.href;
    var params = {},hash;
    var params_arr = url.slice(url.indexOf('?') + 1).split('&');
    for(var i=0; i  < params_arr.length; i++){
      hash = params_arr[i].split("=");
      params[hash[0]] = hash[1];
    }
    return params;
  }

Above method gets the current page URL and split into parameters and their values object. For example:

http://faqspoint.blogspot.in?src=google&module=bottom

Result:

{ src : "google", module : "bottom" }

To get the values of parameters:

var source = getUrlParams()["src"];    //It will return "google"
var module = getUrlParams()["module"];    //It will return "bottom"

How to remove index.php from codeigniter url?

2015-03-21T01:53:00.000-07:00

Codeigniter defaultly add index.php in the url because that file is responsible for processing all requests to the system. But, we can easily remove index.php by using URL Rewriting.

Here are the simple steps:

1. Update general configuration:

Open config.php from system/application/config directory and replace

$config["index_page"] = "index.php";

with

$config["index_page"] = "";

2.Create an .htaccess file

Create a new file named .htaccess in the root directory and write below code in that file:

RewriteEngine on
RewriteCond $1 !^(index\.php|css|images|js|robots\.txt)
RewriteRule ^(.*)$ /index.php?/$1 [L]

Horizontal line with text in the middle using CSS

2015-03-01T03:24:00.000-08:00

Here is the simple example to create horizontal line with text in the middle. The line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

HTML:

<h2><span>This is main header</span></h2>

CSS:

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#ffffff; 
    padding:0 10px; 
}

OUTPUT:

PX to EM to PT Conversion

2015-02-26T10:58:00.001-08:00

Here is the list of px to em conversions. These conversions are based on 16px browser default size.

PX	EM	Percent	Points
5px	0.3125em	31.25%	4pt
6px	0.375em	37.5%	5pt
7px	0.438em	43.8%	5pt
8px	0.500em	50.0%	6pt
9px	0.563em	56.3%	7pt
10px	0.625em	62.5%	8pt
11px	0.688em	68.8%	8pt
12px	0.750em	75.0%	9pt
13px	0.813em	81.3%	10pt
14px	0.875em	87.5%	11pt
15px	0.938em	93.8%	11pt
16px	1.000em	100.0%	12pt
17px	1.063em	106.3%	13pt
18px	1.125em	112.5%	14pt
19px	1.188em	118.8%	14pt
20px	1.250em	125.0%	15pt
21px	1.313em	131.3%	16pt
22px	1.375em	137.5%	17pt
23px	1.438em	143.8%	17pt
24px	1.500em	150.0%	18pt

CSS Triangle

2015-02-25T10:47:00.001-08:00

Here are the simple example of css triangles:

Note: Before writing CSS, first create div tag with class 'triangle'.

Triangle Up:

.triangle{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}

Output:

Triangle Down:

.triangle{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid red;
}

Output:

Triangle Left:

.triangle{
  width: 0px;
  height: 0px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 50px solid red;
}

Output:

Triangle Right:

.triangle{
  width: 0px;
  height: 0px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid red;
}

Output:

Top Left Triangle:

.triangle{
  width: 0px;
  height: 0px;
  border-right: 50px solid transparent;
  border-top: 50px solid red;
}

Output:

Top Right Triangle:

.triangle{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-top: 50px solid red;
}

Output:

Bottom Left Triangle:

.triangle{
  width: 0px;
  height: 0px;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}

Output:

Bottom Right Triangle:

.triangle{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-bottom: 50px solid red;
}

Output:

Finally combine four triangles:

.triangle{
  width: 0px;
  height: 0px;
  border-top: 100px solid #0099ff;
  border-left: 100px solid #ff9900;
  border-right: 100px solid #F6402D;
  border-bottom: 100px solid #8CC63E;
}

Output:

How to maintain aspect ratio when resizing a DIV?

2015-02-25T09:31:00.001-08:00

You can create containers that maintain a constant aspect ratio by using padding-bottom as a percentage. The CSS specifications says that padding-bottom is defined relative to the "width", not height, so if you want a 4:3 aspect ratio container you can do something like this:

<div style="width: 100%; position: relative;padding-bottom: 75%;">
  <div style="position:absolute;left:0;top:0; right:0; bottom:0;">
    This content will have a constant aspect ratio that varies based on the width.
  </div>
</div>

Change console.log display(color/font/background color)

2015-02-23T10:14:00.000-08:00

You can apply your own styling to log message, by prefixing the message with %c, and provide the css styles as second parameter to the log message. Here is the simple example:

console.log("%cThis is green color text", "color: green;");

Here is the output:

Bold text:

console.log("%cThis is green color text", "color: green;font-weight: bold;");

Background color:

console.log("%c Hello world ", "color: #FFFFFF;font-weight: bold;background-color: red;");

Multiple colors:

console.log("%c Hello world, %c Hello world ", "color: green;", "color: red;");

How to send large number(10000+) of emails using Php/MySql?

2015-02-22T02:56:00.002-08:00

We can do this in two ways:

With Cron
With ajax

1. With cron

Create new table for emails with required fields
Insert all the email ids into table with status as 'not sent'
Write a php function to fetch set of email ids(Ex: get 100 ids of status='not sent' at a time) and send email to them using mail() method. After sending the mail update status to "sent"
Write cron job to run this method every 5 min until all mails sent.

2. With ajax(through browser)

Most of the times your request will be timed out, if you are trying to send large no.of emails through browser. Instead of sending all mails at a time, we can send using pagination concept. So you don't need to worry about request timeouts.

Create Empty div with id
Get all mail ids using ajax and save in javascript variable
Consider sending 100 mails at a time and create no. of pages it will create
Ex:
```
var totalmails = 12000;

var pagecount = Math.ceil(totalmails/100);
```

Depends on no.of pages, create select dropdown with page numbers

var pages = "<select name='pages'>";
for(var i = 0; i <= pagecount; i ++){
  pages += "<option value='"+i+"'>"+i+"</option>";
}
pages += "</select>";

On selection of each page number, split the array and make the ajax call with those mail ids and send mail using php mail() method.
Thats it!

How to add styles(internal styles) in HAML file?

2015-02-21T00:14:00.001-08:00

Simply use:

:css
  .header {
    font-size: 14px;
  }

If you want to use scss:

:scss
  .header {
    font-size: 14px;
    .logo {
        width: 100px;
        margin-right: 10px;
    }
}

fatal: cannot do a partial commit during a merge in Git

2015-02-20T23:38:00.000-08:00

Adding -i to the commit command fixes this problem.

git commit -i filename.php

Ex: git commit -i filename.php -m"COMMIT MESSAGE"

How to create a static page in cakephp?

2015-02-20T23:30:00.000-08:00

Here is the simple way to create static page.

First create page with .ctp extension(static pages should be created with .ctp extension) and save in app/views/page folder. Ex: file named as sample.ctp
Add rewrite URL in routes.php (app/config/routes.php).

Router::connect('/sample/', array('controller' => 'pages', 'action' => 'display', 'sample'));

That's it. Now you can access your sample page at www.yoursite.com/sample

Rails and Rake Commands

2014-06-16T21:00:00.000-07:00

Here is a list of various important commands supported by Rake:

rake about - List versions of all Rails frameworks and the environment
rake assets:clean[keep] - Remove old compiled assets
rake assets:clobber - Remove compiled assets
rake assets:environment -Load asset compile environment
rake assets:precompile - Compile all the assets named in config.assets.precompile
rake clean - Cleanup temporary, log and backup files
rake db:create - Create the database from DATABASE_URL or config/database.yml for the current Rails.env (use db:create:all to create all dbs in the config)
rake db:drop - Drops the database using DATABASE_URL or the current Rails.env (use db:drop:all to drop all databases)
rake db:fixtures:load - Load fixtures into the current environment's database. Load specific fixtures using FIXTURES=x,y
rake db:migrate - Migrate the database through scripts in db/migrate. Target specific version with VERSION=x
rake db:migrate:status - Display status of migrations
rake db:remigrate - Migrate schema to version 0 and back up again
rake db:rollback - Rolls the schema back to the previous version (specify steps w/ STEP=n)
rake db:schema:cache:clear - Clear a db/schema_cache.dump file
rake db:schema:cache:dump - Create a db/schema_cache.dump file
rake db:schema:dump - Create a db/schema.rb file that can be portably used against any DB supported by AR.
rake db:schema:load - Load a schema.rb file into the database.
rake db:seed - Load the seed data from db/seeds.rb
rake db:setup - Create the database, load the schema, and initialize with the seed data (use db:reset to also drop the db first)
rake db:structure:dump - Dump the database structure to db/structure.sql
rake db:version - Retrieves the current schema version number
rake db:sessions:clear - Clear the sessions table.
rake db:sessions:create - Creates a sessions table for use with CGI::Session::ActiveRecordStore.
rake db:structure:dump - Dump the database structure to a SQL file.
rake doc:app - Generate docs for the app -- also available doc:rails, doc:guides (options: TEMPLATE=/rdoc-template.rb, TITLE="Custom Title")
rake log:clear - Truncates all *.log files in log/ to zero bytes (specify which logs with LOGS=test,development)
rake rails:template - Applies the template supplied by LOCATION=(/path/to/template) or URL
rake routes - Print out all defined routes in match order, with names
rake spec - Run all specs in spec directory (excluding plugin specs)
rake spec:features - Run the code examples in spec/features
rake spree:install:migrations - Copy migrations from spree to application
rake spree:reset_taxon_permalinks - Resets all taxon permalinks
rake spree_api:install:migrations - Copy migrations from spree_api to application
rake spree_auth:admin:create - Create admin username and password
rake spree_auth:install:migrations - Copy migrations from spree_auth to application
rake stats - Report code statistics (KLOCs, etc) from the application
rake test - Runs test:units, test:functionals, test:integration together
rake test:all - Run tests quickly by merging all types and not resetting db
rake test:all:db - Run tests quickly, but also reset db
rake time:zones:all - Displays all time zones, also available: time:zones:us, time:zones:local -- filter with OFFSET parameter, e.g., OFFSET=-6
rake tmp:clear - Clear session, cache, and socket files from tmp/ (narrow w/ tmp:sessions:clear, tmp:cache:clear, tmp:sockets:clear)
rake tmp:create - Creates tmp directories for sessions, cache, sockets, and pids

Comments in HAML

2014-06-13T01:06:00.000-07:00

There are two types of comments in HAML files.

1. Single line Comment

Single line comments can be written in two ways.

This will create the HTML comment that will sent to client(visible in 'view source' of the web page)

/ comment text

This will comment the code so that will not sent to the client:

-# comment text

2. Multi line Comment

-#  
    Everything indented below the comment symbol is considered as comment
    below
    text
    is
    not
    visible
    in view source of the file

jquery copy to clipboard

2012-04-12T11:10:00.001-07:00

Here i am going to explain copy to clipboard functionality using ZeroClipboard plugin.

Brief introduction of ZeroClipboard

This library is fully compatible with Flash Player 10, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mouse down effects.

There are 4 simple steps to get clipboard functionality.

Download latest jquery base and include in your page.
Download ZeroClipboard plugin and include ZeroClipboard.js file in your page.
copy ZeroClipboard.swf file from downloaded list to your file location and change file path in ZeroClipboard.js
moviePath: 'FILE PATH/ZeroClipboard.swf', // URL to movie
just add below html next to text you want to add clipboard icon
<span class='copyclipboard'></span>
Also, put the text you want to copy in any html tag
Ex for simple text:

<span>TEXT TO COPY</span><span class='copyclipboard'></span>

Ex for link:

<a>LINK TEXT</a><span class='copyclipboard'></span>

Now, add below code

<script type="text/javascript">
    $(function() {
        $(".copyclipboard").each(function(){
            var clip = new ZeroClipboard.Client();
            clip.setHandCursor( true );
            clip.setText($(this).prev().text());
            clip.glue(this);
            clip.addEventListener('complete', function(client, text) {
                alert("Copied text to clipboard:\n" + text);
            });

        })
    });
</script>

The above code look for all the "copyclipboard" classes and create clipboard object for each occurrence and get the text from previous tag of current instance and set it in the clipboard object.

Finally

  .copyclipboard{
     padding-right: 20px;
     padding-top:1px;
     background: url('/images/clipboard.png') 100% 50% no-repeat;
  }

Whenever user click on clipboard icon, it will show alert with the copied text. Output look like this:

Handling global ajax errors using ajaxSetup

2012-02-29T04:03:00.000-08:00

Jquery ajaxsetUp function is used for setting up default values for future ajax requests. Here i am going to use that method to handle all ajax errors.

function global_ajax_errors(){
  $.ajaxSetup({
    error:function(x,e){
      var errortext = "";
       switch(x.status){
         case 0:
           errortext ='You are offline! Please Check Your Network';
           break;
         case 404:
           errortext =  "Requested URL not found.";
           break;
         case 500:
           errortext = "Internal server error";
           break;
         default:
           if(e == "parsererror"){
             errortext = "Error. Parsing JSON request failed."
           }else if(e == "timeout"){
             errortext = "Request Time out";
           }else{
             errortext = "Unknown Error.".x.responseText;
           }
           break;
       }
       alert("Error:"+errortext);
    }
  });
}

Now, call this method at the time of loading the page. This will give alert message if any ajax error(internal server error, 404 page error, timeout etc) comes. You can handle other type of errors also by adding entry in switch.

clearing form elements using jQuery

2012-02-27T02:44:00.001-08:00

HTML form can be reset using reset button but it resets the form back to its original state, whereas you may want to clear all the fields in the form. Here i am going to show how we can clear form elements using jQuery.

function resetForm(ele){
    $(ele).find(':input').each(function() {
       switch(this.type) {
           case 'password':
            case 'select-multiple':
            case 'select-one':
            case 'text':
            case 'textarea':
                $(this).val('');
                break;
            case 'checkbox':
            case 'radio':
                this.checked = false;
                break;
         }
     });
};

Above code find all the input fields under form/div and clear its values. This function can also use to clear set of input fields under #id.

combine background image and css gradient

2012-01-27T03:21:00.000-08:00

In my previous posts, i explained how we can create gradient without any images. In this , i am going to explain combine background image and css gradient.

Originally, I started with the following css

.button{
    width:130px;
    padding:20px;
    margin:10px;
}
.example1{
    background:url(IMG URL) no-repeat;
    /* for firefox 3.6+ */
    background-image: -moz-linear-gradient(top,  #CBf6FA,  #A6DD9F);
    /* for webkit browsers */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CBf6FA),to(#A6DD9F)); 
}

<div class="button example1">Button</div>

It will give the out like below:

It was close but not quite what I wanted. My background image was being hidden behind gradient. The problem here is gradient is specified as a background-image, which means they override any previously declared background-image.

So, here I went with few minor changes to my CSS by specifying background color as a fall-back for browsers that don't support CSS3 gradients.

.button{
    width:130px;
    padding:20px;
    margin:10px;
}
.example1{
    background-color:#CBf6FA;
    /* for firefox 3.6+ */
    background-image: url(IMG URL), -moz-linear-gradient(top,  #CBf6FA,  #A6DD9F);

    /* for webkit browsers */ 
    background-image: url(IMG URL), -webkit-gradient(linear, left top, left bottom, from(#CBf6FA),to(#A6DD9F));

    /* IE 10 */
    background-image: url(IMAGE_URL), -ms-linear-gradient(top, #CBf6FA, #A6DD9F);

    /*  Opera 11.10+ */
    background-image: url(IMAGE_URL), -o-linear-gradient(top, #CBf6FA, #A6DD9F); 

    /* make IE happy */
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#CBf6FA, endColorstr=#A6DD9F);
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#CBf6FA, endColorstr=#A6DD9F)";
   
    background-position: 4px 50%, 0 0;
    background-repeat: no-repeat;

}

<div class="button example1">Button</div>

thats it!

Adding new categories in opencart

2012-01-27T00:23:00.000-08:00

After completing the installation process, you will get access to admin panel. From there you can add/remove categories of your shopping cart. To add a product category in OpenCart, log in your OpenCart admin panel and go to Catalog » Categories from the admin navigation menu.

It will open the categories screen.

Click on "insert" button on the upper right corner of the page.

Enter basic information such as category name, meta description, meta key words and description about category. Next, Go to Data tab.

This will allow you to add hierarchy of your categories. You can set Search Engine friendly url for this category in "SEO keyword" field. Also, you can set image for your new category by clicking on "Camera image" and a popup will appear allowing you to upload a picture you like from your local computer or set a pre-existing one which is already uploaded in the images directory of OpenCart.

Category status allows you to disable/enable the category on your site. Sort Order set's the order of which the category will be displayed amongst others in the same parent category. Next, Go to "Design" tab.

Here, you can set your category look and feel. And, Finally you need to click the "Save" button(located upper right corner) to save your new product category.

Adding Google Analytics Code in Pligg

2012-01-20T17:19:00.000-08:00

Many people have reported problem with adding Google Analytics in pligg.tpl

Here is the solution:

When adding the javascript code to your pligg.tpl file you will need to wrap the javascript with {literal} and {/literal} tags.

thats it.

Adding new page/layout in opencart 1.5.0.x

2011-12-19T00:53:00.000-08:00

I have spent reasonable amount of time on Opencart(Its an open source e-commerce solutions written in PHP that's designed around the MVC) couple of days ago. One thing I would say about OpenCart is that it doesn't have the good documentation.

In this tutorial I want to demonstrate how to add a simple page(non-admin page) view to the many default ones OpenCart comes with. The view I want to add is a simple one. It displays all the categories with some number of products from each category all on one page. That's a view that OpenCart doesn't come with by default.

I will be demonstrating on a default installation of OpenCart 1.5.0. Before you start, make a copy of the default theme, under /catalog/view/theme/default. I'll call it default-backup.

Before start modifying, first understand the Opencart file structure.

Opencart file structure

Here is the default Opencart file structure:
 /opencart
 ---- /admin
 ---- /catalog
 ---- /download
 ---- /image
 ---- /system
 ---- config.php
 ---- index.php
 ---- php.ini
 ---- .htaccess.txt

Since we're only adding a new view, the catalog folder is the only we're concerned with. That folder contains:

 /opencart/catalog
 ---- /controller
 ---- /language
 ---- /model
 ---- /view

OpenCart follows an MVC+L design, the L represented by the language folder above. Again, since we're only adding a new layout, we won't be doing anything with the model or language files, so we're only concerned with the controller and view folders.

Catalog Controllers

There are many folders inside /catalog/contollers:
  /opencart/catalog/controllers
 ---- /account
 ---- /affliate
 ---- /checkout
 ---- /common
 ---- /error
 ---- /feed
 ---- /information 
 ---- /module
 ---- /payment
 ---- /product
 ---- /total

All these folders will represents their own functionality. For instance, account contains controller files relevant to customer accounts, checkout contains controller files relevant to the shopping checkout process, and so on.

The product folder contains:

 /opencart/catalog/controllers/product
 ---- category.php
 ---- compare.php
 ---- manufacturer.php
 ---- product.php
 ---- search.php
 ---- special.php

This is the place, we need to add our new controller. I called this as categories.php. Now the view...

Catalog Views

The categories.php controller will retrieve whatever data it requires from the relevant models and send them to the appropriate view. View files are written inside /catalog/view, which looks like:

 /opencart/catalog/view/theme/default_copy/template
 ------------ /account
 ----------- /affiliate
 ----------- /checkout
 ----------- /common
 ----------- /error
 ----------- /information
 ----------- /mail
 ----------- /module
 ----------- /payment
 ----------- /product
 ----------- /total

Except for the mail folder, there is a 1-to-1 correspondence between the folders under /catalog/controller and /catalog/view/theme/default-copy/template. It makes intuitive sense that since we added a new controller under /controller/product, we'll add a corresponding view file under /template/products.

The /template/products folder contains the following template files:
 /template/products
 - category.tpl
 - compare.tpl
 - manufacturer_info.tpl
 - manufacturer_list.tpl
 - product.tpl
 - review.tpl
 - search.tpl
 - special.tpl

Similar to how we added a categories.php controller, we'll add a new view file here (call it categories.tpl), containing the HTML markup and embedded PHP to display the data categories.php is sending it.

Categories.php controller

Now, we need to write code to get all the categories and some products for each category. Check sample code below:

<?php 
class ControllerProductCategories extends Controller {  
  public function index() { 
    $this->language->load('product/category');
    $this->load->model('catalog/category');
    $this->load->model('catalog/product');
    $this->load->model('tool/image'); 
    $this->data['breadcrumbs'] = array();
    $this->data['breadcrumbs'][] = array(
        'text'      => $this->language->get('text_home'),
        'href'      => $this->url->link('common/home'),
        'separator' => false
    ); 
   
    $categories = $this->model_catalog_category->getCategories(0);
        
    foreach ($categories as $category){
      $products_data = array();
   
      $data = array(
         'filter_category_id' => $category['category_id'], 
         'start'              => 0,
         'limit'              => 3
       );
    
       $product_total = $this->model_catalog_product->getTotalProducts($data); 
       $results = $this->model_catalog_product->getProducts($data);
   
       foreach ($results as $result) {
         if ($result['image']) {
           $image = $this->model_tool_image->resize(
                       $result['image'], 
                       $this->config->get('config_image_product_width'), 
                       $this->config->get('config_image_product_height'));
          } else {
            $image = false;
          }
    
          if (($this->config->get('config_customer_price') && 
               $this->customer->isLogged()) || !$this->config->get('config_customer_price')) {
             $price = $this->currency->format(
                              $this->tax->calculate($result['price'], 
                              $result['tax_class_id'], $this->config->get('config_tax')));
          } else {
             $price = false;
          }
    
          if ((float)$result['special']) {
            $special = $this->currency->format(
                            $this->tax->calculate($result['special'], 
                            $result['tax_class_id'], 
                            $this->config->get('config_tax')));
           } else{
             $special = false;
           } 
    
           if ($this->config->get('config_tax')) {
             $tax = $this->currency->format((float)$result['special'] ? $result['special'] : $result['price']);
           } else {
             $tax = false;
           }    
    
           if ($this->config->get('config_review_status')) {
             $rating = (int)$result['rating'];
           } else {
             $rating = false;
           }
        
            $products_data[] = array(
                     'product_id'  => $result['product_id'],
                     'thumb'       => $image,
                     'name'        => $result['name'],
                     'href'        => $this->url->link(
                                        'product/product', 
                                        'path=' . $category['category_id'] . '&product_id=' . $result['product_id'])
            );
       }
            
       $this->data['categories'][] = array(
                         'category_id' => $category['category_id'],
                         'name'        => $category['name'] . ' (' . $product_total . ')',
                         'products'    => $products_data,
                         'href'        => $this->url->link('product/category', 'path=' . $category['category_id'])
       );            
    }

     if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/product/categories.tpl')) {
       $this->template = $this->config->get('config_template') . '/template/product/categories.tpl';
     } else {
       $this->template = 'default/template/product/categories.tpl';
     }
   
     $this->children = array(
               'common/column_left',
               'common/column_right',
               'common/content_top',
               'common/content_bottom',
               'common/footer',
               'common/header'
          );
    
  $this->response->setOutput($this->render());
  }
}
?>

categories.tpl

sample code for view

<?php echo $header; ?>
<?php echo $column_left; ?>
<?php echo $column_right; ?>
<div id="content">
  <?php echo $content_top; ?>
  <?php if ($categories) { ?>
      lt;?php foreach ($categories as $category) { ?>
      <h2><?php echo $category['name']; ?></h2>
      <?php $products = $category['products'];
        if ($products) { ?>
          <div class="product-grid">
             <?php foreach ($products as $product) { ?>
               <div>
                 <?php if ($product['thumb']) { ?>
                   <div class="image">
                     <a href="<?php echo $product['href']; ?>">
                       <img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" />
                     </a>
                   </div>
                 <?php } ?>
                 <div class="name">
                   <a href="<?php echo $product['href']; ?>">
                     <?php echo $product['name']; ?>
                   </a>
                 </div>
               </div>
             <?php } ?>
          </div>
          <a style="float: right; width: 100%; text-align: right; padding-bottom: 20px; margin-top: -10px; margin-right: 40px;" href="<?php echo $category['href']; ?>">view more</a>

        <?php } ?>
      <?php } ?>
  <?php } ?>
  <?php echo $content_bottom; ?>
</div>

<?php echo $footer; ?>

One last thing

Since we've added a new layout to our OpenCart project, we should add it to the database, which keeps a list of layouts, so we can specify modules that we want to display in our layout.

There are two places to add an entry

1. The first is in the table called layout. Notice the last entry in the screenshot below, which represents the new layout.

2. You also need an entry in layout_route, as shown below (the last entry):

Now we need to enable our new layout using OpenCart admin panel.

Thats it!

Downloadable Open Source Social Bookmarking Platforms

2011-12-15T04:27:00.000-08:00

Social bookmarking is a method for users to organize, store, manage and search for bookmarks of resources online. Unlike file sharing, the resources themselves aren't shared, merely bookmarks that reference them. In a social bookmarking system, users save links to web pages that they want to remember and/or share. These bookmarks are usually public, and can be saved privately, shared only with specified people or groups, shared only inside certain networks, or another combination of public and private domains. Here is the list of top Open Source Social Bookmarking Platforms:

1. Scuttle

“Scuttle is a free open source software for creating social bookmarking sites like del.icio.us. Allows multiple users to store, share and tag their favourite links online.”

2. SemanticScuttle

“SemanticScuttle is a social bookmarking tool experimenting with new features like structured tags and collaborative descriptions of tags. Originally a fork of Scuttle, it has overtaken its ancestor in stability, features and usability.”

3. GetBoo

“Web 2.0 bookmarking system, both social (with tags) and private (with folders). Import and export your bookmarks from multiple browsers. Admin management section with SPAM protection, translations, bookmarklets, Firefox extension, RSS feeds, and more! ”

4. Pligg CMS

“Pligg CMS is a content management platform that powers tens of thousands of websites. It specializes in creating social publishing networks, where users submit and promote content similar to sites like Digg, Reddit, linksbang and Mixx. ”

5. Communitynews

“CommunityNews uses social bookmarking and bayesian techinques to provide periodic postings to blogs. Users can vote for or against RSS sources ti increase the chances that the source is used again. Spam filtering (bayesian) is provided by spam bayes. ”

6. Jumper

“Jumper 2.0 is a collaborative search engine that is powered by social bookmarking. It uses peer and social-networking principles to tag and link distributed content, media, or data to make valuable information more easily discoverable. ”

7. Akarru Social BookMarking Engine

“Akarru is a social bookmarking engine, is used to build social bookmarkings sites, like www.blogmemes.com. Users posts links and promote links to front page using voting system.”

8. Bookmark4U

“Bookmark4U is an web-server application, which is based onApache + PHP + MySQL. Bookmark4U is intended to provide a comfortable bookmarking environment for users. ”

9. laicos - Social Bookmarking in ASP.Net

“laicos or social backwards is a social bookmarking website development application. Use this project to create a Digg style clone. In asp.net and MySQL environment. ”

10. Taggly

“Taggly is an online social bookmarking software written with usability and scalability in mind. ”

CSS Transparency in all browsers

2011-12-06T05:33:00.001-08:00

Transparency is one of those CSS properties that has a weird history and requires lots of different properties to ensure cross browser compatibility that goes back as far as you can. All the browsers treat transparency in a different way to overcome this issue we need to define their own specific properties.

Internet Explorer:

The first thing you need to remember to get IE to make things transparent is that the element needs to have a layout. In other words, the hasLayout DOM property must be set. So, if you want to set transparency on an element, you need to set the hasLayout property some other way. There are several CSS properties that when set on an element, cause the element to have layout as well:

inline:block
height or width with any value
float:left or float:right
zoom with any value

The easiest to apply tend to be setting the width to 100% or the zoom to 1.

In IE 8 and 9, there is support for the browser extension -ms-filter and you can use this to add alpha transparency. The following sets the opacity to 50%:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

it only works in IE 8 and 9. To make it work in all other IE browsers, you need to add filter property also. But, make sure -ms-filter line comes first in your CSS.

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);

Firefox:

Firefox older versions requires browser extension -moz-opacity. So to set the transparency in Firefox 0.8 and lower to 50% use:

-moz-opacity: 0.5;

Safari:

Before Safari switched to Webkit, you needed to use the browser extension -khtml-opacity. So to set the transparency in Safari 1 and lower to 50% use:

-khtml-opacity: 0.5;

Modern Browsers:

Modern browsers like Android 2.2+, Chrome 1+, Firefox 0.9+, Internet Explorer 9+, iOS 3+ Opera 9+, and Safari 2+:

opacity: 0.5;

Finally combine all together:

.trans {
 zoom: 1; /* gives the object layout */
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}