andypatrickdesign

Get ready for take off with fixed position divs

2012-04-28T11:22:00.001-07:00

The fixed position div

The fixed position div (position:fixed) is a div that will stay in the same position in the browser window. If you are masochistic enough to support IE6 this is not supported, but it is by IE7 and up and by all the other browsers like Firefox, Opera and Safari. An example of the code would look like this:

CSS

#MrFixit{
position: fixed;
top: 200px;
left: 20px;
width: 100px;
height: 20px;
background-color: #FFF;
}

The Result

What would happen with the above code would be a white box 100x20px, which is positioned 200px from the top of the page and 20px from the left. This box will stay there as you scroll... as if by magic!

As with everything start with WHY?

So why would you want an element to be positioned in one place as the user scrolls? There's many common reasons that you'll notice on websites like a fixed navigation bar that follows the user down the page (something I'm considering as an update to my site) or a 'top' button for long pages. But then there's always the possibility of coming up with something different, if you look at my personal site (pictured below) you'll notice that I've utilized this with the 'Top' button that appears but if you look to the right of the page you'll notice that there is a little plane that "flies" from Scotland to Canada, pretty fun huh?

Now the thing that I've been asked about that seems to have people stumped is how I got the plane to "appear" and "disappear" over and under objects on the site. This is down to some smart positioning of absolute divs and the ever useful 'z-index' property! by positioning semi transparent images over it I got the effect of "clouds" and by using solid backgrounds the plane passes right under them.

The HTML and CSS

Here is the CSS I used for the plane:

#plane{
    position:fixed;
    top:-1870px;
    margin-left:808px;
    width:50px;
    height:2370px;
    z-index:100;
}

Now you'll notice that the z-index is set to 100. This means anything set with a higher z-index that is an "absolute" positioned div will sit on top of the plane. For example to get the plane to "take off" I had to position a div over it at the top of the page. Here is the CSS for the navigation:

#menu{
    width:872px;
    height:171px;
    position:absolute;
    z-index:200;
    background:url(../images/navBG.png) top left no-repeat;
    margin-left:113px;
    padding-top:105px;
}

Using this code you should be able to replicate what I've done in my site!

So what now?

Something that helps me enormously is a great tool called "firebug" you can get this in add-ons for firefox. This tool allows you to look into what other designers have done to get the effects! My buddy Arley wrote a great post about it here:

http://sixrevisions.com/tools/firebug-guide-web-designers/

So now the challenge for you is the reason to use this. There are plenty of reasons to have a fixed div for navigational purposes but with a bit of thought it could be something more than that! Like a flying superhero, a character running down a street seen from above or a mole burrowing into the ground. The possibilities are endless, have fun with it!

Feedburner

2012-02-11T21:32:00.000-08:00

A handy tool that I've come to love is google's feedburner. This wonderful freebie allows you to pull a feed from anything with an RSS feed. This includes anything from a blog, to your facebook page or twitter timeline. It's also incredibly easy to style. If you are reading this on my website you'll see that I've styled it very easily to fit with my site design. It's fairly simple, all you need to do is enter the address of the page you want to feed from, select your options to set it up and hey presto! You're good to go. To get the code you need to post this onto your site simply hit the "publicize" tab. This will give you an option to select "BuzzBoost" in here you'll find everything you need to personalize the feed and grab the code!

Check it out here http://feedburner.google.com

Smashing Mag wallpaper

2012-02-11T19:03:00.000-08:00

I've recently completed a little fun project to enter into Smashing mags monthly wallpapers. It's the time of year where things get a little flat, your resolutions are starting to fall by the way side (my not drinking one lasted 2 days) and generally you just need a little pick me up. What better way than a nice wallpaper to pick you up every day you look at your computer? If anyone's in a hurry and can't wait to see if it gets picked for smashing mag please contact me I'll send it over to you :)

Can the spam!

2011-09-13T11:07:00.000-07:00

It's about time it happened I've always said that personal email addresses shouldn't be open to people sending them whatever the hell they want. If you think about your own mail box and what you receive in it, how do you feel when you get a whole bunch of junk mail that you think "where the hell did that come from?"

So under the new spam laws the Canadian law levies a $200 fee per spam message sent, and the recipient doesn’t have to prove damages. “The scary part of it is it’s not true hard-core spammers that will be affected by this. It is going to be the big companies that didn’t really care about the law,” Charles Lupien, an attorney with Montreal-based Fasken Martineau DuMoulin who focuses on intellectual property and e-commerce says. “They may send messages that are legitimate under CAN-SPAM but that don’t follow Canada’s law and open the door to big class action suits.”

But to me the biggest offenders actually ARE the big companies. If you really want to block your typical "grow your member' emails or 'get 10 tons of viagra for 10 bucks' you can just up your spam filter. But the problem comes when to use a website you have to provide your email address to have access, you then receive a confirmation email from this company (which goes to your spam folder) you mark it as safe and then that's the door open for the spam from that company to flow!

I'm all for it that these companies maybe will now think twice about sending crappy emails to people's PRIVATE email accounts and clogging up our inboxes with "GREAT NEW PRODUCTS" or "GREAT NEW PROMOTIONS"