Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Archives for 2010

Archives for 2010

Dec 27, 2010 By Jared Heinrichs Leave a Comment

FREE Photoshop 3D Training guide for your iPad

I was reading some forums on 3D training in Adobe Photoshop. I stumbled on a real gem! A woman who works for Adobe released a FREE eGuide on Photoshop 3D training! If you are reading this blog entry on your iPad all you have to do is click this link:

Download FREE Photoshop 3D Training Guide

And Tell your iPad to download and install the app. It’s an app but they could have really made it an ePub book. The detail is great and if you are wanting to learn more how to work with 3D in Photoshop I highly recommend this iPad resource.

The app is around 94MB I believe.

Filed Under: Adobe Photoshop

Dec 22, 2010 By Jared Heinrichs 2 Comments

Use jQuery to create a floating navigation based on scrolling

I didn’t know what else to call this post other than “Use jQuery to create a floating navigation based on scrolling”! If this doesn’t make sense let me describe want we will be creating. Hopefully after that things will become clearer.

Have you ever seen a site where when you scroll an object on the page just seems to magically follow you? Most of the time this sort of thing is done with Ads so the ad is in your face. How do these guys do that?

Use jQuery to create a floating navigation based on scrolling 01

We will be looking at this but instead of using ads we are going to have our navigation area so that it’s always visible. As an extra bonus we’ll make our animated when it moves and we’ll make sure that it’s animation is as smooth as glass.

Before getting into thing you will need to know about the scroll function in jquery. Basically when ever you scroll and event will be made letting the script know that you’ve scrolled. While this is good when we scroll we’ll probably set off 100 or so scrolls in a very short span. Because of the amount of events created it can slow things down and make things choppy because it has to redraw after each event.

So how do we first of all code this and secondly how do we prevent the choppiness? I thought you’d never ask! Let’s look at the code:

HTML

Use jQuery to create a floating navigation based on scrolling 02

CSS

Use jQuery to create a floating navigation based on scrolling 03

jQuery

Use jQuery to create a floating navigation based on scrolling 04

Ok the HTML should be really self explanatory. I will go over the CSS and jQuery.

CSS

Because I want to use positioning I give #navigation an absolute position of top – right on the page( Naigation will have a 5px padding). I also want it to hover over anything else (if the page is made smaller) so I gave it the highest z-index on the page. All links will be aligned to the right and I applied a background color to match the example above.

jQuery

First off I make sure that the page is ready. Next I want to grab jQuery’s “Window” element. I tell jQuery that when ever the Window scrolls to send an event. Now that we know that the scroll even happens we should do some magic on #navigation

Let’s select #navigation. Stop any animation that might be going on with it. Then let’s animate it. You might be asking why I ran stop. As you are scrolling you might send 20-40 events in a second to the browser. This means that jQuery has to do a ton of math. This will make things look jerky. To avoid this I just say… Stop let the browser do what it wants when the person stops start the animation.

If you’ve read some of my previous jQuery tutorials you might remember going over how animate works. The first section basically says: Assign the element top (This refers to the CSS position element “Top”) a value of what ever the documents Top position is.

The second part basically tell the animation how long to animate things for and what animation you want to use.

Try it out! It’s amazing how smooth jQuery can actually run when the code is clean!

Filed Under: jQuery

Dec 21, 2010 By Jared Heinrichs Leave a Comment

How to make a funky animated menu with jQuery

Well Christmas for 2010 is coming fast and I thought I’d give you an early gift. In this post I will go over how to create a funky animated menu using jQuery. This menu will be a hover drop down menu. When you hover over the button a secret picture will be displayed. To give a better visual indication of being hovered over the text will change color. When the menu drops it will do a slight bounce and slide up smoothly.

Here’s what the menu will look like:

image

I first show you the code and go over the most essential parts that you might get tripped up over.

HTML

image

CSS

image

jQuery

image

HTML

The HTML should be pretty simple to read. I use classes to assign the hidden images. We’ll see more about this in the CSS section. Please note I did load jQuery UI to get the bounce effect.

CSS

this info

  • #container is the main box in which every other item will live or be positioned to.
  • #navigation will be positioned in the top right corner. It will be slightly raised about the #container
  • #navigation li – We will float the list items so we can get a horizontal menu. List style is removed. I gave it a height to help older browsers.
  • #navigation li a – We center the text and make it a block level element so that we can give it a width,height and padding.
  • #navigation li a:hover – We said that we wanted the font to turn red when we hover over the buttons.
  • .jared  etc – These classes get applied to the the li elements. This allows us to have specific icons on each menu item

jQuery

I first selected the anchor tags and said when ever they are hovered do two things. One when you are hovered. One when the mouse is taken off the button. In each section we are going to apply an animation. The first animation will drop the button and bounce when it reaches the end. The second section will slide the button back up to it’s original position. The sliding effect is done using padding. I found this to work better than using height. Also for some strange reason if you use the bounce on the slide up, jQuery would throw an error in IE making it absolutely useless.

If you use this example in your code please post an example we can see how you modified things!

Filed Under: jQuery

Dec 20, 2010 By Jared Heinrichs Leave a Comment

jQuery – How to run multiple animations at once

If you have started using jQuery you might ask the question “how to do I run multiple animations at once in jQuery?”. Well it’s much easier than you might think! jQuery is set to automatically run multiple actions at one time. I’m going to give you a code example to show you how you would do this. Here is the code broken up into sections:

HTML

image

Basically I have created 3 sections in the HTML.  Using CSS I will turn them into boxes and give them some annoying colors.

CSS

image

I wanted to do some cool things with jQuery. Box 3 will be partially hidden from view when it bounces. This happens because the CSS property overflow is set to “hidden” in Box2.

jQuery

image

At first when you look at this, you might think that jQuery is going to animate box1. STOP. Animate box2. STOP. Then animate box3 and then STOP. If you did think that you aren’t alone. I thought the same thing. I thought that the “$” had magical powers that only ran the jQuery that it contained. If you type this code out you will see that all the boxes run at the same time. Because I used the same duration on each line all animations would start and end at the same time. If I mixed up the times then we can have then end at different times. If you did change the duration the start time would continue to be synced!

I really hope you try this code out. I thought the animation while being simple is very smooth and kind of fun!

Filed Under: jQuery

Dec 20, 2010 By Jared Heinrichs Leave a Comment

Application Hosting Company Review

I recently heard of a great company in the states that is in the online support, consulting and hosted application game. The company is called Spirinet. I haven’t used their services personally but if you do a search of them, all the reviews seem to pretty positive.

Spirinet’s main area of expertise is:

  • Application Hosting
  • IT Support
  • IT Services

The area that I have heard some really good things about is their application hosting. Imagine getting rid of your server room, hardware issues, and expensive support contracts! Their application hosting allows you to run your application in the cloud.

One of the things that Spirinet has is 24/365 service. They have english speaking support staff. This to me is a huge selling point. So many companies sell offshore support. This adds support to call times because you can’t understand what the technician is saying!

Spirinet has all the security you would expect to see from an online application provider. This is not a mom and pop shop where you aren’t sure where you data is going to reside.

Accessing your applications is very simple:

  1. Simply login to the customized portal website.
  2. Click on the application. If you checkout their website they show that you can run Word, Excel, Oulook, and Quickbooks in cloud. These are just a small example of the applications that you can have them host for you.
  3. Work!

How simple is that?

Please keep in mind that you do need an internet connection to do this since it is an online service.

I would suggest going to their home page using the link above and see for yourself all the services that Spirinet can provide for you!

Filed Under: Review

  • 1
  • 2
  • 3
  • …
  • 57
  • Next Page »

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design