0
Hi - I tried out the Background Image Scaling script and with Cybr's update it works like magic. It SCALES the image perfectly. No distortion.
BUT, my image isn't "computer friendly". I.e.: Not 1024 X 768 or even close to that. (Heck, my monitor has a wide screen, so it isn't 1024 X 768 either! Is anybody's anymore?)
Anyhow, this creates a problem inasmuch as, unless I size the window from the bottom up it ends up with a white "stripe" beneath it.
What I would REALLY like for it to do is have that white to be BLACK.
My "usual" BG color/text etc. code is like:
<body bgcolor="#000000" text="#fcba1e" link="#0000ff" vlink="#800080" alink="#ff0000">
(Site won't let me add the arrows here.)
I've tried inserting this in various places with no success. Any ideas for a workaround would surely be appreciated !
Thanks ! Bill
Before trying anything, I recommend you replace your
<body bgcolor="#000000" text="#fcba1e" link="#0000ff" vlink="#800080" alink="#ff0000">
with css.
Related
i'm going to be as clearly as possible. I have a svg code (inside a div) that consist on an image and a text. I need that svg code to has special width and height; in particular, i need them to be 190 x 250 mm. I already set this, by assigning 925px to width (since i use an online conversor from mm to px) and 700px to height.
The problem is, that when i open the file on Chrome and proceed to print (Cmd + P), print dialog open, and it shows me that my design is going to be printed on a A4 page. I have a custom paper (in real life, physically) that has the dimensions previously commented, so thats why i need that, when i open the print dialog (cmd + p), the 190x250mm paper appears (and not the A4 which "adds" that blank space)
I have a Mac, and after the print dialog open, i'm able to click on something like "show more options", and then setting the paper size that i actually want. However, when i print with this, my design does not cover the 100% of the paper.
What i've already tried was, using jspdf library, convert my svg to a pdf with the exact dimensions that i want. This works, only if a use common fonts (arial, times new roman, etc) on the svg, but no if i use special fonts.
I really, really, appreciate some help here. Thank you so much, and sorry for my English. Hope you understand !
This is my svg design - simplified
This is what happen (and what i don't want to
EDIT:
This is what i want in order to be able to print (notice how the print preview "fits" to the custom paper size). (The image is edited of course)
What i need
I needed to add a negative margin to the #page in order to remove the white border. But printers may decide they want that margin.
*{
margin:0;
padding:0;
}
svg{max-width:100vh;}
#media print{
#page{
margin:-1em;
padding:0;
width:100%;
}
svg {
margin:0;
width:100%;
}
}
<svg viewBox = "0 0 100 60">
<rect width="100" height="100" fill="pink" />
<text dominant-baseline="central" text-anchor="middle" x="50" y="30">TEXT</text>
</svg>
I am writing a program that automatically prints labels for our laboratories with all of the appropriate information. The labels are printed by a Brother QL-710W label printer and the label printing is initiated by Google Cloud Print. When printing to pages that have a greater height than width (i.e. if I am using a small width label tape and printing LANDSCAPE, there are no problems; however, if I try to print in portrait with a shot height, the page scaling has issues. I am posting a picture here to illustrate the problem.
The image at the left (top as displayed) has the appropriate scaling for this print-out, I made the page height the same as the width. For the middle image, I lowered the page height to about 2/3 of the page width and you can see the page content being scaled and the left and right margins being expanded. Finally at the appropriate page height, almost no room is left for the page content.
Note: when I print the page using the browser print dialog, I am able to print the image as expected, though it does have two pages instead of one that can be overcome by selecting only one page to print (see image here).
The Google Clout Print ticket looks like this:
var ticket = {
version: "1.0",
print: {
duplex: {
type: "NO_DUPLEX"
},
copies: {copies: 1},
media_size:{
width_microns:62000,
height_microns:22860
},
page_orientation: {
type: "PORTRAIT"},
margins: {
top_microns:0,
bottom_microns:0,
left_microns:0,
right_microns:0
},
page_range: {
interval:
[{start:1,
end:1}]
}
}
};
The cloud print is initiated by a "Print" button that builds the page content as a blob:
"content" : HtmlService.createHtmlOutput(html).getBlob(),
Ways that I have tried to remedy the situation:
I have made the margins of the print out 0 as seen in the ticket
above.
I have also tried to edit the media and print css:
"#media print{header nav, footer {display: none;}}"+
"#page{margin:0pt !important; padding:0pt !important; size:2.4in 0.9in;}"+
I have tried making the div elements smaller, but as you can see from the affect made by even small changes to the page height (middle image) this has little effect.
Anyone know what I'm missing here?
When you print (successfully) from the browser, the browser converts the content to PDF before sending it to Cloud Print. Since that works, but tries to print a second (blank) page, my guess is that whitespace is creeping in below the content you're interested in.
I suggest you take a good look at the HTML blob, and also consider converting the HTML to PDF. PDF has much higher fidelity for situations like this (view in browser; send to Cloud Print black box; print on a label printer).
Ive been doing countless tests trying to figure out why images are being printed with a border when its set to borderless printing.
This may help.
The same source file was printed, results:
JPG: borderless yes, force raster yes, printed 5mm thick border.
PDF: borderless yes, force raster yes, printed 4mm oversized for paper.
PDF: borderless yes, force raster no, printed 2mm thin boarder.
HTML images seem to be handled like jpg images.
Fit and shrink to paper options dont change the above results.
Well as the title says.
Right now each signature (on a forum) div got:
<div style='height:Xpx;overflow:scroll'> (X = depends on each signature due to the image heights shifting)
And I want to change the height so I don't have to scroll through each signature, but showing all images directly.
Here is the right part of a signature:
http://puu.sh/4xOW7.jpg (couldn't use the website-image-feature due to not having 10 rep)
And I tested around and managed to make it like this:
http://puu.sh/4xPar.jpg (it's much more further down)
and like this..
http://puu.sh/4xPco.jpg (couldn't post more than 2 links -_-)
I also tried to remove the overflow:scroll, change it, and so on. (also tried removing height: etc)
But I just can't get it to simply remove the scrollbar - making all images show normally. I'd really appreciate help! :)
instead of style="height:250px;overflow: auto;"
you need style="display:inline;"
I am trying to have an image become slightly opaque when the mouse hovers over it. I use this line of code in php.
<img src="/wp-content/themes/Map/images/SlideTab/slide2.png" onmouseover= 'shade(this)' onmouseout = 'normal(this)' onclick='showSubMenu("sm_item3")' alt ="Slide" style ="height :22em ; width:4.063em; "/>
The shade function just changes the opacity to 0.5 .The image acts appropiately in all browsers except firefox. In firefox the images goes opaque and if the mouse stays over the image, the image will disappear. I have been unable to locate the issue. Thanks in advance for any advise.
here is my shade function. Very simple. It works in all browsers. It even works with firefox. The difference is in firefox after going opaque the image goes away completely:
function shade(x) {
x.style.opacity = ".5";
}
You should rely on a lib like JQuery and its API. Look at fadeTo method for instance. If you still want to use your own method, please paste it in the question.
Cheers.
My Progress is # http://codebucket.webatu.com/code/portfoliotest/index.html
Code on JSfiddle: http://jsfiddle.net/warmlaundry/qJbG4/70/
I want to make the edges of the 'f' and 'l' stretch to the edge of the page. I'm just expanding the height of two images that sandwich the word.
I want the word itself to stay put, and I don't want the expanding images to displace any other elements.
Is there an easy way to achieve this? I imagine it has to do with positioning correctly, but I still don't have a full grasp of the subtleties of CSS positioning.
I apologize if this question is a repost; I couldn't think of a good way to phrase the question without posting my own example.
edit: here's my code (since the link seems to be bad)
<html>
<head>
<style type="text/css">
#portfolioBottom{position:relative;top:-1px;}
#portfoliotop{position:relative;top:1px;}
</style>
<script type="text/javascript">
var heightBottom;
var heightTop;
var interval;
function addHeight(){
document.getElementById("portfolioBottom").style.width="249px";
heightBottom = parseInt(document.getElementById("portfolioBottom").style.height);
heightBottom=heightBottom + 5;
document.getElementById("portfolioBottom").style.height=heightBottom;
document.getElementById("portfolioTop").style.width="210px";
heightTop = parseInt(document.getElementById("portfolioTop").style.height);
heightTop=heightTop + 5;
document.getElementById("portfolioTop").style.height=heightTop;
}
</script>
</head>
<body>
<button onclick="interval=self.setInterval('addHeight()',1);">Start</button><button onclick="interval=window.clearInterval(interval)">Stop</button><br /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio top.png" id="portfolioTop" style="height:6px;" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio.jpg" id="portfolio" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio bottom.png" id="portfolioBottom" style="height:6px;" />
</body>
</html>
I've gone with positioning the two extended bits and also I put the images as a background image to divs which then did the work.
Have just used your images (with positioning it could probably be done with a single image doing both bits, and sorry I didn't correct the missing pixel off the main image, I just overlapped the pixel for now, hence the cutoff look corrected the missing pixel on the main image would fix that ;) -
then, once positioned - I just animated the height and top/bottom negative positions simultaneously
I can't do JS so the demo's with jQuery, but hopefully the logic of the positioning will help you do the same in JS
also in mine I restricted the body height to stop it scrolling on forever, this might not be practical in real terms, but becasue the two images always go to the same height, the reverse effect brought them back together too.. so advantages maybe?
the live example
What about just using CSS and positioning it as a background image?
html {
margin:0;
padding:0;
height:100%;
background:#fff url("//imgur.com/qJMrs.png") 2em 50% fixed no-repeat;
}
Demo: jsfiddle.net/Marcel/SMs9j (fullscreen)