10
X

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.

Using jQuery to Access iFrame Elements

Most developers will probably be able to tell you about how much they dislike working with iFrames. The content within the iFrames can’t be accessed with CSS, so if the frame doesn’t work with your site’s design, if the sizing is off, if you’d like to change the positioning of the content…you’re mostly out of luck, unless you have access to the server that hosts whatever is being embedded with the frame and it isn’t a problem to change the source material. However, it’s also possible to use a really simple jQuery to access the elements within the iFrame. Check it out below:

$(document).ready(function(){
	var iFrameDOM = $("iframe#frameID").contents();

	iFrameDOM.find(".page").css("background-color", "#fff");
});

In the example above, the iFrame is selected, and then once the selection has been made any element within the iFrame can be accessed and changed using the .find() method. You can use jQuery to add jQuery effects to your iFrame elements, to change the CSS rules, or even to add content. Above, the script is used to change the background color of the .page element within the frame to white. Use the script for yourself and save yourself a headache next time you’re working with an iFrame!

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);
});

How to Disable Right Click Using jQuery

There are many reasons a developer may want to disable right-click on their websites. While it’s not always considered a best practice, it’s definitely doable and can actually be achieved quite easily. With jQuery it’s really simple to disable right-click on your site. All you need to do is add this snippet to your scripts:

$(document).ready(function(){
 $(document).bind("contextmenu",function(e){
   return false;
 });
});

These few lines of code will completely block your user from being able to use right-click on your site.