10
X

Intermediate

Create a Simple Back to Top Button with jQuery

We’ve all seen those handy little “back to top” buttons, the one that usually appear at the bottom of a page once a user starts scrolling that, when clicked, will smoothly return the page back to the top position.

Screen Shot 2016-08-29 at 4.37.50 PM

Insert the following snippet into your projects to add a back to top button to your own pages. The code works by having the button (in this case it’s the element with the class .back-to-top) initially hidden, with instructions to .fade-in() once the user has scrolled past 100px. Have fun styling your button any way you like!

$(document).ready(function(){
var $backToTop = $(".back-to-top");
/* this hides the back to top button when the page first loads */
$backToTop.hide();
/* now we need to write a function that makes the back to top button appear after the user has scrolled a certain amount */
$(window).on('scroll', function() {
 if ($(this).scrollTop() > 100) { /* back to top will appear after the user scrolls 100 pixels */
 $backToTop.fadeIn();
 } else {
 $backToTop.fadeOut();
 }
});
/* this function activates a smooth scroll to the top of the page when the back to top button is clicked */
$backToTop.on('click', function(e) {
 $("html, body").animate({scrollTop: 0}, 500);
});
})

15 jQuery Rating Plugins

In this post, find a compiled list of 15 jQuery based rating plugins to create rating system on your website. These plugins can use icon fonts, images, text or your own logo to create ratings. These plugins display ratings in the form of stars, smileys, bars, like/dislike button and thumb’s up/down. These plugins can be used for getting feedback and in case of any ecommerce portal, get rating for your products.

1. RateIt

RateIt

Fast, progressive enhancement, touch support, customizable (just swap out the images, or change some CSS), unobtrusive JavaScript (using HTML5 data-* attributes), RTL support, supports as many stars as you’d like, and also any step size.

2. Bar Rating Plugin

Bar Rating Plugin

Bar Rating Plugin works by transforming a standard select field into a rating widget. The rating widget can be flexibly styled with CSS.

3. Upvote

UpVote

 

Upvote is a lightweight jQuery plugin that generates a voting widget like the one used on Stack Exchange sites.

4. Thumb.js

Thumbjs

 

Thumbs.js is a simple jQuery plugin for creating a like/dislike system with thumb icons to rate your content.

5. Star Rating Plugin

StarRating

 

Star Rating Plugin is a simple jQuery rating plugin which uses Googles Materialize Icons.

6. starr

Starrr

 

starrr is a very lightweight jQuery plugin (less than 75 lines of code) for creating a star quality rating which uses Font Awesome Icon to render the stars.

7. jQuery Emoji Ratings

jQuery Stars

Emoji Ratings is a simple, lightweight jQuery star rating plugin that uses emoji Unicode characters for rating symbols.

8. Rater

Rater

 

Rater.js is a highly customizable rating widget that supports images, utf-8 glyphs and other HTML elements.

9. jRate

jRate

 

jRate is a jQuery plugin that helps to generate RATING with various features like displaying multi-colored STARs, customize own shapes (like square, rhombus, circle, star) and show ratings horizontally or vertically.

10. Raterater

Raterater

 

Raterater is jQuery based 5 star rating widget that uses Font Awesome 4 for scalable & style-able star icons.

11. Rate Picker

Rate Picker

 

Rate Picker is a jQuery plugin for inserting a simple rating system on your webpage.

12. rateYo

rateYo

rateYo is a simple and flexible jQuery star rating plugin which uses SVG to render rating so no images required. All you need is to create a div, throw some styles, initialize and that’s it!

13. jQuery Stars

jQuery Stars

jQuery Stars.js is a jQuery plugin for generating a star rating system which can use any icon fonts.

14. RatingBar

RatingBar

ratingBar is a jQuery plugin which replaces a textual rating with a graphical rating using CSS. It’s easy to use, fully customizable and degrades gracefully. It also supports jQuery easing animations.

15. jQuery WebRating

jQuery WebRating

jQuery webRating is easy to use jQuery plugin to create a rating system. It can use stars, hearts, smiles or your own logo. It also uses cookies to limit clicks per visitor.

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.