Ed Eliot - Latest Blog Comments

Postbank lenen on CSS Sprite Generator Source Code Released

Fri, 18 Sep 2009 02:11:04 PDT

Let's give it a go and see what we've got here. Thanks my man

Postbank lenen on Automatic versioning of CSS, JavaScript and Images

Fri, 18 Sep 2009 02:09:08 PDT

That's the way to go. Never get confused about finding the problem, files will always be the newest and will be loaded again.

Afsar on Equal Height Columns using CSS

Wed, 16 Sep 2009 21:28:39 PDT

Nice and helpful post... Thank you very much.. :-)

Afsar on Equal Height Columns using CSS

Wed, 16 Sep 2009 21:27:53 PDT

Nice and helpful post... Thank you very much.. :-)

Chhh on PHP Tip: Getting the property count for an object

Thu, 10 Sep 2009 07:49:48 PDT

if your object has a nested structure such a simple conversion won't help you to count ALL the properties recursively, but you can use this small recursive function

/**
* Recursively converts stdObject to an associative array
*/
function __object2array($object) {
   if (is_object($object) || is_array($object)) {
	   foreach ($object as $key => $value) {
		   $array[$key] = $this->__object2array($value);
	   }
   } else {
	$array = $object;
   }
   return $array;
}

and then use count(__object2array($yourObj), 1) to recursively count the properties with a standard fucntion.

Martin Adamko on Equal Height Columns using CSS

Thu, 10 Sep 2009 07:22:28 PDT

Last try: (sorry for the mess)

Hi, every one. Appreciate your posts. I have simple jQuery solution. I�guess jQuery is cross browser compatible, so it should work in most cases (even on iPhone... ?). And when it does not work... it still looks like before, so only pros. KEYWORDS: floated divs, same height, jquery, stretch 100% After tuning my layout with only CSS I�was so desperate, when I�realied that my column won't stretch. So I�looked all around the web. This article's hack is cool, but way too complicated for me to keep in mind. I�found out, that any DIV element can stretch to 100% height if parent element is set fixed height like: <div class="row" style="width: 150px; height:100px; background-color:#369; padding: 10px;"><div style="float: left; width: 50px; height: 100%; background-color:#C60;"> </div></div> All working great. Let's remove height atribure from "row". The row DIV simply disappears except the padding: <div class="row" style="width: 150px; background-color:#369; padding: 10px;"><div style="float: left; width: 50px; height: 100%; background-color:#C60;"> </div></div> We bring it back adding a�clearing element: <div class="row" style="width: 150px; background-color:#369; padding: 10px;"><div style="float: left; width: 50px; height: 100%; background-color:#C60;"> </div><br style="clear: both;" /> </div> Next, add next column wich is certainly heigher using line breaks or whatever content: <div class="row" style="width: 150px; background-color:#369; padding: 10px;"><div style="float: left; width: 50px; height: 100%; background-color:#C60;"> </div><div style="float: left; width: 50px; height: 100%; background-color: #6C3;"><br /><br /><br /></div><br style="clear: both;" /> </div> The row now has two columns. First small, second larger. We make it same size by setting their parent's height after the content is loaded using jQuery. Remember, that they stil have height: 100% set. Put this script in the header: <script src="http://code.jquery.com/jquery-latest.js"></script><script> $(document).ready(function(){ $(".row").each(function () { $(this).height($(this).height()); }); });</script> What this script does is, that it gets elements with .row class set, and applies height of itself to itself. RECAP: Container has no idea how high it is. We need to tell it, what height it is. If we know, what size we want it to get, simply put CSS declaration "height: {desired_height}units;". If we don't know yet, or we want it to be organic, we use script to find the height of container, and tell it to have "it's own height". The whole HTML would look like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="http://code.jquery.com/jquery-latest.js"></script><script> $(document).ready(function(){ $(".row").each(function () { $(this).height($(this).height()); }); });</script><title>Untitled Document</title></head> <body><div class="row" style="width: 150px; background-color:#369; padding: 10px;"><div class="column" style="float: left; width: 50px; height: 100%; background-color:#C60;"> </div><div class="column" style="float: left; width: 50px; height: 100%; background-color: #6C3;"><br /><br /><br /></div><div class="column" style="float: left; width: 50px; background-color:#C60;"> </div><br style="clear: both;" /> </div></body></html> Note that last column has no height: 100%; set, so it remains unchanged. Hope I�helped.

Martin Adamko on Equal Height Columns using CSS

Thu, 10 Sep 2009 07:15:29 PDT

Guess the code got cut out. Trying the BBCode otherwise... sorry:

$(document).ready(function(){
  $(".row").each(function () {
    $(this).height($(this).height());
  });
});

Untitled Document

Martin Adamko on Equal Height Columns using CSS

Thu, 10 Sep 2009 07:07:19 PDT

KEYWORDS: floated divs, same height, jquery, stretch 100%

After tuning my layout with only CSS I�was so desperate, when I�realied that my column won't stretch. So I�looked all around the web. This article's hack is cool, but way too complicated for me to keep in mind. I�found out, that any DIV element can stretch to 100% height if parent element is set fixed height like:

All working great. Let's remove height atribure from "row". The row DIV simply disappears except the padding:

We bring it back adding a�clearing element:

Next, add next column wich is certainly heigher using line breaks or whatever content:

The row now has two columns. First small, second larger. We make it same size by setting their parent's height after the content is loaded using jQuery. Remember, that they stil have height: 100% set. Put this script in the header:

$(document).ready(function(){ $(".row").each(function () { $(this).height($(this).height()); }); });

What this script does is, that it gets elements with .row class set, and applies height of itself to itself.

RECAP: Container has no idea how high it is. We need to tell it, what height it is. If we know, what size we want it to get, simply put CSS declaration "height: {desired_height}units;". If we don't know yet, or we want it to be organic, we use script to find the height of container, and tell it to have "it's own height".

The whole HTML would look like this:

$(document).ready(function(){ $(".row").each(function () { $(this).height($(this).height()); }); });

Untitled Document

Note that last column has no height: 100%; set, so it remains unchanged.

Hope I�helped.

chicken on Dynamic Picture Captions with JavaScript

Thu, 10 Sep 2009 06:01:41 PDT

Great post, learning about js can save us so much time, thanks a lot. Time is passing, but many articles like this one stay up to date by themselves!

Mamsaac on How well do you know your preferred scripting language?

Sat, 29 Aug 2009 20:58:45 PDT

Here to brag and say I knew them all ;)

I have some experience using Python with Django, and I think that it has been very productive for me, as a programmer and designer =) You won't regret learning other languages and frameworks, they open your mind in some very special ways.

I program PHP, mostly, but also use Python, Java, a bit of C and C++, and of course JavaScript... PHP could improve some things and learn from other languages, but also the communities learn from all the good practices, which are very often avoided by the PHP programmers. It's the bad thing that it got so exposed to amateurs... you find some ugly code some times =)