Jared Heinrichs

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

Apr 19, 2011 By Jared Heinrichs 1 Comment

Clicking on hyperlink causes page to jump to the top

I found a fix to an issue that was driving me nuts. If I told a jquery do run an animation when I clicked on a hyper-link the page would “magically jump” to the top of the screen. When the page was “jumping” to the top of the screen the jquery animation was actually happening. By the time you scrolled down back to down the page you would only see that the object had moved.

Up until now I would just write something like:

  • <a href=”#”>Click me</a>

While doing this isn’t an issue if the jquery animation happens at the top of the page, if you want to run an animation somewhere down the page the jumping result is really unwanted.

Thanks to http://corpocrat.com/2009/07/12/fix-jquery-onclick-browser-jumps-to-top-of-page/ I realized I need to change the code so that it looks like this:

  • <a href=”javascript:void(0);” onclick=”dofunc()”>Click me</a>

Hope this helps you if you are experiencing the issue where clicking on a hyperlink causes the page to jump to the top of the screen.

Filed Under: jQuery

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 16, 2010 By Jared Heinrichs 1 Comment

My recommend programing workflow when programing jQuery’s animate function

I didn’t realize just how powerful jQuery’s animate function is. In fact I can almost bet that functions like "slideDown()” actually use it in the background. The one things about animate is that when you start using it the code can become much more complex then one would like. Personally I recommend using Netbeans IDE as I find it to be the best editor for most web programming. (PS – It’s FREE!!!!)

One thing I have found that helps me is I build out the shell of what I want to do and then fill in the details later. While this might seem like a waste of time or slower I find with the auto complete in Netbeans that I spend much less time later troubleshooting things when I make a mistake typing.

The first thing I do with animate is start with the basic by programming out the shell of the code.

First hit “$” and then “(“. Netbeans will automatically fill in the “)”. Great!. Now hit ‘ and a second ‘ will be entered automatically for you in Netbeans. Keep typing. Enter your jQuery Selector which is normally the DOM element that you want to select. Hit the “right arrow twice and hit the “.” key. Great you are on your way.

You should have something that looks like this:

image

You really want to see this drop down box as it will save you a lot of time. You can either manually go through it or keep typing to narrow your results. In our case we are wanting to use animate. Let’s type animate and see what happens.

image

As you can see I’ve only typed “ani” and Netbeans is smart enough to grab the functions from the jQuery file. Just hit enter and Netbeans will start to build out the template for you. You will see something like this:

Netbeans is smart enough to tell you were the parameters go and where the option go. At this time I recommend just typing “{“ in both the params section as well as the options section. When you hit “{“ the right “}” will automatically be entered. After entering the “{“ just hit enter to move on to the “options section”. Hit “{“ and again the second “}” will auto complete. Hit Enter and the cursor will automatically move to the end of the line. Hit “;” and you are now done making the shell of the animate function. It should look like this:

image

Now some people might not agree with this next step. WHEN programing I like making my code easy to read even if it means that the file that the code is in is larger! When I am done everything I normally run a minifier on all my code that goes up to the server.

Let’s make the code more readable. Doesn’t this look more like something you see in other languages?

image

Let’s go and enter the code that will actually do something.

image

In the above code example notice how I entered what I want the animate to do. jQuery is VERY tied to CSS. If you don’t know CSS then you should really become a CSS Ninja before heading in jQuery. One thing to note on line 3. If the CSS element has “-“ in it you should use camelCase. If you aren’t sure what that is search my site for “camelCase”. Notice on line 3 that there is NO trailing “;”. With so much of jQuery requiring a trailing “;” I like to point that out since I find I get in such a habit of close everything off. If we needed to do a second animation we would hover end the line with a “’,”. You will see in the next section called “options”.

image

In the above code example I have added two options to the command. I have put them on separate lines for easy reading and put a “,” at the end of the duration. This code is now very easy to read, the chances for error has gone down dramatically which means you have more time to code.

I mentioned about minifying the code so once that is done it might look more like this:

image

Filed Under: jQuery Tagged With: How To

  • 1
  • 2
  • 3
  • …
  • 5
  • 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