John Hirchak http://www.blog.johnnyjazz.com Online Portfolio and Resource Blog Thu, 12 Jan 2012 14:54:16 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 DarkLab Productions Redesign: http://www.blog.johnnyjazz.com/2012/01/darklab-productions-redesign/ http://www.blog.johnnyjazz.com/2012/01/darklab-productions-redesign/#comments Wed, 11 Jan 2012 21:37:17 +0000 John http://www.blog.johnnyjazz.com/?p=341
DarkLab Productions

I have redesigned my company website to look super minimalistic. Have a look at http://www.darklabproductions.com

]]> http://www.blog.johnnyjazz.com/2012/01/darklab-productions-redesign/feed/ 0 CSS: Embedding Fonts with @font-face http://www.blog.johnnyjazz.com/2012/01/css-embedding-fonts-with-font-face/ http://www.blog.johnnyjazz.com/2012/01/css-embedding-fonts-with-font-face/#comments Wed, 11 Jan 2012 16:37:23 +0000 John http://www.blog.johnnyjazz.com/?p=329 Here is fast and effective way of embedding fonts into your webpage without having to use graphical images.

First we must declare the font:

@font-face { font-family: amputa; src: url('amputa.ttf'); }
@font-face { font-family: amputa;
font-weight: bold; src: url('amputa.ttf'); }

Now we are able to call it using “font-family”

h1 { font-family: amputa, sans-serif; }

View Results

Download the font used in this example:
Amputa Bangiz Standard TTF

]]> http://www.blog.johnnyjazz.com/2012/01/css-embedding-fonts-with-font-face/feed/ 0 CSS: Centering a Div Vertically http://www.blog.johnnyjazz.com/2011/12/css-centering-a-div-vertically/ http://www.blog.johnnyjazz.com/2011/12/css-centering-a-div-vertically/#comments Tue, 13 Dec 2011 15:18:40 +0000 John http://www.blog.johnnyjazz.com/?p=317 In order to vertically center a block level element, we need to give it an absolute position. This will detach the element from its surroundings and will allow us to give it a specific position related to the browser window.

By offsetting the div by 50% from the top and left, we are positioning upper-left corner to the center of the page. The last step is to move the div to the left and top by using half of its dimensions in a negative margin.

For example, if the width of the element is 960px, then set the left margin to -480px. If the height of the element is 600px, then set the top margin to -300px.

HTML Structure

<div id="main">
  <div id="header"> Header </div>
  <div id="content"> content </div>
</div>

CSS

body {
	background: url("bg.gif");
	font-family: Arial, Verdana, sans-serif;
}
#main {
	width: 960px;
	height: 400px;
	background: #f1f1f1;
	text-align: left;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -480px;
}
#header {
	background: #000;
	padding: 10px;
	color: #fff;
}
#content {
	padding: 10px;
}

Click here for the final result

Related Article: CSS: Center a Div Using Absolute Positioning

]]> http://www.blog.johnnyjazz.com/2011/12/css-centering-a-div-vertically/feed/ 0 jQuery: Chaining Multiple Effects With a Fade In http://www.blog.johnnyjazz.com/2011/12/jquery-chaining-multiple-effects-with-a-fade-in/ http://www.blog.johnnyjazz.com/2011/12/jquery-chaining-multiple-effects-with-a-fade-in/#comments Wed, 07 Dec 2011 16:23:39 +0000 John http://www.blog.johnnyjazz.com/?p=280 Here is a simple jQuery tutorial that I think many beginners will find useful. I am going to fade in a box while it drops down. This effect seems very easy to do in flash, but to some, it can be a very difficult task to achieve in jQuery. I will also add a subtle bouncing effect just for fun.

Final Results

