San Clemente Web University: FREE Web Marketing & Advertising Classes

You are currently browsing the archives for the jQuery category.

Subscribe to Web “U”

Enter your email address:

Delivered by FeedBurner

Web ‘U’ Sponsors


Categories

Products

Web U 2UR Phone

Phone number

Carrier

Web University Blog

October 2014
S M T W T F S
« Sep    
 1234
567891011
12131415161718
19202122232425
262728293031  

Web 'U' RSS Feeds

Archive for the ‘jQuery’ Category

Textillate Brings Back Text Animation

posted by Pete Prestipino @ 7:30 AM
Thursday, February 21, 2013

You know what the Web needs? That’s right… more animated text!

If you’re looking to add some motion to the copy on your website, be it as simple as page headings or vital as custom call out sections on landing pages, consider the use of Textillate.js – a jQuery plugin for creating very appealing CSS3 text animations.

Textillate is built on top of animate.css and lettering.js libraries (two of our favorites), and offers a relatively easy to use and interactive way to animate text. The plugin provides controls for in-animation and out-animation – how the text appears initially and how it leaves the view of the user.

 If jQuery plugins like Textillate spark your design fancy, you might also be interested in some others. Check out one of Website Magazine's most popular posts from 2012, Web Font Fun with Javascript Plugins.   


Comments Off

How to PageFlip? Creating Bookish Digital Effect

posted by admin @ 1:00 AM
Friday, February 15, 2013
The thing we are talking about today comes from those skeuomorphic tricks that imitate well-known objects. Check out the toolkit best for creating pageflip layouts.
Comments Off

Using jQuery to Enhance HTML5 Tabular Data

posted by Jake Rocheleau @ 1:00 AM
Tuesday, February 12, 2013
HTML table model allows authors arrange data: text, images, links, forms, form fields, other tables, etc. into rows and columns of cells. Check out the tutorial on how to enhance HTML5 tabular data with jQuery.
Comments Off

jQuery Plugins for Increasing Interaction

posted by Michael Garrity @ 1:55 PM
Thursday, January 24, 2013

There is one thing that every website, no matter what kind it may be, always wants to see: more user interactions.

However, despite the universal desire to increase interaction on one’s website, the route that each designer and/or developer takes to make it happen can vary greatly. Often, their choices are dependent on the type of site (e.g. content-based, e-commerce, service providers, etc.) or brands that they’re working with. Thus, there are many different ways to go about enticing visitors to engage with a website.

So if you’re one of the many webmasters, designers or developers interested in improving user interactions on your website, check out these 10 cool jQuery plugins designed to do just that, either through easier navigation, greater customization or added functionality.

jQuery Page Peel
Like it says, this plugin makes it easy to create a page peel animation for you Web page that sits at the top of the screen on the right-hand side. When users hover their cursors over that area, the page will peel down and reveal more content behind it. While many websites like to place advertisements behind this peel, it can be used in more effective ways to draw attention to extra content or other website features.

Image Overlay Plugin
Images are a great way to capture the interest of visitors, especially if it’s their first time on your site. With the Image Overlay Plugin, you can reel them in, and then present more text-based information about the pictures that will appear (see image below) when users hover over the images. This way, you can still share information about the images without adding distracting, unnecessary text to your Web page.



jSlideRelatedPages
jSlideRelatedPages is a scroll sliding plugin that helps you engage users when they get to the bottom of your Web pages by displaying a sliding animation (see image below) when they get down there. On the slider is a list of related pages on your site that the user may also be interested in based on the content of the page they are currently on, so that you can keep them on your site and looking at more of your content for a longer period of time.



jFontSize
One of the more overlooked reasons for early site abandonment is poor readability for certain users because of the font size on a particular page (or set of pages). The jFontSize plugin helps to alleviate this problem by making it easy to create those “A+” and “A-“ buttons that some site’s have that allow users to alter the site’s font size, which will make your website far more accessible to a much wider range of visitors.

