Like this below:

Link Nudging

Or,

Naruto Image

How to do ? …

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below:

you can use (Ctrl+F) to find easily

3. Right Before </head> – place code of HTML below:

4. Click Save Template.

5. Example of how to use Jquery Mouseover Tooltip Plugin to other link:

6. Example of how to use Jquery Mouseover Tooltip Plugin to image:

Done, Now, you’ve already created Jquery Mouseover Tooltip Plugin.

Like this below:

Click Here to See the Example

how to create a Jquery Thumbnail Image with Heading and Caption ? …

First Step;

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below:

you can use (Ctrl+F) to find easily

3. Right Before </head> - place code of HTML below:

4. Find code of HTML below:

you can use (Ctrl+F) to find easily

5. Right Before ]]></b:skin> – place code of HTML below:

6. Click Save Template.

Second Step;

1. Go to Dashboard, click Design, click Add a Gadget

2. Click ‘HTML/JavaScript’

3. Place code of HTML below – into ‘HTML/JavaScript’

In the following we will go through an example and we’ll start by the html for a little menu:

We will use data-hover to indicate the word that should appear on hover. If you don’t use the data-hover then the same word will be used on hover.
Then we will style it in the following way, making sure that we have the right properties for the structure that will be generated:

So, “sl-w1″ is the class for the first word letters and “sl-w2″ is the class for the second word letters.

Finally, we call the plugin:

The following settings can be used:

We hope you liked this little experiment and find it useful!

Download source

The markup just consists of a div with an unordered list inside. The list elements contain a span for the icon and the link element:

2. The CSS

The style of the navigation container and the unordered list will be the following:

Since we are making the list float, we will need some relative wrapper for the icons. You see, the icons which will be the background-images of the spans in our list, will have absolute positioning. That comes handy when you need to define a z-index, i.e. saying that some element is on top or under another one. Since we want the icons to appear on top and then dissapear under the link element, we will have to deal with z-indeces. And absolute positioning of elements in a relative container will makes things easier.

Now, let’s define the style for the link elements:

We want to give the link elements a fixed width and some background gradient. The borders will create a nice inset effect.

The next hover class will be applied using jQuery, since the :hover pseudo class creates an unwanted effect: When the icon slides out it covers the link for a few milliseconds, making the hover style dissapear in that time. That is perceived as a flicker and we will avoid that by defining a class that we will simply add with jQuery when we do the icon slide out effect:

The first and last link element should have a rounded border on the respective side, so we define two classes for those:

The common style for all the icon spans will be the following:

The single styles for the specific icons will contain the background-image and the x-position:

As you can see, we are positioning the icons in such a way, that they are centered inside of the list element. The top position is 80px initially since we want to show them to the user when the page get’s loaded. Then we will hide them in a stair-like fashion to create an awesome effect!

3. The JavaScript

First, we want to create the effect of the icons dissapearing in a stair-like fashion and then we will define the hover function for the list elements:

When hovering, we add the class “hover” to the link element, make the icon appear from the top, and increase the z-Index, so that the icon stays on top of the link. When the mouse goes out, we do exactly the opposite, which creates the effect that the icon dissapears behind the link element. For that we will allow more time (800 milliseconds) because it’s such a fun effect that the user might want to enjoy a little bit!

And that’s all!
I hope you like and enjoy it!

Download source

jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
You can call the plugin in the following way:

$(elementID).paginate()

You can configure the plugin with the following properties:

1. count: The total number of pages
2. start: With which number the visible pages should start
3. display: How many page numbers should be visible
4. border: If there should be a border (true/false)
5. border_color: Color of the border
6. text_color: Color of the text/numbers
7. background_color: Background color
8. border_hover_color: Border color when hovering
9. text_hover_color: Text color when hovering
10. background_hover_color: Background color when hovering
11. images: If the arrows should be images or not (true/false)
12. mouse: With value “press” the user can keep the mouse button pressed and the page numbers will keep on sliding. With value “slide” the page numbers will slide once with each click.
13. onChange: The callback function when clicking on a page. As argument the number of the page clicked can be used.

Download jPaginate

Some of the features are:

• You can get your most recent 100 followers or friends
• Followers or friends are shown in sets of 25 per widget page
• The images of the users are preloaded (unlike in Twitter)
• You can navigate through the set
• You can refresh the entire set
• More information on the user can be seen using a tooltip when hovering over his picture

You can configure and use this in your website to show your followers or friends with some interesting information about them (name, number of followers, number of friends).

