Setting equal height images with twitter bootstrap thumbnails

August 9th, 2013 ^Lestat 35 comments

Using Twitter Bootstrap 2.3.2 I had set up thumbnails rather quickly. Only to discover a few things;

1) The alignment was off on the second row of thumbnails.

2) Image sizes were different.

<div class="row">
	<?php if ( ! empty($dies)): ?>
		<ul class="thumbnails">
			<?php foreach ($dies as $die): ?>
				<li class="span4">
					<div class="thumbnail">
						<?php
						// your image dir here...
						$src = 'http://www.placehold.it/260&text=No+Image';

						$attr = array(
							'src'      => $src,
							'data-src' => $src,
							'class'    => 'media-object',
							'height' => '180',
							'width' => '260'
						);

						echo img($attr);
						?>
						<div class="caption">
							<h3><?php echo ! empty($die->die_number) ? $die->die_number : '&nbsp'; ?></h3>
							<p><?php echo $die->short_description; ?></p>
						</div>
					</div>
				</li>
			<?php endforeach; ?>
		</ul>
	<?php else: ?>
		<div>There are no dies at this time.</div>
	<?php endif; ?>
</div>

Resulted in this…

The alignment technically was not off. The thumbnail left margins were doing exactly what bootstrap was telling them to do. I fixed the alignment by overriding some css in my style.css:

.row-fluid .thumbnails .span2:nth-child(6n+1),
.row-fluid .thumbnails .span3:nth-child(4n+1),
.row-fluid .thumbnails .span4:nth-child(3n+1),
.row-fluid .thumbnails .span6:nth-child(2n+1) {
	margin-left: 0;
}

This pretty much changes the left margin, depending on the span level you have set for the list items. This was not my idea. I got it from stack overflow.

Now for the image height sizing. If any of my images varied in heights, they would automatically fit the width but not the height. So I ended up with the thumbnail divs in the same row, varying. Not the end of the world, but it certainly didn’t look very well when I added the text underneath them. _-__-.

A little bit of jQuery did the trick (once again from stack overflow).

/* set equal height thumbnail images*/
$(document).ready(function(){
	$('.thumbnail img').css({
	    'height': $('.thumbnail img').height()
	});
});

Now the rows all line up, and the image heights are all the same.

Categories: Programming, css, jQuery, php Tags: , , ,

Adding a second argument to CI form_validation callbacks

April 27th, 2011 ^Lestat 26 comments

About a month ago I started working with the CodeIgniter framework. It’s the first framework I have worked with and frankly, I love it!

So I was looking to add a second parameter to a form_validation callback. Here’s what I found:

$this->form_validation('user_name', 'name', "callback_test_name[$param2]");

and the callback:

test_name($name, $param2){
    ..// some logic to return
}

The form_validation class uses the form value as the first parameter, and you can pass the second parameter in the arguments as you would with any other rule references. (First snippet)

At first I was calling 2 validations. First the standard type of validation, then another validation on the same input. * BAD IDEA *

There were some issues with order of operations. I found it best to chain the whole lot together. Like so:

$this->form_validation('user_name', 'name', "required|min_length[10]|callback_test_name[$param2]");

I hope that helps anybody with the same question.

REGEX For common courier tracking numbers

November 9th, 2010 ^Lestat 19 comments

I was on the hunt not only to find the different variations each courier had for their tracking numbers but also a regex to match. Most of the google fu I found was outdated. Fedex “recently” (months? years? days?) changed from a 12 digit to 15 digit system. And NO, tracking numbers are not totally random. There is usually a space separation on the printed labels you see. Each of the spaced out subsets have a meaning to the courier as well as a checksum. Checksum being, a pre selected sequence of particular number positions added together then divided by a pre selected number. That you can search up yourself if you like. I didn’t find all too much on that matter either.

I am not very good with regex so if there are any suggestions by l33t coderz, they are more than welcome. On with the codes:


/****
[ UPS ]
9 digits, or 1Z+whatever digits
The quick brown fox 1Z9999W99999999999 jumps over the lazy dog.
*/
$ups = '/(\b\d{9}\b)|(\b1Z\d+\b)/';

/****
[ Fedex ]
12 digits, 15 digits, or '96'+ 20 digits
The quick brown fox 999999999999 jumps over the lazy dog.
*/
$fedex = '/(\b96\d{20}\b)|(\b\d{15}\b)|(\b\d{12}\b)/';

/***
[ USPS ]
30 digits, '91'+20 digits, 20 digits (untested)
< TOTALLY UNTESTED BY ME AT THIS TIME >
*/
$usps = '/(\b\d{30}\b)|(\b91\d+\b)|(\b\d{20}\b)/';

I did get the common characters per courier from Packagetrackr. I don’t know how much of it is accurate, but from what I could tell from my experience with FedEx and UPS it seemed to be in line. I was unable to find an all inclusive source.

Categories: Computing, Programming, php Tags:

20100914 MKE PHP Meetup Live blogging

September 14th, 2010 ^Lestat 19 comments

6:20 Intro, and new people introducing themselves to the group.

6:27 Aaron talked about his car, and introduced Kevin Schroeder, Zend Technolgies tech evangelist.

6:30 Kevin tells us of his background (cool nerdy stuff)

A book he wrote

Kevin offered $100 off zendcon in our group, as well as a drawing for a free ticket (1,400 value).

Drawing for a free version of Zend studio at tonights meeting.

In my opinion live blogging is very distracting to me…

Kevin is going into the framework now and it will take about an hour. Im done bloggin for now…

Zend Studio is pretty cool. Especially code tracing.

7:20 break time.

Categories: General Site Maint Tags: ,

Using ui autocomplete as a dropdown, with type in

April 1st, 2010 ^Lestat 14 comments

I had been using an autocomplete plugin by bassistance. 2 months later jQuery UI added autocomplete to their list of widgets. Like many plugins out there I was unable to find an autocomplete that was easy to use for my purposes. The closest I recently came to was the sexy combo plugin. I cant remember why but it was just a tad short of what I wanted to do, and I’m still quite a javascript novice.

I came up with a way to use the jQuery UI autocomplete widget as a <select> that you could also type in something if the choices in the dropdown didn’t fit your needs.

ui-autocomplete-dropdown

This example uses a local data source, but you can come up with creative ways to use remote JSON sources if you like.

<script type="text/javascript">
	$(document).ready(function() {

		// dropdown/ auto suggest
		$(".ui_dropdown").autocomplete({
			minLength: 0,
			delay: 0
		});

		$(".ui_dropdown").click(function(){

			var input = $(this);
			var inputID = input.attr('id');

			// close if already visible
			if (input.autocomplete("widget").is(":visible")) {
				input.autocomplete("close");
				return false;
			}

			// set source(s)
			var myData = '';
			if(inputID == 'input1'){
				myData = ["foo","bar","hello","world"];
			} else {
				myData = ["1","2","3","4"];
			}

			// load source
			input.autocomplete({
				source: myData
			});

			// fire search event
			input.autocomplete("search", "");
			input.focus();
			return false;
		});		

	});
</script>

In this script I am using the input id’s to define the data source.

Categories: Programming, jQuery Tags: