Web Dev
Elegantly 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 MoreFixed Column on Right, Fluid Column on the Left
This code produces a 2-column layout, with a fixed column to the right, and a column to the left that fills the remaining space. To change the width of the right column, just adjust anywhere in the code below that has 250px to match whatever width you want (someday we’ll have variables in CSS!). <style> […]
Read MoreFixed Column on Left, Fluid Column on the Right
A two-column setup, with a fixed width column on the left, and a fluid main column that fills out the rest of the space on the left: <head> <style> .clear{ clear: both; } .col-secondary{ float: left; width: 190px; background: blue; min-height: 100px; } .col-main{ margin-left: 200px; box-sizing: border-box; background: green; min-height: 200px; } </style> </head> […]
Read MoreHTML and Encoded Characters with Handlebars
As soon as I updated some of the templating on one of my websites to handlebars, HTML code wasn’t being rendered, and I recieved odd characters in the output, like: My Blog Name » Blog Sub Title The solution to this is instead of using the standard double bracket to insert the content, use triple brackets […]
Read MoreMaking an Entire Div Clickable
I wanted to make an entire div clickable — the destination for the click is derived from a link within the div that we give a class of ‘main_link’ to. Insert the following jquery code into your page: $(“.stndBox”).click(function(){ window.location=$(this).find(“.main_link”).attr(“href”); }); Your html code will look like the code below. The jquery will grab the […]
Read More