Menu

CSS Dropdown Menu

Let’s create a dropdown menu with CSS and HTML only. There are lots of fancy menus out there. This is just an experimental HTML-CSS based multi-level menu with room for improvements. Someone starting to learn CSS might find this helpful.

To quickly explain how it’s done, menu is contained within ul and each menu item is contained within individual li elements. Menu item with children has a class .children and that adds some extra styling for the child menu segment. The child segment is hidden by default and is only displayed on mouse over (:hover). There is a small arrow before the child segment. Style for that can be found in the :before segment for child ul. This arrow also ensures continuous mouse over presence on the parent li. If the arrow is removed, the space between the parent li and child ul will break the continuity of mouse over effect. That can be fixed using padding to the children.

The nav element wrapping the whole thing is just to create a container and set a width for demo purpose.

Here is the demo code on JSFiddle:

Showing countdown timer in email

Last day I received an email newsletter which contained a countdown timer in it. It was quite interesting because most of the times emails are static and we are unable to show any dynamic data. Then again, there is the GIF image format which can show animated images. From investigating the source I figured that they are doing exactly that. They are using the service from a third party provider to create “countdown” GIF images.

So, I thought why not make one for myself. And I came up with a class to accept target time (end time of countdown) and some other parameters which will return an animated GIF image resource. We can then embed that image in the email and the email body will show a nice little countdown timer. More about the class and usage is available on GitHub.

Demo: A 15 minute timer

15 minutes

Fork the class from GitHub: https://github.com/ashiqur-rony/gif-timer

There is a catch though. As the timer creates a frame for each step (one frame per second in the above demo), this method is really resource hungry.

Email Obfuscation – WordPress Shortcode

Recently I was working on a WordPress website and was into a situation where I wanted to protect the email address from spam bots but also didn’t want the legitimate users to go through the trouble of filling out captcha and click an extra link. WordPress do have a nice function called antispambot which does it alright. But not up to my satisfaction. This function converts the email address to special characters which is quite intelligent but let’s face it. Robots are going to take over the world soon. They are becoming more smart every day. It is quite possible that some bots (at least their coder) knows how WordPress does it and a simple decode will reveal the email address for them. Recaptcha also have a feature to protect emails from bots. But this is quite tedious. User have to leave the website just to see the email address. Also the Recaptcha’s popup window looks really awful on mobile devices.

So, I created a shortcode that will hide the email address by default and reveal it to users using JavaScript. At least bots are not smart enough to use JavaScript (yet!). As a very limited number of users will use browsers with JavaScript disable, they can do the extra work and get the email address through recaptcha validation. Let’s see the code.

function my_hide_email_shortcode( $atts , $content = null ) {
    $a = shortcode_atts( array(
        'email' => '',
    ), $atts );
    if ( ! is_email( $a['email']) ) {
        return;
    }
    $email_parts = explode('@', $a['email']);
    $email_head = $email_parts[0];
    $email_tail = $email_parts[1];
    $obfuscated_email_link = get_options('recaptcha_email_link');  //It's wise to set the link from admin side instead of hard coding.
    wp_register_script( 'email-obfusc', get_stylesheet_directory_uri() . '/library/js/email_obfusc.js', array( 'jquery' ), '', true );
    wp_localize_script( 'email-obfusc', 'email', array('content' => antispambot( $content )) );
    wp_enqueue_script( 'email-obfusc' );
    return '<span class="mail_hide" data-mail-h="'.strrev($email_head).'" data-mail-t="'.strrev($email_tail).'"><a class="obfocused-email" href="'.$obfuscated_email_link.'" target="_blank"> ' . (strlen($content) > 0 ? antispambot( $content ) : __('View email address', 'mytextdomain')) . '</a></span>';
}
add_shortcode( 'hide_email', 'my_hide_email_shortcode' );

If we use the shortcode like [hide_email email="[email protected]"]See the Email[/hide_email] the email address will first be broken into parts, reversed and stored as data variable of the wrapper. Later I’ve revealed the email address to users using JavaScript. If JavaScript is not available, user will be sent to recaptcha link to retrieve the email address. Here is the JavaScript code.

jQuery(document).ready(function(){
    var mail_head = jQuery('.mail_hide').first().attr('data-mail-h').split('').reverse().join('');
    var mail_tail = jQuery('.mail_hide').first().attr('data-mail-t').split('').reverse().join('');
    var oldhtml = '';
    var mail = mail_head+'@'+mail_tail;
    var mail_content = email.content;
    if(mail_content.length < 3) {
        mail_content = mail_head + '@' + mail_tail;
    }
    jQuery('.choobs_mail_hide').first().html('<a class="obfocused-email" href="mailto:'+mail+'">'+mail_content+'</a>');
    jQuery('.obfocused-email').on('mouseover', function(e){
        oldhtml = jQuery(this).html();
        jQuery(this).html(mail);
        jQuery(this).attr('href', 'mailto:'+mail);
    }).on('mouseleave', function(e) {
        jQuery(this).html(oldhtml);
    });
});

