Here I will describe how I did an Ajaxed pagination for one of my projects using jQuery and Livequery Plugin. Currently I am working on a huge project which, hopefully, will feed me with some ideas for blog posts and this is one of them . So:

1. Loading the javascript libs

Loading the jQuery and Livequery was done by Autoloader helper, but if you don’t use it just include jQuery and Livequery in your layout with following code

Read more…

CakePHP, Development, General, JavaScript, Labs CakePHP, jQuery, Pagination, Sort

Hey guys,

today I’ve released a new version of the Wordpress Plug-in “Autocompleter”.

What is the change?

The new version contains ability to display number of matches per word or phrase in the drop-down. The example is available in this blog (top/left search field). Of course in order to activate this you should go to Admin under the Settings section, where there is an option “Autocompleter”

Bear in mind that ‘number of matches’ are not the posts in the blog, but number of times where the tag or category is used. I would provide small example of this.

Let’s imagine that in your blog you have 3 posts all tagged with Wordpress and one of them is in the WordPress category, while other 2 are in another category.

The result in matches for wordpress would be 4, because there are 3 tags attached to the posts and 1 of the posts is attached to the wordpress category. Hope this make sense to you.

There is also ability to change the word ‘matches’ with your own, or even word in your language.

If you want to play with position of the matches, you could change autocompleter.css from the plug-in directory.

That’s it. I hope you like this plug-in.

Ajax, JavaScript, PHP, Tools Autocompleter, plugin, Wordpress

Recently I was working on some projects which required some advanced techniques. Sometimes you should stop thinking how to make it with HTML and CSS, and just to do it with good JavaScript code.

So far, all of these plug-ins were forced because of design decisions, but anyway important here is the plug-ins and the great job which they doing. So:

jScrollPane

jScrollPane is a jquery plug-in which allows you to replace the browsers default vertical scroll bars on any block level element with an overflow:auto style. You can easily control the appearance of the custom scroll bars using simple CSS.

I have use it because the designer decided to show the content in a size of business card, and the client of course wanted to provide as many information as he could. If course this one could be done with single line of code: overflow: scroll; in the css definition, but this way you cannot control the appearance of the scroll bar, so from the design point of view it was unacceptable.

Anyway, the plug-in is really rich of features, and really easy to be used. It requires some other plug-ins, for full capacity, but it is good.

jQuery pager plug-in

It’s a plug-in which transform long pages into paged area. To be fair, this is what the client wanted as interface – paged content based on paragraphs. Unfortunately the content includes also the bullet lists which are problematic with it. The plug-in provide ability to set up the appearance, i.e. putting your own labels on the pager links and height of the area.

Dimensions

This plug-in give the ability to know the width, height and position of an element in the page. I’ve wrote about it in my previous post, and although it’s not used in the new design it’s really handy.

Silky smooth marquee

In the same project I was asked to implement a news ticker /who uses such things these days, anyway /. So, standard marquee tag was, just ok, but it is not smooth enough. This plug-in does exactly this – making the scroll smooth and the text more readable.

and the last but not least

jQuery validation plug-in

As the name says this plug-in provide a form validation. The good thing is that it’s “validate as you type”. So it could mark field as invalid instantly when you insert more than required chars or enter an invalid email.

Well, not a rocket science, but at least they are helpful Hope this post helps someone.

10 Things, JavaScript JavaScript, jQuery, Plugins, Projects

Ok, this is not a code snippet article. It’s just an experience which you probably already met, but it was nightmare to find and it took me 1/2 a day to fix this “stupid” bug.

So what is the case?

Working on a project including some advanced JavaScript and Ajax techniques my coworker Milen noticed that the Session is not behaving as expected. In a simple function like:

The result should be quite easy to be predicted: if you pass for example 5 on the second reload the $k should be with the same value as $id. Unfortunately instead of 5 the $k was ‘images’. Yep, quite strange, isn’t it?

if you put die() at the end of the function, the result is as expected.

What was the problem

In our current project we are using jQuery and some of it’s plugins. So the problems was in the ThickBox plugin. If you remove it from the header everything works.

Digging into unpacked version of the plugin we’ve noticed that the loading picture is not where it should be. there is an variable

and as you may notice the path is not compatible with Cake convention and obviously it’s not in the http://server/cakeapp/tests/test/images/.

In the example above we were writing id into the session. Yes but calling: http://server/cakeapp/tests/test/images/loadingAnimation.gif mean that $id take value of ‘images’.

It was quite tricky, because if you loading CSS or JavaScript and the file is not there, FireBug or even the html /if there is no correct CSS the styling will fail/ will warn the developer, but image loaded into the JS function is quite difficult to find.

Anyway, the conclusion is “Watch you JavaScript libs and what files they require”.

Ajax, CakePHP, Development, Frameworks, General, JavaScript, Labs, PHP bug, CakePHP, JavaScript

Hey,

I am very proud to present you, my first plugin for Wordpress platform – Autocompleter.

The plugin adding autocomplete functionality for the search input field of your blog. The values are the tags and categories existing in the blog and this way you will help your visitors to find easily the proper information in your blog.

My first implementation was with Prototype and Script.aculo.us, but because I like very much jQuery library and I found a wonderful plugin for autocomplete, I build it with jQuery.

You can check the demo in this blog – top right – search box

Hope you will like it and you will vote for it Thanks

The official page is: wordpress.org/extend/plugins/autocompleter

