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

Why choose ProcessWire over WordPress?

Let’s admit it, WordPress is the most popular blogging platform ever. I use it to power this blog. Aside from security issues, which always haunt any popular system/app/platform, there are very few reasons not to love it. It is actively maintained, supported by huge and dedicated community, great UI, and the list goes on and on.

When it comes to using it as CMS though, I always struggle to justify it as the way to go. Despite its evolution in complying the demand, it is still far from perfect. In more than one occasion, client would come to me with very specific request to use WordPress to manage their website. If the website needs to come with a blog, then yes it is a good option, but sometimes it is only a company, personal or product profile which content needs to be manageable from CMS.

For years, I had been trying to find the right platform/framework with just enough features and functions to allow me to build a website without having to take more time on integrating it with the CMS. Then I found ProcessWire. Learning about for ProcessWire works was not the easiest, but all the time used has been very well paid off after a couple of projects built using it.

What makes ProcessWire a better CMS than WordPress? For starter, you can define your own fields to be used throughout the system. No plugins or custom functions required, which have always been a real turn off for me. I can list all the goods and bads between these platforms, but in short with ProcessWire you can set it up to go with your site’s structure, while with WordPress I feel it is more about adjusting your site to fit as a template.

Continue reading

My Favorite Coda Plug-Ins

Coda

Panic Coda

I have to admit it, Coda by Panic is really one of the best Mac apps ever. Not only it has finally given me the better direction in developing HTML/CSS correctly, it also makes it more fun! It is quite a shame that Panic has not been updating it for a few months now, but that does not make it less powerful.

Why? Because Coda supports third-party plug-ins to enable you add more functions on top on the ones that come with the application itself. No, those plug-ins will not automatically create a website for you.. Consider them like as WordPress plug-ins or widgets, simple and small functions but if collected and used properly can save you hours of development time. Continue reading

Contactable jQuery Plugin on The Right Side of Page

Contactable is a great jQuery plugin by Philip Beel to include a nice sliding contact form, even if you only understand a tiny bit of jQuery and PHP.

I needed to use this plugin for one of my project, but I want it to be on the right side of the page instead of left. In order to do this, you need to change a small portion of the CSS and JS files. No special skills required. Still, you can save your time since you can download it directly below:

» click here to download Contactable on right side of page «

All credits go to Philip Beel. Instructions and demo can be checked directly on this plugin’s homepage.