Develop Reference

10 stars rating system with JQuery

Here is the fiddle: https://jsfiddle.net/0yvkuL29/
I want to use click instead of hover. I've tried with .on("click"). But it works just to put the .rating_over and I can't remove the class. I want to create the rating system to work with javascript/ jquery. I don't need to work with font-awesome.
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
.ratings {
overflow: visible;
padding: 10px;
position: relative;
width: 100%;
text-align: center;
}
.ratings_stars {
background: url('https://maxcdn.icons8.com/Share/icon/Messaging//star1600.png') no-repeat;
display: inline-block;
height: 70px;
padding: 2px;
width: 7%;
background-size: 100%;
}
.ratings_vote {
background: url('') no-repeat;
}
.ratings_over {
background: url('http://www.fancyicons.com/download/?id=3343&t=png&s=256') no-repeat;
width: 7%;
background-size: 100%;
}
.total_votes {
background: #eaeaea;
top: 58px;
left: 0;
padding: 5px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-12 no-padding">
<div id="rating" class="ratings no-padding">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="star_6 ratings_stars"></div>
<div class="star_7 ratings_stars"></div>
<div class="star_8 ratings_stars"></div>
<div class="star_9 ratings_stars"></div>
<div class="star_10 ratings_stars"></div>
</div>
</div>
</div>
<input type="text">
EDIT
//Rate and Review
$('.ratings_stars').on('mouseover',function(){
$('.ratings_stars').on('mouseout',mouseout);
$(this).addClass('ratings_over');
$(this).prevAll('.ratings_stars').addClass('ratings_over');
});
mouseout=function(){
$(this).removeClass('ratings_over');
$(this).prevAll('.ratings_stars').removeClass('ratings_over');
};
$('.ratings_stars').on('mouseout',mouseout);
$('.ratings_stars').click(function(){
$('.ratings_stars').off('mouseout');
});
when I click on the 10th star, all stars become yellow which is the right behaviour. Now when I click on the first star, the rest of the stars don't turn black and I need this to be implemented through onclick

Your fiddle tells what is wrong: The method andSelf is unknown. You can adapt the JavaScript to something like this:
var clicked=false;
var marked=0;
mouseout=function(){
console.log(clicked+' '+marked)
$(this).removeClass('ratings_over');
$(this).prevAll('.ratings_stars').removeClass('ratings_over');
if(clicked){
$('.ratings_stars').slice(0,marked).addClass('ratings_over');
}
};
mouseover=function(){
$('.ratings_stars').on('mouseout',mouseout);
$('.ratings_over').removeClass('ratings_over');
$(this).addClass('ratings_over');
$(this).prevAll('.ratings_stars').addClass('ratings_over');
};
$('.ratings_stars').on('mouseout',mouseout);
$('.ratings_stars').on('mouseover',mouseover);
$('.ratings_stars').click(function(){
clicked=true;
marked=$('.ratings_over').length;
});

Box visible on hover then staying visible after moving mouse to another box

I am making sort of a drop down list but more of a button, and i needs to be able to look good. I have almost got every thing I need but when i move the mouse onto the box that appears (drop down list), it disapears. This is what I have so far;
html
<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
<div id="box1"></div>
<div id="content1">content here</div>
<div id="box2"></div>
<div id="content2">content here</div>
</div>
css
#box {
position: absolute;
width: 10vw;
height: 10vw;
background-color: blue;
}
#content {
position: absolute;
left: 11vw;
width: 10vw;
height: 10vw;
background-color: red;
display: none;
}
jquery
$("#box").hover(
function() {
$("#content").slideDown(); //.show();
},
function() {
$("#content").fadeOut(); //hide();
}
);
$("#content").hover(
function() {
$("#content").show(); //.show();
},
function() {
$("#content").fadeOut(); //hide();
}
);
Anything I am doing wrong, better ways to do this or a link to an existing question that already answers this would be very much appreciated. Thanks!

Here is exactly what you wanted.
$("#box, #content").on("mouseenter", function() {
$("#content").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content").is(":hover"))
$("#content").fadeOut(); //hide();
});
https://jsfiddle.net/kvbvLy4d/

You could also achieve this without any Javascript / JQuery by animating the height of the content with CSS.
#box {
position: absolute;
width: 10vw;
height: 10vw;
background-color: blue;
}
#box:hover + #content, #content:hover {
height: 10vw;
}
#content {
position: absolute;
left: 11vw;
width: 10vw;
height: 0;
background-color: red;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}
<div id="buttons">
<div id="box"></div>
<div id="content">content</div>
<div id="box1"></div>
<div id="content1">content</div>
<div id="box2"></div>
<div id="content2">content</div>
</div>

fullpage.js slider. problems with absolute blocks. Chrome

I have a problem with slider controls and any block with position: absolute on slider section.
$(document).ready(function() {
$('#fullpage').fullpage();
});
.slide {
text-align: center
}
.section {
text-align: center;
}
.absolute {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
text-align: center;
background: red;
z-index: 2;
}
.slide1 {
background: #cccccc;
}
.slide2 {
background: #C3C3C3;
}
.section2 {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.fullpage/2.5.0/jquery.fullPage.min.css" />
<div id="fullpage">
<div class="section section1">
<div class="absolute">position: absolute</div>
<div class="slide slide1"> Slide 1 </div>
<div class="slide slide2"> Slide 2 </div>
</div>
<div class="section section2">Some section</div>
</div>
If you slide down and up - everything is ok. But if you use slider and then will slide down and up. The page will show without slider controls(and absolute block).
I can't find why it is happening. Problems occurs only in Chrome and Opera.
UPDATES:
Here is jsfiddle for example: https://jsfiddle.net/nfL5w9yL/1/

Fullpage adds z-index:1 to fp-slides
Had the same issue recently, i don't know if you found a solution, but my solution was to remove z-index from fp-slides!
the weird part is that in my case the navigation buttons were not affected, only my position absolute div

Multiple divs fade in/ out on scroll effect not working

I have a 3 divs which are relatively positioned on the right side of my page inside an absolute parent div. I want them fade in and out as they scroll outside of they view (parent div). The fade feature was working before I set my parent divs positioning. How do I fix this? Thanks in advance for any help!
Here is a Codepen
<div class="container">
<div class="row">
<div class="col-sm-6" id="left_content">
<img src="buffalo.png">
</div>
<div class="col-sm-6" id="content">
<div class="right_content" id="box1">
<h4>Hi. My name is Jack.</h4>
<p>Scroll down for more info</p>
</div>
<div class="right_content" id="box2">
<h4>I'm a 21 year old developer living in Buffalo, Ny.</h4>
</div>
<div class="right_content" id="box3">
<h4>Hi. My name is Jack.</h4>
<p>Scroll down for more info</p>
</div>
</div>
</div>
JS:
$(window).scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 20) {
$(this).stop().fadeTo(100, .5);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
CSS:
#left_content {
position: fixed;
}
.right_content {
position: relative;
}
::-webkit-scrollbar {
display: none;
}
#content {
width: 45%;
height: 400px;
overflow: scroll;
position: absolute;
right: 0;
}
h4, p {
margin-left: 10%;
}
#box1 {
top: 250px;
}
#box2 {
top: 650px;
}
#box3 {
top: 1050px;
margin-bottom: 600px;
}

Your .scroll() is not on the proper area. Because you are actually scrolling your <div id="content"> and not the window itself, so adjust your script like so:
<script type="text/javascript">
$('#content').scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 20) {
$(this).stop().fadeTo(100, 0.5);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
</script>

Fade in div on mouseover

This is a followup to my earlier question, Fade in/out js mouseover event.
I am looking to incorporate a div mouseover effect on a small menu on my page. My previous question solved the issue, but I had not incorporated the page layout into the function, which has now stopped it from working.
My basic code is:
<style type="text/css">
.hidden{
display:none;
}
#container {
margin: 0%;
padding: 0;
width: 100%;
background-color: #222222;
}
#left, #right {
float: left;
margin: 0% 0 0% 0%;
padding: 0%;
background-color: #000;
}
#right {
float: right;
margin: 0% 0% 0% 0;
}
.clear {
height: 0;
font-size: 1px;
margin: 0;
padding: 0;
line-height: 0;
clear: both;
}
</style>
<script type="text/javascript">
oldSelected = "home"
$ (document).ready(function(){
$ ("#products img").mouseover(function(){
$ (".description").stop(true, true);
var newSelected = $(this).attr("alt");
$ ("#" + oldSelected).fadeOut('normal',function(){
$ ("#" + newSelected).fadeIn();
});
oldSelected = newSelected
});
});
</script>
<body>
<div id="container" style="width: 974px; height: 200px;">
<div id="left" style="width: 200px; height: 200px;">
<div id="products" >
<img src="home.png" alt="home" />
<img src="services.png" alt="services" />
<img src="contact.png" alt="contact" />
</div>
</div>
<div id="right" style="width: 760px; height: 200px;">
<div class="description" id="home">
.. content ..
</div>
<div class="description" id="services">
.. content ..
</div>
<div class="description" id="contact">
.. content ..
</div>
</div>
</div>
I assume the mouseover effect has stopped working due to the products and description divs being relocated under new divs.
How do I go about adjusting the code to get the function working again under this layout? Would it work in a table layout instead?

You can try .slideDown and .slideUp
or .show() .hide() with duration