So, one other thing I want to use this blog for is recording stuff that I forget all the time. I feel like it especially happens with SQL. Why? Not quite sure. I’m a big fan of ActiveRecord, so that gets me away from SQL, so that could be it.
Anyway, I want to record it here because I always forget it: how to INSERT from one table using a SELECT from another table.
INSERT INTO sometable (acolumn, anothercolumn)
SELECT someothercolumn, onemorecolumn
FROM adifferenttable
Real simple, but I always end up second-guessing myself (stupidly, I know). Anyway, there it is so I won’t forget it… Hopefully…
A lot of sites use the <code> tag to format pieces of code. However, what do you do if you want to do a code block, like:
body {
some css stuff
}
I personally use <pre><code>. This way, I can take some code and paste it in and it will look like my normal code.
One thing to make sure is that <pre><code> are just like that, on the same line as each other and on the same line of the first line of code text. Otherwise, you end up with an extra line you don’t want because of the <pre> element.
For an example, here’s the css I use for that code block:
pre code {
font-family:monospace;
margin:10px 25px;
padding:10px;
border:1px solid #aaa;
color:#336b45;
display:block;
font-size:1.1em;
}
Ta da!
So, notice that green hook on the left there? How much of it can you see? And what happens if you resize the window?
Now, if you’re a front-end guy, you know that a background image cannot extend outside of an element. But what if you want to position that background relative to the position of an element, but outside of that element? I had the same problem…
Now, I’m a huge fan of jQuery, so I decided to go that route. Here’s what I did:
$('body')
.css('background-position',
$('#container').offset().left - 320 + 'px ' +
$('#container').offset().top + 'px');
What does that do? jQuery finds the body element: $('body') and it sets the background position using .css('background-position', value). But, we need to get the position of my #container element, so we do that using $('#container').offset().left (with a 320px nudge) and $('#container').offset().top.
Put that in jQuery’s $(document).ready(function() and huzzah!
Well, what happens if you resize? Uh-oh, one more thing to do. I promise it won’t be hard though. Let’s just bring jQuery to the rescue again using $(window).bind('resize', function(). And, to keep up with DRY coding principles, we’ll pull it out into an alignBG() function, giving us:
function alignBG(){
$('body')
.css('background-position',
$('#container').offset().left - 320 + 'px ' +
$('#container').offset().top + 'px');
}
$(document).ready(function(){
alignBG();
$(window).bind('resize', function() {
alignBG();
});
}
And there you have it! That’s how you can position a background image based on a different element’s location in jQuery making sure that it’s in the right place on a resize.
