JasonCypret.com » javascript

jQuery MagicLine Navigation

Jason Cypret — Tue, 09 Feb 2010 15:47:03 +0000

Chris Coyer “da css man” wrote a great post over the moving line navigation. Hey guess what? I use something very simulator on my site except I opted for a static width of the highlight. Anyway it’s a pretty sweet and very easy to understand.
$(function(){ var $el, leftPos, newWidth, $mainNav = $("#example-one"), pageOffset = $mainNav.offset().left;


    // Fixing the offset if the window changes size

    $(window).resize(function() {

        pageOffset = $mainNav.offset().left;

    });
    $mainNav.append("
");

    var $magicLine = $("#magic-line");
    $magicLine

        .width($(".current_page_item").width())

        .css("left", $(".current_page_item a").offset().left - pageOffset)

        .data("origLeft", $magicLine.offset().left - pageOffset)

        .data("origWidth", $magicLine.width());

$("#example-one li").find("a").hover(function() { $el = $(this); leftPos = $el.offset().left - pageOffset; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); }); });

Check the demo out at CSSTricks

Geek Week – jQuery, PHP, WordPress, Design, CSS

Jason Cypret — Thu, 05 Feb 2009 18:44:26 +0000

Posted in Development Web Design

I’m coming off my long hiatus since, well Christmas. I’ve been crazy busy lately, but I have recently been able to catch my breath and check out some great tutorials, blogs, and design inspiration found all around the interwebs.

jQuery

I’ve got a lot of jQuery links for ya. I’ve been doing quite a bit of jQuery work lately.

CSS & XHTML

Here’s some fun and usefull CSS tuts, and tricks.

PHP

Roll your own MySQL and PHP powered CMS.

WordPress

More wordpress tidbits to improve yoru wordpress site.

Design

I’ve been doing a good amout of vector work lately. Check out these great tuts.

Misc

Since the economy is crap right now, unemployement is on the rise. Here’s a great list of jobs sites for web designers and developers.

Jobs for Designers and Developers

Geek Week – Web Design, CSS, jQuery, PHP

Jason Cypret — Tue, 04 Nov 2008 22:38:57 +0000

Posted in Web Design

I have been geekn’ out a lot lately reading some really great articles as well as learning some new techniques. There is a little bit of everything here and if you are a web developer it will come in handy. If you are not into jQuery skip this first section, as I have been really digging into what can be done in jQuery. If you like what you see check out my Delicious feed, as I am always running across great links.

jQuery & JavaScript

If you couldn’t tell, I love working with jQuery. Here is a brief list of some plug ins, some tutorials, and some techniques I found very interesting.

XHTML & CSS

CSS is still my first love, and I am always doing what I can to stay up on the latest trends and techniques. Check out these CSS tips and tuts below.

PHP

I started diving more into PHP due to the amount of websites I have deployed using WordPress. Since I typically use WordPress as a CMS, PHP is an integral part of making everything work. Check these out.

WordPress

I heart WordPress, and can’t wait till version 2.7 is released. Here are some great plug ins as well as some techniques to use when creating a WordPress theme for yourself and others.

Flash & Fireworks

Photoshop is a dominate force in design. I love it and use it for all my Photography work, but when it comes to web design, I find Fireworks to be better suited. Whenever I find a tutorial for Fireworks I always read it. Check out the firetut below, as well as some flash tuts I’ve check out lately.

Smashing Magazine’s Best of January 2008

Jason Cypret — Tue, 05 Feb 2008 22:03:04 +0000

Posted in Web Design

So I usually don’t post about other websites blog posts, but Smashing Magazine’s Best of January 2008 list is one to talk about. First off if you do not frequent Smashing Magazine, and you are a web designer, into CSS, photoshop, or just curious about the web, stop what your doing and go read the site. I usually end up bookmarking most of their posts as they are so informational and full of useful resources.

Now that I’ve given them a glorious praise. Let me break down the links that I felt were important to me and bookmarked. Trust me there is lots more on the full list, if you see one that is important to you that I didn’t include, comment and share it with everybody.

UI Patterns
UI Patterns is basically a library of commonly used UI solutions that most of us have run across. Personally this is great if you are adding a section to your site, and are wondering, “what should be the best way to present my information.”

WP Candy – WP Help Sheet
You know I love WordPress. I now have 4 sites running it. This is a WordPress help or cheat sheet. You can get WordPress information, as well as download working PHP files.

CSS Globe – CSS Text Gradients
I saw this done recently with a grunge effect, but this is the first time I’ve seen it with gradients. Same principle, but very nicely implemented.

Poolie Studios – Iconize Textlinks with CSS
Icons in web design are a great was to visually speak to your audience in a very quick and easy way. I would love to roll this out on my sites.

CSS Globe – SearchField
A very pretty search field. I will probably pick it apart and reassemble something more fitting to my sites. Still very nice.

James Whittaker – Em based layouts – Vertical rhythm calculator
If you have ever dealt with EM’s in CSS you know that they can be difficult to use. I find myself quickly switching back to pixels. However EM’s are very important for a flexible expandable CSS design. James made a EM calculator that helps you convert your PX to EM’s.

Wake Up Later – sIFR Tutorial
I never have personally used this method, but you never know when you may be faced with a project where it is absolutely necessary. Use your own fonts on a web page. I am also a big fan of not using images for text as much as possible. This solves that problem.

DeDestruct – Cross Browser Transparency with .PNG
As a designer I love begin able to use PNG images when possible. However all web developers know that PNG’s do not work correctly in all browsers. There are many methods for using PNG images, this is another one.

Button collection
I am always looking for inspiration. At my new job we use call to action buttons all the time. It is always good to see what other designers are doing.

Creative Logos
What more can I say. These are some really great looking logo designs.

25 Beautiful, Minimalistic Website Designs
Sometimes you can say more with less. These websites definitely achieve minimalism in a big way.

Logo Templater
Ever needed to through a logo on a comp on the fly. I have. This is a great site for free great looking logos.

Dry Icons – Free Icons
Same as the last one. a good resource to throwing icons on a site in a hurry.