Archive for September, 2016

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!