Recharge Friday, December 2, 2011
I had a great thanksgiving weekend with my family in Phoenix. I currently live near Boulder Colorado and we drove all the to phoenix in one day, it's about a 13 1/2 hour drive. My Cousin (and good friend) lives in Albuquerque so I picked him and his wife up on the way. It was a blast! We ate a lot of turkey and deviled eggs, mmm.... We played games and basically just had a good time.Themed HTML Select List Wednesday, March 30, 2011
I was recently given a design comp for a new site I've been assigned to. And in typical graphic designer fashion, they gave me a beautiful design that almost isn't possible for the web. The comp had a themed select list:
This is typically frowned upon by developers because we all know that you can't change the down arrow on a select list, or can you? I searched the web high and low but couldn't find a decent answer on how to do this. Most people were content with using a jquery-driven div-select that wasn't really a select at all but rather would set a hidden input with the selected value. That just seemed messy (and heavy) to me.
So I did some experimenting and found that if you set the opacity of the select to 0, it would disappear, but it would still show it's drop down contents if you knew where to click, i.e. if you knew where the select was even though you couldn't see it.
Here's what I did:
<style>
.search_crit .arrow
{
float:right;
width:9px;
height:6px;
background:#FFF url(themes/base/images/ui-icons-buttons.png) no-repeat 0 -569px;
margin:10px;
}
.search_crit .select
{
position:absolute;
border:solid 1px #CCC;
width:179px;
height:26px;
background-color:#FFF;
margin-top:8px;
}
.search_crit .select_txt
{
float:left;
font:italic 12px Arial;
height:26px;
line-height:26px;
vertical-align:middle;
padding-left:5px;
}
.search_crit select
{
z-index:5;
position:relative;
width:179px;
height:26px;
margin-top:8px;
opacity:0;
filter:alpha(opacity=0);
}
<style>
<div class="search_crit">
<label for="Results_per_page">Results per page</label>
<div class="field">
<div class="select">
<span id="results_txt" class="select_txt">20</span>
<span class="arrow"></span>
</div>
<select name="Results_per_page" id="Results_per_page" class="c" onchange="FormHelpers.SpanSelect_onchange(this, 'results_txt')">
<option value="5">5</option>
<option value="12" selected="selected">12</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
</select>
</div>
<div class="c"></div>
</div>
<script type="text/javascript" language="javascript">
var FormHelpers = {
SpanSelect_onchange: function (obj, spanId)
{
document.getElementById(spanId).innerHTML = obj.options[obj.selectedIndex].text
}
}
</script>
The <span class="arrow"></span> is an image sprite and could just as easily be an actual <img/> tag. basically what I'm doing here is setting the opacity of the select to 0, and positioning a themed, absolute positioned, div on top of it. I've also created a lightweight javascript helper class to set the text of the div equal to the selected value[or text] of the select. I like this method because it feels lightweight and doesn't require funky databinding to a jquery container.
Coding acronyms Thursday, April 15, 2010
Sometimes I feel pretty accomplished. Then I remember how often I have to sing myself the alphabet song.
Recently my project manager has been throwing acronyms at me, "Is that base class SOLID," "You need to DRY up that code," "you ain't gonna need it"etc. etc. Oddly enough, I'm the type of person that repeats that kind of stuff over and over again in my head (like the alphabet song), it's probably related to my mild OCD. But I've found that it actually helps me to write better code!
Obviously memorizing a few acronyms aren't going to make you a genius programmer, you have to actually understand the principles behind them, and be able to apply them. It takes learning and practice, but the rewards are well wroth it IMAO.
DRY: Don't Repeat Yourself
YAGNI: You Ain't Gonna Need It
S.O.L.I.D.:
S: Single Responsibility (PTOM: The Single Responsibility Principle by Sean Chambers)
O: Open Closed (open to extension closed to modification)
L: Liskov Substitution (PTOM: The Liskov Substitution Principle)
I: Interface Segregation
D: Dependency Inversion (and/or Injection)
Internet Explorer 8 and AJAX caching Thursday, April 8, 2010
If you're a web developer and you work with AJAX (I personally prefer the JQuery AJAX library), then you should keep in mind that in Microsoft's infinite wisdom stupidity, they decided that it would be a good idea to cache all AJAX requests. And in typical arrogant Microsoft fashion they (believing they are the only source of truth) haven't provided a way to turn said "feature" off. No meta tag, no javascript DOM function, nothing. The only way that I've found to get around it is to append a throwaway variable to your request (weather it be POST, GET or whatever). Doing this will essentially trick IE into thinking you're making unique requests with each callback.
Example (JQuery):
$.ajax({url: url,
data: { nbRandom: Math.random() }
});
