10
X

Intermediate

Quick Tip: Use jQuery to Clone Objects

There’s a really handy .clone() method in jQuery that allows you to copy an HTML element dynamically using a script. This method comes in handy when you want to clone an element after a certain trigger event, like .click() or .hover(). Using the .clone() method is pretty straightforward. Here’s what you would need to do to clone a div with the class .thediv:

var clone = $('div').clone();

The above code will easily clone any HTML element, but if you want to clone a JavaScript object, you’ll need to use different code like in the example below:

var clonedObject = jQuery.extend({}, originalObject);

To use this code to, for example, clone a div after it’s been clicked and then insert the cloned div below the original div, you can use the following code snippet as a guideline:

$("div").click(function () {
 $(this).clone().insertAfter(this);
});

Play around with the .clone() method to see what you can accomplish with it and discover all the different ways you can use it in your projects.

Convert Text Cases Using jQuery

In this post, find jQuery code to convert the input type text to UPPER CASE, lower case, Title case and Pascal Case. The case conversion is done once the focus is out from the input text box. However, you can use keypress event also to show the conversion in real time.

Here is the code to convert to UPPER CASE. There is a JavaScript string function called “toUpperCase”, which is used to convert text to UPPER CASE.

$('#txtVal').blur(function() {
  var currVal = $(this).val();
  $(this).val(currVal.toUpperCase());
});

Similar to UPPER CASE, JavaScript also has toLowerCase() method to convert text to lower case. See below code to convert text to lower case.

$('#txtVal').blur(function() {
  var currVal = $(this).val();
  $(this).val(currVal.toLowerCase());
});

Below is the code snippet to convert text to Title case. In Title case, the very first letter of statement is in upper case and others are in lower case. The code snippet below finds the very first letter, then converts it to UPPER CASE and rest letters to lower case.

$('#txtVal').blur(function() {
  var currVal = $(this).val();
  $(this).val(currVal.charAt(0).toUpperCase() + currVal.slice(1).toLowerCase());
});

And finally, the below code converts text to Pascal Case. In Pascal Case, first letter of the every word is in UPPER CASE and rest are in lower case. First we convert all in lower case and then find the first letter of every word.  To find out the first letter of every word, regular expression is used and then we convert it into UPPER CASE.

$('#txtVal').blur(function() {
   var currVal = $(this).val();
   currVal = currVal.toLowerCase().replace(/\b[a-z]/g, function(txtVal) {
      return txtVal.toUpperCase();
   });
   $(this).val(currVal);
});

10 Free jQuery Timeline Plugins

Here is another free jQuery plugin collection to create a timeline or display events in chronological order. Using these plugins you can create responsive, interactive and animated timelines. These plugins can be used to show events year by year, create portfolios or to develop any entity in an interactive way.

1. Timelify

Timelify

Timelify is a really simple jQuery plugin for creating a vertical timeline that animates events with the scroll event using Animate.css powered CSS3 animations.

2. Timeliner

TimerLiner

Build a simple, interactive, historical timeline with HTML, CSS, and jQuery. The benefits of this timeline script are that it’s (1) simple, (2) able to handle nearly any form of content (including images, video, audio), (3) printer friendly, and highly customizable with just CSS and HTML.

3. TimelineMe

TimelineMe

TimelineMe is a simple-to-use jQuery plugin for rendering a responsive timeline on the webpage that works perfectly with most front-end frameworks.

4. Timeliny

Timeliny

Timeliny is a simple to use jQuery plugin for generating a responsive, interactive timeline that allows you to scroll through events.

5. Timeline

Timeline

Timeline is a responsive, jQuery-based generator that builds a timeline based on user input. It comes with a number of customization options out of the box such as displaying dates, alternating toggle, animation, and choosing which side it starts on. It comes with little to no styling other than what is required, so it can be styled to suite your specific needs.

6. Timelinr

Timelinr

 

This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc…

7. Yearline

Yearline

Yearline is a jQuery plugin for creating historic timelines based on year.

8. Timeglider

Timeglider

Timeglider JS is a zooming, panning data-driven timeline widget written in Javascript. This widget can be integrated into any HTML application environment.

9. eeyellow Timeline

eeyellow Timeline

eeyellow Timeline is a lightweight and simple-to-use jQuery plugin used to generate a responsive, vertical timeline from plain HTML.

10. jQuery Vertical Timeline

jQuery Vertical Timeline

jQuery Vertical timeline is a lightweight jQuery plugin to create responsive, animated, vertical timelines with plain HTML mark-up. It supports all the modern browsers which support CSS3 transitions and media queries.

12 jQuery Plugins to Create Image Zoom Effect

In this post, find a compiled list of 12 lightweight, responsive and customizable jQuery plugins to provide zoom effects on images. These plugins can be used to provide inner zoom, outer zoom and magnifying glass effects. Some of the plugins also support mouse wheel zooming. These plugins will work on all the major browsers.

1. magnificent

magnificent

magnificent is a simple and responsive jQuery image zoom plugin that provides an inner zoom and outer zoom option to magnify or zoom in on an image. It also supports zoom scrolling with mouse wheel.

2. spzoom

spzoom

 

spzoom is a simple jQuery image hover zoom plugin that displays zoomed image area next to the original image.

3. jZoom