Overscroll
Users are so comfortable with accessing the Internet on mobile phones and tablet devices these days that it may behoove you to make your whole website mimic the mobile scrolling experience on desktop browsers. Luckily, the Overscroll jQuery plugin does just that by adding a “draggable drift” to overflowed DOM elements and a set of fading “thumbs” to a site. In other words, it allows users to simply click on the site and drag their mouse to move around the site, just like they would using their fingers on an iPhone. While Overscroll works best with Safari 5+, Chrome 5+ and Firefox 3+, it says it should work just fine on pretty much any modern browser.

SimpleModal
SimpleModal gives users a powerful interface for modal dialog development that offers greater flexibility to develop whatever they can envision in the box, while mostly doing away with many cross-browser user interface development issues. The real benefit is that designers and developers can totally customize these modal boxes to fit the style and theme of a website, while also being incredibly easy to implement and manage.

PikaChoose
Anyone who has spent an inordinate amount of time getting lost scrolling through Instagram or Facebook photos will tell you about how great image galleries are for capturing a user’s attention and encouraging them to interact with your site. If you want a simple way incorporate a thumbnail image gallery onto your website, look no further than PikaChoose (cute, no?), which is lightweight and super easy to integrate into any website.

jQuery TextAreaResizer
This plugin is ideal for any website that is using an iFrame to display a Web page, image(s) or form(s), especially if the iFrame uses a fixed height, which can be very inconvenient for users, as they’re difficult to resize across different browsers. That’s no longer a problem though thanks to this plugin, which makes it easy to resize iFrames by equipping them with a grip bar.

Responsly.js
In 2013, more users than ever are going to be accessing your website from mobile devices, so responsive design is going to be absolutely essential to ensuring all of your visitors are going to be willing and able to interact with your site. This lightweight plugin will scale to everything from small smartphone screens to large desktop monitors with minimal dependence on jQuery for convenience. It’s uses pure CSS styling and CSS3-based transitions, meaning it can be heavily customized, and it comes compartmentalized so that developers can use only the features that they want.

Single Drop Down Menu
Add multi-level navigation menus to your website that will keep users interacting with your tabs and links while they search for the content that they came looking for. The Single Drop Down Menu (or Single-ddm) applies mouseovers to a preformatted list and a timer that lets users customize the drop down menu’s stall time. It also supports metadata, meaning each list can have its own special features without multiple function calls.

Bonus: Raptorize
Because who doesn’t want a digital velociraptor run across their website, complete with a raptor screeching sound? It’ll get your visitors’ attention, at least.

Comments Off

Fetch Instagram Photos with Spectagram

posted by Pete Prestipino @ 10:30 AM
Thursday, January 10, 2013

Instagram is wildly popular among Web users these days and as you might expect, developers - and marketers, of course - are looking for creative, interesting and inspiring ways to leverage the photo sharing service for their own benefit.

Spectragram, a jQuery plugin for the Instagram API, is one way to make that happen.

Created by Adrian Quevedo, Spectagarm can grab anything published by a particular user, the most popular media of the moment, or recently tagged media directly from the Instagram API. Results can be displayed on list items or any other HTML tag defined. It’s also possible to define the size of the pictures (small, medium, large). To use Spectagram, however, you’ll need to use your own Instagram application ClientID and AccessToken.

Spectagram is licensed under MIT License so it can be used in commercial projects as long as the copyright header is left intact.

Comments Off

10 Mind-Blowing jQuery Plugins for Developers

posted by Michael Garrity @ 1:30 PM
Thursday, December 13, 2012

The JavaScript-based coding language jQuery is popular among many Web developers because it allows them to incorporate a variety of interactive effects it allows them to incorporate in their websites without requiring as much of the elaborate coding of regular JavaScript.

But jQuery is also attractive because it offers a wide selection of possible design elements, features and functionality that developers can include on their sites. This can be anything from parallax scrolling to slideshows to responsive text; the possibilities are virtually endless.

Most jQuery plugins aren’t necessary, or even all that useful, for every website, since they tend to cover a broad range of objectives, but any developer that wants to create a robust, feature-rich website, or just one that is visually striking, will be able to find at least a couple of plugins that can help him or her do just that.

