Web Dev
Fixed 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 MoreCentering Multiple Floated Elements
The need was to have multiple floated fixed-width elements, sometimes two, sometimes three, to stay centered on the page without needing to adjust the html code. Not as easy as one would think. Of course its easy if you know how many elements you are going to have, and thus know the width that the […]
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 MoreChanging Values and Properties with jQuery
jQuery excels at making it easy to change values and properties. Here are a few samples: Change a Select Box Value Changing which value is selected in a select box (this will select the item in the select box with the value of 126): $(‘#catID’).val(‘126’); Change the Background Color of a Textbox $(‘#textbox’).css({‘background-color’:’red’}); Checking a […]
Read MoreVertical Aligning Within a Div
Vertically aligning text within a div really isn’t too bad — its just not very intuitive. There is the css tag ‘vertical-align’, but this only applies to a small range of instances where this actually works (this tag really should apply to actually vertically aligning all possibilities). To vertically align within a div, just give […]
Read MoreCSS Rounded Corners
Rounding All Corners of an Element: Basic rounded corners (all corners of the element will be rounded): #example { -moz-border-radius: 15px; //Mozilla tag border-radius: 15px; //Standard tag for all browsers } Targeting Specific Corners: Both W3C and Mozilla specifications are given. Both will need to be listed for the rounded corners to […]
Read MoreCSS Drop Shadows
Adding drop shadows to elements with CSS is fairly easy: .shadow { box-shadow: 3px 3px 4px #000; } Theoretically, you just need the bottom declaration (box-shadow), but older browsers that don\’t fully support it utilize the other declarations. The format for all of these is the same: box-shadow: x-offset y-offset shadow blur radius color ; […]
Read MorejQuery Effects
Many effects are made easy with jQuery: Hiding and Showing hide Hides an html element, for example: $(‘menu_sub’).hide(); show Shows an html element: $(‘menu_sub’).show(); toggle Switches and elements display — if hidden, it displays it, if it\’s currently displayed, it hides the element. $(‘menu_sub’).toggle(); fadeIn In the code below, the ‘500’ is the speed in […]
Read More