HTML Structure

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>John Hirchak - jQuery: Chaining Multiple Effects With a Fade In</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <style type="text/css">
            body {
                background: url("bg.gif");
                font-family: Arial, Verdana, sans-serif;
                margin-top: 0px;
            }
            #main {
                width: 960px;
                margin: auto;
                background: #f1f1f1;
                text-align: left;
            }
            #header{
                background: #000;
                height: 100px;
                padding: 10px;
                color: #fff;
                position: relative;
            }
            #content {
                padding: 10px;
                height: 500px;
            }
            #footer {
                background: #000;
                height: 40px;
                padding: 10px;
                color: #fff;
            }
            h1 {
                padding: 10px;
                border: 2px dashed #fff;
                background: #333;
                width: 300px;
                position: absolute;
            }
            p {
                width: 100px;
                height: 100px;
                background: red;
            }
            #title {
                top: -50px;
            }
        </style>
    </head>

    <body>

        <!-- Begin Wrapper -->
        <div id="main">

            <!-- Begin Header -->
            <div id="header">

                <h1 id="title">Header</h1>

            </div>
            <!-- End Header -->

            <!-- Begin Content -->
            <div id="content">

            </div>
            <!-- End Content -->

            <!-- Begin Footer -->
            <div id="footer">

                This is the Footer

            </div>

            <!-- End Footer -->

        </div>
        <!-- End Wrapper -->

    </body>
</html>

jquery Step 1

         <script type="text/javascript">
            $(document).ready(function () {
                $("#title").animate({top: "+=55", opacity:1},600);
            });
        </script>

Here we simply grab the #title, and bump it down 84px. The Opacity is already set to 100% and the length of this animation is 1200 milliseconds long.
View jQuery Step 1

jquery Step 2

        <script type="text/javascript">
            $(document).ready(function () {
                $("#title").animate({opacity:0},1200);
                $("#title").animate({top: "+=55", opacity:1},600);
            });
        </script>

We are now “chaining” animation effects together. This method of scripting is very linear, so jQuery will complete one line of the animation at a time. jQuery is fading in #title at 1200 milliseconds before it drops 55px. This is not the effect I was going for, but I am not too far off.
View jQuery Step 2

jQuery Step 3

        <script type="text/javascript">
            $(document).ready(function () {
                $("#title").animate({opacity:0},0);
                $("#title").animate({top: "+=55", opacity:1},600);
            });
        </script>

The trick is setting the length of line #1′s animation to 0. This will remove any animation effect for that line and reduce it to a single frame. Your animation will now begin with box that is totally transparent, and it will drop down 55px.
jQuery Step 3

jQuery Step 4

        <script type="text/javascript">
            $(document).ready(function () {
                $("#title").animate({opacity:0},0);
                $("#title").animate({top: "+=55", opacity:1},600);
                $("#title").animate({top: "-=5"},100);
                $("#title").animate({top: "+=5"},100);
                $("#title").animate({top: "-=3"},200);
            });
        </script>

This step is just to show off what you could do with chaining animations in jQuery.
Final Results

]]> http://www.blog.johnnyjazz.com/2011/12/jquery-chaining-multiple-effects-with-a-fade-in/feed/ 0 CSS: Make a Div Height 100% of the Screen http://www.blog.johnnyjazz.com/2011/12/css-make-a-div-height-100-of-the-screen/ http://www.blog.johnnyjazz.com/2011/12/css-make-a-div-height-100-of-the-screen/#comments Fri, 02 Dec 2011 18:36:19 +0000 John http://www.blog.johnnyjazz.com/?p=265 Many designers have come across this issue several times in their career. How do you make your div fill up the entire height of your browser window? The answer is very simple, but not so obvious.

HTML

<div id="main">
     <div class="content">
                A div thats height is %100 of the screen!
     </div>
</div>

CSS

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: url("bg.gif");
	font-family: Arial, Verdana, sans-serif;
}
#main {
	background: #f1f1f1;
	width: 960px;
	margin: auto;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 10px 0 10px;
	min-height: 100%;
}
.content {
	padding-top: 10px;
}

