Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.
There are loads of plugins out there to use for a modal box but some of over complicated for this simple task of showing a message on the screen in a lightbox. I decided that I would build my own and in this tutorial I will show you how to build a simple modal box in jquery.
It is always a pleasure learning new techniques although at first it may seem like too much work and just not worth the try but there are many benefits to this in the long-run..
In this tutorial, we will be writing a jQuery plugin that will help you draw users’ attention to a specific part of the page, in the form of a small arrow that is displayed next to their mouse cursor. This can be useful for pointing to missed form fields, buttons that need to be pressed, or validation errors that need to be scrolled into view.
With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.
In this short tutorial we will be making a jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows.
As Google+ API was just released a couple days ago, it is time to have a posts widget for it. So, this widget was created to display your Google+ profile and slides down your recent posts with any attached images.
Wheel scroller/Date and Time picker jQuery plugin for touch devices (Android phones, iPhone, iPad, Galaxy Tab)..
jQuery has a core method called trigger(). This method will trigger the given event on the selected elements and then propagate the event up the DOM before activating the default behavior (assuming it wasn’t explicitly prevented somewhere in the bubbling phase). If you don’t want to involve the bubbling and default behavior, jQuery also provides the method, triggerHandler(). This will trigger all the event handlers without any propagation; however, it will only do so on the very first element within the current collection.
Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.
Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the “zoom” effect by enlarging the current image and fading in the new one.
Today we want to share a simple circular content carousel with you. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.
In this write up, we will show how you can create a Datepicker using this jQuery library. You can download the source files used in the end of the article.
Here’s an example of the button I’m showing you how to make..
Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.
If you have a twitter account, you oftentimes find yourself looking for a way to display your latest tweets on your website or blog. This is pretty much a solved problem. There are jQuery plugins, PHP classes and tutorials that show you how to do this.
Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.
Flexible Nav is a small jQuery library which add a smart navigation bar on the right of the page. It improves a web page navigation and helps to visualize different sections of a document, an article,.. any web page.
Today we want to share a fancy content rotator with you. It shows some image with a headline and sub-headline in each slide and allows navigating through the slides using the thumbnails that also contain a headline. Hiding the thumbnails will reveal a scrollable text container and the navigation arrows will move up so that one can navigate to the previous or next slides.
Today we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as a interesting slideshow. And as the code will be completely modular, you will be able to easily use it and modify it.
Today we want to share a slick and flexible vertical jQuery accordion with you. The main idea is to expand the accordion slices on click and show some more information. The other slices will become less opaque and squeezed. When navigating to the next slice using one navigation arrows, a new slice will slide in from the top or the bottom. Once a slice is open and we navigate, the subsequent slice will open on slide.
Apple has always been a god in the way they present their products on its website.There’s always something to admire about them .This article explains how to clone the slider in Itunes web store using jQuery.
If you are using Google Plus then you must have noticed the photo stack effect when you view your own album or someone else album. In this tutorial, I will explain how you can achieve this effect powered by Jquery and CSS3.