I have to print out a div which I'm doing in the following way:
function PrintElem(elem)
{
Popup(elem.html());
}
function Popup(data)
{
var mywindow = window.open('', 'to print', 'height=600,width=800');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="css/mycss.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
My problem is that on IE, when I click the button nothing happens. However, on Chrome and Firefox it works. What can I do to print it out correctly?
EDIT: I'm call print in the following way:
$('#print_it').click(function(){
var element = $('#itinerario');
PrintElem(element);
});
This is where print_it is the id of the button.
Another thing I've seen is that after a period of time, Chrome along with other browsers tells me that the page isn't responding. Why is this happening?
You MUST do a mywindow.document.close() and you may NOT have a space in the window name
I assume you invoke PrintElem from onclick of something - if that something is a link, you need to return false in the onclick handler!
Here is how I would do it if I had to
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'to_print', 'height=600,width=800');
var html = '<html><head><title></title>'+
'<link rel="stylesheet" href="css/mycss.css" type="text/css" />'+
'</head><body onload="window.focus(); window.print(); window.close()">'+
data+
'</body></html>';
mywindow.document.write(html);
mywindow.document.close();
return true;
}
but I am not sure whether or not the window.close() will interfere with the printing
And why not
$(function() {
$('#print_it').click(function(){
popup($('#itinerario').html());
});
});
I see you've solved it using mplungjan's note about no spaces in the window name, but an alternative would be to use #media print css styles, crudely:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#media print {
* {
visibility: hidden;
}
.printMe {
visibility: visible;
}
}
</style>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
var divToPrint = $("#div3");
$(divToPrint).addClass("printMe");
window.print();
$(divToPrint).removeClass("printMe");
}
)
}
);
</script>
</head>
<body>
<div id="div1">fhgjghajghhjagjdag</div>
<div id="div2">ytiyrtiyertuyeyiyt</div>
<div id="div3">We want to print this one.</div>
<div id="div4">vnbcxbvmzxbvc,xbv</div>
<div id="buttonContainer">
<input id="Button1" type="button" value="button" />
</div>
</body>
</html>
On my case I just needed to use the code below:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
In my case this issue was resolved by doing a focus before the print.
window.focus();
window.print();
Related
I have part of jQuery code that makes my photos bigger. It works perfectly in Firefox, Chrome or Opera, but if I use whichever IE it doesn't work and I can't find which part of this code isn't compatible with IE (I think this is a problem), so I don't know how to find solution (if some solution is possible of course)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Moje portfolio</title>
<meta content="Ewa, Makowska, strony www, grafika komputerowa" name="keywords">
<link rel="Stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*show bigger picture*/
function showit(src){
document.getElementById("picture").innerHTML = "<img src="+src+" id='bigimg' />";
$('#mask').css('display','block');
$('#mask').animate({'width':screen.width,'height':screen.height +100, opacity:'0.5'});
$('#fixed').css('display','block');
var bigimg = document.getElementById("bigimg");
$('#picture').css('display','block');
$('#picture').animate({
width: bigimg.width,
height:bigimg.height});
$('#close').css('display','block');
}
function closeit(){
$('#close').click(function(){
$('#close').css('display','none');
$('#fixed').css('display','none');
$('#picture').css('display','none');
$('#mask').css('display','none');
})
$('#fixed').click(function(){
$(this).css('display','none');
$('#mask').css('display','none');
$('#picture').css('display','none');
$('#close').css('display','none');
})
}
$('.smallimages').hover(function(){
$(this).stop().css({'border':'1px solid #666699'});
},function(){
$(this).stop().css('border', 'none');
});
</script>
</head><body>
<div id ="close" onClick="closeit();"></div>
<div id="mask"></div>
<div id="fixed"><div id="picture"></div></div>
<div id="insidetext">
<?php
function listfile($dir)
{
$tab=array();
$handle=opendir($dir);
while ($file = readdir($handle)){
if($file=='.'||$file=='..' || is_dir($dirname.$file)) continue;
array_push($tab,$file);}
closedir($handle);
return $tab;
}
$tab=listfile('gallery');
foreach($tab as $value)
{
echo '<img src="gallery/'.$value.'"
onClick="showit(`gallery/'.$value.'`)" class="smallimages" />';
}
?>
</div>
</body>
</html>
Thank for all answer very much. Then I removed second version of jquery console showed me where was a problem. IE has problem with this (small tilde?), and work with \'. So than I change
"showit(gallery/'.$value.'`) to "showit(\'gallery/'.$value.'\')"
everything is perfect.
I still can't get this code to work, I am trying to use the "onClick" to swap the image once clicked, open this new page in a new window, print this new opened window and closed it. It opens the new page on the new window, but it prints a blank page and it cant close it, it seems that the focus is not been set somehow. Can any one help me on tis? Thanks!
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Print it</title>
<!--style type="text/css" media="print"> .noprint {visibility: hidden;} </style-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
</script>
<script type="text/javascript">
// <!--
Popup = {
init : function () {
$('a.action_print').bind('click', Popup.printIt);
},
printIt : function () {
var win = window.open('doc1.html','Printed','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=350,height=250');
if (win) {
win.document.close();
win.focus();
win.print();
}
return false;
}
}
$(document).ready(function () {
Popup.init();
});
// -->
</script>
</head>
<body>
<br>
CLick to Print:<br><br>
<p style=" padding: 125px 0; text-align: center;">
<a class="action_print" target="Printed"><img src="images/cam_off.png" class="img-swap" width="100" height="100" /></a>
</p>
</body>
</html>
Thanks for looking!
I figured it out, all works, I just had to make sure that my files I am printing leave in the same domain. I hope it can help others in need for such a thing, but any improvements on the code are welcome.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Open n Print</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
function openPrintWindow(url, name, specs) {
var printWindow = window.open(url, name, specs);
var printAndClose = function () {
if (printWindow.document.readyState == 'complete') {
clearInterval(sched);
printWindow.print();
printWindow.close();
}
}
var sched = setInterval(printAndClose, 200);
};
jQuery(document).ready(function ($) {
$(".test").on("click", function (e) {
var myUrl = $(this).attr('data-url');
alert(myUrl);
e.preventDefault();
openPrintWindow(myUrl, "to_print", "width=700,height=400,_blank");
});
});
});//]]>
</script>
</head>
<body>
</br>
<a class="test" href="javascript:;" data-url= "doc.html">open print and close doc</a>
<br />
</body>
</html>
The printIt looks weird. At first you close the document, then try to print the content. Try this:
if (win) {
win.focus();
win.print();
win.close();
}
Closing document won't close window, hence win.close(). Notice also the line order.
Also, jQuery 1.4 is quite old, have you considered to update to a newer version?
You may put your javascript/JQuery code in the place where I put the window.print();
ScriptManager.RegisterStartupScript(this, typeof(Page), "UpdateMsg", "window.print();", true);
To let the full content of the window load properly, change the
printWindow.close()
to
printWindow.onfocus=function(){ printWindow.close();}
See Close window automatically after printing dialog closes
I used a JQuery waiting spinner demo from Github and modified it to my liking. I want the spinner to initiate automatically as soon as the page appears (giving time for the larger images on the page to load), however at the moment one has to click 'start waiting' for the spinner to appear.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="waiting.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 50px;
}
.content {
margin-bottom: 50px;
max-width: 500px;
}
button.waiting-done {
display: none;
}
</style>
<!--script src="../libs/jquery/jquery.js"></script-->
<script src="jquery-2.0.2.min.js"></script>
<script src=" jquery.waiting.min.js"></script>
<script type="text/javascript">
$(function () {
var content = $('.content').first().html();
$('button').on('click', function () {
$(this).toggle().siblings('button').toggle();
if ($(this).hasClass('waiting-done')) {
$(this).siblings('.content').waiting('done')
.html(content.substring(0,Math.random() * content.length) + '...');
}
});
});
</script>
</head>
<body>
<div id="demo-fixed">
><button type="button" class="waiting">► start waiting</button>
><button type="button" class="waiting-done">■ waiting done</button>
<div class="content">
</div>
</div>
<script type="text/javascript">
$('#demo-fixed button.waiting').on('click', function () {
var that = this;
$(this).siblings('.content').waiting({ fixed: true });
setTimeout(function() {
$(that).siblings('button').click();
}, 3000);
});
</script>
</body>
</html>
This is my first post so I hope I've given enough info for people to understand. I could copy the JQuery but there's too much and i'm not sure on the relevant part.
Thanks in advance for any help.
jQuery has a nice tool built in for that -- you'll want to read the documentation
$(document).ajaxStart(function() {
//start spinner
});
$(document).ajaxStop(function() {
//stop spinner
});
$(document).ajaxError(function(event, jqXhr, ajaxSettings, thrownError) {
// handle the error
});
I want to change an image's src on click of a link. I got a javascript snippet and tried to integrate it but it doesn't work.Im
Here's my HTML:
<html>
<head>
<meta charset="utf-8">
<link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="styles/script.js"></script>
<img id="bgimage" src="images/1.jpg"/>
<nav id="nav">A | B |
</nav>
</body>
</html>
Here is my script.js:
var imageId = document.getElementById("bgimage");
function changeImage() {
if (imageId.src == "images/1.jpg")
{
imageId.setAttribute("src","images/2.jpg");
}
else
{
imageId.setAttribute("Src","images/1.jpg");
}
}
This issue is occurring because the script appears in the html before the <img> element. Therefore, the code tries to find the img element, but it can't because the js code executes before the rest of the html is parsed. Correct it by putting the js include tag just before </body>:
<html>
<head>
<meta charset="utf-8">
<link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<img id="bgimage" src="images/1.jpg"/>
<nav id="nav">A | B |
</nav>
<script src="styles/script.js"></script>
</body>
</html>
Or, you might want to use DOMContentLoaded to wait until the html has been parsed. Change the js to this, in that case:
var changeImage;
document.addEventListener('DOMContentLoaded',function(){
var imageId = document.getElementById("bgimage");
changeImage=function() {
if (imageId.src == "images/1.jpg")
{
imageId.setAttribute("src","images/2.jpg");
}
else
{
imageId.setAttribute("Src","images/1.jpg");
}
}
},false);
Or you could call document.getElementById() every time changeImage is called
You must place your script just before </body>, or run it at onload.
If not, you run
var imageId = document.getElementById("bgimage");
before loading the image to the DOM, so imageId is null.
Anyway, you could improve your function to
var images = ["images/1.jpg", "images/2.jpg" /*, ... */];
function changeImage() {
imageId.src = images[(images.indexOf(imageId.src)+1) % images.length];
}
I am trying to show one div at a time and scroll trough them over and over. I have modified a Fiddle I found and I got it working on fiddle, but for some reason I cant implement a simple test page with the fiddle. It simply does not scroll trough the divs.
Here is the fiddle: http://jsfiddle.net/Twistar/d6nZP/86/
And here is my implemented code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<script type="text/javascript" src="includes/headers/jquery.min.js"></script>
<script type="text/javascript">
function go() {
var visibleBox = $('#container .boxes:visible');
visibleBox.hide();
var nextToShow = $(visibleBox).next('.boxes:hidden');
if (nextToShow.length > 0) {
nextToShow.show();
} else {
$('#container .boxes:hidden:first').show();
}
return false;
}
setInterval(go, 1000);
</script>
</head>
<body>
<div id="container">
<div class="boxes" style="display:">first box</div>
<div class="boxes" style="display:none;">second box</div>
<div class="boxes" style="display:none;">third box</div>
<div class="boxes" style="display:none;">forth box</div>
</div>
</body>
Can anyone please tell me what i am doing wrong?
I am guessing that you have a working fiddle but on your local test page its not working
your fiddle works because you got selected the default handlers from left handside dropdowns and its not working on your test page because your jquery handler is missing.
the reason is you are missing the document ready handler here:
$(function(){
setInterval(go, 1000);
});
try replacing with this one and see if helps.
I would probably simplyfy and would go with something like this: http://jsbin.com/osepim/1/
$(function() {
// hide all and show first
$(".boxes").hide().first().show();
setInterval(function(){
moveNext();
}, 1000);
});
function moveNext() {
var box = $(".boxes:visible"),
nextBox = box.next();
if(nextBox.length === 0)
nextBox = $(".boxes:first");
//hide all
$(".boxes").hide();
// show next
nextBox.fadeIn();
}
you need to wrap your javascripts code with the ready event $(document).ready() or use the short version $() and that will only excecute your codes when the page is finished loading so your codes should looks something like that
$(function(){
function go() {
var visibleBox = $('#container .boxes:visible');
visibleBox.hide();
var nextToShow = $(visibleBox).next('.boxes:hidden');
if (nextToShow.length > 0) {
nextToShow.show();
} else {
$('#container .boxes:hidden:first').show();
}
return false;
}
setInterval(go, 1000);
});
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<style type="text/css">.boxes{display:none}</style>
</head>
<body>
<div id="container">
<div class="boxes">first box</div>
<div class="boxes">second box</div>
<div class="boxes">third box</div>
<div class="boxes">forth box</div>
</div>
<script type="text/javascript" charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function go() {
var visibleBox = $('#container .boxes:visible'); // GET THE DIV
visibleBox.hide();
var nextToShow = $(visibleBox).next('.boxes:hidden');
if (nextToShow.length > 0) { // SHOW NEXT ITEM
nextToShow.show();
} else {
$('#container .boxes:hidden:first').show();
}
return false;
}
setInterval(go, 1000); // MS SECOND OF LOOP
</script>
</body>
</html>