Here is my print function.
function printContent() {
var myWindow = window.open('', '', 'width=600,height=700')
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = some text;
myWindow.document.body.innerHTML = newstr;
myWindow.print();
myWindow.close();
}
html:
<div>
<div id="text"> </div>
<div id="images"></div>
</div>
I try to print only 'text' on page not the entire page but after preview, dynamically loaded images to 'images' div disappear. I can't solve this with update panels. Have you got any idea?? Thanks.
Use image as a background to its outer div instead of using image tag. Hope this helps. Please check the below code for reference.
.bg__image {
background: url('./images/dummy_image.png') center center no-repeat;
background-size: 100%;
height: 100px;
width: 100px;
float: left;
}
<div class="bg__image"></div>
I try to print only 'text' on page not the entire page ...
If you want to take out specific parts of the page from print version, use #media print CSS rules:
#media print {
#images {
display: none;
}
}
Related
I am trying to add page number during printing in the browser using CSS3 #page rule as follows
#page {
size: A4;
margin: 5%;
padding: 0 0 10%;
}
#page {
#bottom-right {
content: counter(page) " of " counter(pages);
}
}
I have known through the internet this only works for Firefox link
I have also tried this link that is only for the paragraph but my page is made with different types of the element like table, div, p etc
How to add page number during printing over any browser
Can anyone help me?
Copy css and make one file call that css in yourcss and done on header and footer option in chrome advance option give id="www" to body
<script type="text/javascript">
function PrintPanel() {
var panel = document.getElementById("www");
var printWindow = window.open();
printWindow.document.write(panel.innerHTML);
printWindow.document.write('<link href="yourecss.css" rel="stylesheet" />');
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
printWindow.close();
}, 1200);
return false;
}
</script>
.page{
counter-reset: page;
}
.page .page-number{
display:block;
}
.page .page-number:after{
counter-increment: page;
content:counter(page);
}
.page:after{
display: block;
content: "Number of pages: " counter(page);
}
<div class="page">
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
</div>
I have a set of divs with background images. Im trying to get the image onclick then display it in a lightbox. When the lightbox pops, the image i get in undefined. I can get the image url to display correctly through console. I know lbImg.src = galImg.src; is incorrect but i am unsure how to fix it.
HTML
<div id="lightbox">
<span class="closeBTN">×</span>
<img class="lbContent" src="">
</div>
<div class="imgCon">
</div>
CSS
.imgCon
{
height: 500px;
width: 15%;
min-width: 200px;
background-image: url(../images/01.jpg);
background-position: center;
background-size: auto 500px;
margin-bottom: 66px;
}
JS
var lightbox = document.querySelector('#lightbox')
img = document.querySelector('.imgCon')
span = document.querySelector('.closeBTN')
lbImg = document.querySelector('.lbContent')
img.onclick = (function(){
lightbox.style.display = "block";
var galImg = window.getComputedStyle(this,
null).getPropertyValue("background-Image");
lbImg.src = galImg.src;
//console.log(galImg);
})
span.onclick = (function(){
lightbox.style.display = "none";
});
You get the background-image itself in galImg, so you need to set it directly (it is a string and does not have a .src property).
But, the value of galImg we obtain from getComputedStyle is a string like as: "url("file:.../Desktop/1.png")". We have to remove the url( part and also the quotation marks ("...") from it:
lbImg.src = galImg.slice(4, -1).replace(/"/g, "");
Can you please try lbImg.setAttribute('src', galImg.src).
I wanted to show a loading icon to users until the page elements are fully loaded. How can I do that with javascript and I want to do it with javascript, not jquery?
Here is a link how google does it
How can I do this?
triggering some function on onload event or something like this .. I know it will be done somewhat like this or any other ways to do it?
Or there is some event for it?
UPDATE
I did something using display property I hide the body element but and onload of body tag I change its property but where to put the loading icon and add more interactivity.
HTML
<body>
<div id="load"></div>
<div id="contents">
jlkjjlkjlkjlkjlklk
</div>
</body>
JS
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},1000);
}
}
CSS
#load{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}
Note:
you wont see any loading gif if your page is loaded fast, so use this code on a page with high loading time, and i also recommend to put your js on the bottom of the page.
DEMO
http://jsfiddle.net/6AcAr/ - with timeout(only for demo)
http://jsfiddle.net/47PkH/ - no timeout(use this for actual page)
update
http://jsfiddle.net/d9ngT/
The easiest way to put the loader in the website.
HTML:
<div id="loading"></div>
CSS:
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #fff url('images/loader.gif') no-repeat center center;
z-index: 9999;
}
JQUERY:
<script>
jQuery(document).ready(function() {
jQuery('#loading').fadeOut(3000);
});
</script>
add class="loading" in the body tag then use below script with follwing css code
body {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body { min-height: 100%; }
body.loading {
background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
-webkit-transition: background-color 0;
transition: background-color 0;
opacity: 0;
-webkit-transition: opacity 0;
transition: opacity 0;
}
Use this code
var body = document.getElementsByTagName('body')[0];
var removeLoading = function() {
setTimeout(function() {
body.className = body.className.replace(/loading/, '');
}, 3000);
};
removeLoading();
Demo: https://jsfiddle.net/0qpuaeph/
HTML, CSS, JS are all good as given in above answers. However they won't stop user from clicking the loader and visiting page. And if page time is large, it looks broken and defeats the purpose.
So in CSS consider adding
pointer-events: none;
cursor: default;
Also, instead of using gif files, if you are using fontawesome which everybody uses now a days, consider using in your html
<i class="fa fa-spinner fa-spin">
Element making ajax call can call loading(targetElementId) method as below to put loading/icon in target div and it'll get over written by ajax results when ready. This works great for me.
<div style='display:none;'><div id="loading" class="divLoading"><p>Loading... <img src="loading_image.gif" /></p></div></div>
<script type="text/javascript">
function loading(id) {
jQuery("#" + id).html(jQuery("#loading").html());
jQuery("#" + id).show();
}
HTML page
<div id="overlay">
<img src="<?php echo base_url()?>assest/website/images/loading1.gif" alt="Loading" />
Loading...
</div>
Script
$(window).load(function(){
//PAGE IS FULLY LOADED
//FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});
firstly, in your main page use a loading icon
then, delete your </body> and </HTML> from your main page and replace it by
<?php include('footer.php');?>
in the footer.php file type :
<?php
$iconPath="myIcon.ico" // myIcon is the final icon
echo '<script>changeIcon($iconPath)</script>'; // where changeIcon is a javascript function whiwh change your icon.
echo '</body>';
echo '</HTML>';
?>
I wanted to display variable value in alert box.
please see below code :
<script>
function check() {
var content = document.getElementById("one").value;
alert(content);
}
</script>
<body onload="check()">
<div style="position: absolute; z-index: 9; width: 450px; top: 38px; margin-left: 176px;">
<style>
div#layout {
margin:0px;
padding:px;
width:450px;
margin:0px auto;
overflow:hidden;
}
</style>
<div id="layout">
<span id="one" style="display:none" ph="layout1" class="ione">yes</span>
<span id="two" style="display:none" ph="layout1" class="ione">no</span>
</div>
</div>
</body>
When i am executing this code then it is showing value as undefined in alert box.
value in span id"one"is changing in different different situation.
i want to track every time...so i cant hardcode it.
can you please help in this?
spans not have the value in html
one is the id for span tag
in javascript use
document.getElementById('one').innerText;
in jQuery use
$('#one').text()
function check() {
var content = document.getElementById("one").innerText;
alert(content);
}
or
function check() {
var content = $('#one').text();
alert(content);
}
$(document).ready(function(){
// alert("test");
$("#name").click(function(){
var content = document.getElementById("ghufran").innerHTML ;
alert(content);
});
//var content = $('#one').text();
})
there u go buddy this code actually works
Try innerText property:
var content = document.getElementById("one").innerText;
alert(content);
See also this fiddle http://fiddle.jshell.net/4g8vb/
Clean way with no jQuery:
function check(some_id) {
var content = document.getElementById(some_id).childNodes[0].nodeValue;
alert(content);
}
This is assuming each span has only the value as a child and no embedded HTML.
document.getElementById('one').innerText;
alert(content);
It does not print the value;
But, if done this way
document.getElementById('one').value;
alert(content);
Basically, I'm trying to make a link that, when pressed, will hide the current body div tag and show another one in its place, unfortunately, when I click the link, the first body div tag still appears. Here is the HTML code:
<div id="body">
<h1>Numbers</h1>
</div>
<div id="body1">
Body 1
</div>
Here is the CSS code:
#body {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
}
#body1 {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
display: hidden;
}
Here is the JavaScript code:
function changeDiv() {
document.getElementById('body').style.display = "hidden"; // hide body div tag
document.getElementById('body1').style.display = "block"; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}
NB: CSS tags are declared in different files
Have you tried
document.getElementById('body').style.display = "none";
instead of
document.getElementById('body').style.display = "hidden";?
just use a jquery event listner , click event.
let the class of the link is lb... i am considering body as a div as you said...
$('.lb').click(function() {
$('#body1').show();
$('#body').hide();
});
Use the following code:
function hide {
document.getElementById('div').style.display = "none";
}
function show {
document.getElementById('div').style.display = "block";
}
You can Hide/Show Div using Js function. sample below
<script>
function showDivAttid(){
if(Your Condition)
{
document.getElementById("attid").style.display = 'inline';
}
else
{
document.getElementById("attid").style.display = 'none';
}
}
</script>
HTML -
Show/Hide this text
Set your HTML as
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
And now set the javascript as
function changeDiv()
{
document.getElementById('body').hidden = "hidden"; // hide body div tag
document.getElementById('body1').hidden = ""; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked";
// display text if JavaScript worked
}
Check, it works.
Consider using jQuery. Life is much easier with:
$('body').hide(); $('body1').show();
try yo write
document.getElementById('id').style.visibility="hidden";