Here at Website Magazine, we’ve compiled a list of some of our favorite jQuery plugins for our dear readers to check out, each of which can add distinct elements to a website that help it come to life and appear more engaging to users.

Of course, there are plenty of other jQuery plugins available. What are some of your favorites? Let us know in the comments section!

Simple Parallax Scroll
Parallax scrolling is one of the hottest design trends of 2012, and there is no shortage of plugins that can help you achieve this entertaining effect, wherein the background image of a Web page translates slower than the foreground content as a user scrolls. This technique by Mohiuddin Parekh is a simple way (it’s even in the name) to incorporate this cool feature on your website, and starting engaging more users, in about 20 minutes. And once you have parallax scrolling to show off, you’ll be the coolest website in school.

Gamma Gallery
Users are accessing the Internet from a plethora of different devices these days, even more than just five years ago. During that same span of time, images have become the most popular type of content on the Web. Naturally, this has led to a need for responsive image galleries that can be easily viewed and interacted with on any device. However, building one can be difficult because of the myriad factors one must consider, such as layout or features. Fortunately, there is the Gamma Gallery plugin, which takes into account and provides suitable image sizes for fluid grid thumbnails and full image views.

Baraja
This plugin adds a neat feature to websites that lets developers move elements in a “card-like fashion” (think like holding a hand of playing cards during a game of poker) and spread them out like a deck of cards on a table using CSS transforms to rotate and translate the items. Users aren’t just bogged down by one or two spreading options, though; the plugin presents a variety of possibilities, such as moving items laterally or rotating them like a fan. Baraja will provide your website with a unique interactive element to delight and engage your visitors.

A jQuery Heat Map
Heat maps are an excellent way to track the actions of users on your website. They allow you to follow their clicks and make design changes or decisions based on the actions that most users are likely to make. The jQuery Heat Map is an easy way to create a heat map for a website that tracks clicks and then displays the click pattern using semi-transparent dots on an overlay, so you can quickly identify the most popular aspects of your Web page and fix anything that is being neglected.

jQuery Snow Falling Plugin
Get into the winter spirit – and impress your visitors – with this plugin that adds a snow falling effect to your Web page(s). With this plugin, users create one snowflake initially and then clone that snowflake at a time interval and then add random value properties to each individual flake, all in less than 1 KB minified. It’s an easy way to spruce your page up for the holiday season.

jGravity
jGravity is an interesting plugin that add “gravity” to elements on a Web page, meaning developers apply a gravity effect that drops all of the selected elements to the bottom of the page. Developers can either add the effect to all of the elements on a page, or choose specific elements to receive the gravity treatment. This is a fun way to add a level of interactivity to your page, but it can also help you highlight important content (or, on the other hand, do away with superfluous content by dropping it down and letting users focus on the important stuff).

WideText
Another page element to remember when considering responsive design for a website is text. The WideText plugin offers up a full width responsive text solution that is both lightweight and easy-to-use. Now, you’ll never have to worry about visitors seeing your whole message, no matter what device they’re viewing it from.

Superslides
Create visually stimulating, interactive full screen slide shows on your site that you can use to show off your image content with the Superslides plugin. Best of all, this solution was designed with flexibility in mind, so it’s highly customizable. It also offers a handful of configurable options, such as auto play with a delay, slide transition speed and slide easing. If your site is heavy on image content, using Superslides is a great way to display it.

pageguide.js
Keep your website clutter-free with the pageguide.js plugin, which provides information to users via an interactive visual guide that can teach them about features or functionality. It will attach CSS “pseudo elements” to the features that define your pages, providing numbered arrows on the top, bottom, left or right of what you want to highlight. The guide will even scroll for users. Developers are given control over the style of the guide, and they can track the actions of users by simply including their tracking codes from services like HubSpot or KISSMetrics to find out which aspects of the guide are of greatest interest to their visitors.

