Posts Tagged ‘javascript’
February 9th, 2010
One very awesome and useful plugin for jQuery is jQuery Cycle, which pretty much works out of the box, but browsing through the second part of the Intermediate Demos we’ve seen a click transition called Pager, which is somewhat tricky.
Neat Transitions with the jQuery Cycle Plugin
Pager is nothing but a few links next to your cycling block with page numbers, which switch the cycle upon click. It’s very useful when you have to create, say a list of services a company provides, with sweet lightboxes (don’t confuse with the Lightbox plugin), perhaps with some images, cycling through their descriptions, yet we’d like our visitors to be able to switch through the services manually, without having to wait. This is exactly what the Pager transition does, but hey, who the hell would want page numbers instead of their services names?
This is where pageAnchorBuilder comes in, and it’s not quite obvious what has to be done to make this work. According to the jQuery Cycle documentation it’s:
pageAnchorBuilder – callback function for building anchor links: function(index, DOMelement)
So here’s a demonstration of how this would work. Let’s setup a quick cycle, with a few options. Perhaps you’ll need more than I listed below ;)
1
2
3
4
| jQuery('#fade').before('<div id="nav" class="nav"></div>').cycle({
pager: '#nav',
pagerAnchorBuilder: paginate
}); |
So paginate is a callback function which takes two arguments, the index and the DOM element. Using the index will work just fine. Let’s see how this works with text:
1
2
3
4
5
6
| function paginate(ind, el)
{
if (ind == 0) return '<span>Service One</span>';
else if (ind == 1) return '<span>Service Two</span>';
// and so on
} |
I think that’s pretty straightforward once you understand how it works. Let’s try some images:
1
2
3
4
| function paginate(ind, el)
{
return '<img src="http://whatever.com/services/service' + ind + '.jpg" />';
} |
So name your images service0.jpg, service1.jpg, etc. And my favourite, CSS classes:
1
2
3
4
| function paginate(ind, el)
{
return '<div class="service' + ind + '"></div>';
} |
Then just add a few .service0, .service1, etc. classes in your stylesheet, voila! Hope that helps, and don’t forget about the other useful options. Cheers!
December 22nd, 2009
Yup, WordPress 2.9 is finally out and I’ve seen a lot of people upgrade immediately – sweet thing to do, I did so too and hadn’t had any problems here (I’m not using too much plugins), then I switched over to the 3.0 branch, all good! The semi-square buttons in the admin interface are fixed by the way ;) Anyways, this post is not about my blog, but about something I’m working on locally in the intranet of a company. And here’s a quick reminder: do not upgrade the running instance before you checked everything on a duplicate testing one, especially if a bunch of plugins there are handwritten ;)
Upgrade to WordPress 2.9: Plugins Gone Bad
A Handwritten WordPress Plugin is a huge set of files, with hundreds of duplicate lines of code and tonnes of commented code. The MVC/MVP models are usually transformed into the AIO (All-In-One) model. The only version control systems used are the “Copy & Paste” and “Undo & Redo”. The Core Upgrade process does not involve reading the changelog, backing up, etc.
Okay this is not a very smart thing to do, but sometimes you just need to, especially when you’re in a hurry (duh!). I’m not going to go in detail about the plugins, because you wouldn’t understand it anyway (no offence, I don’t understand most of it either), but let’s just say that I was using the Post Tags interface that you see in your “Edit Posts” admin interface. The sweet little box where you can type some tags or choose from the most used ones. All I did was copy the HTML contents of that little box onto my page, and it used to work (in 2.7 and 2.8), but as soon as I upgraded to 2.9, bang! It suddenly stopped. The javascript bindings were gone!
I figured out that the bindings were all made in the post.js so I took a look at the diff between 2.8 and 2.9 – completely different. The major change was the jQuery selector from span#ajaxtag to div.ajaxtag (line 99 in post.dev.js) which prevented all the other bindings. A few more ids have changed to include the tax name, and some other minor changes which I didn’t figure out yet. Although what’s the point in figuring it out? Wait until 3.0 is released and rewrite the plugin again, meh!
I did a lot of thinking here. This was not the only interface that broke, and rewriting everything on every core upgrade would be pretty difficult. People talk a lot about WordPress upgrades, plugins compatibility, etc. But most of the time they refer to plugins developed by other people, which sooner or later will get an upgrade. So waiting for a few weeks before launching the core upgrade generally does the job. But what if it’s a completely different page with a completely customized admin interface?
I worked a lot with WordPress metaboxes a few weeks before the upgrade and today I figured out that the best and easiest way of building WordPress admin interfaces would be, that’s right, metaboxing. The standard components used in the edit posts/pages interface (tags, publishing, categories, custom fields, etc) are simple metaboxes. So why copy HTML if you could simply use the predefined ones? And when a change is on its way, you’d sleep tight. Unless of course you’re interacting with the standard components from your customized ones, which involves using certain selectors for ids and classes. In that case you’ll just have to read the changelog, tickets (over 500 for WordPress 2.9) and of course code diffs.
Creating your own custom metaboxes is not as difficult as it is at first sight (yet I still haven’t figured out how to save their positions via AJAX, but I will). You will get the hang of it after your third or fourth metabox ;)
P.S. Have you noticed the new post thumbnails here? They used to be wide images, now they’re h2 text and small thumbnail. I love WordPress shortcodes ;)
December 8th, 2009
Remember the “inspired” blog posts series I started back in November? Well, let’s keep playing that game and today’s topic is jQuery and Javascript. The things you can do with javascript today are pretty impressive and sometimes unbelievable. Starting from simple AJAX calls and ending up with complete rich user interfaces with sweet animation (poke Facebook for instance).
Who Needs Flash When You Have Javascript?
You know I browse the web a lot – StumbleUpon, Digg, Twitter, etc. I go through tonnes of content, so today I made a short list of a few interesting jQuery and Javascript links that made my day! For rookies and for pros, check them out (ordered randomly):
Now you tell me – who needs Flash when you have Javascript? ;) Oh and by the way, if you’ve anything to add to the list (preferably articles published in late 2009) feel free to suggest via comments. If you’re looking for even more jQuery love, follow the real-time search results for the #jQuery tag on Twitter. Cheers!
September 15th, 2009
Lightbox. I love it, though one interesting limitation I came over today is that there’s no extra linking possibilities. Yeah, the back and forth links are cool, but I’d like to take my visitor to some place whenever he clicks the full-sized image, not just close the lightbox. A good example may be an art gallery, where you can view an image set via lightbox, and then suddenly you decide to view one of the images in more detail (comments, download link, ratings and other stuff that you don’t put in the title attribute to show below the image). Wouldn’t it be nice if the user was lead to that specific art piece page if they clicked in the center of the image?
Hacking the jQuery Lightbox Plugin
I made a little hack for that. I worked with the jQuery version of Lightbox but this trick should be applicable to the original (prototype) version too. So, here’s the trick. This is the usual way:
<a class="lightbox" href="path/to/full_image.jpg" title="title of the image">
<img src="path/to/thumbnail.jpg" alt="whatever" />
</a>
And this is my version:
<a class="lightbox" href="path/to/full_image.jpg" title="title of the image"
rev="http://url/of/some/page.htm" >
<img src="path/to/thumbnail.jpg" alt="whatever" />
</a>So our rev attribute will hold the URL where we’d like to take our visitors if they clicked the center of the image. Now, open up your lightbox.css file and find the #lightbox-nav identifier, and add a cursor:pointer; property. This is so that people actually notice that the image is clickable (you get that finger cursor, just like on any link). Now, if you’re working with image sets (more than one image) you’ll have the next and previous links appear and they take 49% of the image each (with the default settings). Let’s give our visitors some more room and decrease that down to 15%. It’s located in the lightbox.css file, identified by #lightbox-nav-btnPrev, #lightbox-nav-btnNext (change width: 49%; to width: 15%;).
Finally, the javascript part. We need two modifications here, one that will read our link rev attribute and store it in an array, the second is the actual linking. Find the _start() function in lightbox.js. Mine is on line 66. Find this line:
settings.imageArray.push(new Array(objClicked.getAttribute('href'),
objClicked.getAttribute('title')));And change it to:
settings.imageArray.push(new Array(objClicked.getAttribute('href'),
objClicked.getAttribute('title'), objClicked.getAttribute('rev')));One more… Find:
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),
jQueryMatchedObj[i].getAttribute('title')));Swap with:
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),
jQueryMatchedObj[i].getAttribute('title'), jQueryMatchedObj[i].getAttribute('rev')));And the final part – we need to add an event for whenever the visitors click the image. We’re not binding the click event on the actual image though, instead we take the navigation container which holds the next and previous buttons (in case you’re using image sets) and bind it there, because it’s more visible to the browser (z-index is around 10). Okay so find the _set_interface() function in lightbox.js. Mine is on line 126. Somewhere after the $(‘body’).append part type in this code:
$("#lightbox-nav").click(function() {
location.href = settings.imageArray[settings.activeImage][2];
});The settings.imageArray is the one being filled at the _start point we changed previously. We added a third index to the array, therefore we use the [2] (zero-based, remember?). Okay, done. Go ahead and try it out. Hope it worked for you too ;)
August 4th, 2009
This is my first “Powered by Delicious” post, but I plan on writing similar posts at least once a month or so, depending how many links I bookmark. Here’s a list of some of my latest delicious bookmarks, with goodies on web design, coding, html5, photoshop, javascript and a bunch of other stuff.