Click here for the result

]]> http://www.blog.johnnyjazz.com/2011/12/css-make-a-div-height-100-of-the-screen/feed/ 0 CSS: Center a Div Using Absolute Positioning http://www.blog.johnnyjazz.com/2011/11/css-center-a-div-using-absolute-positioning/ http://www.blog.johnnyjazz.com/2011/11/css-center-a-div-using-absolute-positioning/#comments Wed, 02 Nov 2011 15:11:16 +0000 John http://www.blog.johnnyjazz.com/?p=243 Aligning divs to the center of the page is relatively easy. It’s just a matter defining its width and setting the left and right margins to “auto”. Easy does it. But what happens when your div is using absolute positioning? It won’t matter if your left and right margins are set to “auto”. I have found a simple solution that works like a charm!

HTML structure:

<div id="main">
    <div id="header"> Header </div>
    <div id="content"> Body </div>
    <div id="footer"> Footer </div>
</div>

CSS: Positioning the “main” div:

#main {
    width: 960px;
    background: #f1f1f1;
    color: #000;
    text-align: left;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -480px;
}

The left position is set to 50% so that the div will begin at the center of the screen. The left margin value is -half of the size of the div we are centering. This pushes the div over to the left directly to the exact center of the page.

Click here for the final result

]]> http://www.blog.johnnyjazz.com/2011/11/css-center-a-div-using-absolute-positioning/feed/ 0 John-Hirchak.com Has Been Launched http://www.blog.johnnyjazz.com/2011/10/john-hirchak-com-has-been-launched/ http://www.blog.johnnyjazz.com/2011/10/john-hirchak-com-has-been-launched/#comments Sun, 09 Oct 2011 01:46:16 +0000 John http://www.blog.johnnyjazz.com/?p=229
John Hirchak - Online Portfolio and Resource Blog

My portfolio site has now been launched. Click Here

]]> http://www.blog.johnnyjazz.com/2011/10/john-hirchak-com-has-been-launched/feed/ 0 Photoshop: Creating Favicons Inside Photoshop http://www.blog.johnnyjazz.com/2011/10/photoshop-creating-favicons-inside-photoshop/ http://www.blog.johnnyjazz.com/2011/10/photoshop-creating-favicons-inside-photoshop/#comments Wed, 05 Oct 2011 18:04:34 +0000 John http://www.blog.johnnyjazz.com/?p=219 Photoshop - Create Favicon (.ico) Files

Photoshop - Create Favicon (.ico) Files

You can create favicons (.ico files) directly inside Photoshop by downloading the appropriate plugin at:
http://www.telegraphics.com.au/sw/product/ICOFormat#icoformat

]]> http://www.blog.johnnyjazz.com/2011/10/photoshop-creating-favicons-inside-photoshop/feed/ 0 Web Development: Creating 404 Error Pages http://www.blog.johnnyjazz.com/2011/09/404-error-pages/ http://www.blog.johnnyjazz.com/2011/09/404-error-pages/#comments Wed, 28 Sep 2011 17:59:00 +0000 John http://www.blog.johnnyjazz.com/?p=175 404 Error Tutorial

404 Error Tutorial

A 404 page is a necessity for any professional website. As files are updated and shuffled around, there is no guarantee that search engines will be up to date with your most latest changes. By creating a 404 page, you are keeping the user experience constant throughout the entire website, even if they happen to run across a file or page that is missing. 

Create HTML/CSS Template

Once you have built your entire website, copy one of your site’s pages and call it error.html. Inside this HTML document, change all of the asset’s (CSS,JS,images,etc) paths to be absolute. This will ensure that your assets will always load, no matter how deep into the directory structure the user goes.

<link rel="stylesheet" href="http://www.john-hirchak.com/css/reset.css" />
<a href="http://www.john-hirchak.com/index.php">Home</a>
<img src="http://www.john-hirchak.com/images/logo.png" alt="Logo" />
<script type="text/javascript" src="http://www.john-hirchak.com/js/jquery-1.4.3.min.js"></script>

Create the .htaccess File

To those who are unfamiliar with what an .htaccess is, review the following website: http://httpd.apache.org/docs/1.3/howto/htaccess.html

Create a text file called htaccess.txt and add the following lines:

ErrorDocument 404 /error.html

Options -Indexes

The first line creates a rule on your web server that routes the user to the error.html page if they have come across a missing page or file.