PicStrips
Take your images to the next level with the PicStrips plugin, which splits the picture into any number of strips with whitespace between each one. Users are not only able to specify the number of strips they’d like, but also the white space between each one and the vertical whitespace at the top and bottom of alternate strips. This simple alteration helps your pictures stand out from similar content and adds some extra flair that will capture the attention of your audience and give your images new life.

 

Comments Off

New jQuery Plugins Aimed Directly at Your Site’s Responsiveness

posted by Alex @ 1:00 AM
Monday, December 10, 2012
Got a responsive website add some cool jQuery goodies, to get things freshened up.
Comments Off

Make a Flipbook Magazine with Turn.js

posted by Pete Prestipino @ 7:03 AM
Tuesday, November 6, 2012

Your average Web user is looking for richer and more engaging interactions within their digital experience. That is challenging on both creative and technical levels but there are solutions emerging which make quick work of this more demanding environment.

Turn.js, for example, is a Javascript library (actually a UI plugin for jQuery) that provides designers and developers the ability to make content look just like a book or magazine. The effect, as you see in the demos, is quite seamless, with elegant transitions thanks to the plugin taking advantage of the latest in HTML5 and CSS3.

There is a version (3rd release) available on GitHub, but the fourth release of Turn.js offers several more interesting (and essential) features including using pages of different size, zoom effects, navigation bars and more. The license cost for the 4th release of Turn.js is $99 for up to 5 domains and $499 for unlimited domains.

Comments Off

How to Code a Sliding Registration Form Panel with jQuery

posted by Jake Rocheleau @ 1:00 AM
Tuesday, October 23, 2012
The blog post includes detailed tutorial on how to create sliding registration form. Feel free to check it out!
Comments Off

Gridster.js – Drag-and-Drop Multi-Column Grid

posted by Pete Prestipino @ 12:38 PM
Tuesday, September 4, 2012

Always on the lookout for the next great trend in Web design leads us down some rather interesting paths.

Our most recent discovery will likely be the coolest thing you’ll see today – Gridster.js – a drag-and-drop multi-column grid.

Created by Ducksboard, Gridster is a jQuery plugin that enables designers and developers to build intuitive “draggable” layouts from elements spanning multiple columns. Instead of trying to explain it, check out the demo on the official site.

Several customization features and options are available that are definitely worth of a review. Designers can leverage the API object to add a new widget to the grid, remove a widget or create a serialized array with the elements positions. Again, this is definitely going to be the coolest thing you see today. 

Comments Off

20 jQuery Slider Plugins for Terrific Non-Stop Image Swap

posted by Alex @ 1:00 AM
Thursday, August 30, 2012
The blog post includes 30 great jQuery slider plugins. Feel free to use these plugins for inspiration on your own websites.
Comments Off

HOT: What’s Inside jQuery 1.8

posted by admin @ 6:47 AM
Tuesday, August 14, 2012

 

A new version of jQuery has been released (v1.8) - and just nine short months since jQuery 1.7 was made available. What lucky designers and developers we are! With a smaller code size (approximately 100 bytes smaller than 1.7.2) and with more than 160 bugs closed, let's take a closer look at JQuery 1.8:

- The Sizzle selector engine has been re-architected and is now faster and more efficient. Most browsers have querySelectorAll method but there have been some (serious) cross-browser implementation troubles which 1.8 solves and managed to provide coded fallbacks for IE6/7. 

- Animations have been quite cumbersome to work with through jQuery but 1.8 addresses animation performance and it has improved dramatically as a result. While CSS3 offers  better effects (and with less code), it is unlikely that jQuery and JavaScript-powered animation will dissappear (at least not in the short term). That being said, there are some new additions for animations - namely the use of progress callbacks in Primises - see the code in action here

- jQuery 1.8 now automatically adds required prefixes when a CSS property in methods such as .css() or .animate() are used. This update makes it possible to apply a single transform and -webkit-, -moz-, -ms- and -o- prefixes will be pre-pended.

- Improved modularity is also a noteworthy feature in the 1.8 build. It's not possible to reduce the already small size by using the grunt-based build systems to remove features that are not required. 

