I want to print only the image in a HTML page.
I used
function printImg(){
var URL = "image.png";
var W = window.open(URL);
W.window.print();
}
But executing the code, whole page prints rather the image. Are there any method to print only the image? Pls guide me.
Thanks.
create one print.css that hide all other unwanted divs except the image
If you heard about CSS Media types then you can achieve your desired task with this technique.
Example:
Define Media Type Print and then add a css class.noprint with a css rule display:none; in your css file like given below:
#media print {
.noprint{ display: none }
}
And then apply this class on the elements you don't want to print.
SEE AN EXAMPLE
Hope this will help you a lot.
Use
W.print();
instead of
W.window.print();
W.window makes reference to the parent's window of the pop-up.
Besides this you may consider using an empty page with a window.print triggered on load, instead of your current method which is not waiting for the image to be ready.
== EDIT ==
This can't be done. You can't modify browser settings (i.e. printer settings) from JavaScript
Finally I thought of convert my result to PDF format and print using FPDF Library
You can create an image element then append it to the DOM.
function printImg() {
var img = document.createElement( "img" );
img.src = "image.png";
document.body.appendChild( img );
}
Related
What I want to do is search for all instances of a particular colour within a CSS document, identified by its hex value, and replace all those instances with a new hex value. Then, after the colours have been changed, the CSS is applied to the page.
Really, a CSS document is just a text file, so surely there's a way to catch it before it is served to the browser and do some text based search and replace. Look for a particular HEX code and replace all instances with another.
How could that be done?
You can do the following:
function changeColor(oldColor, newColor) {
var all = document.getElementsByTagName('*');
Array.prototype.forEach.call(all, function(element){
if (element.style.background === oldColor) {
element.style.background = newColor;
}
})
}
This way you're looping over each element on the page, checking if it has the old color, and then if so, changing it to the new color.
First there are some errors in your code.
I have creaeted a JSFIDDLE
function changeColor(color) {
var a = document.getElementById('coloredThing');
a.style.background = color;
}
In my gallery I want to show my images, but I have two formats of images: 1/1:square format, 2/3:portrait format.
I created a class (result) for my ul container and I add the images to it. By modifying some properties I center it vertically and horizontally. Some images appear smaller because of their format I can't just let width (8em).
My question is: Can I add frm as an attribute to my image tag like src? If yes , I'll have this value from my database.
My script doesn't work. My Javascript is:
$(document).ready(function() {
if ($("ul.result li img").attr('frm')='1/1')
{
$("ul.result li img").css('width','10em');
}
if ($("ul.result li img").attr('frm')='2/3')
{
$("ul.result li img").css('width','8em');
}
});
Since you are using jQuery you can use the data method (http://api.jquery.com/data/) and properties on the elements in your html to store whatever it is you want. For your reference, that looks like:
HTML
<img src="file" data-format="square" />
Javascript
$(function () {
$("img").each(function () {
if ($(this).data("format") == "square") {
// process square image element ("this")
} else {
// process normal image
}
});
});
Now, that said - as others have noted you might consider using css classes to change your style rather than writing a bunch of Javascript code. The only reason I would consider writing the javascript (as opposed to css) is if there are complicated calculations that need to happen. Most of the time, though, if you structure your html correctly you can do whatever you need with pure css (no Javascript).
Why are you even using javascript for this?
You have a database property, and you're changing a css property based on a database property. That's what classes are for!
<img class=<?php (img.frm=="1/1"?"square":"portrait") ?> src=..... />
Then, in your css:
.square{
width: 10em;
}
.portrait{
width: 8em;
}
If you want to add a home made attribute, use a HTML5 data attribute,
so it is valid : data-portrait and data-landscape will do fine.
those attributes can be access via CSS or js
To answer your question:
YES you can, but i advise to use :data-frm as attribute name and avoid the use of special caracter in values.
Some reading from W3C :)
I'm creating a slideshow with 5 frames (each of which will have its own slideshow of images) with huge images and it takes some time for the first few images in each frame to be loaded(the rest of the images are loaded really fast). So I was thinking I could preload a simple black images (the background is black) and then start my slideshow once I know the images have loaded. Also, the slideshow images are dynamic, ie their urls change every day.
Does anyone know how I could do that? Because what I've found online only preloads an image but says nothing about how to start my slideshow after that.
Or if anyone has a better solution, please let me know!
FYI, for the slideshow I've used PHP to extract the image urls into a file and JavaScript to read them from it and display them in the slideshow.
Thanks!
A good way to preload images is to load them outside of the frame using css with position: absolute, i can remember reading that using display: none; it would not get downloaded by Safari.
This seems to be an elegant way to precache the images.
"Per Paul Irish, the canonical plugin for detecting image load complete events is now at:
https://github.com/desandro/imagesloaded"
Source: jQuery event for images loaded
This should work
/*You could populate this array through an xml to something if there are too many images*/
var arrUrls = ["image1.jpg", "image2.jpg", "image3.jpg"];
var nLoadCount = 0;
for(var i=0;i<arrUrls.length;i++)
{
var oImage = new Image ();
oImage.onload = function ()
{
nLoadCount++;
if(nLoadCount == arrUrls.length)
{
/*Show your content here*/
}
}
oImage.src = arrUrls[i];
}
The reason I need to do this is that the website I'm working on uses the exact same template to display dynamic content for multiple pages. All pages replicate the exact same div id's because they display the content the same way (except for the header content!). The header content shortens however the div id's still remain within the source code.
The blog index page needs to display 1 background image while every other page on the website displays another background image.
Thanks in advance for any help.
This snippet of code will do what you want:
if (window.location.href.indexOf('somepart_of_the_url') != -1) {
//Change background to some div
$('#somediv').css('backgroundImage','url(images/mybackgroundimage.jpg)');
//Change background to page body
$("document.body").css('backgroundImage','url(images/mybackgroundimage.jpg)');
}
I often give the body class a name based on the template or request path. I know you said that they all use the same template, but that template takes params and one of the params should be
body_class
And whatever controller/dynamic thing you have populating your site and rendering the template, should pass in 'home' when you're at /. In my previous experience, I would pass in other things as well so that /blog/category/post might have a body class like
<body class="post two-column-a">
Then your selectors are something like:
body { ... }
body.home { ... }
This works:
<script language="javascript">
$(document).ready(function() {
if (window.location.href.indexOf('INDEX_URL') != -1) {
//Change background
$('#DIV_ID').css({'background-image': 'url(http://URL.com/images/BG.jpg)', 'background-repeat': 'repeat-x', 'background-position': 'center top', 'width': '100%!important', 'min-height': '400px'});
}
});
</script>
The flaw that this code has though is that if you insert a directory into "INDEX_URL" such as /folder/, any page after /folder/ will have that background.
I'm trying to display by jquery load() a dynamically generated PDF created by PHP with FPDFlib on a div but what I get is a jam of chars. Is there a way to resolve it?
thanks in advance
I've tried to correct my code in this way but continue to display jam
$.post("./php/stampa_login.php",
{piatta:'<? echo $_POST["piatta"] ?>'},
function(data){
$("#stampa_content").load("./temp/login.pdf")
});
ciao
h.
That seems to be correct. jQuery's load() fetches an URL through AJAX; if that URL is PDF, it appears as "jam of chars" to the browser, as PDF and HTML aren't compatible at all, the formats are completely different.
What you probably want is to open the PDF as an <object>, but then you're hoping that the user has some PDF plugin installed in their browser. Let's take a step back: what are you trying to achieve here, by displaying a PDF?
You can create a blank embed tag and give src attribute as link. in your call back function. This will load the pdf file perfectly.
$("#embed_tag_id").attr("src", "./temp/login.pdf");
Instead of using $("#whatever").load();
You'll want something like this:
$("#stampa_content").html ($("<object>", {
data : "./temp/login.pdf",
type : "application/pdf",
width : 800,
height : 600
}));
What that will do is instead of trying to load the contents of the PDF into a DIV, it will create an <object> block that will start up your PDF reader (such as Adobe Reader) which will then load the PDF itself and display it.
ya, seems to be an output issue. Have you tried header function to output it correctly ? try for proper output or instead of opening the pdf in div, just update the pdf's link there