Make Vimeo Lightbox Auto-Closes on Finish Using FancyBox

FancyBox has been my number one preference when I need to implement a jQuery-based lightbox on any web page I am working on. It is the most customizable and extensible jQuery plugin for this function.

Since version 2.0, it also introduced a concept of ‘helpers’ to reduce the size of the main JS file and also to allow developers to play more with its functionality with less risk of breaking the core functions when they are updated. Below I am going to show a little trick to modify FancyBox’s media helper to allow Vimeo link to auto-close when the video is finished.

Continue reading

Flat-File CMS Comparison

Some developers claim 2014 will be the year of Flat-File (or Non-Database) CMS. Personally I do not believe it will replace database-powered CMS anytime soon. To me they have different target users and main functions. If you are comparing of building a custom CMS vs using one of these CMS then it makes sense, but it will not replace WordPress, or Drupal, even it always surprises me that many people still like using Joomla.

What is flat-file CMS?

In very short sentence, as the phrase implies: CMS that queried its data from a text file instead of database like MySQL.

Advantages

  • Installation can be done only with FTP access
  • Easier to sync content when developing between development/local and production servers
  • Fast, because no queries involved
  • Lightweight, smaller total size
  • One less password to create or remember (your DB)

Honestly I have not tried any of these in production YET but I have narrowed down a few that got my attention big time and I am looking at the opportunity to use them.

  Statamic Kirby Monstra Pico
Web Server Requirements PHP 5.3.6+ PHP 5.2+ PHP 5.2.3+ PHP 5.2.4+
User Control Panel YES YES YES NO
Support Forum, Tickets Forum, Direct Email Forum, Bugtracker (GitHub) Bugtracker (GitHub)
License per website $29 for personal
$99 for commercial
$39 FREE FREE

Which CMS to choose?

Personally I want to get an opportunity to put my hands on Statamic. It is the most expensive, $99 for commercial one website, but it has very simple and nice control panel which is very important. For developers who does not need a control panel, Pico is a very interesting option.

Allow WordPress to Import Posts with Existing IDs

Recently I faced a challenge when I had to import years worth of posts from a client’s old WordPress installation to a new one using WP’s Export/Import modules. The first step to export the posts into WordPress eXtended RSS or WXR was easy enough, but whenever I tried to import it to the new blog, it came with “Post Already Exists!” error messages.

The cause was multiple posts with the same ID had already existed on the new site. This could be because you tried many test posts, or added new post types and populated them before importing from the previous blog.

The solution was from this forum thread. You basically need to make WP Importer to ignore duplicate posts by making small change on the file, which is located on /wp-content/plugins/wordpress-importer/wordpress-importer.php:

// comment the line below out around line 555
// $post_exists = post_exists( $post['post_title'], '', $post['post_date'] );
$post_exists = false; // add this line

Problem be gone, but do be very careful to make sure you are not importing the same posts twice as you will find a hard time to remove them.

Which E-Commerce Platform Is Right for Your Business?

So you are ready to sell your products online. You understand about managing e-commerce business in general and comes the big question: which platform should you choose?

If you browse through the web, you can easily find dozens of solid e-commerce/shopping cart platforms to choose. If you look to the forums for a suggestion, you will literally get thousands of different opinions. The same case if you go to your digital agency or developer, usually each of them already set their own preferred platform. Nothing to be blamed here though, you practically need years to be able to fully understand the structure and functions of one of the platforms to be able to fully customize the templates.

My suggestion is this: before you go asking an expert’s or other people’s opinions to help in your decision, it is much better for you to define the requirements of your online business. Below are some guidelines to get this:

Continue reading

jQuery Cycle Pager Style as Dots with CSS

jQuery Cycle is a great plugin to create image slides on your website. Out-of-the-box, it is so simple to use but you can explore the options extensively to get the functions and effect that you expected.

One of the best feature is the ‘pager’ option that will create a pagination of your slideshow. By default, the function will look up for a container with ID value of ‘pager’ and generate this code:

<div id="pager">
  <a href="#" class="">1</a>
  <a href="#" class="">2</a>
  <a href="#" class="activeSlide">3</a>
</div>

Without any style, the pager will be shown simply as “123″ on the front-end. You can of course stylize it any way you like it, I used to fancy the background-image replacement technique, but I want to share the CSS codes that will display it as dots or bullets. Since this is pure CSS, you can easily change the colors or size quickly and easily.

#pager {
  /* you can add positioning properties here if needed */
  width: 75px; /* change as required */
  padding: 0;
  height: 14px;
  z-index: 999;
}

#pager a {
  display: block;
  float: left;
  width: 10px;
  height: 10px;
  text-indent: -999em;
  background: #fff;
  border-radius: 10px; /* must be the same as width and height */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 0 0 1px 1px #707173; /* border color */
  margin-right: 10px;
}

#pager a {
  background: #c0c0c0; /* optional: color when hovered */
}

#pager a.activeSlide {
  background: #707173; /* color when active */
}

Quick preview of how it will look like:
jQuery dots pager preview

There you go. Simple pager for a great slideshow plugin.

Responsive Multi-level Menu to Dropdown

Thanks to this excellent tutorial from CSS-Tricks explaining how to create list-based menu into select dropdown on small screens, I was able to finally complete the product detail pages on Bluelounge website. My homework was not finished though. With around 20 active products on the website, I needed to preserve the product categories within the dropdown menu to make it easier for visitors to check out other products. With some adjustments and a few extra lines of codes, it now works the way I wanted.
Continue reading

Quick Modules Checklist When Developing New Website on Processwire

It’s amazing how fast ProcessWire is growing. Soon after version 2.0 had been released, Ryan and the developer team hit the gas and made it one of the fastest developed platforms I notice since WordPress. Currently there are already about 140 additional modules available on its website, plus the core modules which some are wisely not activated by default after installation.

As with other CMS plug-ins, it is so easy to get lost in the vast list of directory. Especially if it is your first time using ProcessWire for your project. With that in mind, I have hand-selected a few modules that I find very handy and almost always use on for my projects.

Continue reading

Creating “Sticky” Vertical Menu with jQuery Waypoints

Before last week, I had thought that making a sticky navigation would require a custom script and take a bit of time. By “sticky” it means an menu or element that is not always on top of the page but then sticks there after you scroll past a certain Y position. That was until I found jQuery Waypoints which makes it very easy to trigger the change in the element’s CSS position value and make it look as it stays on the top of the page.
Continue reading