The jQuery 1.8 code is available for download here: 

http://code.jquery.com/jquery-1.8.0.min.js
(compressed and minified, for production)

http://code.jquery.com/jquery-1.8.0.js
(uncompressed, for debugging)

Comments Off

Where am I? jQuery Plugins for Google Maps Embedding

posted by Alex @ 1:00 AM
Wednesday, August 1, 2012
The jQuery Google Maps plugins are written to take away some of the headaches from working with the Google Map API. Feel free to use one of these great plugins that will make your office easily findable.
Comments Off

Web Font Fun with Javascript Plugins

posted by admin @ 12:30 PM
Thursday, June 28, 2012

When I first started working on the Web in a professional capacity, there really wasn’t much you could do to dress up your website as it related to font choice.

Web designers had little control over fonts in the past, but that has changed dramatically over the past two years as the pace around jQuery development accelerates and responsive design becomes the norm (or at least more normal).

While it’s possible to manipulate text using CSS, that method still has its limitations. As a result, many turn to Javascript to solve the inherent problems - and the results are often worth a look.

Below you’ll find several javascript plugins that can help you, the designer/developer, modify text through kerning, introducing a responsive nature and even tossing aside all convention with some quite dramatic effects.

 


 

SlabText: This Javascript plugin splits headlines into rows before resizing each to fill available horizontal space.

Slab Text Web Font jQuery Plugin
 

FitText: The plugin renders font-sizes flexible, making it ideal for use in fluid or responsive layouts to achieve scalable headlines.

fittext web font jquery plugin
 

LetteringJS: For those willing to make a more daring design choices, LetteringJS fits the bill.

lettering jquery plugin web fonts
 

jqsloText: This plugin is another for those willing to make some edgy design choices, as it renders an arching effect (gets bigger as you approach the middle and then tapers off) on HTML text.

jqslotext jquery plugin
 

jQuery Glow: The plugin provides the ability to add a glow effect to text when hovered over.

jquery glow for web font fun

BigText: This plugin automatically sizes text to fit inside a parent element, resulting in perfectly justified alignment.

bigtext jquery plugin

Comments Off

How to Cheat HTML5 with JavaScript

posted by Alex @ 1:00 AM
Wednesday, June 13, 2012
Today we would like to present you a list of JavaScript tools that are good to be used with or instead of HTML5 elements. Feel free to use these awesome tools to improve your websites.
Comments Off

jQuery: 15 Must-Know Tips and Tricks for Web Designers

posted by AjAviado @ 12:00 AM
Tuesday, June 5, 2012
No matter how deep your knowledge in jQuery is, you can always learn something new. This blog post includes all the necessary tips and tricks about jQuery, so feel free to use them in your web design work.
Comments Off
NivoSlider has become the most popular image slider available on the web today. Started as a side project quickly became a huge success, celebrating over 1 million downloads in its first year.
Comments Off
TemplateMonster Blog gladly presents a list of cool jQuery media plugins to help you dealing up with implementing videos on your website.
Comments Off

Use Curtain & Sequence (jQuery) for Design Inspiration

posted by Peter A. Prestipino @ 12:30 PM
Thursday, April 19, 2012

jQuery can do a lot of things, but it’s really just a development library. A library that can help designers do some tremendously creative things.

If you have the right jQuery plugin and can effectively balance your creative design skills with the technical requirements and usability demands, there is no greater opportunity to inspire and impress users.

But the amount of available jQuery plugins, thanks in part to its open nature and simplified development schemas, can make identifying the “right” jQuery functionality for your own site or the sites you work on as a designer a bit cumbersome.

Have no fear, because Website Magazine is here!

Below you will find two jQuery plugins that have entered into our design radar the past few weeks, and will likely (no, absolutely!) blow your mind. We also believe that these will inspire you to greater design heights, so let's get started:


 

Start the show with Curtain.JS

