I write code.

My name is Jacob Bearce. Clean, custom code is what I do. I've built everything from feature-packed WordPress templates to single-page showcase sites. Follow me here for weekly code releases and development tips.

Smooth Responsive Widths

I’ll often see responsive websites that have what I call “jumps.” Instead of smoothly transitioning from desktop to tablet to phone, a site will have three “states,” and each state is coded for a specific width (or 100% width). While this certainly gets the job done, it feels half-complete. These jumps can often result in poorly designed sites for 7″ tablets, a huge market. Small tablets like the Nexus 7 or iPad Mini should display a smaller version of the tablet site, not the phone version, as they often do.

Instead of these three view states, I create what I call a variable responsive site. I trim things down at specific screen sizes, but I never do any hard jumps to specific view sizes. I test the site at all possible widths (between 320px and 1280px) and create break points where things start to get funky. This ensures the site looks good, no matter what device you’re using it on.

Part of this is simply ensuring a nice transition to variable width. We’ll often start a site with, say 1024px width, but of course we need that to automatically respond to the browser size at a certain width. Instead of forcing 100% width at 1024px browser width, I’ll instead create a media query like so:

#wrapper {
width: 1024px;
}

@media screen and (max-width: 1279px) {
#wrapper {
max-width: 1024px;
width: auto;
}
}

This simple bit of code means that when the browser gets resized, there will never be a jump in width. When the window gets too small, #wrapper will simply smoothly transition in to the full width of the browser window.

Disclaimer:

I am not a designer. All designs featured on this website where designed by team members at Weblinx, Inc. For information on a specific design, contact me with the name of the project.

dialtool.com

Responsive Two Column Layout With One Scrolling Column

This one was hard to accomplish. I needed to create a responsive, two  column layout with one column that scrolled. I could’ve easily accomplished this with some jQuery, but we all know how unreliable that kind of thing can be in JavaScript. Instead, I set out to do this using pure CSS. Using absolute positioning, I was able to create this complex layout.

scroller

This has been tested to work with IE8-11, Chrome, Firefox, Safari, IE10 Mobile, Chrome Mobile, Android Browser, and Safari Mobile. The only script required is the Modernizr library, to fix some bugs in older versions of IE.

github.com/revxx14/responsive-full-height-scroller

Getting the Current Anchor Link as a Variable with JavaScript

This afternoon I spent 15 minutes trying to figure out how to read a page’s anchor link with JavaScript (for example, when you click “Comments” on my blog, you get taken to ghostlyco.de/post-name/#respond). This is actually incredibly simple: window.location.hash. In my example, this would return #respond as a string, which is perfect for use with jQuery!

stackoverflow.com/questions/3552944/how-to-get-the-anchor-from-the-url-using-jquery

Disclaimer:

I am not a designer. All designs featured on this website where designed by team members at Weblinx, Inc. For information on a specific design, contact me with the name of the project.

darienparks.com
Disclaimer:

I am not a designer. All designs featured on this website where designed by team members at Weblinx, Inc. For information on a specific design, contact me with the name of the project.

bearrivercasino.com
Disclaimer:

I am not a designer. All designs featured on this website where designed by team members at Weblinx, Inc. For information on a specific design, contact me with the name of the project.

welex.com

← Older