jZoom

jZoom is a tiny jQuery plugin which provides a customizable magnifying glass effect for image zoom. The enlarged image will appear next to the original one when hovering over it.

4. MagnifierRentgen

MagnifierRentgen

MagnifierRentgen is an awesome jQuery plugin that allows an image to be zoomed with a magnifying glass effect. It also allows the use of 2 different images, one which is static and other one will be used for showing zooming effect.

5. evenZoom

evenZoom

evenZoom is a jQuery plugin that adds zoom functionality to images with a magnifying glass effect.

6. Pan.js

Pan

pan.js is a jQuery plugin used for panning and zooming in/out of a large image in a full screen interface with mouse wheel interactions.

7. ClassyLoupe

Loupe

The ClassyLoupe is a jQuery plugin which gives you the ability to add zoom on hover ability for your photos with single line of code. With Loupe you have the ability to control the zoom level and loupe size via mouse scroll which gives you the opportunity to enlarge areas that you might be interested in.

8. OKZoom

OKZoom

OKZoom is a jQuery plugin that produces a portable loupe of variable size and shape.

9. blowup.js

blowup

A jQuery plugin for customizable image magnification allows you to zoom in on a specified image.

10. Mk MagnifierMk Magnifier

A jQuery plugin that allows you to magnify and show details of a product image when you roll over it. It also support touch screen.

11. Zoomple

Zoomple

Zoomple is a very simple jQuery plugin for image magnifying. It allows you to add a zoom to your image. Zoomple comes with many forms of customization and works well in all browsers.

12. Leroy Zoom

Leroy Zoom

A lightweight and easy to use image zoom and magnifying jQuery plugin with less than 4 KB.

12 jQuery Plugins to Animate Text

Text animation is a preferred way to highlight the text and catch attention of anyone. But having a good and lightweight text animation is pretty important. So in this post, find a compiled list of 12 jQuery plugins for animating text on your website to get attention of users. This plugins are tiny, easy to use, lightweight and support various form of animations.

1. Bubble Text

BubbleText

Bubble Text is a jQuery text rotator plugin which rotates through an array of strings with a text typing & deleting animation.

2. Slogan Roulette

Slogan Roulette

Slogan Roulette is a zepto/jQuery plugin that lets you swap/animate words in your titles. It iterate through an array and then display them one by one.

3. Shuffle Text

Shuffle Text

ShuffleText is a jQuery text rotator plugin which rotates through an array of text with a “smart” shuffle transition.

4. Changethewords.js

Changethewords

Changethewords.js is a lightweight jQuery plugin which iterates through set of text elements and then animate them with various animations to rotate the text.

5. textTweener

textTweener

textTweener is a jQuery plugin to generate letter based animation tweens between different texts. With textTweener you can generate a text rotator to your page. The different texts fade nicely into each other by moving the letters to their new position.

6. AutoTextRotating

AutoTextRotating

AutoTextRotating.js is a jQuery plugin to change/rotation of text or html, single or group, automatically with a separator. This plugin offers lots of customization, support plain text as well as HTML, comes with 5 built-in transition effects and supports Animate.css for awesome CSS3 animations.

7. Morphext

Morphext

Morphext is a simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css. It can be used for creating text-based carousels, rotating small or large pieces of text one after the other, just like a slider does with images.

8. Text Rotator

Text Rotator

Text Rotator is a JQuery plugin used to rotate comma separated words/phrases with a variety of cool CSS3 animations based on animate.css.

9. Wodry

Wodry

 

Wodry.js is a simple jQuery plugin for a text flipping/rotating written in CoffeeScript. It was inspired by the Adjector.js. Wodry.js does the same things but it has new features that allow you to set animation from animations collection, set your own callback on content flipping, etc.

10. cycleText

CycleText

cycleText is a lightweight jQuery plugin which enables you to rotate through a group of text with CSS3 animation effects based on Animate.css.

11. textition

textition

Textition.js is jQuery plugin for smooth transitions between text blocks. It can be used to stylize titles, menu buttons, or any other text.

12. Crotator

Crotator

Crotator is a jQuery plugin for creating a slider or content rotator. It converts the children inside any selected element into a Slider. One can define array of timeline according to which the slider will be synced. CSS animations can be used with this plugin to enhance the contents visually.

 

Using jQuery .click() Events to Override Hover Styles on Mobile

One of the most frustrating things about optimizing a site for mobile is when certain styles or events that work perfectly fine on the desktop version don’t really translate into a touch device. Take hover styles, for example, which work great on desktops, but, due to the nature of touch devices, don’t really work at all on mobile.

So, when a link (or any other type of HTML element) that has a CSS hover effect applied to is tapped on mobile, there are many cases where the link actually has to be tapped twice in order to access the linked content. This is because the first tap will act as a hover effect. Luckily, there’s a simple jQuery script that allows the hover styles to be overridden by invoking a .click() event.

Add this script to your code and any link with a hover style applied to it should respond appropriately the first time its tapped — just make  sure that replace the broad (‘a’) selector with specific classes that apply to links with hover styles, otherwise this script will apply to every single link on your site, which could make your pages quite jumpy.

$(‘a’).on(‘click touchend’, function(e) {
      var el = $(this);
      var link = el.attr(‘href’);
      window.location = link;
   });