The second line is responsible for hiding the contents of a directory that does not contain an index or a default file. This prevents users from rummaging through your asset directories

Rename htaccess.txt to .htaccess

We initially created the htaccess file as a .txt, because our computers are able to view and edit these filetypes rather easily. As soon as we rename htaccess.txt to .htaccess, the file now becomes invisible depending on your system’s settings. It is best to wait until the file has been uploaded to the server before you rename it. This prevents you from having to hide/unhide hidden files constantly. Inside your FTP application, make sure you are able to view hidden files. In FileZilla click on “Server/Force showing hidden files“. Now upload the htaccess.txt file and rename it .htaccess.

404 Example:

]]> http://www.blog.johnnyjazz.com/2011/09/404-error-pages/feed/ 0 CSS: A Set of Margin and Padding Classes http://www.blog.johnnyjazz.com/2011/09/css-a-set-of-margin-and-padding-classes/ http://www.blog.johnnyjazz.com/2011/09/css-a-set-of-margin-and-padding-classes/#comments Fri, 23 Sep 2011 14:51:03 +0000 John http://www.blog.johnnyjazz.com/?p=149 HTML/CSS Tutorial and Resource

HTML/CSS Tutorial and Resource

I no longer add margins or padding to block level/inline elements. Instead, I use the following set of classes to space my content vertically. I think this goes perfect with the 960 grid that I am using. Feel free to add more.

.marginTop0 {
    margin-top: 0px;
}
.marginTop5 {
    margin-top: 5px;
}
.marginTop10 {
    margin-top: 10px;
}
.marginTop15 {
    margin-top: 15px;
}
.marginTop20 {
    margin-top: 20px;
}
.marginTop25 {
    margin-top: 25px;
}
.marginTop30 {
    margin-top: 30px;
}
.marginTop50 {
    margin-top: 50px;
}
.marginBottom0 {
    margin-bottom: 0px;
}
.marginBottom5 {
    margin-bottom: 5px;
}
.marginBottom10 {
    margin-bottom: 10px;
}
.marginBottom15 {
    margin-bottom: 15px;
}
.marginBottom20 {
    margin-bottom: 20px;
}
.marginBottom25 {
    margin-bottom: 25px;
}
.marginBottom30 {
    margin-bottom: 30px;
}
.marginBottom50 {
    margin-bottom: 50px;
}
.marginTop10_neg {
    margin-top: -10px;
}
.marginBottom10_neg {
    margin-bottom: -10px;
}
.paddingTop0 {
    padding-top: 0px;
}
.paddingTop10 {
    padding-top: 10px;
}
.paddingBottom0 {
    padding-bottom: 0px;
}
.paddingBottom10 {
    padding-bottom: 10px;
}

Minimized version

.marginTop0 { margin-top: 0px; }
.marginTop5 { margin-top: 5px; }
.marginTop10 { margin-top: 10px; }
.marginTop15 { margin-top: 15px; }
.marginTop20 { margin-top: 20px; }
.marginTop25 { margin-top: 25px; }
.marginTop30 { margin-top: 30px; }
.marginTop50 { margin-top: 50px; }
.marginBottom0 { margin-bottom: 0px; }
.marginBottom5 { margin-bottom: 5px; }
.marginBottom10 { margin-bottom: 10px; }
.marginBottom15 { margin-bottom: 15px; }
.marginBottom20 { margin-bottom: 20px; }
.marginBottom25 { margin-bottom: 25px; }
.marginBottom30 { margin-bottom: 30px; }
.marginBottom50 { margin-bottom: 50px; }
.marginTop10_neg { margin-top: -10px; }
.marginBottom10_neg { margin-bottom: -10px; }
.paddingTop0 { padding-top: 0px; }
.paddingTop10 { padding-top: 10px; }
.paddingBottom0 { padding-bottom: 0px; }
.paddingBottom10 { padding-bottom: 10px; }
]]> http://www.blog.johnnyjazz.com/2011/09/css-a-set-of-margin-and-padding-classes/feed/ 0