Web Dev
Why Isn’t My SVG Image the Right Size in Internet Explorer
My svg images looked fine in the good browsers, but in Internet Explorer, they were appearing huge! I attempted to just set the size using css in the image tag, but that didn’t work. What actually did work, was I opened up the svg file, and added a “viewBox” value to the svg declaration, so […]
Read MoreEnhancements for jPlayer Implementation
I love the jPlayer for easily being able to add modern mp3 support to web pages. I wanted a few additional features, so I created this additional script which adds a few updated features: Adding rewind/fast-forward support Ability to toggle the volume controls on and off Ability to specify the mp3 url by setting a […]
Read MoreOrganizing Files for Web Projects
Historically I’ve always organized my website files pretty much based on file type. For example, I would have an images folder, and a folder for javascript files, and a folder for sass/css files (php files generally are organized fairly logically, based on what they do). It seems like this is a normal setup, and this […]
Read MorePreserving Click Events With jQuery UI
My click events weren\’t being preserved when using the jquery sortable functionality. After dragging a list item around, elements like my checkboxes would no longer work, and not just for the element that was being dragged, but for any of the checkboxes in the entire list. It took a bit of searching, but to get […]
Read MoreChange Placeholder Text Color
Change the placeholder color of the text for input boxes in a form: ::-webkit-input-placeholder { color: #000; } :-moz-placeholder { color: #000; } ::-moz-placeholder { color: #000; } :-ms-input-placeholder { color: #000; }
Read MoreJavascript define a variable if it isn’t defined currently
It seems like this comes up quite a bit. This will create a new variable if the variable isn\’t currently defined: var myVariable = myVariable || “”; Or to define it as an array: var myVariable = myVariable || {};
Read MoreDebugging Firefox Mobile on Your Computer
I needed to debug a web page that I was working on, which was having some issues on mobile versions of firefox. I just needed to look at the console, but setting this up was a bit complicated, moreso than it should be. This should hopefully help: On your phone: Settings>About Phone>Build number (tap this 7 times […]
Read MoreHandlebars Just Adds Bloat and Complication
I kind of like Handlebars for templating, but more and more, I think it’s just makes the codebase more bloated and complicated: My problems with handlebars: 1. I can’t just use my existing javascript code. For instance, I have an existing function to format a phone number, but to use this within a handlebars template, […]
Read MoreReference a Handlebars Template From Another Template (Nesting Templates)
Within the JS file, register a new partial (note: avoid underscores with with the name of the partial, or with the template names…this seems to cause issues): Handlebars.registerPartial(“inner-template”,$(“#tpl-inner-template”).html()); In the template template that you want to include the partial in, just reference the partial with: {{> inner-template Data }} If the data isn’t showing, try […]
Read MoreFixing Jagged Rendering on CSS Shapes and Arrows in Firefox
I\’ve been using the border elements on divs to create useful shapes, like arrows, like on this page. Unfortunately, recently Firefox recently began having trouble rendering the diagonals — making them appear jagged, and just not very pleasing. To fix this, just add the following to the css: -moz-transform: scale(.9999);
Read More