Web Dev
why is 100% width body or div wider than the screen on mobile?
I’d been struggling with this one for quite a bit. I figured it was something stupid, but no matter what I did, whenever I set the width of my body, html, and/or div tag to 100% (I’d totally stripped down my testing page to the simplest of elements to see why it wasn’t working), the […]
Read MoreAn updated 2 Column (Fluid Fixed) Layout
An alternate method for 2 columns, with a fixed column on the right and fluid on the left. The main goal here was to be able to have the secondary column (\’.col-right\’) appear above the main column (\’.col-main’) when the screen width was decreased. This wan\’t possible with the other method for achieving the column […]
Read MoreNamespacing in Javascript
So the other night I was working on some fancy script. It didn’t work. After a bit of investigation, it turns out that one of the function names was already being used by a different function. Bummer. Of course this is why people use namespacing, to avoid problems such as this. So, here’s how to […]
Read MoreIncluding Border and Padding In Box Dimensions
Generally when I’m assigning a width or height to a div, I want it to be that width or height. Yet some genius, whoever came up with the CSS box model, decided that the width of the box wouldn’t actually include the padding or border as part of the width. Fortunately, we can now include […]
Read MoreElegantly Run a Function on Window Load or Window Resize
Pretty straightforward, but I wanted to run a function on the window load event, or if the page was resized (like resizing page elements). I was originally doing this in two lines of code (one for loading, one for resizing), but wanted something more elegant: $(window).on(‘load resize’,functionToRun);
Read MoreThree Column List
The Action: A simple list, with three columns. Other Notes: 1. The middle columns fills the available space, each end column is fixed width. 2. Elements inside each of the columns are centered vertically Example: http://www.localhost:10010/examples/el_list_3columns.html
Read MoreResponsive Tiles
For a couple of projects, I wanted to create tiles that automatically resized themselves based on the screen size, or space available within the page. If there is enough room, I wanted the system to automatically insert another tile to the row. The javascript/jquery: //Resizes tiles to completely fill the width of a container div […]
Read MoreEasy jQuery Validator Setup
It seems like it always takes me a bit to figure out how to get the super-great jquery validator to work, and I have to go work my way through the documentation on the site — which has a lot of information, but makes it a little harder for me to just set it up […]
Read MoreSimple Div Popup
I wanted a simple popup. Click on a link, it opens a div. When you mouse off the div, or the link, it goes away. Pretty easy: The jQuery $(document).ready(function(){ var timer; $(‘.dropdiv-link’).click(function(e){ e.preventDefault(); var target = ‘#’+$(this).attr(‘data-target’); if ($(target).is(“:visible”)){ $(target).hide(); } else{ $(target).show(); } }); $(‘.dropdiv-dropwindow’).mouseover(function(e){ clearTimeout(timer); $(this).show(); }); $(‘.dropdiv-link’).mouseout(function(e){ timer = setTimeout(function(){$(‘.dropdiv-dropwindow’).hide()},500); }); […]
Read MoreA SASS Stylesheet For Great Forms
Forms have always a bit of a pain in the ass to get formatted correctly. One of my largest pet peeves has been making sure that the text given on the label lines up with the text within a textbox. Since padding, margins, font size, and line-heights all play a role in this, any time […]
Read More