jQuery

Parallax Scrolling #1 - HTML

Submitted by Yorkiebar on

Introduction:

This tutorial is the first of three parts in which I will show you how to create a Parallax effect using HTML, CSS, and the Javascript library jQuery.

What is a Parallax Effect?

A parallax effect is where one element or layer moves in the opposite direction to another element or layer. This can be used in a professional manor for some websites to give a nice, smooth effect to the content.

HTML:

First we need the HTML for our page.

Interactive Tracker Boxes #4 - jQuery

Submitted by Yorkiebar on

Introduction:

This is the final part of my mini-series explaining how to create interactive tracker boxes in HTML, CSS, and jQuery to allow HTML content to change once the user interacts with the boxes. This part is will explain the final step, jQuery.

jQuery Installation:

To begin using jQuery within our file, we first need to link it.

Interactive Tracker Boxes #3 - Content - jQuery Preparation

Submitted by Yorkiebar on

Introduction:

This tutorial is the third part of my interactive tracker boxes tutorial series which allows content to change dependant upon which tracking box the user clicks on. This part is covering the content of the tracker boxes.

HTML:

The heading for the box which is hovered over will go under the 'informationTitle' CSS ID, and the information will go under the 'informationParagraph' CSS ID.

Interactive Tracker Boxes #2 - CSS

Submitted by Yorkiebar on

Introduction:

This is the second part of my interactive tracker boxes in HTML, CSS, and jQuery. This part will be covering styling the classes of our elements using CSS3.

Box:

The box class will be the holder of the points/trackers where the user is able to hover their mouse over in order to get responsive information about appropriate content. For this, I am going to do a simple small box with white background, and black border...

Interactive Tracker Boxes #1 - HTML

Submitted by Yorkiebar on

Introduction:

This tutorial is on how to create an interactive CSS & JavaScript (jQuery) page where the user is able to hover over certain elements of the page in order to uncover more information (such as the Bing.com search page, where you can hover over the boxes on the image to see interesting facts).

HTML:

This is the first part of this tutorial series, in which we will be creating the HTML and starting CSS for the page. We want to have a title and paragraph for each piece of information on the website, so lets create the basic HTML template first...

Creating Notification Box Using jQuery

Submitted by GeePee on
This project will teach you on how to create a notification using the jQuery. In my example, I used my previous project jQuery Datatables. In every update of the selected item, BlockUI jQuery plugin appeared saying that item selected has been updated. You can also customize the notification by changing the css codes. Hope you learn from this.

Including Emoticons in a Chat Box Using jQuery

Submitted by GeePee on
This project will teach you on how to include emoticons in your chat box using jQuery and PHP. I used my previous project Chat Box as an example. The supported symbols typed were replaced with a graphic image using CSS. As you will see in my project, I have some examples of supported emoticons. Hope you learn from this.

CSS3 Hinge Effect

Submitted by GeePee on
This project will teach you some animations using the CSS3 and jQuery. In my example, I used my previous project Comment Box. When the user wants to delete comments, the box will be animated using hinge effect. You can try this with your present project. This is easy and cool animation. Hope you learn from this.