Print only selected elements/pages - javascript

I have a page developed using C# MVC3. It's a multiple employees report. The generated page will have a check box for each record/employee. The idea is to let the user check the box next to each record they want to print. When they click the Print button, which is on the page, only those selected records will be printed. How can I accomplish this?

Use Javascript to add/remove a class which will hide the content during print. Here is an example on jsFiddle.
Edit: For maximum support, include a separate stylesheet instead of using the media query.
<link rel="stylesheet" media="print" href="/print.css" type="text/css" />
HTML
<input type="checkbox" value="a" name="a"/> A |
<input type="checkbox" value="b" name="b"/> B |
<input type="checkbox" value="c" name="c"/> C
<div id="a" class="no-print">Content A</div>
<div id="b" class="no-print">Content B</div>
<div id="c" class="no-print">Content C</div>
CSS
#media print {
.no-print { display: none; }
}
/* For Styles */
div {
background: #CCC;
padding: 5px;
margin: 5px;
}
.no-print {
opacity: 0.5;
}
jQuery
$('input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
$("#"+ $(this).attr('value')).removeClass('no-print');
} else {
$("#"+ $(this).attr('value')).addClass('no-print');
}
});

Related

Im trying to enable the user to only select one checkbox

In my code, when a checkbox is selected an image is displayed. But when i select another checkbox the first image does not disappear and another image comes out.
What i really want is if i select a checkbox the first time and an image is displayed, I want it to disappear when i select a different checkbox so that the image of that checkbox can take its place. Any insights will be appreciated. Here is my code:
<body>
<input type="checkbox" />
<img src="pics/35.jfif" >
<input type="checkbox" />
<img src="pics/38.jfif" >
</body>
<style>
img {
display: none
}
input {
height: 30px;
width: 30px;
}
input:checked +img {
display: block
}
`
You need to use radio instead of checkbox like:
img {
display: none
}
input {
height: 30px;
width: 30px;
}
input:checked+img {
display: block
}
<fieldset>
<input type="radio" name="image" />
<img src="https://via.placeholder.com/150">
<input type="radio" name="image" />
<img src="https://via.placeholder.com/300">
</fieldset>
Reference:
radio
if you can add input id and add img class you can work. Simple version use it.
<input type="checkbox" id="inpt_1"/>
<img src="pics/35.jfif" class="img_1">
<input type="checkbox" id="inpt_2"/>
<img src="pics/38.jfif" class="img_2">
img {
display: none;
}
#inpt_1:checked + .img_1{
display: block;
}
#inpt_2:checked + .img_2{
display: block;
}

Show checkboxes tethered beneath input box on click

I am looking for a way to have a list of checkboxes slide out from an input box when I click it. Basically what I'm looking for is a way to create an overlay form that's tethered to the input box. This image shows what I have before click (left) and what I want to happen on click (right).
Right now I have a bootstrap modal pop up on click, but obviously that's not very user friendly. Any working solution will do, from pure css to js packages. My front end currently works with just html, css, js & jquery.
I've tried the following, but that shows my checkboxes through/behind the text that's already there.
.change-search__form-container {
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
A pure css solution based on previous answers and Pete's comments.
#myDiv{
display:none;
}
#myDiv:hover, #myDiv:focus-within {
display: block;
}
#myInput:focus + #myDiv {display:block}
<input id="myInput" placeholder="search query">
<div id="myDiv">
<input type="checkbox" id="box1">
<label for="box1">Stuff 1</label>
<input type="checkbox" id="box2">
<label for="box2">Stuff 2</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Stuff 3</label>
<input type="checkbox" id="box4">
<label for="box4">Stuff 4</label>
</div>
The DIV can be shown by using the below jQuery code
$("#searchbox").focus(function(){
$("#searchresults").show();
});
By using this code the DIV won't go away if the focus from textbox is lost
I solved the problem with the help of the comments. My CSS:
#change-search__form-container {
position: relative;
}
#change-search__dropdown-form {
z-index: 1;
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
My jQuery:
$('#change-search__form-container').click(function () {
$('#change-search__dropdown-form').show();
});
This way the container shows on clicking the input box, and doesn't disappear when I click elsewhere (on one of the checkboxes, for example).
there is a great post for a very similar problem:
Css Focus on input div appearing
Runs for Safari and soon in chrome..
#myDiv2{display:none;}
#myInput:focus + div { display: block; }
#myDiv1:focus-within #myDiv2 { display: block; }
<div id="MyDiv1">
<input id="myInput" type="text"/>
<div id="myDiv2">
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div style="display:none">
<span> aaa </span>
</div>
</div>

when a checkbox is checked how to display a different hidden element using javascript

I have a form on my site, which has a dropdown box set to display:none; in CSS. I am trying to reveal the dropdown (display: inline;) when a checkbox of another element is checked. What would be possible solution here?
When, #Give_to_a_specific_Project is checked, #choose_a_specific_project_from_dropdown should be set to CSS as display: inline;
Here is the HTML:
Codepen: http://codepen.io/mizan/pen/yNbqRa
<form method="POST" action="" class="sc-checkout-form" id="hello_donation_form" data-sc-id="1" data-parsley-validate="" novalidate="">
<div class="sc-form-group">
<label>
<input type="checkbox" id="Give_to_a_specific_Project" class="sc-cf-checkbox" name="sc_form_field[Give_to_a_specific_Project]" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_1" data-parsley-multiple="sc_form_fieldGive_to_a_specific_Project" data-parsley-id="0210">Give To A Specific Project?</label>
<input type="hidden" id="Give_to_a_specific_Project_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[Give_to_a_specific_Project]" value="No">
<div id="sc_cf_checkbox_error_1">
<ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldGive_to_a_specific_Project"></ul>
</div>
</div>
<div class="sc-form-group">
<select class="sc-form-control sc-cf-dropdown" id="choose_a_specific_project_from_dropdown" name="sc_form_field[choose_a_specific_project_from_dropdown]" data-parsley-id="8242">
<option value="HeartCrest Educational Center – Tema – Ghana" selected="" data-sc-price="HeartCrest Educational Center – Tema – Ghana">HeartCrest Education</option>
<option value="Hae Mona Children Home – Sebokeng – South Africa" data-sc-price="Hae Mona Children Home – Sebokeng – South Africa">Hae Mona Children Home</option>
<option value="Akuafo Farms – Ghana" data-sc-price="Akuafo Farms – Ghana">Akuafo Farms</option>
</select>
<ul class="parsley-errors-list" id="parsley-id-8242"></ul>
</div>
<div class="sc-form-group">
<label>
<input type="checkbox" id="recurring_monthly_gift" class="sc-cf-checkbox" name="sc_form_field[recurring_monthly_gift]" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_2" data-parsley-multiple="sc_form_fieldrecurring_monthly_gift" data-parsley-id="4913">Make this a recurring monthly gift</label>
<input type="hidden" id="recurring_monthly_gift_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[recurring_monthly_gift]" value="No">
<div id="sc_cf_checkbox_error_2">
<ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldrecurring_monthly_gift"></ul>
</div>
</div>
<div class="sc-form-group">
<label>
<input type="checkbox" id="project_update_by_email" class="sc-cf-checkbox" name="sc_form_field[project_update_by_email]" checked="" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_3" data-parsley-multiple="sc_form_fieldproject_update_by_email" data-parsley-id="7080">Receive Project Updates By Email</label>
<input type="hidden" id="project_update_by_email_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[project_update_by_email]" value="Yes">
<div id="sc_cf_checkbox_error_3">
<ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldproject_update_by_email"></ul>
</div>
</div>
<button class="sc-payment-btn"><span>Give by Credit Card</span></button>
I had to clean up your code quite a bit. There were a number of things wrong:
jQuery isn't loaded in your CodePen project
#choose_a_specific_project_from_dropdown was misspelled
You were not instantiating $(document).ready() correctly
You were attempting to listen for .changed() which doesn't exist
Now we're listening for .click() event
You were not showing/hiding the dropdown correctly. You were using .next() but that isn't necessary since you are referencing it by an ID selector.
Working CodePen project: http://codepen.io/anon/pen/bdWxVE
JavaScript code:
$(document).ready(function() {
$('#Give_to_a_specific_Project').click(function( event ){
if ($(this).is(':checked')) {
$('#choose_a_specific_project_from_dropdown').show();
}
else {
$('#choose_a_specific_project_from_dropdown').hide();
}
});
});
Use the onchange event of the checkbox. onchange check if the box is checked and if it is then show the select box.
If I have understood your question correctly, you can achieve this with CSS alone, with no JavaScript or jQuery. Here's a demo. Click on the [+] button to reveal the text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Toggle Visibility</title>
<style>
input[type=checkbox] {
position: absolute;
clip:rect(0 0 0 0)
}
input[type=checkbox]~label span::after{
content: "+";
}
label {
position: absolute;
right: 0;
width: 1em;
height: 1em;
background-color: #fff;
border: 1px solid #000;
color: #000;
text-align: center;
}
/* Default State */
p#show-me {
background: #900;
width: 100%;
text-align: center;
overflow: hidden;
color: #fff;
box-sizing: border-box;
font-size: 1.35em;
margin:0 0 1.5em;
display: none;
}
/* Toggled State */
input[type=checkbox]:checked ~ label span::after{
content: "-";
}
input[type=checkbox]:checked ~ p#show-me{
display: inline;
}
</style>
</head>
<body>
<input type="checkbox" id="hide">
<label for="hide" onclick=""><span></span></label>
<p id="show-me">Click on the checkbox to hide this text.</p>
</body>
</html>

Javascript checkbox toggle div hide show

I am looking to have a checkbox (Football) that when
Unchecked:
displays one DIV (FootballChoice) containing a label image for the checkbox that changes with mouseover
Checked:
hides the DIV (FootballChoice)
shows a hidden DIV (FootballChecked) that contains an alternate label image
shows another hidden DIV (FootballTeams).
When unchecked again, this needs to return to it's original state.
Alternatively if anyone knows how to change the label image when checked to the same as the one specified in the mouseover element here, that would also be a usefull altetrnative?
Thank you in advance.
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="FootballTeams"){
$(".FootballTeams").toggle();
$(".FootballChecked").toggle();
$(".FootballChoice").toggle();
}
});
});
</script>
.FootballChecked {
display: none;
}
.FootballChoice {
display: show;
}
.sport {
display: none;
border: 1px dashed #FF3333;
margin: 10px;
padding: 10px;
background: #003366;
}
<input id="Football" type="checkbox" value="FootballTeams">
<div class="FootballChoice">
<label for="Football" class="FootballChoice">
<img src="http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_100x130.png" onmouseover="this.src='http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_NAME_100x130.png';" onmouseout="this.src='http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_100x130.png';" alt="Football" title="Football">
</label>
</div>
<div class="FootballChecked">
<label for="Football">
<img src="http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_NAME_100x130.png" alt="Football" title="Football">
</label>
</div>
<div class="sport FootballTeams">
Football Teams here
</div>
Do you have to use JavaScript? You could use the CSS Pseudo-selector :checked and the General Siblings Selector to display elements based on whether the checkbox is :checked or not.
E.G:
#football {opacity:0.2;}
.checked {display:none;}
#football:checked ~ .unchecked {display:none;}
#football:checked ~ .checked {display:block;}
label {
display:inline-block;
border:1px solid blue;
padding:20px;
background:url(http://lorempixel.com/100/100/sports)
}
label:hover {
border-color:red;
background:url(http://lorempixel.com/100/100/cats)
}
div {border:1px dotted green;}
<input id="football" type="checkbox" value="1" />
<div class="unchecked">
Unchecked:
displays one DIV
<div id="FootballChoice">
(FootballChoice) containing a
<label for="football">label image for the checkbox that changes with mouseover</label>
</div>
</div>
<div class="checked">
Checked:
hides the DIV (FootballChoice)
shows a hidden DIV
<div id="FootballChecked">
(FootballChecked) that contains an
<label for="football">alternate label image</label>
</div>
shows another hidden DIV .
<div id="FootballTeams">
(FootballTeams)
</div>
When unchecked again, this needs to return to it's original state.
</div>
http://jsfiddle.net/zpz3mvuv/

Display a new image based on image choices

I'm trying to create a form in HTML using radio buttons for options. The radio buttons need to be individual clickable thumbnail images (so no browser style radio buttons will be seen, and each radio button is different). There will be 3 groups of radio buttons, each with 3 options.
These need to combine at the end to display a larger main image elsewhere on the page, based on the options the user selected.
I want the main image to change dynamically, as the user selects each option. - I don't want a form with a submit button at the end.
Does anyone have any ideas please?
The code I have so far is:
<style>
label {display:block;}
.radio {
opacity: 0.5;
width: 80px;
height: 80px;
float: left;
margin: 5px;
}
.checked {opacity: 1;}
#single {background: url(a.jpg);}
#double {background: url(b.jpg);}
#none {background: url(c.jpg);}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('input[type=radio].radio-image').each(function() {
var id = this.id;
$(this).hide().after('<a class="newrad" href="#"><div class="radio" id="' + id + '"></div></a>');
});
$('.newrad').live('click', function(e) {
e.preventDefault();
var $check = $(this).prev('input');
$('.newrad div').attr('class', 'radio');
$(this).find('div').addClass('checked');
$('input[type=radio].radio-image').attr('checked', false);
$check.attr('checked', true);
});
});
$(document).ready(function() {
$("input:radio[name=wardrobe]").change(function() {
if (this.value == "a") {
$("#imgOne").attr(
'src', 'a.jpg'
);
}
else {
$("#imgOne").attr(
'src', 'b.jpg'
);
}
});
});
</script>
</head>
<body>
<form>
<label><input type="radio" class="radio-image" name="wardrobe" id="single" value="a" />A</label>
<label><input type="radio" class="radio-image" name="wardrobe" id="double" value="b" />B</label>
<label><input type="radio" class="radio-image" name="wardrobe" id="none" value="c" />C</label>
</form>
<img id="imgOne" />
</body>
It's only a partial code, for the first set of options, I used it as a starting point.
I managed to get thumbnails as radio buttons, which work great. And I managed to get normal radio buttons to swap an image. But I can't get both working together.
So, I think you are on the right track. Although I am a little confused on the functionality of hiding the button and replacing it with an tag, I believe what you want is to make thumbnail images have the functionality of radio buttons. All you have to do is replace your current
<input type="radio" class="radio-image" name="wardrobe" id="single" value="a" />
with
<img src="a.jpg" class="radio-image" data-ref="a"/>
and change your jQuery to allow for these new images:
$(document).ready(function() {
$('img.radio-image').click(function() {
$("img.selected").removeClass("selected");
$(this).addClass("selected");
$("#imgOne").attr("src", $(this).attr("data-ref") + ".jpg");
});
});
and the css
img{
border: 1px solid transparent;
}
.selected {
border: 1px solid #00c;
}
The trick is that your images just need to sit there. Let jQuery do the heavy lifting. I hope this helps.

Categories