Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am trying to display a bottom message on listing product when someone click on one or several checkbox. But I don't see nothing inside my page.
Code:
<style>
.box{
color: #eee;
padding: 20px;
display: none;
margin-top: 20px;
}
.green{ background: #228B22; }
label{ margin-right: 15px; }
</style>
// loop to display the products with the checkbox
while($Qlisting->fetch()) {
...
echo '<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>';
...
}
<div class="green" style="display:none;">Your message</div>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
</script>
Toggle() is used to interval between display:inline and display:none;
You are currently trying to toggle elements with no matching classes to your selector. ('.' + inputValue)
Create the the message you want to display inside a div with the same class as the corresponding checkbox value.
Example:
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
<div class="green" style="display:none;">Your message</div>
Related
I'm working on my portfolio website and need some help with a bit jQuery code. I want a parent class to react to the checkbox in it. In this case, the background color needs to change to #000 when the checkbox is active/checked.
I don't know what line of code to add to make my class react to the checkbox. I've searched on google on how to do it but didn't get much wiser. It's probably a really small thing but I would hope to get some help from you guys.
$("input[type='checkbox']").change(function() {
if ($(this).is(":checked")) {
$(this).parent();
} else {
$(this).parent();
}
});
.product {
background-color: #ccc;
/* needs to change to #000 when active */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="product">
<input class="check" type="checkbox" name="logo"> Logo
</div>
Basically you create a second (more specific) css selector for the active state, then you use your jQuery to toggle that state/class based on the checkbox value.
https://jsbin.com/betafupogu/1/edit?html,css,js,output
CSS
.product {
background-color: #ccc; /* needs to change to #000 when active */
}
.product.active {
background-color: #000;
}
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("input[type='checkbox']").change(function(){
if($(this).is(":checked")){
$(this).parent().addClass('active');
}else{
$(this).parent().removeClass('active');
}
});
</script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to create a feature using either jQuery or vanilla JS. My feature should be able to show/hide content on click. The initial task is easy enough and I'm able to show my hidden div using jQuery toggle, but I would also like to be able to switch my FA icon as well as the link text from 'Show content' to 'Hide content'.
Use
.toggleClass(`.fa-check .fa-cross')
add one as the default.
Toggle text can be handled by either not using .toggle (using .show/.hide) instead or by including a span for each text and toggling those. Or by having 2 buttons and toggling those.
Example snippet (needs fa icons)
$(".toggle").click(function() {
$(this).toggleClass("collapsed expanded")
$(this).find("i").toggleClass("fa-chevron-up fa-chevron-down")
});
.wrapper { border: 1px solid #CCC; width: 200px; }
.wrapper .details { border-top: 1px solid #CCC; }
.wrapper .toggle.collapsed > div.details { display:none; }
.wrapper .toggle.expanded > .more { display:none; }
.wrapper .toggle.collapsed > .less { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
<div class='toggle collapsed'><i class='fa fa-chevron-up'></i>
<div class='more'>more</div><div class='less'>less</div>
<div class='details'>details</div>
</div>
</div>
You can apply the same logic for the text to the icon as well if preferred (include 2 <i class='fa...) and then use css to show/hide them based on the class on the parent.
You can also add some css transition so it's less jumpy, or you can use $(this).find(".more,.less").slideToggle() instead of just toggle to add an effect.
There are dozens of ways to do it. Below is a step-by-step tutorial.
This should work, assuming you have already included jQuery.
<img id="imgtog" onclick="toggle()" src="someimg1.png">
<div id="content" hidden="">content</div>
<script>
var tog = false;
function toggle()
{
if(tog == false)
{
$('#content').removeAttr('hidden');
$('#imgtog').attr('src', 'otherimage2.png');
tog = true;
}
else
{
$('#content').attr('hidden', '');
$('#imgtog').attr('src', 'someimg1.png');
tog = false;
}
}
</script>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
so im looking for a solution to use some buttons as 'radio buttons' within a form, imagine you click (only one at once may be pressed) one of the buttons below, it gets a new css tag, maybe background colour or something so you know you have clicked it, and also becomes tagged within a form as selected.
Basically i have a page made up of lots of the below, and its essentially a form, but i need to use buttons as 'multi choice' and also set a state that activates when you click a button, and remains throughout the page.
open to javascript obviously as i think thats what ill need.
You can do with only html and css:
.input-radio{
display: inline-block;
margin-right: 10px;
margin-top: 30px;
}
input[type=radio] {
display: none;
}
input[type=radio] + label {
padding: 20px;
border-radius: 40px;
border: 1px solid #ddd;
}
input[type=radio] + label:hover {
border: 1px solid red;
}
input[type=radio]:checked + label {
border: 1px solid red;
}
<div class="input-radio"><input type="radio" id="male" name="gender" value="male" checked> <label for="male">male</label></div>
<div class="input-radio"><input type="radio" id="female" name="gender" value="female"> <label for="female">Icecrea</label></div>
<div class="input-radio"><input type="radio" name="gender" id="other" value="other"> <label for="other">Vanilla</label></div>
Can you control the selection effect with jQuery? Perhaps you can wrap a div around the buttons like this:
<div class="button-div">
<a class="btn-1">Learn More</a>
<a class="btn-2">I want this</a>
<a class="btn-3">No thanks</a>
</div>
Then have an onclick function something like this?
$('.button-div a').on('click', function(){
var getButton = $(this).attr('class');
$('.button-div a').removeClass('active');
$('.button-div a.' + getButton).addClass('active');
}
Then just have a style on the active class
.button-div .active {
background: red;
}
Only rough but hopefully helps?
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Improve this question
i'm looking for a script, wich changes the background image of an div container when spefic numbers are into the input field.
I build this creditcard layout here
inside of it is a <input type="text" name="" class="credit-input"> with the class credit-input.
What i'm looking for is, that if the first three numbers inside the value generate a different background.
So for example, when the value starts with 411, there should be a background image of an amex card, or when it starts with 311, there should be mastercards and so on.
there would be in total 4 different backgrounds.
i'm not so good in js, so i hope that i could find here some help from ya.
That's how my html looks at the moment.The class="jp-front" includes the whole style at the moment the
<div class="jp-front">
<input type="text" name="" class="credit-input">
</div>
thx for any help
Try this :
$(document).ready(function() {
$(".credit-input").on("input",function(){
var value = $(this).val();
if (value == "411")
$(".jp-front").css({backgroundImage:"url(http://www.lowestrates.ca/newcontent/img/creditcards/Gold_Rewards_Card_chip_467x293.png)"});
else if (value == "311")
$(".jp-front").css({backgroundImage:"url(https://www.bmo.com/img/main/credit-cards/large/rewards-card.jpg)"});
})
})
Final code :
$(document).ready(function() {
$(".credit-input").on("input",function(){
var value = $(this).val();
if (value == "411")
$(".jp-front").css({backgroundImage:"url(http://www.lowestrates.ca/newcontent/img/creditcards/Gold_Rewards_Card_chip_467x293.png)"});
else if (value == "311")
$(".jp-front").css({backgroundImage:"url(https://www.bmo.com/img/main/credit-cards/large/rewards-card.jpg)"});
})
})
.jp-front {
width: 300px;
height: 150px;
border: 1px solid #000;
background-size:100% 100%;
background-repeat: no-repeat;
padding: 20px 0px 0px 20px;
}
<div class="jp-front">
<input type="text" name="" class="credit-input">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Not overly complex, but this should do the trick:
$("input[name='card']").keyup( function() {
img = 'blank.png';
switch($(this).val().substring(0, 3)) {
case '111':
img = '111.png';
break;
case '222':
img = '222.png';
break;
}
$('.img').css('background', 'url(' + img + ') no-repeat center center');
});
Example: https://jsfiddle.net/6hhtgnep/
If you haven't JQuery
Add id="..." and onchange="" onkeypress="" onkeydown=""
<div class="jp-front" id="card-div-id">
<input id="card-input-field-id" type="text" name="" onchange="onCodeInput()" onkeypress="onCodeInput()" onkeydown="onCodeInput()" class="credit-input">
</div>
Javascript:
<script>
function onCodeInput(){
var card_number = document.getElementById('card-input-field-id').value;
if (str.substr(0, 4) == '5466') {
document.getElementById('card-div-id').style.backgroundImage="url(images/mastercard.jpg)"
} else { /* others */ }
}
</script>
Your input element will be -
<div class="jp-front">
<input type="text" name="card-number" class="credit-input">
</div>
Let your image element be
<img src="default.jpg" id="card-img">
Your JavaScript will be like this -
$('input[name=card-number]').keyup(function() {
var inp = $('input[name=search]').val();
if (inp === '311') {
$("#card-img").attr("src","mastercards.jpg");
}
else if (inp === '411') {
$("#card-img").attr("src","amex.jpg");
}
else if (inp === '') {
$("#card-img").attr("src","default.jpg");
}
});
Thank You!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
JS code:
function showCaption() {
var captionVis = $('.grey-box-caption-text').css('display');
if(captionVis = "none") {
$('.grey-box-caption-text').width(0);
$(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);}
} else {
$(this).find('.grey-box-caption-text').animate({'width': '0'},750,
function(){$(this).hide();});
}
};
$('.caption-container').click(function() {
showCaption();
return false;
}
);
HTML code:
<div class="one-half column home-three-img">
<div class="caption-container">
<div class="grey-box-caption">
</div>
<div class="grey-box-caption-text">This is a caption test - Hopefully this works
</div>
</div>
<img src="images/3.jpg">
</div>
This won't work and I'm a JS noob. Please help.
I'm trying to get the caption section to slide out from the left to the right. When i click on the parent container nothing happens. I'm expecting the caption to shoot out and hide when I click again.
I have Jquery loaded properly and have a document.ready function that works.
Link to the WIP http://clients.pivotdesign.com/dev/annual_report_2014/index.html
A big problem is that the value of this won't be set in your "showCaption" function. Add a return false; to the end of that function:
function showCaption(){
var captionVis = $('.grey-box-caption-text').css('display');
if (captionVis == "none") {
$('.grey-box-caption-text').width(0);
$(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);
}
else {
$(this).find('.grey-box-caption-text').animate({'width': '0'},750, function(){
$(this).hide();
});
}
};
and then change the handler assignment to:
$('.caption-container').click(showCaption);
Also note that your test in that if statement was incorrect: use == or === for comparison.
I modified the CodePen from Pointy a bit and it should do the same with less code.
Why the gray box increases the height here in the SO demo, I don't know. In this CodePen it works with-out this "bug".
function showCaption() {
var $graybox = $('.grey-box-caption-text');
$graybox.animate({
width: 'toggle',
opacity: 'toggle'
}, 'slow');
};
$(function(){
$("#wrapper").on("click", showCaption);
});
.grey-box-caption {
min-height: 3em;
min-width: 20px;
background-color: #bbb;
display: inline-block;
}
.grey-box-caption-text {
display: none;
padding: 1em;
font-family: sans-serif;
white-space: nowrap;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class=grey-box-caption>
<div class=grey-box-caption-text>
Hello World this is some text.
</div>
</div>
</div>