Server Goon » Technology

CSS Genius at work.

server.goon — Wed, 24 Nov 2010 15:34:54 +0000

And no, it’s not me. Someone sent me a link to Matthew James Taylor’s “Equal Height Columns with Cross Browser CSS” post. It’s a really smooth way to get equal height columns with different backgrounds working smoothly.

Since reading this first post, I’ve spent several hours reading through what he has on his site; some if it’s quite ingenious and I must say I’m quite jealous that I haven’t come up with some of the ideas myself. And the best part of it all, it’s all there for download and use… not that an intelligent person could scrape the CSS and HTML to replicate what he’s doing anyhow, but it’s nice to know he’s willing to share. So I encourage to go off and learn, be inspired. I know I’m inspired and looking at doing a redesign based off of what I’ve read so far. My hat’s off to you Matthew James Taylor.

Ah, the power of JavaScript

server.goon — Tue, 26 Oct 2010 20:55:25 +0000

I was asked about creating a javascript that would place an image on a page based on the day of the week. Easy enough right? Well, it took some tinkering, but here it is (http://www.servergoon.com/samples/dow/). For this demonstration I created eight images, each with the number 0 – 7. However, since the javascript Date Object returns 0 – 6, you will never see the 7.

The code for this is relatively simple, as you can see if you look at the source for this file. In the head I’ve preloaded the image, which, from what I can tell is necessary. Second I’ve got all of the files I want and named them the same, with the exception of the digit indicating the Day of the Week. Hence the DOW (stands for Day Of Week) for the name followed by a digit followed by .jpg. This is so I don’t have to write out 8 (or 31 if you were ambitious enough to do this for each Day Of the Month) individual lines (actually it would be more like 16 lines). It also makes the code to replace the image much easier and shorter to write as well.

The JavaScript in the head of the document looks like:

The code for the image is below, notice the ID tag, this is VERY important. Notice that there is no source file, so no image is loaded by default

And finally, the code to replace the images in the HTML code.

One more thing to note is that the JavaScript that changes the image needs to come AFTER the image in HTML code. If not, it doesn’t know about the image and can’t replace it. The other option would be to put the code in the head of the HTML file and trigger it with a function call.

I hope you found this useful, I know I can think of uses for this. As always your mileage may vary.

Rollover dynamic text with CSS

server.goon — Fri, 10 Sep 2010 20:34:13 +0000

Ok, technically it’s not dynamic because you have to enter the text in the html so it’s not “created on the fly”. This is still a cool feature if you wanted a list of terms and have the definition pop up on the page as the visitor rolls over the definition. And the best part of this it’s pure CSS, no javascript. Once again, this is dynamic so it scales to the size of the page and it has been tested and works on IE, Chrome, Safari, and Firefox on a Win7 box. Your mileage may vary.

Without further ado, here’s the HTML and CSS as well as a link to a working example.

The HTML:





Rollover sample







 item1  this is the text associated with item1
 item2  this is the text associated with item2
 item3  this is the text associated with item3
 item4  this is the text associated with item4

And the CSS:

@charset "utf-8";
/* CSS Document */
div.containter {
 position:relative;
 width:50%;
 overflow:hidden;
}

/*this is just to mark out where the rollover text will show up*/
div.textbox{
 background-color:#0f0;
 width:50%;
 position:absolute;
 right:0px;
 top: 0px;
 padding-bottom: 999em;
 margin-bottom: -999em;
 border-left: solid 1px #000;
}

li:hover div {
 display:block !important;
 position: absolute;
 left:50%;
 top: 0px;
}

Pure CSS two column page

server.goon — Wed, 08 Sep 2010 19:33:45 +0000

I’ve been working on a web page that I want a left hand menu column on with the content being on the right. Pretty easy right? Well, yeah, unless you want a background color in the left hand column and you want it to extend all the way down to the footer, especially if the right hand column is longer than the left. Well I did some web searching and what I came up with was the suggestion of putting an image as a background to create a virtual image… which is great if you want a fixed width column. So after doing some looking I found a way to do it with CSS. Now I by no means claim to be the originator, but I didn’t find this solution by searching google.

The results of the code below can be seen here (http://www.servergoon.com/samples/2column.html) , and yes, I purposefully used Red Green and Blue just so the concept would stand out a bit more. The CSS attached to the html page is minimal to achieve what I wanted, please feel free to take it and use it as you may. I’ve tested this on Chrome, Safari, Opera, Firefox and IE on a Win7 machine. As always, your mileage may vary.

The code for the web page is :

Untitled Document
style.css" rel="stylesheet" type="text/css" />

header

item1
item2
item3

Est purus in enim amet. In placerat integer in, platea porttitor, pulvinar elit aliquam nunc est, dapibus a aliquam odio amet. Elementum, urna magna sit? Placerat, sociis tristique ac hac! Pid aliquam aenean ac augue? In turpis aliquet amet, nunc massa etiam sit pid dapibus, lundium lectus augue. Sed a arcu et? Enim tortor sagittis? Augue? Sit scelerisque, duis eu, facilisis phasellus nisi elit porttitor, nascetur duis et augue purus tincidunt etiam. Dictumst sit in pulvinar phasellus, turpis, montes est, a ultrices nec tortor, rhoncus quis magnis? Nunc enim ut turpis pulvinar, duis dis non, elementum, augue dictumst in magna dis odio non et enim? Etiam! In purus parturient ridiculus. Nisi integer? Dis pulvinar proin turpis sed a a urna.

Porttitor dapibus purus? Aenean etiam? Turpis urna porta hac? Nunc amet, scelerisque? Vel in, ac? Habitasse pulvinar, natoque diam, ultricies nec scelerisque aliquam, pulvinar turpis, non! Tincidunt. Platea elit, mauris ac porta adipiscing! Nisi dignissim, proin auctor risus nec dapibus porttitor velit cras! Ridiculus? Odio integer lorem diam porttitor odio platea et tortor elementum! A, aliquam cras tincidunt in? Tincidunt duis, ut dapibus lectus et scelerisque, parturient urna, a massa ac, nunc cras turpis, aliquam, mus porttitor? Magna parturient phasellus in ac, est natoque tortor non. Adipiscing! Turpis ultricies, placerat turpis cum turpis adipiscing turpis. Elit turpis in integer? Pulvinar, est, odio aliquam tincidunt! Adipiscing dignissim, dignissim? Magnis auctor, a porta, lorem in mattis! Scelerisque phasellus rhoncus! Lundium tempor.

footer

The css for the page is :

@charset "utf-8";
/* CSS Document */

.header {
	background-color:#00F;
	width:100%;
}
.content {
	width:100%;
	background-color:#FFF;
	clear:both;
	overflow:hidden;
}

.contentLeft{
	width:25%;
	margin-bottom:-999px;
	padding-bottom:999px;
	border-right:solid #000 1px;
	float:left;
	background-color:#0F0;

}
.contentRight{
	width:74%;
	float:right;
}
.footer{
	background-color:#F00;
	width:100%;
}

I hope you find this useful. It seem the key is the margin-bottom and padding-bottom in conjunction with the overflow:hidden of the containing folder.

–Server Goon

Press 1 for 1337, press 2 for English

server.goon — Mon, 03 May 2010 19:08:56 +0000

Kids these days. Spelling doesn’t matter, as long as the other person gets what you’re talking about. If you don’t believe me, just ask my 17 year old son, he’ll tell you all about it.

Admittedly, I don’t think kids should be graded harshly for grammatical or spelling errors on math papers, computer program comments (I actually had a teacher that took off points for not having complete sentences in the comments for a program), physics, art, etc. Now all bets are off when it comes to English class, because that’s what it is all about.

However, if you publish a game, write a paper about your physics experiments or create anything that is made for general population I would suggest making sure your grammar is correct in the final product. Trust me, it’s tough for me and I’m just waiting for someone to point out a mistake on this post.

Prime examples of when it is important to use correct grammar:

When you are trying to make a point or trying to sound intelligent. See
http://www.facebook.com/group.php?gid=274685879861 http://www.facebook.com/group.php?gid=260098416437
and the list goes on I’m sure. In fact I had great fun pointing that error out to my son when he joined the group “Parents call it talking back, we call it telling them there wrong”.
When you are trying to sell something. This is what originally prompted this post and I want to make it clear I have *nothing* against these guys or their site (notice I used the correct version there). I was reading about Blue Collar Bobbers when I ran across this quote. “and ride into the sunset with there comrades”. Now for some reason, this just glares at me. Maybe it because I’ve struggled with it myself so I’m hypersensitive to the use of “there, they’re and their”. Does that mean I won’t buy from them? No, but it does give a certain impression of the type of people running the store. I’m also going to make the assumption that, based off of the design, they didn’t do the work themselves. Chances are someone just wasn’t fully awake and didn’t catch the typo, let’s hope so because I’d hate to be paying someone for a finished product that wasn’t correct.

So, having said all that, I would suggest a remedial course. If you don’t want to do that, how about spending a little time to get it straight in your head in whatever manner works best for you. There’s even web sites out there to help. I googled “there their they’re” and the top hit was a wikihow page, how convenient!

Up next is a rant about “you’re, your and yore”… no, not really, but I’m sure there are plenty of examples of that as well.

–servergoon