Animate to a specific div using jquery

I am really impressed about sites tha have a fixed menu and when user clicks on it, whole page animates to a specific div.

Have a look at this wonderful site, to see what I mean (click onto the image)

Really impressive, ha! Are you still here? Well for those you came back to learn this technique, it's time to realize how simple it is.

We just use jquery's animate method, and all magic happens to the site. Really cool! But to be more specific, you can read the following function:

Let me just explain it a little bit.

This function takes the id of the targeting div as parameter  (we will explain how we call it later).

First of all we define the animation speed and the easing type. So, you have to dowload Jquey Easing Plugin first.

After defining the variables, we just check if it's a webkit browser (Google Chrome), because webkit browsers do not support animate-html.

We then call the animate method (be careful!! before calling animate(), we call stop() ), and that's all.


The HTML
Just put an anchor tag on your page and on click, call the Animate2id('#news') function, which animates to a div with id=news.

Jquery split & join example

Here I will show you how you can use jquery in order to wrap every 2nd word of a paragraph in a span.

So, if you have for example the following paragraph into your html:


and your stylesheet is:


by putting this:




your final result will be:

This is a test paragraph.

First you use split method, to split your sentence into single words. Then you store into a variable called numWords the size of the array. In a for loop, you check if your number is even and if that's the case, you wrap the specific element in a span. After this iteration, you use join, in order to show whole sentence.

Jquery fadeToggle

In this example, I will show you how we can use jquery fadeToggle function to achieve the behaviour described below!

What we have here, is some menu blocks, which show a lager block with more details, when we click on them. You can see a demo here. Only first block works, as it is under construction.



                         Before we click the first menu block

                           After we click the first menu block


Html markup

As you can see below, we have a div with class "box", and inside this div we have 2 main elements:

1. an anchor tag, with a background-image as you can see in the css style later
2. div with class "box_details" , which has an absolute position.

Css styles

Below you can see the css styles for our example. Just to say, that box_details has an absolute position. (accordingly, div with id "box1", has relative position) and display:none, which will change to block, when div with class box is clicked.



Javascript

Finally, we use javascript and fadeToggle function. I think it's pretty easy and self-explanatory. Wheneverer we click the box div, we find next box_details div, and make it fade in. When we click on the appeared div, it fades out. This is achieved with the use of fadeToggle.

Browser detection using Jquery

The $.browser property provides information about the web browser that is accessing the page, as reported by the browser itself. It contains flags for each of the four most prevalent browser classes (Internet Explorer, Mozilla, Webkit, and Opera) as well as version information. (http://api.jquery.com/jQuery.browser/).

Available flags are:

• webkit (as of jQuery 1.4)
• safari (deprecated)
• opera
• msie
• mozilla

Well, in my case, when I tested my code to all browsers, there was no problem, except from Internet Explorer:-(

I had a div (class=box_details) with height 306px, which should be higher in IE. So, I wrote the following code and the problem was solved:-)

Click & Hover Effect with Jquery

Suppose you have a menu at your site, and you don't want to reload the whole page to see the content of a certain div. Instead, you want to load it using jquery and ajax!

What I will show you here is, how we can achieve the hover effect, without affecting the clicked element. Don't you understand what I mean?

Go to http://www.snap2design.com, and have a look at the menu. When you mouseover a menu item, you see that its background-color becomes black and when you mouseout, it becomes grey again, except of course from the clicked menu, which remains black!

How can we achieve this? The answer is by using Jquery! A fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Here we will use the click and hover function of this wonderful library.


Click Function


Seems all this strange to you? Well, let me explain you a little bit what I am doing here.

Firstly, when we click the h3 element of a navigation_item,

• we remove "selected" class and 
• change background color of each item to #424242

 ***Just to say that selected class is defined in a seperate css file


Finally we add "selected" class to the clicked item.


***I want to clarify that I refer to the situation of a menu which loads content via AJAX, and not by reloading whole page. The link with the example  I gave you above, has a menu with submenus. I explain the case of the first level menu. The same technique is used for the second level as well. You can see the html markup below:



So til now, when we click a navigation item,  its background-color becomes black(selected class). The other ones have a grey background-color (#424242).


Hover Effect



Well, let's explain the hover effect now! When we mouseover a menu item, we make its backround-color black. That's easy!
When we mouseout, we have to make a check. The menu item that has "selected" class, keeps its black background-color, otherwise it becomes grey (#424242).

What would happen, if we didn't make the check? Every menu item would become grey and we wouldn't know, which one was the selected one.



Conclusion

Well, in the above example I wanted to show you the technique I use, in order to check which menu item is the selected one when we use AJAX, and keep its "selected" class, when we mouseover that!

I am glad to hear, what you do in a similar situation!