i'm trying to print a specified div or table and its works fine in a test file. but when i write the exact code snippet in my original page its saying that document.getElementById('printable') is returning null..
i know what that means..that its not finding the id of my element.
So then i searched and i write $(document).ready(); and that error stopped. But due to this the whole page is printed(not the specified one). i also tried to write the script after my 'printable' div but then it gives the same null error..
Can anyone help me please. it will be appreciated.
and please try to give an answer like the below syntax, i mean dont change the whole code just tell me what im i missing. Thanks
I just wanna know why its saying null even when i write the script after the printable div and if i add ready function why it prints the whole page?
<head>
<script>
function print(){
var org=document.body.innerHTML;
var spc=document.getElementById("printable").innerHTML;
document.body.innerHTML= spc;
window.print();
document.body.innerHTML= org;
}
</script>
</head>
<body>
<table id="printable">
<tr>Only this should be printed</tr>
</table>
<div id="print-btn">
<button onclick="print()">Print</button>
</div>
</body>
A better approach might be to use a css media selector to remove stuff you don't want printed. For example:
<head>
<style>
#media print {
#print-btn {
visibility: hidden;
}
}
</style>
</head>
<body>
<table id="printable">
<tr><td>Only this should be printed</td></tr>
</table>
<div id="print-btn">
<button onclick="javascript:window.print()">Print</button>
</div>
</body>
Then you can just print the page.
Also, from your example, it looks like you're redefining the window.print function with your own.
To clarify,
function print() {
...
is equivalent to
window.print = function() {
...
Use the media query #media print, add a class .printable to anything that should be printed and call javascript:window.print() with the button.
<head>
<style>
#media print {
.*{
display: none;
}
.printable {
display: block;
}
}
</style>
</head>
<body>
<table class="printable">
<tr><td>This should be printed</td></tr>
</table>
<p class="printable">So should this</p>
<p>But not this</p>
<div class="printable">
<p>And all</p>
<p>of this</p>
</div>
<div id="print-btn">
<button onclick="javascript:window.print()">Print</button>
</div>
<script>/* by the way, this is where javascript belongs */</script>
</body>
The page is rendered top to bottom by the browser. When your script runs the div doesn't exist yet. Either move your script to the bottom of the body tag or use an event listener to run your script once the page loads.
js:
function runScripts() {
// do your stuff
}
html:
<body onload="runScripts()">
Related
I need to load an html page inside a div in the following pseudo page:
<html>
<head></head>
<style>
body {
background-color: yellow;
}
</style>
<body>
<div style="display:none">
<html>
<head></head>
<style>
body {
background-color: blue;
}
</style>
<body>
<div style="display:none">
...
</div>
</body>
</html>
</div>
</body>
</html>
What naturally happens in this code is that the background will turn blue, as it is being changed in the middle of the page. Is there a way to isolate this div? So it would act similarly to an iframe. The content inside the div is stored in a variable, so I think I cannot use a frame, as the html code is not stored in a file to use it as a source.
Thank you!
This is just wrong.
An HTML document can only have one html tag and one body tag, otherwise it will be an invalid document, browsers won't allow it.
If you load an iframe, instead, it will have his own #document and it's fine.
You can not load a Site into a Site without an Iframe due to security risks.
The only thing you can do, is to load the external Site with a serverside script like php, cut of the head with regexp and send the rest to your site into your div.
After finding that the hidden attribute only works with html5 and latest browsers I might have found another way to hide content based on conditional statements.
I ran into a problem where the function in javascript does not seem to executed, in short it does not hide the first paragraph.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function DetachEmptyField(pattern) {
$("#pattern").val(pattern);
$(pattern).detach();
}
});
</script>
</head>
<body>
<p id="hideMe">This is a paragraph, 1.</p>
<p>This is another paragraph, 2.</p>
<button>Remove paragraph 1</button>
#* Razor conditional statements to be added later here ... *#
<script type="text/javascript">DetachEmptyField("#hideMe");</script>
</body>
</html>
The DetachEmptyField function is not available in the global scope (it lives inside your ready callback) and therefore your call will not work. If you really want to call it like this
<script type="text/javascript">DetachEmptyField("#hideMe");</script>
you will have to declare it in the global scope (be aware that this is a bad practice)
// global function
function DetachEmptyField(pattern) {
$("#pattern").val(pattern);
$(pattern).detach();
}
$(document).ready(function(){
});
Anyway, if you just need to hide the element you can use css "display: none" or if you can check on the server side whether or not the element should be present on the page you can simply not include that paragraph in the response.
#if ( /*some condition that needs to be true in order to display the <p> */ ) {
#: <p id="hideMe">This is a paragraph, 1.</p>
}
I have an element which has to be hidden when JavaScript is enabled. The current code seems like this:
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#js-hidden').hide();
})
</script>
There is the problem, the js-hidden div is visible since the rest of page (and JavaScripts) are loaded.
Can I hide that earlier? This solution is so bad for me, JS user can´t see this element.
PS: I've written the example with using jQuery, it can be in plain JS too, of course :-)
$(document).ready makes it happen after full page loaded you can use
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<div id="js-hidden"></div>
<script>
$('#js-hidden').hide();
</script>
Simplest thing:
<style>
.js-hidden {
display: none;
}
</style>
<noscript>
<style>
.js-hidden {
display: block;
}
</style>
</noscript>
Since you cannot use onload event on div I guess the best solution is put your js right after that div...
I really cannot understand why this does not work. I've tried couple of tricks but I just don't get it.
<html>
<head>
<script type="text/javascript">
alert('Hey');
var vText = document.getElementById("results");
vText.innerHTML = 'Changed';
alert(vText.innerHTML);
</script>
</head>
<body>
<div id="results">
hey there
</div>
</body>
</html>
This is working as you can see here:
http://jsfiddle.net/gHbss/
It's important that you put the JavaScript after your HTML div container.
The problem that you're facing is that the browser runs the JavaScript as it's encountered when rendering/processing the page. At this point it will alert() your message, but the relevant element, the #results div isn't present in the DOM, so nothing can be changed.
To address this, you can either place the script at the end of the page, just before the closing </body> tag, or run the code in the onload event of the body or window.
The script has to be placed after the div#results or executed onload, otherwise the element is still unknown when you try to access it.
You need to call this script in onload event
i.e
window.onload=function(){
//your code
}
<html>
<head>
<script type="text/javascript">
function onloadCall()
{
alert('Hey');
var vText = document.getElementById("results");
vText.innerHTML = 'Changed';
alert(vText.innerHTML);
}
</script>
</head>
<body onload="onloadCall()">
<div id="results">
hey there
</div>
</body>
</html>
Hope the above snippet shows you the fix
It is possible not to show html page in user browser until some JavaScript(built-in or in separate file) will be loaded and executed(for page DOM manipulation)?
The easiest thing to do is to set the css variable
display: none;
to the whole page.
then when everything is loaded you can set the display to
display: block; // or something else that suits.
If you make sure that piece of CSS is loaded at the very start of your document it will be active before any html is shown.
if you use a javascript library like jQuery you'll have access to the $(document).ready() function, and can implement a switch over like this:
<html>
<head>
<title>test</title>
<style type="text/css">
body > div {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('body > div').css('display', 'block');
});
</head>
<body>
<div>
This will initially be hidden.
</div>
</body>
</html>
Not in the classical way you'd distribute a page. Browsers will (usually) start to display chunks of the base HTML file as it arrives.
Of course, you could simulate this by generating all the HTML on the fly from some included Javascript file. But that doesn't sound like a good plan as it will degrade horribly for people without JS enabled, or if you have a minor bug in your script. A better option might be to style the body tag to display: none and restyle it from the script to make certain parts visible again.
What is it you're actually trying to achieve? It sounds like there's likely to be a better way to do this...
Place the content of HTML page in a DIV, make its diplay none and on load of body diplay it.
<script type="text/javascript">
function showContent() {
var divBody=document.getElementById('divBody');
divBody.style.display= 'block';
}
</script>
<body onload="showContent()">
<div id="divBody" style="display: none;">
<--HTML of the page-->
</div>
</body>
Examples of what you might want to do:
Facebook's "BigPipe": http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919
This method allows you to load JS first then ASYNC+inject all DOM content.
GMail
Zimbra (open-source web app similar to MS Outlook/Exchange)
My understanding is that you want to run some javascript code before you load the page. In the js file you write your init function and add the eventlistener to the window on "load" event. This will ensure that the init code gets executed first and then you can start displaying the HTML content.
var Yourdomain = {};
YourDomain.initPage = function(){
/* Your init code goes here*/
}
window.addEventListener("load", YourDomain.initPage, false);
All You really need to do is give your element an ID or CLASS and use the dislay: none; property. When your ready to show it just delete it.
CSS:
#div_1 {
display: none;
}
HTML:
<div id="div_1">
<p>This will be the hidden DIV element until you choose to display it.</p>
<p id="js_1"></p>
<script>
var x = "Some Test ";
var y = "Javascript";
document.getElementById("js_1").innerHTML = x + y;
</script>
</div>