Posted on

Super simple inline PHP alternating rows

Traditionally when you have lost lists of dat you want to alternate rows for usability. The first thing everybody makes to fix this is a simple if statement loop, but this adds a number of lines and is hardly a clean solution. Additionally it required you to have a “counter” or “switch” variable, usually placed at the bottom of the loop, overall very messy.

I had a boss who thought he was on the cutting edge by compressing the traditional if statement into a shorthand version (saving 2-3 lines of code), but the system was still using a $class variable and still requires a counting or switch variable. It was still a mess and added clutter to the code that was already cluttered.

Earlier today I was working on outputting client records for the previously mentioned fully customized application. Wanting to avoid such messy code as I’ve seen (and admittedly used) in the past I looked for a better solution and with a little tweaking and playing I came up with this (actually I came up with something similar, that I further optimized at home, but lets not split hairs here).

Snipplr: http://snipplr.com/view/56219/simple-inline-php-alternating-rows/

Thats it, that placed inline in a normal echo statement will place the class alt every other time. It’s a simple modification if you want to call a class tag without adding the key (say you already have a class assigned to it and just want this as a second one, simply place it in the quotes and adjust the code accordingly). Compressed down to a single line it neatly fits into existing code (even HTML with inline PHP like WordPress) and keeps everything clutter free. Heres a simplified snippet of how I deployed it:

Snipplr: http://snipplr.com/view/56219/simple-inline-php-alternating-rows/

I’d usually go over how ti works but it’s pretty straight forward, only thing that might be confusing to newer programmers is how it determines what to output and the general format of shorthand if statements. Simply put the output of putting something into a variable (in this case the ' class="alt" into the $alt variable) is always what you put in (assuming PHP can put it in it, but not being able to is a rather abnormal situation). As for shorthand if statements they are simple; (conditional ? true : false), only disadvantage is that a shorthand if statements are only good for one thing (no multiple lines by inlining ;‘s with it).

I’ve tested this on several servers and it’s haven’t noticed an issue. This is the most compressed alternating row script I’ve seen online, if anybody knows of a reason not to use it (or, if it’s even possible, a shorter version) or uses it in something cool let me know.

Posted on

Inline input labels with animation

This last week I’ve been doing a lot of work making a new homepage that looks like twitters, as well as modifying some things on the rest of the site to try and give it a cohesive look. While most of the site is still on the to do like (it’s a fairly large site) the new homepage is done (you can see it at theamm.org, no promises it hasn’t been changes as the owner has a copy of CSS Edit and it not afraid to use it) and I think it met the goal. One of my favorite (non specialized) features is the animated inline input labels. Because it’s a great, simple implementation I decided to post it here.

First, the input are formatted a very special way, don’t worry it’s basic and easy to implement. First, the input for firstname:

Snipplr: http://snipplr.com/view/53928/inline-labels-with-jquery-animations/

The input is obvious, as is the label, the last div, with the class .inputerror.firstname is some specific code for inline displayed error messages, I may make a post about them if there is any interest. The trick to this is the CSS, the div.inputbox is the thing that actually looks like the input, and the true input has no border or background. The label is moved over the input box. Because of this it’s important to have the label properly formatted with the for="" element pointing to the appropriate input field.

The CSS that makes that look right is below, it’s the code used in the example (link at bottom) as the code used on that site is more than a little messy (to many people playing around with it).

Snipplr: http://snipplr.com/view/53928/inline-labels-with-jquery-animations/

Obviously that has some styling for looks, which is fully changeable based on your individual implementation, the important stuff is the display, overflow, and the margin-top on the .inputbox label, as well as the previously mentioned background in the .inputbox input style. You’ll notice that the inputbox doesnt have a width or a height (except where limited by the actual input inside it). That because thats all set via the individual inputs so you can vary it from input to input depending on what will go in it (just like the example has set up).

The last bit is the scripting, in this case jquery was used, but it should be convertible to any other javascript library, or straight javascript itself, It’s only in jquery here because I use jquery for nearly everything because it’s fast, stable, and feature-full. In this case it’s a function called at load although it can be called in any as long is it’s sub-function tun on keyup and/or keydown.

Snipplr: http://snipplr.com/view/53928/inline-labels-with-jquery-animations/

What this scripting does is bind the sub-function keyupdown on both the keyup and keydown. The reason it’s done on both is because it’s more reliably in always running that it is when you just do on up or down. The first first checks if there is a value to the input, if not it will reanimate the label back in, with a simple fade in the case, but you do have full control over how it does it. Then, if there is something in the input it will fade it out, in this case by pushing it right while fading out. Once a label is completely faded out it is hidden so it won’t interfere with normal operation of the input box (like selecting or double clicking). It also makes it visible again before fading it back in.

All three parts put together make a nice animated inline label like the ones on the Inline input labels with animation example page. It’s been tested in IE and on mobile devices and seems to work fine albeit with slow or no animations on mobile devices. There was some weird graphical things in IE on the test site but I believe it was due to the font-weight and IE’s lack of fon’t smoothing that caused it.

If you’ve found a great use for this, or have an questions or would like some help with modifications or implementation on your specific site leave a comment below.

Posted on

100% width text area with adjacent button

Long time to post, between being sick and doing a bunch of really boring coding work nothing of value to post has come up recently, until now. Last week I was working on a contract where they have the entire layout as a series of tables set to 100% width (I know tables, how retro). Anyway I was trying to do something I had done hundreds of times before on their site, a text area thats 100% wide (so it flexes with the width of the page) that has a button next to as (as opposed to below it like would naturally happen). After spending some time on it i figured it out and decided I would post it here on the weekend so I would always be able to find it. Come today and wouldn’t you know it I forgot how I did it, so I played around a bit and found a solution. It’s not the same as the one I used for them but the end effect is the same. First it requires you to but some code around your input (it’s never that simple), a mini example table is below.

Enter Text

Snipplr: http://snipplr.com/view/52532/100-width-text-area-with-adjacent-button/

The last 2 empty table cells are not important, there just there because thats the same style that the contract sets everything up with. Anyways as you can see you have to wrap the entire input in a div, then just the text area in a div. Another thing you have to do it give your button a width, I usually use 95px since it seems to fit the majority of buttons out there (after all buttons names are usually things like “Submit” or “Load” not “Press here to do the thing you want to do”). That width of the button, along with any margins or passing you add to it to make the format clean, as then added as right padding to the cell this div cluster is placed in so in this case 95+5 to make the final product look clean is a nice round 100px. That code there is paired with the css below (it’s normal CSS here but it works just as well being all inline).

Snipplr: http://snipplr.com/view/52532/100-width-text-area-with-adjacent-button/

That css code prevents wrapping and plays with margins (equal to the amount of padding above, button width + margin) to get a nice clean look when your done. The simplest way to description what it does it in throws the button off the end, outside of the box, but the box is made shorter (by the inline padding added to that cell) to compensate and move it look as if it’s in the box.

One thing to note, if your going to use jQuery to pull values from the box laters you probably want to avoid the child selector “>” to make it easier, just use a space as it acts as a simple inside selector going all the say down when looking for elements, in this example that text area could easily be selected with #(“table input[type=’text’]”).

You can see it on the worlds more boring example page here: 100% width text area with adjacent button.

I know this is a poor way to do this, and if I run across any of my old code that does it in a better way I’ll update according, but this effectively works and I can now at least reference this myself later, even if nobody else is ever helped by it. If you know of a better way to achieve the same thing please comment.