javascript print code is not working properly - javascript

My java script print code is not working properly. I have this code is dialog box. when user clicks on print button I am calling print() function.
The problem I am facing when My print section is opening in Chrome data and table are not coming fine in preview.
I tried to implement this code here
HTML code:
<div class="modal-body">
<div class="" id="mydata">
<div id="grid">Some Data</div>
</div>
</div>
<button type="button" id="outageSummary_printBtn" class="btnPrint" data-dismiss="modal" onclick="print()>Print</button>
JS Code :
function print(data, event) {
event.preventDefault();
printElement(document.getElementById("grid"));
};
function printElement (elem) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("grid");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "grid";
document.body.appendChild($printSection);
} else {
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
}
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome == true) {
window.print();
if (window.stop) {
location.reload(); //triggering unload (e.g. reloading the page) makes the print dialog appear
window.stop(); //immediately stop reloading
}
} else {
window.print();
}
return false;
};
CSS Code:
#media screen {
#grid {
/*display: none;*/
}
}
#media print {
body * {
visibility:hidden;
}
#grid, #grid * {
visibility:visible;
}
#grid {
position:absolute;
left:0px;
top:0px;
}
}
I checked lot of print functionality, but I am not able to get this issue. I believe this is related to CSS or when I am adding Html element.
Please Guide !!

