Develop Reference

jQuery reset star-rating.js

I am using this plugin https://danielupshaw.com/jquery-star-rating/
I want to reset my form. But how can I reset these stars??
$("#btn-reset").on('click', function() {
//some other inputs reset
$('#starrating').star_rating.remove();
$('#starrating').star_rating.reload();
}
Please help on how to reset these stars to zero or null.
Here is the full code.
$("#btn-reset").on('click', function() {
$('#starrating').star_rating.reload();
});
jQuery(function($) {
$('#starrating').star_rating({
click: function(clicked_rating, event) {
event.preventDefault();
$('input[name=\'rating\']').val(clicked_rating);
this.rating(clicked_rating);
}
});
});

I don't know if this is the best approach, since I'm not familiar with this library...
But I achieved a reset like this:
$(document).ready(function(){
$('.rating').star_rating();
$("#resetStars").on("click",function(){
$(".rating").remove();
$('.star-rating').replaceWith("<span class='rating'>0/10 stars</span>");
$(".rating").text("0/10").star_rating();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://danielupshaw.com/jquery-star-rating/jquery.star-rating.js"></script>
<h1>This is a good script!</h1>
<span class="rating">9.5/10 stars</span><br>
<br>
<br>
<button id="resetStars">Reset stars</button>

I'm not familiar with the plugin, but looking at the link you provided, can't you just update the text inside of the element to reflect an empty or zero rating? Something like:
$("#btn-reset").on('click', function() {
$('#starrating').text('0/5').star_rating();
}

It looks like all you need to do is set the content to 0. Then re initialize the method.
$("#starrating").html("0");
$("#starrating").star_rating();

You could try something like this; an attempt to set default blank stars on initial page load, or Click.
$(document).ready(function() {
$('i').addClass('fa-star-o');
});
Then refresh page to rest:
$( ".reset" ).click(function() {
location.reload();
});
If you don't want to refresh page, you could try:
$( ".reset" ).click(function() {
$('i').addClass('fa-star-o');
});
You may have to re-initiate your click feature on the star with similar jQuery to re add the appropriate Class when needed.
If this doesn't help or work; could you create a https://jsfiddle.net/ to fully replicate your issue; and then we could solve it. If it were me; I'd find a better plugin to use or just write it from scratch at that point.

A bit another approach by re-rendering your rating stars from scratch using custom renderRating function.
HTML:
<div class="rating-stars"></div>
<button class="reset-rating">Reset rating</button>
JS:
var defaultRating = "0/5";
renderRating("3/5");
function renderRating(rating) {
var ratingEl = $('<span />').addClass('rating');
var ratingStr = rating || defaultRating;
ratingEl.text(ratingStr);
$('.rating-stars').html(ratingEl);
ratingEl.star_rating();
}
$('.reset-rating').on('click', function() {
renderRating();
})
Preview on JSFiddle

This should reset it to 0:
$('#starrating').star_rating('rating', 0);
Here's the format to call the public methods:
$('#starrating').star_rating('method_name');
Should your click event be inside the document ready? If it is outside document ready, that can sometimes cause issue. I hope this helps :)

Facing issue with Mouse Event

I am new to web development, so I am taking a Pluralsight course called "Building a Web App with ASP.NET Core RC1, MVC 6, EF7 & AngularJS" by Shawn Wildermuth. In his jQuery module, Shawn has this piece of code that works flawlessly for him:
var main = $("#main");
main.on("mouseenter", function() {
main.style = "background-color: #888;";
});
main.on("mouseleave", function() {
main.style = "";
});
I have a div with id="main" on my index.html page, js file is referenced, other jQuery functionality in the same file works, I just can't get this piece of code to work. I know it is not significant, but at this point it is personal. Any suggestions are helpful. Thank you!

As style is a property of native DOM element and main is a jQuery object. You can use .css() and .removeAttr() jQuery method to get the desired result.
var main = $("#main");
main.on("mouseenter", function() {
main.css("background-color": "#888");
});
main.on("mouseleave", function() {
main.removeAttr('style');
});

You can't access the style property like this. Try the following:
var main = $("#main");
main.mouseenter(function() {
main.css("background-color", "#888");
});
main.mouseleave(function() {
main.css("background-color", "none");
});

Try this:
var main = document.getElementById("main");
main.onmouseenter=function(){
main.setAttribute('style', 'background-color:#888;');
};
main.onmouseleave=function(){
main.removeAttribute("style")
};

Know which user created div was clicked

I apologise if my explanation is hard to understand.
Using This Code:
names.push(newName);
var strName = newName;
var newName = document.createElement('p')
newName.setAttribute('id', newName);
document.body.appendChild(newName);
newName.innerText = strName;
$(newName).css('position','absolute')
$(newName).css('top', y);
$(newName).css('left', x);
updateXY();
The user creates a new div (with a user-inputted name) which works fine.
my problem is that i don't know how to know when one of these user-crated-and-named divs is clicked.
For example:
if the user created 2 divs, 'hello' and 'goodbye' i couldnt just use $('#hello').click(function() {}); etc. Because i wouldnt know that the user would've chose to create the div entitled 'hello'
Furthermore, the array names has all of the names of all of the divs in - if this is any help to anybody. Thankyou, and any help is appreciated

Simply add the event listener to the element as you did when styling it:
$(newName).on("click",function(){
console.log("element "+$(this).text()+" clicked");
});
JSFiddle
Or, with JS's addEventListener():
newName.addEventListener("click",function(){});
JSFiddle
Or, the old way for older browsers, onclick:
newName.onclick = function(){};
JSFiddle

You could do something like this
$(newName).on("click",function(e){
// the variable 'e' is the event of click, if we do e.toElement, we get to know who the element clicked is
var $thisDiv = $(e.toElement);
// do something with $thisDiv
});

After you create a div element, you need to initialize 'click' event on the div
<a class="js-create-div" href="#">Create Div</a>
$(document).ready(function(){
function init(){
var newUserDiv = $(".js-user-div").not(".js-inited");
newUserDiv.on("click",function(){
alert($(this).html());
});
newUserDiv.addClass("js-inited");
}
$(".js-create-div").click(function(){
$("#wrapper").append("<div class='js-user-div'>"+Math.random()+"</div>");
init();
});
});
https://jsfiddle.net/ema0nazs/

Using $(this) instead $('.article') in this code didn't work?

var main = function(){
$('.article').click(function(){
//$('.article').removeClass('current');
$(this).removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
$('.article').dblclick(function(){
//$('.description').hide();
$(this).children('.description').hide();
});
};
$(document).ready(main);
This code is make a table arcodition like this http://www.codecademy.com/courses/web-beginner-en-4hxyb/0/5?content_from=make-an-interactive-website%3Ajquery-events click fullcreen you see that using $(this).removeClass('current') instead $('.article').removeClass('current'). this keyword that reference to the 'article' class why using like that it didn't reference to 'article' class, must using '.artilce'. Can someone explain it, thanks!

here you have a simplified code showing that it works
var main = function(){
$('.article').click(function(){
// below will change all with class article to green
// $('.article').addClass('green')
// with this it only changes the clicked one to green
//$(this).addClass('green');
// below will remove red-class from clicked .article
//$(this).removeClass('red');
//below will remove red-class from all elements with .article
$('.article').removeClass('red');
});
}; $(document).ready(main);
http://jsfiddle.net/tgLckfgz/2/

jQuery slide changing with index and fadeout -- jumpiness

I am working on a jQuery slideshow plugin. One of my methods involves switching back and forth between pictures. I have been pretty successful in creating it, here is an isolated case with the code thus far for the particular method:
var images = $("#simpleslides").children("img");
$(".slideButtons ul li").on("click", "a", function() {
var anchorIndex = $(this).parent().index();
var $activeSlide = $("#simpleslides img:visible");
var $targetSlide = $(images[anchorIndex]);
if($activeSlide.attr("src") == $targetSlide.attr("src") || $targetSlide.is(":animated")) {
return false;
} else {
$activeSlide.css({ "z-index" : 0 });
$targetSlide.css({ "z-index" : 1 });
$targetSlide.stop().fadeIn("slow", function() {
$activeSlide.hide();
});
}
});
Here is a fiddle to see it in working action: http://jsfiddle.net/ase3E/
For the most part, this works as you would expect it to. When a user clicks on the corresponding number, it fades in the picture.
However, I am running into some jumpiness and occasionally a complete hide of the slides when I am clicking around quickly. If you play with the fiddle, you will see what I am referring to Try clicking around on each image to see.
I have adopted stop which I thought would fix the problem but has not. I have put the hide method after the fadeIn callback, but that has also not helped the situation.
What am I doing wrong here??

LIVE DEMO :)
var images = $("#simpleslides").find("img");
$(".slideButtons ul").on("click", "li", function(e) {
e.preventDefault();
var i = $(this).index();
images.eq(i).stop().fadeTo(500,1).siblings('img').fadeTo(500,0);
});