One great way to use fancyBox is to open Google Maps over your webpage. If you need to have a map but don’t have enough room on the page to embed the map you can integrate fancyBox with Google Maps and open the enlarged map when you click on a link. Checkout the demo and download. Since this latest release of fancyBox is responsive the frame around the map resizes based on the size of the browser window!

Note: The new version of fancyBox has different licensing, be sure to visit the website for full details to make sure you are using it correctly, and for all the customization details.

http://fancyapps.com/fancybox/

Old FancyBox video / browser large.

Old FancyBox video / browser small (and cutoff).

New FancyBox video / browser large.

New FancyBox video / browser small (and auto resized!).

Note: The new version of fancyBox has different licensing, be sure to visit the website for full details to make sure you are using it correctly, and for all the customization details.

http://fancyapps.com/fancybox/

Webpages that don’t fit vertically in the browser window have a vertical scroll bar, pages that do fit in the browser window don’t have this scroll bar. All is great until you click from a short page to a tall page and the content ‘jumps’, in order to make room for the scroll bar. If you’re a developer you’re used to this and probably don’t even notice it. I’ve had multiple clients ask me why the page jumps and have had to explain the reasoning, just to hear “oooh that’s weeeird, isn’t it???”. No, I just explained it. Anyway, to avoid this conversation, add the following CSS to your style sheet. This code forces the vertical scroll bar, and voila, no more page jumps or calls from the client.

html { overflow-y: scroll }

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}

Here’s another method some people use which you can try.

sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}

Times New Roman-based stack

Modern Georgia-based serif stack

Traditional Garamond-based serif stack

Helvetica/Arial-based sans serif stack

Verdana-based sans serif stack

Trebuchet-based sans serif stack

Impact-based sans serif stack

Monospace stack

/****************
 * From the article "8 Definitive Web Font Stacks"
 * by Michael Tuck
 * http://www.sitepoint.com/article/eight-definitive-font-stacks
 * Copyright SitePoint 2008
 */

/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;

/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;

/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;

/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

View Demo

Copy and paste the following code into the head of your HTML file. Then add a table with multiple rows and you should see your table have different colors in every other row, just like the demo.