This jQuery plug-in allows designers to create Web pages with multiple fixed panels. The panels essentially unroll with an effect similar to that of a curtain rising. Users can navigate through the keyboard, scrollbar or mouse wheel. Designers can also add fixed elements or “steps” inside each panel.

Put Everything in Place with Sequence.JS 

There is a seemingly endless number of jQuery sliders – but trust us, this one is different. Sequence.JS features some jaw-dropping transitions using CSS3, supports responsive layouts and modern browsers, and it even works with touch devices and has swiping functionality.


One more thing! Do you know of any jQuery plugins that others should know about? Don’t be shy, share it with other Website Magazine readers by commenting below. We’re currently assembling a list of the top design-focused jQuery plugins and, as always, we could use your help!

Thanks, and please enjoy these jQuery plugins of the day!

 

Comments Off

jQuery Plugins for Responsive Web Design

posted by Edward Korcheg @ 2:46 AM
Wednesday, December 14, 2011

So, do you want your website to be properly displayed on mobile devices and tablets? If yes (and we’re pretty sure it is ‘yes’) then it is time to think about how to make your layout more responsive. Being one of the most discussed web design trends of the year of 2011 responsive web design keeps moving forward by providing new efficient solutions for web developers and webmasters. Today this trend will be presented by the awesome jQuery plugins for responsive design. We’ve tried to put together various types of plugins that will help you to properly display your content on mobile devices, and by content we mean not only images but also fonts, videos and even grid system to make things look nice on small screens. Also don’t forget to look trough our article that would guide you through the basics of responsive web design – How to Get Started with Responsive Web Design. Now let’s get back to our list of jQuery plugins.

1. Responsly.js

jQuery Plugins for Responsive Web Design

Responsly jQuery plugin perfectly works with laptops, tablets and mobile device screens. It has pure CSS styling and is compatible with all modern browsers (IE drops transition support only). It is a very lightweight plugin that can be easily customized be editing CSS file.

* * *

2. Photo Swipe

jQuery Plugins for Responsive Web Design

Photo Swipe is a Javascript-powered image gallery plugin that has been created mostly for mobile devices. With it your visitors will be able to browse your website with a familiar and intuitive interface.

* * *

3. FitText

jQuery Plugins for Responsive Web Design

FitText makes font sizes flexible which means that all headlines on your website will be scalable. This plugin is another step that will help you make your layout more responsive.

* * *


4. Responsive Menu

jQuery Plugins for Responsive Web Design

This is a very simple and small jQuery plugin which will convert menus into a select element for mobile devices and low browser widths.

* * *

5. Adaptive Images

jQuery Plugins for Responsive Web Design

Adaptive images is efficient solution that allows you to deliver a mobile friendly version of your website images. This plugin detects screen size and creates appropriate re-scaled versions of the images on your web page. No mark-up changes needed.

* * *

6. jQuery Masonry

jQuery Plugins for Responsive Web Design

jQuery Mansory is a grid layout plugin that arranges elements vertically reducing huge vertical gaps. So, this plugin creates nice mobile-friendly layout.

* * *

7. FitVidJS

jQuery Plugins for Responsive Web Design

This is a lightweight jQuery plugin that was created with only one aim in mind – to properly display embedded videos by using fluid width.

* * *

8. Convert a Menu to a Dropdown for Small Screens

jQuery Plugins for Responsive Web Design

This plugin creates a mobile-friendly dropdown menu instead of classical row of links in your navigation menu.

* * *

9. jFontSize

jQuery Plugins for Responsive Web Design

This is a special plugin created to facilitate that notoriously famous A+/A- button that allows you to increase or reduce the font size in desktop versions of some websites. Basically jFontSize adapts fonts on website for the resolution of your device’s screen.

* * *

10. jQuery UI mediabox

jQuery Plugins for Responsive Web Design

rlightbox is a jQuery UI plugin that displays various content including images, YouTube and Vimeo videos. Among its features we must mark out Panorama and Live Re-size.

* * *

Comments Off
San Clemente Web University: FREE Web Marketing & Advertising Classes is proudly powered by Link Web Services, Inc.