Javascript jQuery Wordpress

Simple packing algorithm – part 3

As I was developping this theme – my very first -, I discovered the WordPress team provides sample test data, together with a testing procedure which allows you to validate the basic features of the theme. It’s only one step in the process of testing but it’s necessary if you want to make sure your theme covers all the main functionalities. Well, after importing the data, I was in for a big surprise.

Over 40 categories were listed in my header ! Of course, this is only for testing purposes, you need to check they’re displayed without too much impact on your layout.

screenshot1

I don’t expect anybody to use that many categories, or even so, to actually feel like displaying that many in the header of the page. The theme options gives you the possibility to choose the ones you want displayed, probably the most important or interesting ones. But who knows what one might decide.

Just for the sake of testing the layout, I added thumbnails to some of them, I also extended the name of a couple, and the display ended up quite messy. I suppose it’s acceptable as it is though, and some basic CSS may give it a better appearance – by the way, I’m eager to learn a CSS trick that would get this perfectly aligned, if there is one. As first approximation, I gave all the elements a fixed width – say, 200px – I got something neat enough, although I ended up with a variety of heights because of line wrapping.

Well, I finally figured I could try some kind of packing algorithm to get this category list nicely aligned, considering the elements may have 2 possible heights, either they come with a thumbnail or not, and all kinds of widths depending on the actual size of the category name. Thus, I worked on the simple packing algorithm I exposed in the 2 previous posts.

So here’s the practical application. And the first step is to set homogenuous sizes to all the elements, so that they align nicely. A little CSS fixed the height of elements with thumbnails to twice the height of those without. And for the widths, I went for a multiple of 100px, adding one line to my javascript file.

screenshot2

Some elements end up oversized after this operation. What can I say, it’s a question of compromise in the end I guess. I also tried multiples of 50px, but you get more possible sizes, and thus less chances the packing finds a neatly aligned solution.

You’ll find details of the algorithm in the previous post. Applying it in this particular case is only a question of adaption. The boxes are <li> list elements instead of <div>, so I sometimes needed to add <ul> sub-containers. The global container is resized to the closest multiple of 100px, and that’s about all there is to it.

Take a look at the result, I’d say it’s pretty satisfying !

screenshot3

This post has 5 comments

  1. Well, not a native Kindle version, I’m sure. Assuming CUP publishes an e-book version, they will use the PDF [not a reflowing epub version), and you’ll be able to read it on any device that can read PDF ebooks from ebooks.com — but looking at their site suggests that that wouldn’t include Kindles.

  2. yo no me fije de cuanto es el que ha tomado mi pololo, pero especialmente la primera vez el cambio fue notorio eso si, el envase dice clarito que en ausencia de estimulo el medicamento no hace nada, quizás factores externos estuvieron en juego en tu caso… mi pololo tiene mas o menos la misma edad que tu, asi que eso no creo que tenga que ver… bueno, no todos somos iguales, mientras sea un uso recreativo da un poco lo mismo si funciona o no, lo terrible debe ser cuando “se necesita” y no hace nada

  3. Hola:Yo opino que depende del chavo, a algunos les parece interesante, retante y a otros se les baja el interés y de fresa no te bajan, pero lo mas importante es no acceder al beso si el chico realmente no te late ni por calentura.saludos

  4. I do agree with all the concepts you have presented on your post. They are very convincing and will certainly work. Still, the posts are very quick for novices. Could you please prolong them a bit from subsequent time? Thanks for the post.

  5. Que delícia de história!! E que sonho ver essas fotos da Belinha tão bem tratada! Isso anima o dia da gente!!Se todos fossem como você, Maristela, não teríamos tantos peludinhos sofrendo. Que Deus ilumine você, sua família e a Belinha!

Leave a comment