Ajax, Development, General, JavaScript, Labs Autocomplete, Autocompleter, plug-in, Search, Wordpress

Hey guys,

I am really proud to present my last project written in CakePHP – bInspiration.com.

What is all about?
bInspiration.com is a web 2.0 service which aims at helping people to get inspired. Visitors are challenged to write a sentence including 2 already given words. The application is funny way to get creative, because “filling the gaps” in a text could give unpredictable and interesting results and that’s why I thought it’s really inspiring. More you can learn from about section of the site.

How long does it take to create this
Well, I’ve decided to create this application somewhere about mid of June and in fact the time for development and design was really short, about week and a half, but due to some hardware and admin problems with my hosting, I’ve delayed the start up.

Later on, I decided to show it to some friends and the responses were not very optimistic. Most of the people didn’t get the idea of the site, so definitely there was something wrong. Apart from this I received some very good ideas for improvements and I decided to add them before going live.

The features

• Ajax interface – the whole interface is ajaxed and it’s really easy to use it.
• Multilingual – thanks to CakePHP i18n class, the application automatically detect the browser language preferences and translate whole site. According to this, all user’s created content will be filtered by the selected language, so users can read and write in their preferred /or at least available in the site/ language.
• No administration – yes that’s true, and it’s feature. As a real Web2.0 application, visitors of the site are the real administrators. They can vote for each sentence in the database and from their decision the content will be promoted or completely removed from the database /two spam votes will remove the sentence from the database/.
• Follow an author – there is possibility to browse through all authors in a specific language. It’s also possible to follow them by subscribing to their rss feed.
• View the archive – it’s possible to browse through all sentences in the specific language.
• Changing the given words on the fly – this was an idea from Daniel – to give possibility to switch the current fixed pair, if the visitor is not inspired by the current one.

Future plans
Well, the plans really depends from the activity of the users. But at least I have idea to make some statistical reports such as

• Most active language
• Most and worst sentence by language
• Most active author
• Most used words
• Probably a contest

and many other.

I would love to hear any comments about it.

General, JavaScript CakePHP, Fun, Inspiration, Project

I was worked on a centred project design of a website. When I met such requirement I’ve always used Dead Centre approach.

Unfortunately I’ve noticed that when the content is larger than the screen the top-left corner is not visible. In that current project the logo of the site was exactly on that place, so it’s really confusing.

I had to solve this issue in order to satisfy the clients requirements. So, I’ve used jQuery to sort this out.

You can see the difference in these 2 examples:

• without jQuery example 1
• with jQurty example 2

Resize your browser window in order to see the difference.
How it’s working?

First of all there are 2 javascript includes:

After this there is a function which track the size of the screen and the content.

The explanation of the code:
I am using jQuery plugin named jQuery Dimensions Plugin 1.1 which extract the proper dimensions of the boxes.
The function checking if the content screen is bigger than the window size, if so it change the CSS in order to fit properly. I guess that you can see the logic easily. So, no more explanations here.

Hope this will help someone.

Development, Frameworks, JavaScript, Labs css, Dead Centre, HTML, JavaScript, jQuery, lib

Added a nice Autocomplete field of the search box in that blog /top right/. It’s really nice to have and I really enjoyed doing it.

I followed that article: How to: Create an Ajax-based Auto-completing Search Field for your Wordpress Theme, but instead of using suggested js code, I’ve used Script.aculo.us Autocomplete way.

I really enjoyed and I hope you will like it too.

Update: I’ve wrote a plugin for this: nik.chankov.net/autocompleter/. Enjoy!

Ajax, General, JavaScript, Labs Ajax, Autocomplete, Search, Theme, Wordpress

Saturday (Day 6)

Problem with validation messages while translating
Although my native language is Bulgarian and the requirement from the client was to have this site only in Bulgarian, I’ve preferred to have it in English and to make the translation with the i18n functions of CakePHP. There are 2 reasons to do this:

1. This will give me the possibility to show you the result of all these days of coding and
2. I can reuse some part of the codes the same as I’ve used in this project

So, up to my experience having application in English is never a bad idea.

You know, that the translating process is not very exciting process, but someone need to do it and because there is no one who can help me with this I’ve start the translation. Anyway.

While translating I noticed that the most of the validation messages are not appear of the translation file. I knew this from my past experience, but I needed to find an easy and elegant solution to translate these messages instead of putting them in all views. Putting in the view you need to do this at least 2 times.
Read more…

Ajax, CakePHP, Development, Frameworks, JavaScript, Labs, PHP Application, CakePHP, Database, expert, Labs, Project

Tuesday (day 2)

I really hate to start working early in the morning. I’ve always trying to delay this step by reading some news, checking mails, etc. But job need to be done and I had to go downtown, so I’ve started early today.

Building external user interface
I’ve started with the external user interface, incl. login, logout, change passwords, I’ve also decided to move fields Name and E-mail from this page to the profile page etc. Most of the things went quite well, but there were some “problems” with autoRedirect var in the Auth component. Well they weren’t real problems, but wrong redirects while the user switch from profile to another /i.e. admin to regular user/. To avoid this I’ve decided to set that variable to false, and the login redirect will be fixed to a landing page. Anyway, the application is not so big and keeping the last place is not very critical.
Read more…

CakePHP, Development, Frameworks, JavaScript, Labs, PHP Application, CakePHP, Database, expert, Labs, Project