The code below is doing 3 things. First it is calling jQuery to be attached to the file. Second, we are assigning a background-color to the CSS class “odd”. The last step is using jQuery to automatically add the class “odd” to every other row. Pretty simple trick that works across browsers.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style type="text/css">
<!--
.odd {background: #caf2fe;}
-->
</style>

<script type="text/javascript">
 $(document).ready(function(){
 $("tr:odd").addClass("odd");
 });
</script>

Sure you can add a CSS class to every other row manually, but what happens if you need to re-arrange or delete some rows? Having to go back and manually make sure every other row has a class so the zebra striping is on every other row is no longer a suitable solution. Luckily with the power of CSS3 this is no longer necessary. Check out the demo, and then grab the CSS code for your project.

View Demo

All you need to do to add a background color to every other row in your table is add the following to your CSS file. This won’t work in Internet Explorer (big surprise), so if you really need to support every browser including IE, then check out how to use jQuery to apply zebra striping to a table.

tbody tr:nth-child(odd) {
   background-color:#a9cdeb
}

Example.
I was working on a site the other day and noticed that every single paragraph in the main content area of every page of the site had a class of “first-paragraph” on it. So I looked in the external sheet and saw that this was simply to remove the top margin on the first paragraph on every page. Ok, so that method worked..great. Except that manually adding a class to every paragraph tag is such a waste of time. Check out the demo where I show an example of targeting the first paragraph in a content area without adding any classes or IDs paragraph tag in the XHTML. Then keep reading to see how to properly code the example above.

View Demo

Here is the code to put in your external CSS sheet to select the first paragraph in a section (in this example a div called “content”). In this example I remove the top margin. If the coder in my example above had done this he wouldn’t have need to add any class to the paragraph tags in the XHTML. Don’t ya just love CSS?

The good thing is you don’t see that many of them any more. That’s because browsers recognize that they suck and are most likely spam or ads and so they block the popups. The old way of creating a popup was to force open a new browser window over the current browser window. So this is what browsers block. But what if you actually have a need to use a popup window for something useful and not spammy? This happened to me the other day. A client wanted a popup window on their homepage to wish everyone a Merry Christmas.

Knowing I couldn’t use the old popup method, I went searching. I knew it’d be easy enough to use CSS to put a floating div over the content of the site, which creates a popup effect. The problem was how do you close the popup once it’s open? Javascript would be needed for this. Check out the demo I setup which shows how the CSS popup can be set to open on pageload or by clicking on a link; and then how Javascript allows you to have a “close” button that shuts or hides the popup. Then continue reading for the code and downloadable files.

If you check out the source code of the html file, you’ll see the following in the body. The “blanket” is the effect of putting the transparent black background behind the popup, which helps separate it from the rest of the content on the page. The “popUpDiv” is where you put the content of your popup.

<div id="blanket" style="display:none"></div>
<div id="popUpDiv" style="display:none">

<a href="#" onclick="popup('popUpDiv')" >Click to Close CSS Pop Up</a>
</div>
<a href="#" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a>

If you want the popup to load on page load, put the following in your body tag.

<body   onload="popup('popUpDiv')">

Here is the CSS used to style the blanket effect and the popup div. You’ll see I turned the blanket effect off for Internet Explorer, since it doesn’t appear to support “opacity” (big surprise).

#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}

#popUpDiv {
position:absolute;
background:url(pop-back.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}

There is a Javacript file linked to the html file to make some of the magic happen. I’m going to make the demo files available so you can play with it and make your own. Enjoy!

The popup automatically centers itself in the screen. To adjust this for your popup, open the javascript file. You’ll see numbers for the height and width: window_width=window_width/2-200;//200 is half popup’s width

Change “200″ so it’s half the width of yours; do the same for the line that declares the height.

Credits:
Script Source

Check out the demos to see how by changing a couple of CSS rules you can create a completely different looking form to match your website. Then continue reading to see how the CSS code works for this. When viewing the demo forms, try typing in the fields to see how the background color of the fields can be changed, as can the color of the text in the field. Also, try to roll your mouse over the buttons to see how they can have rollover effects put on them.

View Demo 1

View Demo 2

View Demo 3

Form 1

input, textarea {
background-color:#eee;
border:1px solid #d8f000;
padding:3px;
width:195px;
color:#036;
font-weight:bold}

input {
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

.submit {
width:100px;
background-color:#d8f000;
border:1px solid #fff;
cursor:pointer;
*border:1px;
font-weight:bold;
-webkit-border-radius:10px;
-moz-border-radius:10px;
color:#036;
font-weight:bold
}

.submit:hover {background-color:#ffc;}

You’ll see in the above form how I used Border-Radius on the buttons and the inputs. This gives a nice effect, but doesn’t break the design if the user of the website is on a non-compliant browser. You’ll see when I styled the buttons I made a class called “submit“. So in the XHTML code, both the Submit button and the Reset button have the class “submit”. You can see how rollovers can be made for the buttons. I also set the cursor type to “Pointer” for the buttons, since for some reason it’s the arrow cursor by default.

Form 2

input, textarea {
background-color:#fff;
border:1px dotted #999;
width:200px;
padding:2px;
font-weight:bold
}

input:focus, textarea:focus {background:#eee}

.submit {
width:100px;
background-color:#263895;
color:#fff;
border:1px solid #999;
cursor:pointer;
*border:1px;
font-weight:bold;
padding:2px
}

.submit:hover {background-color:#4054bd;}

With this form I wanted to show how you don’t need to use crazy loud colors to style a form to look better. The style is pretty plain on this form, but the dotted borders give the inputs a touch of character. You can also see the use of “:focus” on the inputs and textarea. What this does is change the background color of the input when your cursor is inside of it. This helps your users keep track of where they are on the form.

Form 3

input, textarea {
background:url(back.jpg) repeat-x #93e1ff;
border:1px solid #848383;
width:191px; padding:5px;
color:#006;
font-weight:bold;
-webkit-border-radius:5px;
-moz-border-radius:5px
}

input:focus, textarea:focus {background:url(backRoll.jpg) repeat-x #86cee9;}

.submit {
width:100px;
background-color:#93e1ff;
border:1px solid #848383;
cursor:pointer;
*border:1px;
color:#006;
font-weight:bold;
-webkit-border-radius:5px;
-moz-border-radius:5px
}

.submit:hover {background:url(backRoll.jpg) repeat-x #86cee9;
color:#006; font-weight:bold}

With this final form you can see how background images can be used inside the inputs and buttons. I made a slightly darker version of the background image for the “:focus” state.

With these basic CSS techniques, you can see how simple it is to make a contact form much more visually appealing and match the rest of your website.