We're growing into something new. Read More

Trevan Hetzel

Agency website redesign

Redesigning my company's site in an effort to appeal more as "codeslingers" than designers. The target audience will be advertising/marketing agencies who need to partner w/ companies to do the code on web projects, but I tried not to completely cut myself off from smaller businesses who need the full package of design and code.

$("div#resident .dropdown").click(function(e){
		$("div#resident .showresident").slideToggle(150);
		$("div#resident .showresident").slideUp(150);
	$("div#visitor .dropdown, div#business .dropdown").click(function(){
		$("div#resident .showresident").slideUp(150);

None of the jQuery I wrote works in IE7

Is there some special jQuery library I have to use for legacy IE support or something? I have 170 lines of jQuery that I wrote and NOT ONE LINE works in IE7. For example, here's a teaser of some of the code I wrote. Is this terrible code or something?


I'm making a company management tool for freelancers

Here's the blog post introducing this beta product (http://hetzelcreative.com/blog/introducing-our-first-product-sidecar/), but it's with great pleasure to announce what has been occupying my nights and weekends for the past several months. I'm building the all-in-one tool for managing everything related to running a design shop or freelance business.

<?php $catTerms = get_terms('product_cat', array('hide_empty' => 0, 'orderby' => 'ASC', 'exclude' => '17,77')); ?>

    <?php foreach($catTerms as $catTerm) : ?>
        <li><a href="<?php echo $catTerm->slug; ?>"><?php echo $catTerm->name; ?></a></li>
<?php endforeach; ?>

WooCommerce - list all product categories and their thumbnails

I've created a custom template for modifying the layout of one particular product category called 'University Artwork'. The template is called taxonomy-product_cat-university-artwork.php. All I need to do is list out all the subcategories of the University Artwork category and display those subcategories' thumbnails next to each title. What I currently have, using get_terms is not capable of retrieving the cat thumbnails (I don't think anyway). So here's what I'm currently using to display the category titles. Now how can I take this and make it retrieve each category's thumbnails too?


Table TD's not aligning uniformly

Can anyone see a problem with my table here? http://test.hetzelcreative.com/pottco/departments/board-of-supervisors/overview/ The left and right columns are clearly not evenly spaced and neither of them have any width attributes declared. Even when I put width="50%" on both, the left column is still super wide while the right one is super narrow. I can't see any browser specific styles that would be causing this either, so I'm at a loss! Also, I can't use pixel widths at all, since A) the site is responsive and B) the client will not know how to specify pixel widths (or any widths for that matter) in the Wordpress visual editor, so it just needs to work.


Responsive design mobile navigation

I'm having a bit of a problem deciphering how I should handle the main navigation of this responsive site I've developed on mobile devices. It's got big flyout menus that are hidden until hover (all css). On iPhone, clicking on a nav item displays its flyout, but you can't click off or hide it unless you click on another nav item. So once you click on a nav item, it's forever there unless you refresh or navigate to another page. Is it best to ditch the css in favor of javascript so I can use .click and .mouseover functions? Here's the site: http://test.hetzelcreative.com/pottco/ Check it out on a phone.

if ( $('.left-sidebar .subpages li').hasClass('current_page_item') ) {

jQuery hasClass

I'm trying to find if a li element has a class of 'current_page_item' and, if so, add a class to it's child 'a' element. Here's what I've got so far, but I can't figure out how to target it's child 'a' element.


Rails, Pjax and DataTables...

I've got a Rails app utilizing pjax (http://pjax.heroku.com/) so that my header and navbar don't ever reload. It's all fine and dandy and working, BUT in one of my views I'm using a data table (http://datatables.net). The data table works great when you first load up the page, but if you navigate away to another page and then come back, the table doesn't "reinitiate", so it doesn't work and everything looks like crap. Apparently it's because the data tables js file isn't getting loaded up again due to pjax. Here's what I've got: application.js: //= require jquery //= require jquery_ujs //= require pjax //= require_tree . In the head of application.html.erb I have and then wrapped the in a div with "data-pjax-container ". Then in a separate custom.js file, this is what initiates the table: $(document).pjax('a[data-pjax]'); $('.openinside').pjax('.sidebarInner');