A reason why 100 followers or friends are loaded in the beginning is the restriction the Twitter API is giving in the number of results per request. So, in order not to make several requests which would take quite some time, I just get 100. However, you can always click the link to the entire list in the end of the pagination.Download source

The markup is pretty simple: we have a div with a list inside. The list items will be our links, the search input and the arrow buttons:

The links with the classes top and bottom are the arrows that will lead the user to the beginning or the end of the page. The hrefs in these links reference to some elements having the id top and bottom. Make sure, you reference the right elements in your page. The bottom could, for example, be your comments section in you WordPress blog. In that case you would need to refer to #comments instead.

The span of the top and bottom links will contain the actual arrows as background images.
The search button which is a submit button will have no value since we want to give it a background image and no text.

Let’s look at the style now.

2. The CSS

Let’s first define the main navigation div:

The navigation will always stay right at the top of the page because we “glue” it there with position:fixed and top:0px. The background image will be a semi-transparent button-like background with a slight 3D effect. Since it is almost transparent, you can try to use different background colors instead of white (#ffffff).

We set the z-index very high since we don’t want any other absolute element to be on top of our navigation.

The unordered list and its list items will have the following style:

The unordered list has a fixed width of 600px and will be positioned in the center of the navigation. Centering a relatively positioned element can be achieved by stating that the left and right margin is auto.

The list elements shall be aligned next to each other. We define that with display:inline. We make them floating left because we want to apply a margin here, creating some space between the items.

The general style of all the link elements will be the following:

Although it is not really necessary to state that the cursor should be of type pointer here since it is a link element, I often define that because in some browsers the pointer will only appear when there is an “href”. That might not always be the case and so it is always better to define it again in the CSS if one is not sure how link elements will be used.

The links will have a semi-transparent background image similar to the one for the navigation. Again, you can simply define a color for the background or experiment with combinations of these. The overlay image tints any background color in a light gray.

When hovering over the link element, we remove the background image and change the background color.

Let’s look at the style of the two arrow links:

Now we define the style for the list element that contains the search and the text input:

Generally, with specifying input[type="text"] you make sure that you will not change the style of all other inputs. That is a good way of specifying the design of a certain type of inputs.
The margin (TOP RIGHT BOTTOM LEFT) to the left will be a bit more because we want to separate the other links from the search.

The submit button will have the following style:

This is a good example of when to use a class instead of specifying the style for e.g. input[type="submit"]. There might be many submits in your page, but this one is very special and no other submit will look like it except the search submit.
This input will not have any value as you saw in the HTML part. Instead, we will have an icon as background image.

And that’s all the style! Now let’s add some rocking JavaScript:

3. The JavaScript

What we want to do now, is to leave the menu as it is, whenever we are at the top of the page. When we start scrolling, we want the menu to fade out and to be almost transparent. When we hover over it, it should appear opaque again. All this we define in the following lines of JavaScript:

So, if we are not at the top of the page, scrolling the window will change the opacity value. That effect takes 400 milliseconds (adapt to your preferred time). If we are at the top of the page, the opacity will have the value 1 which means that the element will be opaque.

When hovering over the element, we make it opaque and when we move the mouse out, we will make it more transparent again (if we are not at the top).

And that’s all! Enjoy!

The only thing we will need for the navigation is a simple unordered list with links inside of the list elements:

The list is getting an ID because we want to refer to it later in the JavaScript. With jQuery, we will make the link items slide out whenever we hover over the li elements of the list.

2. The CSS

First, we define the CSS properties for the list:

The navigation should always be accessible for the user, even if he scrolls down the page. So, the position should be fixed. Margin and padding are explicitly set to 0, since the unordered list has default values for them. The navigation should also be on top of all other elements on the page. That’s why we set the z-index very high.

Now, let’s look at the list element properties:

For the links in the list elements, we define the following CSS properties:

The margin-left is set to a negative value because we want to hide most of the icon and only reveal it when we hover over the list items. Basically, we are pushing the link element to the left, outside of the visual area of the page:

In the JavaScript part we will define a function that makes the elements slide out. But let’s first add some rounded borders to them (they don’t work in Internet Explorer, though):

To make them really neat, we add some opacity, so that the content underneath is visible:

The last filter property will make this work for Internet Explorer as well.
These were the common properties of all the link elements in the list. Now we will define the background image for the links in the specific list items:

And that was the CSS part. Now, let’s take a look at the few lines of JavaScript that will give some life to the navigation.

The JavaScript

Using jQuery, we will make the icons appear whenever we hover over one of the list items. Remember, the list item itself is 100 pixel wide, only the link element is being pushed outside of the page to the left, so that it is not visible.

We define the following function (before the end of the body tag) that get’s executed whenever we hover over a li:

So, when hovering, we want the specific link element to get a left margin of -2 pixels, and that nicely animated, and not too slow (200 milliseconds). Moving the mouse out shall put the link element back to it’s old position (-85 pixels). The stop() function “stops all the currently running animations on all the specified elements” which gives the beautiful effect when, for example, hovering over all elements very quickly.

What would be really nice now, is to make the user aware that there is such an amazing navigation on your web page. Like it is now, the user will merely see some grey borders sticking out from the left side of the page. What could be better for showing the menu than actually showing the navigation shortly when the page loads. So, here we go.

So, we will initially let the navigation be visible. For that we change the left margin of the link elements:

And we add the following line at the beginning of the JavaScript function:

With that line we defined that it should take 1 second to give a left margin of -85 pixels to all the link elements in the list. Through the margin that we set we will show the navigation to the user and with the JavaScript we will then hide it.

And that’s it!

If you are a shadow-freak (like me), you can also add these lines to the CSS of the link element:

Adding the box shadow and removing opacity, will give the navigation items a 3D look. Leaving the opacity makes them look cool, too, try it out and enjoy!

The HTML structure is going to consist of a main container which will have the image wrapper for the big image, the navigation items and the dot list with the thumbnail preview:

The thumbnail preview element will be a list item in the dot list. It’s going to have a special class since we want to treat this element differently. Each dot list item will contain a link element which will hold the information on the thumbnail image and the big image. Using JavaScript, we will extract that path information from the attributes and create the image elements dynamically.

Let’s take a look at the style.

The CSS

First, we will style the main container. Since our images have a maximum width of 680 pixel and a maximum height of 450 pixel, we will define the following values for the container (leaving some space for the dot list):

Now we will style the wrapper for the full images. Here we really set the exact maximum dimensions and say that the overflow is hidden. We do that because we want to be able to put two images inside of this wrapper but cut off the overflow. In our JS function we will animate the images so that the current one gets revealed.
We will center the wrapper by setting the left and right margins to “auto”:

The image(s) inside of the wrapper should be of position absolute since we want to animate the left value to slide in the current image and slide out the previous one:

The navigation elements will have the following style:

The dot list with the class “ps_nav” will be placed under the full image and centered by auto margins:

The dot list elements will float:

And the inner link elements will get the dot background image, which is a sprites image:

On hover we will change the background position to show the other half:

Our special list element, the one that will have the thumbnail preview, will be of absolute positioning. The top has a negative value, since we want to pull this element up, beyond the list. The left value will be dynamically calculated. -34.5 pixel is the left value for the preview element when we want to show it over the first dot:

The span will be the little triangle:

The preview wrapper will function the same way like the full image wrapper. We will hide the overflow:

And ultimately, we want the thumbnails to be of absolute positioning since we want to animate the left value for the sliding effect:

And that’s all the style. Let add the jQuery spice!

The JavaScript

The idea of this gallery is to show little thumbnails when hovering over a dot that represents and image.

When moving the cursor over the dots, we want to create a sliding animation that moves the next currently hovered thumbnail image into place. This will create a great effect, giving the illusion that we have an invisible bar of thumbnail images above the dots and our preview element makes them visible.

We also want the clicked image to show up by “pushing” the current one away, either from the left or from the right side.

Both effects we will achieve by placing the images or thumbs next to each other and animating their left value accordingly.

So, let’s begin by caching some elements:

(The loader element was not mentioned in the HTML structure since we placed it outside of the container. We want to show a loading element until all the images are loaded. In the download file you will be able to see the preload function for the images.)

Now we need to check if the browser is a real one or, for whatever insane reason, a crappy one like, let’s say, IE:

Basically, we want to give the preview element or tooltip the opacity 0 and animate it to 1 when we hover over it. Since in IE it does not help to simply add an opacity filter (elements inside are still shown) we want to use the show/hide instead of animating the opacity. So, we add display:none to the style of the class but take it out if we don’t use IE.

After preloading the images, we will show the container:

The function showTooltip() will show the thumbnails preview and animate it to the right place. It will also slide the thumbnails inside, either to the right or to the left, depending where we are “coming from”: