I am trying to display a message at the bottom when someone click on checkbox.
<style>
.stick {
background-color: red;
height: 60px;
position: fixed;
width: 100%;
left: 0;
}
</style>
<div class="col-md-12" id="compare" style="stick; display:none;">
<div class="separator"></div>
<div class="alert alert-info text-md-center">
<span class="text-md-center">
<button class="btn">
My message
</span>
</div>
</div>
<script>
function showProductsCompare() {
document.getElementById('compare').style.display = "block";
}
</script>
until now, all it's correct, the message appear on the page when the code is inserted
but I tried to make a sticky message like this page https://www.homedepot.com/s/french%2520door%2520refrigerators?NCNI-5 (click on the checkbox.
I don't find example or to make that.
Thank you.
This will do the work:
.stick {
background-color: red;
height: 60px;
position: fixed;
width: 100%;
left: 0;
buttom: 0;
}
You will need to give the div a class of "stick":
<div class="col-md-12 stick" id="compare" style="stick; display:none;">
Related
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;
});
Hello I'm trying to do a notification system on my website so that one can scroll to the right on a div to dismiss it. Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.fade {
height: 300px;
width: 300px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
.container1 {width: 300px; height: 300px; overflow: auto; }
.container2{width: 2000px; }
</style>
<div class="container1">
<div class="container2">
<div>
<div class="fade">
Scroll down i will become invisible
</div>
</div>
</div>
</div>
<script>
$(window).scroll(function() {
if ($('div.container1').scrollLeft()>0)
{
$('.fade').fadeOut();
}
else
{
$('.fade').fadeIn();
}
});
</script>
The only problem is that it doesn't work. Please feel free to ask for clarification in the comments.
I am trying to slide through 2 different divs on my page with 2 buttons - next and previous.
it is basically like a setup wizard that you see while installing a software.
so here is the mark up:
<div id="container">
<div id="box1" class="box">
<button id="nxt">Next</button>
<button id="prv">Previous</button>
</div>
<div id="box2" class="box">
<button id="nxt">Next</button>
<button id="prv">Previous</button>
</div>
</div>
and here is the JQuery for both buttons:
$('#nxt').click(function() {
$(this).parent(".box").animate({left: '-150%'}, 500 );
$(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('#prv').click(function() {
$(this).parent(".box").animate({left: '150%'}, 500 );
$(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
I am able to do perform the "next" operation but not the "previous" one, there is a mistake with jquery, please help me with that.
you can also have a glance at this fiddle
Thank You
You must not use same ids for multiple elements. Use class attribute instead, see below markup and jquery;
HTML: Change id to class for previous and next buttons
<div id="container">
<div id="box1" class="box">
<button class="nxt">Next</button>
<button class="prv">Previous</button>
</div>
<div id="box2" class="box">
<button class="nxt">Next</button>
<button class="prv">Previous</button>
</div>
</div>
jQuery: make changes in jquery selector for class attribute and keep rest of the code as it is.
$('.nxt').click(function() {
$(this).parent(".box").animate({left: '-150%'}, 500 );
$(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('.prv').click(function() {
$(this).parent(".box").animate({left: '150%'}, 500 );
$(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
JSFiddle Demo
you have just missed .animate({left: '-50%'} in $('#prv').click(function(){}
JSFiddle link
You use same id for buttons in first div and in second div. It is not right and that's the source of problem. Check out this fiddle to see right version.
$('#nxt').click(function() {
$(this).parent(".box").animate({left: '-150%'}, 500 );
$(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('#prv1').click(function() {
$(this).parent(".box").animate({left: '150%'}, 500 );
$(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
background-color: white;
height: 500px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;
top: 100px;
margin-left: -25%;
}
#box2 {
left: 150%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="box1" class="box">
<button id="nxt">Next</button>
<button id="prv">Previous</button>
</div>
<div id="box2" class="box">
<button id="nxt1">Next</button>
<button id="prv1">Previous</button>
</div>
</div>
I am trying to create a push animation, where one element 'pushes' the other.
I have 4 divs in a parent div 2 are boxes that I want the push animation happening on, and 2 'button' divs. The wrapper div doesn't have a set height.
The problem is, the second box div gets placed under the first box div. How can I get them to be right and left of each other, not one on top of the other.
Also, I need a bit of help with the animation. How can I get one box div to 'push' the other?
This is what I mean by 'push' effect:
JSFiddle
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#leftBox').animate({
left: '-200px'
});
$('#rightBox').animate({
left: '-200px'
});
});
$('#rightBtn').click(function() {
$('#leftBox').animate({
left: '200px'
});
$('#rightBox').animate({
left: '200px'
});
});
});
#wrapper {
width: 400px;
background-color: chocolate;
margin: auto;
overflow: hidden;
}
#leftBox,
#rightBox {
width: 400px;
height: 100px;
display: inline-block;
position: relative;
}
#rightBox {
left: 400px;
}
#leftBtn,
#rightBtn {
width: 200px;
height: 30px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div><div id="rightBox" style="background-color: darkkhaki;">Bye Bye
</div><div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div><div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
You can use display:inline-block on #leftBox & #rightBox to place them side by side. For animation, wrap them with another div(#wrapper) & change the position of #wrapper on click .
Example:
JSFiddle
HTML:
<div id="wrapper">
<div id="slider">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div>
<div id="rightBox" style="background-color: darkkhaki;">Bye Bye
</div>
</div>
<div id="buttons">
<div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div>
<div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
</div>
JS:
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#slider').animate({
left: '-400px'
});
});
$('#rightBtn').click(function() {
$('#slider').animate({
left: '0px'
});
});
});
i have the following jquery code:
$('#menu1').click(function(e){
$('#menu1').addClass('fullscreen');
if($('#menu1').hasClass('fullscreen')){
$('.barra').removeClass('hidden');
}
});
$('#close').click(function(e){
$('#menu1').removeClass('fullscreen').animate({
width: '200px',
height: '200px'
}, 2500);
});
HTML
<section>
<div class="content">
<div id="menu1">
<div class="blackbar hidden">
<img src="img/cross.png" width="40" height="40" alt="fechar"/>
</div>
</div>
<div id="menu2">
<!-- quadrado 2 -->
</div>
<div id="menu3">
<!-- quadrado 3 -->
</div>
<div id="menu4">
<!-- quadrado 4 -->
</div>
</div>
</section>
I want the same for all divs, called "menu" (from 1 to 4), without having to copy the same code and having too many lines, for the same procedure.
All div's will have "$('#menu').addClass('fullscreen');" and "$('.barra').removeClass('hidden');". Any help or guidance?
How to achieve this?
CSS
section{ //"menu" alignment center
position: absolute;
width: 100%;
height: 100%;
top: 50%;
bottom: 50%;
text-align: center;
}
.content{
position: relative;
display: inline-block;
width: 420px;
height: 200px;
margin-top: 9%;
}
#menu1, #menu2, #menu3, #menu4{
width: 200px;
height: 200px;
}
#menu1.fullscreen{
top: 0;
left: 0;
z-index: 9;
position: fixed;
width: 100%;
height: 100%;
background: #131313;
color: #fff;
}
I usually do this by using a class selector.
Add a class "menu" to echo menu element:
<div id="menu2" class="menu">
<!-- quadrado 2 -->
</div>
Then Select it like so:
$('.menu').click(function(e){
$(this).addClass('fullscreen');
if($(this).hasClass('fullscreen')){
$('.barra').removeClass('hidden');
}
});
The jQuery selector $(this) refers to the clicked element.
Just finished your code, I improved it a bit by adding one or two things. So here it goes .. while you did not provide a css or anything I styled it fast to be able to get the job done.
CSS
<style>
div[id^="menu"]{
background: #333;
margin: 30px;
float: left;
width: 100px;
height: 80px;
}
.close {
display: none;
color: #fff;
width: 100%;
height: 15px;
background: #4779ff;
}
.ThisElementIsClicked .close {
display: block;
}
</style>
HTML
<div class="content">
<div id="menu1" class="menu-box">
<div class="blackbar hidden">
<img src="img/cross.png" width="40" height="40" alt="fechar"/>
</div>
</div>
<div id="menu2" class="menu-box">
<div class="blackbar hidden">
<img src="img/cross.png" width="40" height="40" alt="fechar"/>
</div>
</div>
<div id="menu3" class="menu-box">
<div class="blackbar hidden">
<img src="img/cross.png" width="40" height="40" alt="fechar"/>
</div>
</div>
<div id="menu4" class="menu-box">
<div class="blackbar hidden">
<img src="img/cross.png" width="40" height="40" alt="fechar"/>
</div>
</div>
</div>
jQuery WITH COMMENTS - go below for the no comments version
$(document).ready(function(){
//focus on all elements that have an ID starting with the string 'menu'
//you do that adding '^' before the '=' sign.
var targetThis = $('div[id^="menu"]');
//test it yourself to see it's working
//uncomment this line below to display the info into your console
//console.log(targetThis);
targetThis.on('click', function(){
//set a variable with the element you clicked on
var thisEl = $(this),
thisID = thisEl.attr('id').substr(4);
if(!thisEl.hasClass('ThisElementIsClicked'))
{
//if you want all other menu boxes to close while
//the current clicked menu box is clicked just remove the class for
//all elements that have the ID starting with the string 'menu'
//that is the first variable we created before the click event occured
//uncomment the line below to see the results
//targetThis.removeClass('ThisElementIsClicked');
//add the class to the current clicked menu box
thisEl.addClass('ThisElementIsClicked');
//remove the hidden class
//but this should not be made with jQuery but with CSS
//just style the 'hidden' class based on the parent class that we added on click 'ThisElementIsClicked'
$('#menu' + thisID).children('.blackbar').removeClass('hidden');
//now while this box is opened
//add inside this block of code the script for
//the closing button
var closeBtn = thisEl.find('.close');
closeBtn.on('click', function(e){
e.stopPropagation();
$(this).parents('#menu' + thisID).removeClass('ThisElementIsClicked');
$(this).parents('#menu' + thisID).children('.blackbar').addClass('hidden');
});
}
});
});
jQuery NO COMMENTS
$(document).ready(function(){
var targetThis = $('div[id^="menu"]');
targetThis.on('click', function(){
var thisEl = $(this),
thisID = thisEl.attr('id').substr(4);
if(!thisEl.hasClass('ThisElementIsClicked'))
{
//targetThis.removeClass('ThisElementIsClicked');
thisEl.addClass('ThisElementIsClicked');
$('#menu' + thisID).children('.blackbar').removeClass('hidden');
var closeBtn = thisEl.find('.close');
closeBtn.on('click', function(e){
e.stopPropagation();
$(this).parents('#menu' + thisID).removeClass('ThisElementIsClicked');
$(this).parents('#menu' + thisID).children('.blackbar').addClass('hidden');
});
}
});
});
Hope this helps you ... and by the way, you have the option to only display one box at the time, when you click a box all other boxes close. Read the comments.