I need to print an specific DIV, but every other post I have seen doesn't include the styles within the DIV, is there a way to do this with one function in javascript?
I have already seen this and other posts
Print the contents of a DIV
You can select all other elements and hide them from the page (excluding the target with the use of the :not() CSS pseudo class), then call window.print() to print the page:
btn.addEventListener('click', function(){
document.body.querySelectorAll(':not(.red)').forEach(e => e.style.display = "none");
window.print();
})
div{
height:100px;
border:1px solid;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
<div class="red">
red
</div>
<div class="blue">
blue
</div>
<button id="btn">Print Red div</button>
If you want to create a function that accepts an element as a parameter, you can loop through all elements and check whether the current item being looped through is the parameter. If it isn't, hide the element.
Demo:
btn.addEventListener('click', function(){
printWithStyles(document.querySelector('.red'));
})
function printWithStyles(e){
document.body.querySelectorAll("*").forEach(f => f === e ? '' : f.style.display="none");
window.print();
}
div{
height:100px;
border:1px solid;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
<div class="red">
red
</div>
<div class="blue">
blue
</div>
<button id="btn">Print Red div</button>
Unfortunately, the function above hides children of the element, which can cause issues. We can counter this by checking whether the element looped through is included in the parameter:
btn.addEventListener('click', function(){
printWithStyles(document.querySelector('.red'));
})
function printWithStyles(e){
document.body.querySelectorAll("*").forEach(f => e.contains(f) ? '' : f.style.display="none");
window.print();
}
div{
height:100px;
border:1px solid;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
<div class="red">
<h1>red</1>
</div>
<div class="blue">
blue
</div>
<button id="btn">Print Red div</button>
To unhide all the elements after printing, a lazy way to do it would be:
document.body.querySelector("*").forEach(e => e.style.display="none");
That will show hidden elements prior to printing
Here is a simple way to do so!
$('a.printPage').click(function(){
$('#report-summary').show();
window.print();
return false;
});
#report-summary {
}
#page { size: auto; margin: 25mm 25mm 25mm 25mm; }
#media print {
#search,
.printPage {
display: none !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<div id="report-summary">
Content here ...
</div>
<div class="printbtn">
<a class="printPage" href="#">Print Report</a>
</div>
Related
I'm new in javascript and Html and I created two scrolling button to go from section1 to section2.
What can I do if I need to have more than two sections?
function f1() {
var elmnt1 = document.getElementById("sez1");
elmnt1.scrollIntoView();
}
function f2() {
var elmnt2 = document.getElementById("sez2");
elmnt2.scrollIntoView();
}
The best way to do this is by creating a pattern to any solution to make it a generic solution.
Mark your sections with an attribute of your liking, e.g.: scroll-to-id="1" and your sections can now look like <div scroll-to-id="1"></div><div scroll-to-id="2"></div><div scroll-to-id="3"></div><div scroll-to-id="4"></div>
Now make a function which will take the number as an input and scroll to the desired section. To get all targeted sections we can call the function document.querySelectorAll('[scroll-to-id]') to get all the elements with the attribute scroll-to-id.
Then find the element with the desired scroll-to-id to go to and scrollTo that element.
Full solution below:
function scrollToSection(sectionId) {
const sections = document.querySelectorAll('[scroll-to-id]');
for(let section of sections) {
if(section.getAttribute('scroll-to-id') == sectionId) {
section.scrollIntoView();
// scrollIntoView doesnot have the best browser supports. It is better to calculate the position of the section and do a scrollTo() or scrollBy()
}
}
}
button {
margin-bottom: 20px;
}
div {
padding-top: 80px;
padding-bottom: 80px;
border: 1px solid #cecece;
}
<button onclick="scrollToSection(1)">Scroll To 1</button>
<button onclick="scrollToSection(2)">Scroll To 2</button>
<button onclick="scrollToSection(3)">Scroll To 3</button>
<button onclick="scrollToSection(4)">Scroll To 4</button>
<div scroll-to-id="1">Hello 1</div>
<div scroll-to-id="2">Hello 2</div>
<div scroll-to-id="3">Hello 3</div>
<div scroll-to-id="4">Hello 4</div>
pass element as an argument to your function
function scroll(el){
el.scrollIntoView()
}
Welcome to Stackoverflow #Francy3k!
Just update your existing function to accept the ID of the section you'd like to scroll to:
.buttons { position:fixed; top:0; left:0; width:100%; background:white; padding:10px 0; text-align:center }
#sez1 { height:300px; background:green; vertical-align:middle }
#sez2 { height:300px; background:red; vertical-align:middle }
#sez3 { height:300px; background:blue; vertical-align:middle }
<div class="buttons">
<button onclick="scrollToSection(1)">Go to SEZ1</button>
<button onclick="scrollToSection(2)">Go to SEZ2</button>
<button onclick="scrollToSection(3)">Go to SEZ3</button>
</div>
<div id="sez1">
</div>
<div id="sez2">
</div>
<div id="sez3">
</div>
<script>
function scrollToSection(index) {
const section = document.getElementById("sez" + index);
section.scrollIntoView();
}
</script>
Provided the section IDs follow the same convention, you should be able to use this pattern.
I am trying to learn jquery and I have 2 div elements that I want only with one button to toggle between hide and show. I tried to write everything that I want but I think the sintax is wrong.
<div id="first"></div>
<div id="second">
</div>
<button class="change">change</button>
CSS:
#first {
width:500px;
height:500px;
margin:0 auto;
background-color:#ccc;
}
#second {
width:500px;
height:500px;
margin:0 auto;
background-color:black;
display:none;
}
and I wrote as Jquery
$(document).ready(function() {
$('.change').click(function() {
$('#first').hide();
$('#second').show();
});
});
I was thinking about an if else statement however I am not sure if can handle that yet.
You can use toggle method of jQuery. Make your second div hidden on initialisation...
$(document).ready(function() {
$('.change').click(function() {
$('#first, #second').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">first</div>
<div id="second" style="display: none;">second</div>
<button class="change">change</button>
working example: https://jsfiddle.net/tanaydin/kjyq0eow/3/
documentation: http://api.jquery.com/toggle/
edited after: #Darren Sweeney's comment, much better with this selector.
First thing, you won't see emptys divs.
Example - 1
$(document).ready(function() {
$('.change').click(function() {
$('#first').toggle();
$('#second').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="display: none">teste</div>
<div id="second">teste2</div>
<button class="change">change</button>
Example - 2
You can check if a element is visible with that:
$(document).ready(function() {
$('.change').click(function() {
if($('#first').is(":visible")){
$('#first').hide();
$('#second').show();
}else{
$('#first').show();
$('#second').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">test1</div>
<div id="second">test2</div>
<button class="change">change</button>
What i'm basically asking is if i could do this?
function Close(){
// what the furry mermaids should i put in here!?
}
.vissible {
display: block;
}
.hidden {
display: none;
}
#parentDiv1{
background-color: red;
}
#parentDiv2{
background-color:blue;
}
<div id="parentDiv1" class="visible">
<button id="closebtn" onclick="Close()">close</button>
<p> This is div 1 </p>
</div>
<div id="parentDiv2" class="visible">
<button id="closebtn" onclick="Close()">close</button>
<p> This is div 2 </p>
</div>
There are two divs that contain the same button but each button changes their parent div's class to hidden. Their parent's div only.
This is because i want to make a lot of pages but they close one by one with the same code and the same button. I'm wanting a minimalist solution here.
Oh and please don't be vague with your answers. If you are going to present it please explain how it works and how to apply it. A working code example is desired.
Note: Only one function may be used and is used by two identical buttons that are separated by two Divs.
Please and Thank You! :D
You can pass the current element context this to method. Then parent div can be accessed using parentNode property. To manipulate element's class use Element.classList property.
function Close(elem) {
elem.parentNode.classList.add('hidden')
elem.parentNode.classList.remove('visible')
}
function Close(elem) {
elem.parentNode.classList.add('hidden')
elem.parentNode.classList.remove('visible')
}
.vissible {
display: block;
}
.hidden {
display: none;
}
#parentDiv1 {
background-color: red;
}
#parentDiv2 {
background-color: blue;
}
<div id="parentDiv1" class="visible">
<button id="closebtn" onclick="Close(this)">close</button>
<p>This is div 1</p>
</div>
<div id="parentDiv2" class="visible">
<button id="closebtn" onclick="Close(this)">close</button>
<p>This is div 2</p>
</div>
I would recommend you to use unobtrusive event handler. Instead of using ugly inline click handler.
document.addEventListener("DOMContentLoaded", function(event) {
var elements = document.querySelectorAll('.closebtn');
elements.forEach(function(element) {
element.addEventListener('click', function() {
this.parentNode.classList.add('hidden');
this.parentNode.classList.remove('visible');
})
});
});
.vissible {
display: block;
}
.hidden {
display: none;
}
#parentDiv1 {
background-color: red;
}
#parentDiv2 {
background-color: blue;
}
<div id="parentDiv1" class="visible">
<button type="button" class="closebtn">close</button>
<p>This is div 1</p>
</div>
<div id="parentDiv2" class="visible">
<button type="button" class="closebtn">close</button>
<p>This is div 2</p>
</div>
Pass event in close function and access to parent with event.target.parentNode;
function Close(event){
const parent= event.target.parentNode
parent.classList.remove('vissible');
parent.classList.add('hidden');
// what the furry mermaids should i put in here!?
}
.vissible {
display: block;
}
.hidden {
display: none;
}
#parentDiv1{
background-color: red;
}
#parentDiv2{
background-color:blue;
}
<div id="parentDiv1" class="visible">
<button id="closebtn" onclick="Close(event)">close</button>
<p> This is div 1 </p>
</div>
<div id="parentDiv2" class="visible">
<button id="closebtn" onclick="Close(event)">close</button>
<p> This is div 2 </p>
</div>
Here you go :)
https://jsfiddle.net/
$('#parentDiv1 #closebtn').on('click', function(){
$(this).parent().addClass('hidden')
})
$('#parentDiv2 #closebtn').on('click', function(){
$(this).parent().addClass('hidden')
})
This is how i would do it. Use something like this.
$(".closebtn").click(function(){
$(this).parent().removeClass("visible");
$(this).parent().addClass("hidden");
});
Also in your css your class is spelled vissible and in your html the class it spelled visible
I need to display texts by clicking in elements, every green "button" displays his text. by clicking in a button the button get a black border and his text is shown. when i click in the second button the first one have to loose the black border, and the second button get the border.
here is the simple html
<div id="container">
<div class="btn" id ="btn-1"></div>
<p class="text" id="text-1">
HI i'm numbr 1
</p>
<div class="btn" id ="btn-2"></div>
<p class="text" id="text-2">
HI i'm numbr 2
</p>
</div>
CSS
#container
{
height:400px;
width:400px;
position:relative;
}
.btn{
width : 50px;
height : 50px;
border-radius : 50px;
background-color : green;
margin:10px auto;
}
.text
{
position:absolute;
color:red;
font-size:24px;
font-weight:bold;
left:150px;
top:150px;
display:none;
}
.clicked{
border : 3px solid #000;
}
Jquery :
$('#btn-1').click(function(){
$('.text').hide();
$('#text-1').show();
$('#btn-1').toggleClass("clicked"); //<== toggleClass isn't the thing i guess
});
$('#btn-2').click(function(){
$('.text').hide();
$('#text-2').show();
$('#btn-2').toggleClass("clicked");
});
Here is a JSFFIDLE demo
I would simplify the javascript as you're repeating code (and that's not good)
// you can also use $('[data-showbutton]').click( ...
$('#btn-1,#btn-2').click(function(){
var btn = $(this).data("showbutton");
showButtonText(btn);
});
function showButtonText(btn) {
// reset
$('.text').hide();
$('[data-button]').hide();
$('[data-showbutton]').removeClass('clicked');
// only show the selected
$('[data-showbutton=' + btn + ']').addClass('clicked');
$('[data-button=' + btn + ']').show();
}
and simply add data- to your html, like:
<div id="container">
<div class="btn" id ="btn-1" data-showbutton="1"></div>
<p class="text" data-button="1">
HI i'm numbr 1
</p>
<div class="btn" id ="btn-2" data-showbutton="2"></div>
<p class="text" data-button="2">
HI i'm numbr 2
</p>
</div>
live example: http://jsfiddle.net/EgLKV/6484/
in other words, a data-showbutton will show all elements that have data-button and you can have much more elements for example, making it simpler and extendable.
You need to remove the class clicked from all buttons and add it to the specific one :
$('.btn').click(function(){
$('.btn').removeClass("clicked");
});
$('#btn-1').click(function(){
$('.text').hide();
$('#text-1').show();
$('#btn-1').toggleClass("clicked"); //<== toggleClass
});
$('#btn-2').click(function(){
$('.text').hide();
$('#text-2').show();
$('#btn-2').toggleClass("clicked");
});
#container
{
height:400px;
width:400px;
position:relative;
}
.btn{
width : 50px;
height : 50px;
border-radius : 50px;
background-color : green;
margin:10px auto;
}
.text
{
position:absolute;
color:red;
font-size:24px;
font-weight:bold;
left:150px;
top:150px;
display:none;
}
.clicked{
border : 3px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="btn" id ="btn-1"></div>
<p class="text" id="text-1">
HI i'm numbr 1
</p>
<div class="btn" id ="btn-2"></div>
<p class="text" id="text-2">
HI i'm numbr 2
</p>
</div>
$('.btn').click(function(){
//$('#text-2').show();
if('btn-1' ==$(this).attr('id')){
$('#btn-1').addClass('clicked');
$('#btn-2').removeClass('clicked');
$('#text-1').show();
$('#text-2').hide();
}else{
$('#btn-2').addClass('clicked');
$('#btn-1').removeClass('clicked');
$('#text-2').show();
$('#text-1').hide();
}
});
demo
$('#btn-1').click(function(){
$('.text').hide();
$('#text-1').show();
$('#btn-1').toggleClass("clicked"); //<== toggleClass
$('#btn-2').removeClass("clicked"); //<-- add this
});
$('#btn-2').click(function(){
$('.text').hide();
$('#text-2').show();
$('#btn-2').toggleClass("clicked");
$('#btn-1').removeClass("clicked"); //<-- add this
});
updated fiddle
$('#btn-1').click(function(){
$('.text').hide();
$('#text-1').show();
$('#btn-1').toggleClass("clicked", true); //<== toggleClass
$('#btn-2').toggleClass("clicked", false);
});
$('#btn-2').click(function(){
$('.text').hide();
$('#text-2').show();
$('#btn-1').toggleClass("clicked", false);
$('#btn-2').toggleClass("clicked", true);
});
Mabye it is a solution?
Consider this JSFiddle
When I mouseenter on Span1 , a blue bar should appear below the Span1 (same for Span2 and Span3)
But even I mouseenter on Span1 or Span2 or Span3 , blue bar appears only under Span2.
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:100px;
height:2px;
background-color:blue;
margin:0px auto;
display:block;
}
HTML
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
JS
$(document).ready(function(){
$('#span1').mouseenter(function(){
$('#Span1').addClass('under');
});
$('#span2').mouseenter(function(){
$('#Span2').addClass('under');
});
$('#span3').mouseenter(function(){
$('#Span3').addClass('under');
});
$('#span1').mouseleave(function(){
$('#Span1').removeClass('under');
});
$('#span2').mouseleave(function(){
$('#Span2').removeClass('under');
});
$('#span3').mouseleave(function(){
$('#Span3').removeClass('under');
});
});
You have no width on the cells before the hover
Working JSFiddle here: http://jsfiddle.net/F2smc/5/
div.demo div {
display:table-cell;
text-align:center;
width: 33%; // <<< Added this
}
Basically the other 2 cells are zero width so the second row collapses to something very narrow in the middle so it looks like it is only under option 2.
Better example: http://jsfiddle.net/F2smc/29/
You can get the same effect, without specifying an exact % width, by simply adding this CSS instead for the spans (so they do not collapse within their parent divs):
div.demo span
{
width:100%;
}
If you put unique colors on the divs it will become really obvious what is going on. 100% on the div does not mean the divs will use it like in a table. Basically any change that applies a width to the underlining divs/spans will work. Suggest you use Chrome in F12 debug mode to view this type of work as it clearly shows the original elements were all 0 width.
PS. Is really is a bad idea to use ids that vary only in case
On a separate note:
You would not normally hardwire events for each different id in JQuery when they all do roughly the same thing. If you change your ids to be really unique (not just by case) you can do something like:
$(document).ready(function () {
$('.menu').hover(function () {
$('#' + this.id + '-l').addClass('under');
}, function () {
$('span').removeClass('under');
});
});
Which takes the id of the current hovered item, appends something unique then updates the matching item by id.
Working demo: http://jsfiddle.net/F2smc/30/
That should clean things up while retaining your original structure.
For testing i have given text-decoration,you replace that with background-color..
HTML
<div class="demo">
<div id='one' class="hover">Span 1</div>
<div id='two' class="hover">Span 2</div>
<div id='three' class="hover">Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:auto;
height:1px;
text-decoration:underline;
margin:0px auto;
display:block;
}
JQuery
$(document).ready(function(){
$('.hover').hover(function(){
var id=$(this).attr("id");
$('#'+id).addClass('under');
},function(){
$('.hover').removeClass('under');
});
});
Working DEMO
Try this
I have editted your html and css
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<span id='Span1'></span>
<span id='Span2'></span>
<span id='Span3'></span>
</div>
and add this to your css
div.demo span {
display:table-cell;
width:100px;
}
or
Try this
Working DEMO
without changing any html and css
just add width:100px; to
div.demo div {
display:table-cell;
text-align:center;
width:100px;
}
Hope this helps,thank you