Unfortunately I cannot post as a comment, but do you mean that it shows correctly in the preview, but not on the webpage?
(Also from the code you've posted, it seems you're missing the below [or an onclick function on the button]:
document.getElementById("outageSummary_printBtn").onclick = function () {
printElement(document.getElementById("grid"));
};
Sorry if you've deliberately left this out in the snippet)

Related

Load a script using nodes included by another script

I need to make a web page with a lot of content. In order to be more efficient when modifying this content, I decided to put it in separate files and then include these files, following this tutorial: https://www.w3schools.com/howto/howto_html_include.asp.
For example one of these files may contain some clickable links to book descriptions, which are modal boxes. So I need to get them in a loading script to get these clickable links and make them trigger some events. But it seems this loading script is called before JavaScript gets the included nodes, even if I add an event listener after reading some threads (I tried to run it at 'DOMContentLoaded' or 'load') : document.getElementById or document.getElementsByClassName still returns null so it fails to define an onclick function. Let me show an example code:
script.js
function includeHTML() { /* Some code replacing the div by some-content.html, which is : <a id="clickable">Hello</a> */}
var button = null
window.addEventListener('load', function() {
button = document.getElementById("clickable");
button.onclick = function() { alert('Hello'); }
});
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>Here is a trigger button : </p>
<div include-html="some-content.html"></div>
<script>includeHTML();</script>
</body>
</html>
On Firefox, this will fail on defining button.onclick as button is still null.
Any idea on how to fix it?
Not only should I be adding links, but also modal boxes. Here is a script code, more complete, for what my guess was:
script.js
var boxNames = ["bibliography", "about", "book1", "book2" ];
var boxes = null /* Contains the boxes to be displayed */
var trigs = null /* Contains the trigger buttons for each box */
var close = null /* Contains the close buttons for each box */
function setTrigger(i) {
trigs[i].onclick = function() { setBoxVisible(true, i); }
}
function setClose(i) {
trigs[i].onclick = function() { setBoxVisible(false, i); }
}
function load() {
boxes = new Array(4);
trigs = new Array(4);
close = new Array(4);
for(var i = 0; i < boxNames.length; i++) {
boxes[i]=document.getElementById(boxNames[i]+"-box");
trigs[i]=document.getElementById(boxNames[i]+"-trig");
close[i]=document.getElementById(boxNames[i]+"-close");
setTrigger(i); setClose(i);
}
}
window.onload = function() { load(); }
For the code of includeHTML(), you can have a look at the tutorial I shared, I copy/pasted.
I think this kind of function would be more elegant if dealing with such stuff, but I would need it to be launched once everything is loaded, as if I was running it manually.
Your code only added the event listener when the page was loading, likely before the link existed.
You need to delegate from the nearest static container.
Here in your code it is document
Give the link a class instead of ID and do
window.addEventListener('load', function(e) {
document.addEventListener('click', function(e) {
const tgt = e.target;
if (tgt.classList.contains("clickable")) {
e.preventDefault(); // because it is a link
alert('Hello');
}
});
});
<a class="clickable" href="#">Click</a>
Update after new code
You overwrite the trigs code
You can very simply extend my code so you do not need to loop
window.addEventListener('load', function(e) {
document.addEventListener('click', function(e) {
const tgt = e.target;
if (tgt.classList.contains("clickable")) {
e.preventDefault(); // because it is a link
alert('Hello');
}
else if (tgt.classList.contains("box")) {
e.preventDefault(); // because it is a link
const [id, what] = tgt.id.split("-")
console.log(id)
if (what === "trig") {
document.getElementById(id).classList.remove("hide")
}
else if (what === "close") {
document.getElementById(id).classList.add("hide"); // or tgt.closest("div").classList.add("hide")
}
}
});
});
.hide { display:none; }
<a class="clickable" href="#">Click</a>
<hr/>
<a class="box" id="bibliography-trig" href="#">Trigger Biblio</a>
<a class="box" id="about-trig" href="#">Trigger About</a>
<div id="bibliography" class="hide">Biblio
<a class="box" id="bibliography-close" href="#">Close</a>
</div>
<div id="about" class="hide">About
<a class="box" id="about-close" href="#">Close</a>
</div>

Prevent Background Scroll on Modal Box

I am using a plugin which has a modal pop up box for login (CM Registration Pro). I would like the background (body of my website) to not be able to scroll when the modal pop up is open.
I have tried the following code but am unable to get it to work
jQuery(document).ready(function ($) {
if($('.cmreg-overlay').length){
$('html').css('overflow', 'hidden');
}
});
If you would like to see the problem live my website is Redec
A Quick example that should work is:-
var element = document.querySelector('body');
element.addEventListener('click',function(){
if(element.classList.contains('.cmreg-overlay-visible')){
document.documentElement.style.overflow = 'hidden';
}
else{
document.documentElement.style.overflow = 'visible';
}
});
As it stands, your body has no background. If you mean you don't want your body to scroll when the modal box is open, then you can check whether .cmreg-overlay is shown, and if so then set overflow:hidden to the body.
I will assume that only #menu-item-16137, #menu-item-16194 and #menu-item-16195 are Here is how to do it:
// Prevent the body from scrolling when the modal opens
var x = document.querySelectorAll("#menu-item-16137, #menu-item-16194, #menu-item-16195");
for(var i = 0; i < x.length; i++) {
x[i].addEventListener("click", function() {
if($(".cmreg-overlay").style.display != none) {
document.body.style.overflow = hidden;
}
});
}
// Return the body back to scrolling when closing the modal
document.querySelector(".cmreg-overlay").addEventListener("click", function() {
document.body.style.overflow = "auto";
}

not able to move scroll bar inside a div

I have a div that gets filled dynamically when the user sends data from form, it is similar to chat box. where the user ends message and that message gets displayed inside the div. Now this div has a scroll bar that should stay at the bottom but if the user scrolls then it should stay at that position where the user has kept it
The issue is that although the scroll bar stays at the bottom but when the user pulls it up, then also it pulls itself to bottom and the user can't use it to scroll.
Code for div
var youInterval;
function startInterval() {
youInterval = setInterval(function() {
var elem = document.getElementById('scrollbody');
elem.scrollTop = elem.scrollHeight;
}, 500);
}
document.addEventListener('scroll', function(event) {
if (event.target.id === 'scrollBottom') {
clearInterval(youInterval);
}
}, true);
startInterval();
.chatbox__body {
overflow-y: auto;
}
<div class="chatbox__body" id="scrollbody"></div>
Can anyone please help me with the issue
Your condition here is failing if (event.target.id === 'scrollBottom') {
The event generated by scroll is on document so, event.target.id is actually checking id property of document which is not there.
You have to disable overflow in body first and then add overflow to div
html,body{ height:100%; width:100%;overflow:hidden;}
.chatbox__body {
overflow-y: auto;
height:100%;
}
In your JS check for if (event.target.id === 'scrollbody') {
SNIPPET
var youInterval;
function startInterval() {
youInterval = setInterval(function() {
var elem = document.getElementById('scrollbody');
elem.scrollTop = elem.scrollHeight;
}, 500);
}
document.addEventListener('scroll', function(event) {
debugger;
if (event.target.id === 'scrollbody') {
clearInterval(youInterval);
}
}, true);
startInterval();
html,body{ height:100%; width:100%;overflow:hidden;}
.chatbox__body {
overflow-y: auto;
height:100%;
}
#content{
height:200%;
width:100%;
background-color:red;
}
<div class="chatbox__body" id="scrollbody">
<div id="content"></div>
</div>

Move onclick="touch(event) from .html to Javascript file

I have a div in my .htlm file as so:
<div id="touch" onclick="touch(event)"></div>
How can I make this div in the .html file like this:
<div id="touch"></div>
And then in my .js file I wish to make it "on click" within an "if" statement: (I have a switch in a config.js file for the "enableTouch")
if (enableTouch == true) {
document.getElementById('touch')...what do I need to put in here to activate the on click?
Animation code here.
}
Thanks.
Still doesn't work:
It works if I take out:
"document.getElementById('touch').onclick = touch;"
and change the div in the .html to:
<div id="touch" onclick="touch(event)"></div>
Thanks again.
//if ((EnableTouchToDisplayHourlyForecast == true) && (AnimationsOnly == false)) {
document.getElementById('touch').onclick = touch;
var touchend = false;
function touch(event) {
var element = event.currentTarget;
if(touchend){
touchend=false;
document.getElementById("forecastContainer").style.opacity="1.0";
document.getElementById("forecastContainer").style.webkitTransform="scale(1.0,1.0)";
document.getElementById("hourlyForecastContainer").style.opacity="0.0";
document.getElementById("hourlyForecastContainer").style.webkitTransform="scale(0.0,0.0)";
}else{
touchend=true;
document.getElementById("forecastContainer").style.opacity="0.0";
document.getElementById("forecastContainer").style.webkitTransform="scale(0.0,0.0)";
document.getElementById("hourlyForecastContainer").style.opacity="1.0";
document.getElementById("hourlyForecastContainer").style.webkitTransform="scale(1.0,1.0)";
}
}
//}
Like this:
if (enableTouch) {
document.getElementById('touch').onclick = touch;
}
If the JS script is included before the body of your page, you'll need to do this in the onload handler:
window.onload = function() {
if (enableTouch) {
document.getElementById('touch').onclick = touch;
}
// other onload stuff
};
var touchend = false;
function touch(event) {
// ...
}

Remove Class if second click in pure Javascript

I'm trying to create a simple Lightbox like effect with pure Javascript. I'm trying to figure out how to remove the current class if clicked again. I've tried multiple solutions suggested on Stack Overflow without much success. I don't want to use jQuery or any additional plugins. I think the issue might be with my if/else statement, but can't seem to pinpoint the exact issue. http://jsfiddle.net/nFNG3/
document.addEventListener('DOMContentLoaded', init, false);
function init(){
function getPop() {
if (item.className.value == null ){
item.className += "" + newClass;
return createFrame();
}
else {
removeClass();
}
}
function createFrame() {
var el = document.createElement('iframe');
el.setAttribute('id', 'ifrm');
el.setAttribute('scrolling','no');
document.body.appendChild(el);
el.setAttribute('src', 'http://info.kinnser.com/WWW-DEMO-WEBFORM.html');
}
function removeClass() {
item.className.value == null;
}
var item = document.getElementById('popit');
var newClass = "light-background";
item.addEventListener('click', getPop, false);
}
HTML
<body>
<div id="container">
<div id="button-container">
Demo Now
<span id="working"></span>
</div>
</div>
</body>
CSS
.light-background{
position:fixed;
width:100%;
height:100%;
background-color:grey;
}
#ifrm{
position:fixed;
width:275px;
height:549px;
z-indez:4;
background-color:white;
top:20%;
left:50%;
margin-top:-50px;
margin-left: -100px;
overflow:hidden;
}
Hi do the changes as shown below
function getPop() {
if (!item.className){
item.className += "" + newClass;
return createFrame();
}
else {
removeClass();
}
}
function removeClass() {
item.className = '';
}
Hope this solves your problem

Categories