This script fetches the parts of email address, reverses them again and the joins to form the actual email address. I’ve added an effect to reveal the email address when user mouse over the content text. But if there was no content and shortcode was used only like [hide_email email="[email protected]"] the email will be revealed by default.

Go away spam bots!!

Useful extensions for Laravel

I’m starting to love Laravel. And while starting new project, there are few extensions I like to use which saves a lot of time. Maybe someone else will find these useful as well.

1. Laravel 4 Generators

A really awesome extension from Jeffrey Way. This makes life easier by creating all the controllers and models with a single command. A must have extension before starting a new application.

2. Confide

Every app requires a decent authentication system. To sum up the required features there need to be a registration process, a log in process, email validation, password recovery etc. This is really tedious to create all those over and over. Confide solves that problem.

3. Entrust

This might not be essential for all applications but it is a very useful one too. This extension creates a role management on Laravel. This is from the same author of Confide and works better with it.

I’ll enrich this list later if I get to love some other useful extension. All the related suggestions are welcome.

CodeIgniter template library

The thing I hate most about CodeIgniter is that the views folder become messed up after a while. So many files and so difficult to track down a view for a certain area of an application. So, to solve that I figured I should create a library to override the ways of managing views. I wrote this very small library to solve the problem. Now I can easily create different templates (or themes whatever you prefer them to call) inside the views. Also I’ve added a layout file (or you can call the master file) in the template for the base structure of the page. So, I don’t have to repeat the areas like header, footer or menu on every view. The library can be download the library from GitHub.

Here I’ve explained how the library works and how to integrate it within a CodeIgniter application.

The library

So, the library is simple consisting only three methods – get, set and view. They does exactly what they are called, get current template, set active template and loads the view respectively. Also I’ve defined the default template, which is used in case template is not set anywhere, at the top of the library.

define('DEFAULT_TEMPLATE', 'default');

You can set the default template in the config file if you like. Let’s jump into the library codes.

First the global variables and constructor of the library.

var $ci;
public function __construct() 
{
    $this->ci =& get_instance();
}

I prefer to load the CodeIgniter instance inside the constructor instead of inside every function. Nothing fancy about it. Next is the get function.

public function get($default = DEFAULT_TEMPLATE)
{
    $template = $this->ci->session->userdata('active_template');
    if($template && $template !== NULL) {
        return $template;
    }
    return $default;
}

We assume that the template name is set in the session. But if nothing was found in the session, we use the default value defined at the top of the library.

In the set function, we just set the template name in the session.

public function set($default = DEFAULT_TEMPLATE)
{
    $this->ci->session->set_userdata('active_template', $default);
    return $default;
}

Remember, our session library must be loaded. I prefer to load it using autoload.php as I use the session a lot.

Finally in the view function, I’ve checked for the existence of the desired view within the template and if the file exists I’ve loaded the view within the layout (master file I’ve mentioned earlier) of that template.

public function view($view = '', $data = NULL, $alternate_template = FALSE, $template = DEFAULT_TEMPLATE, $print = FALSE)
{
    $template_name = $template;
    if(!$alternate_template) {
        $template_name = $this->get();
    } 
    if(strlen($view) == 0 || !file_exists( APPPATH . 'views/' . $template_name . '/' . $view . '.php')) {
        show_error('Unable to load the template: ' . $template_name . '/' . $view . '.php');
    }
    if(!$print) {
        $this->ci->load->view($template_name . '/' . 'layout', array('data' => $data, 'view' => $template_name . '/' . $view));
    }
}

Here I’ve used the $print variable to determine whether to load the view or not. Sometimes I want to handle AJAX calls which should not be sent to output.

Adding template

To add a new template we need to add a directory within the views directory. Every directory within the views are considered as a template. Inside each template there should be a layout.php file and all other views you need. You can put your views within sub directories if you want but the layout.php must stay right within the template directory. So, if I add a new template called mytemplate the directory structure will be like this:

|_ viewes
    |_ mytemplate
        |_ layout.php
        |_ otherview.php

The layout file

The structure of layout.php depends on however the application looks like. We just need to use  $this->load->view($view, $data); wherever we want to output our view’s content. So, a sample layout.php file might look like this:

<!doctype html>
<html>
<head>
    <title><?php echo (isset($data['title'])? $data['title'] : "My Website Title") ?></title>
</head>
<body>
    <div class="wrapper">
        <?php $this->load->view($view, $data); ?>
    </div>
</body>
</html>

Usage

Well, using the library is very easy. Once the library is placed inside the applications library folder and loaded in the controller (though I prefer using autoload.php), we can load a view using  $this->template->view('view_name', $data); in the controller. Now, to organize the views properly we can make sub directories within the template. Let’s say we have an index view for the home controller and an account view for member controller. We can create two folder called home and member within the template folder and then add the views like home/index.php and member/account.php files. Then from the index function of home controller we should call the view like:

$this->template->view('home/index', $data);

And from the account function of member controller we should call the view like:

$this->template->view('member/account', $data);

That’s about it. Download the files from the GitHub repository and I’ve added a sample controller with sample template structure in there.