I have a code block in Squarespace that results in showing a photograph. The photo is currently set at 2500px wide. My goal is to have a print button that allows the user to print this image - but the most important thing is that I want it to print onto a single page. Most likely my final code will require printing three images - again, onto a single page. I'm not a programmer at all and have relied on tracking down the following code to works to isolate the image(s) and print them. However, right now the images print onto 4-8 pages! I need to find javascript or CSS code to make sure that the final print is restricted to a single page. Can anyone modify my current code to do that?
I realize this question is similar to many other posted questions. However, I've tried #media print CSS commands, but they don't seem to work at all (likely due to me not understanding the code!).
<!DOCTYPE html>
<html>
<head>
<title>Printdiv</title>
</head>
<body>
<script type="text/javascript">
function printyourimage(){
var print_div = document.getElementById("image1");
var print_area = window.open();
print_area.document.write(print_div.innerHTML);
print_area.document.close();
print_area.focus();
print_area.print();
print_area.close();
}
</script>
<form>
<input type="button" value="Print Image" onclick="printyourimage()">
</form>
</body>
</html>
To recap: this function prints a single image onto multiple pages; however, I want to restrict the final print job to a single piece of paper. If I change the code to accommodate two or three images, I still want this to code to direct the images to print onto a single piece of paper.
This is untested, but in theory it should work. Determine the number of images being displayed image_count, then using a switch, determine the max height that the image should be displayed at in % (you might need to play with the sizes to accomplish the correct fit).
based on comments:
<style>
img{max-width:200px;margin:10px;display:block;}
</style>
original answer:
var image_count = 3;
var image_height = "85%";
switch(image_count){
case 2: image_height = "45%";
case 3: image_height = "30%";
}
var print_div = document.getElementById("image1");
var print_area = window.open();
print_area.document.write(`<html><head><style>img{max-height:${image_height};}</style></head><body>${print_div.innerHTML}</body></html>`);
print_area.document.close();
print_area.focus();
print_area.print();
print_area.close();
Related
The code shown here may be useful to others: It shows the solution I came up with to a requirement I had to, conditionally, apply different background images to a canvas. Questions on how to achieve this or variations of this have been asked here before.
(Sorry for my botched editing. I had originally posted this as a question, then, while reading my posted code, the answer dawned on me, so I removed that part of the post. I didn't realise at the time that there were already two answers, which would make no sense to anyone who didn't see the original question. So, to summarize it: I couldn't work out why functions I had added to someone else's published code that I was adapting couldn't be accessed by my function calls. I didn't realise that the code I was inserting them into was "wrapped" inside an anonymous IFFE function. When I moved them below the end of the "wrapper", I was able to call them from outside the IFFE.)
Thanks javinor, for the link to that very informative article explaining the IFFE function.
As for the method shown below, I have since found a better way to do it. I learned that div elements do not really belong in the HTML head section, so this is a better way:
var lnk;
lnk = document.createElement('LINK');
lnk.rel = 'stylesheet';
lnk.type = 'text/css';
lnk.href = 'CanvasStylesA.css';
document.getElementsByTagName('head')[0].appendChild(lnk);
You can wrap a condition around the href line that decides which file to use.
HTML
<head>
<div id="conditionalCSSincludes">
<!--
The javascript below will insert an inner div section here called "CanvasStyles", which
will, conditionally, contain one of the following two lines. That line will link to one of
two external style sheets containing the canvas style for the canvas displayed by this page.
<link rel="stylesheet" type="text/css" href="CanvasStylesA.css">
<link rel="stylesheet" type="text/css" href="CanvasStylesB.css">
The two style sheets differ with respect to the background image set for Canvas1.
A sets it to A.jpg, B sets it to B.jpg.
-->
</div>
<script src="code.js" type="text/javascript"></script>
<!-- the javascript below goes here -->
</head>
<body>
<canvas width="530" height="530" id="Canvas1">
<p>This page will not display correctly because your browser does not support the canvas element. Sorry.</p>
</canvas>
</body>
Javascript
<script type="text/javascript">
var includesDiv1, includesDiv2, includesDiv3, dt, hour, Bgnd;
// Conditional code that, depending on page load time, chooses
// whether to display the night-time or daytime background
dt = new Date();
hour = dt.getHours();
// for testing, enable the line below and set the hour manually ...
// hour = 6;
if (hour < 6 || hour >= 18){Bgnd = 1;} else{Bgnd = 2;}
// These are the two versions of the include link to the external style sheets:
includesDiv1 = '<div id="CanvasStyles"> <link rel="stylesheet" type="text/css" href="CanvasStylesA.css"> </div>';
includesDiv2 = '<div id="CanvasStyles"> <link rel="stylesheet" type="text/css" href="CanvasStylesB.css"> </div>';
if (Bgnd==1){
includesDiv3 = includesDiv1; // use the night-time background image
}
else{
includesDiv3 = includesDiv2; // use the daytime background image
}
// Insert into the conditionalCSSincludes div above an inner div called "canvasStyles".
// It contains an html include link to an external css file containg canvas styles.
cssIncludesDiv = document.getElementById("conditionalCSSincludes");
cssIncludesDiv.innerHTML = includesDiv3;
just below
window.startClock = startClock;
window.stopClock = stopClock;
add
window.yourFunctionName = yourFunctionName
do that for your three functions, so they will be available in the global (window) scope
#pawel hit the button, everything defined within the IIFE (function () {}()) cannot be accessed outside of the IIFE scope.
Take a look at this very enlightening explanation about modules and namespaces.
I am trying to show a div element on a specific page e.g. - example.com/my-account , right now it is showing on all my-account pages for example - example.com/my-account/lost-password
I know how to use JavaScript but not in webpages so can someone help me? This is how I would do it with JavaScript. I just need someone to help get this to work inside the php page I am trying to edit.
<script>
var cx = window.location;
var curWin = String(cx);
var myAccount = "http://example.com/my-account/";
if (curWin == myAccount){
<div id="banner"><img src="http://img.c5454o.png"></div>
}
</script>
If you open your developer tool, you can see that the body is assigned with classes (when using <body <?php body_class(); ?>>).
For example <body class="home page page-id-7 page-template-default">.
So from here on, you can tell css what to do like so:
#banner {display: none;}
body.page-id-7 #banner {display: block;}
So you don't realy need Javascript to detect a specific page and display a specific element.
Add Your condition like this
var cx = window.location;
if(cx.substr(-11)=="my-account/") {
//then do whatever you want
}
OR if your string is without last slash then..
if(cx.substr(-10)=="my-account") {
//then do whatever you want
}
substr(-11) function will cut your string of url from last 10 indexes so
you can apply your contion then.
if you want to show a div element on specific page then create a unique id on that page like <div id='UniqueId'> then go to javascript code and write,
jQuery Code is:
if($('#UniqueId').length > 0)
{
//show specific element
}
What is it called when sites like nhl.com have the ability to scroll through 5 different stories in a single area on a time on the page while being able to click to the previous.
see http://nhl.com
i'm trying to find the correct word for it to google some examples.
Not sure what you mean. If you're talking about the area with the Huge Picture, that can be done with
<input type='button' value='displayValue' id='someId' />
or
<button id='someId'>displayValue</button>
and JavaScript, like:
function E(e){
return document.getElementById(e);
}
E('someId').onclick = function(){
E('whereYourPicIsId').src = 'pic/Pic1.jpg'; //path to pic
}
at the moment I'm working on a website that is meant to be my portfolio so I wanted it to be a challenge.
The section where I show my work is coded with PHP and is connected to a database. With a WHILE loop it adds all the database records on my website.
For this site I have decided to use Javascript for the first time, to make it more challenging and to learn this as well.
What I want is a border around every database record the PHP WHILE loop adds, which is only shown when hovered over and changes color (fixed array of colors) every time you hover over the thumbnail.
This is the code I have so far:
function loaded() {
var colors = ["#FC3E6B","#24FF00","#0087F9","#F9F900"];
var images = document.getElementById("thumbnails").getElementsByTagName("div");
console.log(images);
for (var i = 0; i < images.length; i++) {
var rand = Math.floor(Math.random()*colors.length);
images[i].style.borderStyle = 'solid';
images[i].style.borderWidth = '1px';
images[i].style.borderColor = 'transparent';
$(images[i]).hover(function(){
console.log('hovering over');
images[i].style.borderColor = colors[rand];
}, function(){
console.log('hovering out');
images[i].style.borderColor = 'transparent';
});
};
};
My problem now is that it doesn't work, or partially. This code only applies on the first entry the WHILE loop adds. In the console I can see that the "console.log(images)" only returns the first entry.
Another problem is that it also returns an error:
images[i] is undefined
images[i].style.borderColor = colors[rand];
These are the 2 things I'm struggling with at the moment. It might very well be beginner/easy mistakes since it's my first time working with Javascript.
If there is anything I forgot to mention or you need to know, let me know.
I'm looking forward to a reply.
If I understand you right you should have an HTML page (generated with PHP) that looks like:
<div id="thumbnails">
<img src="..." />
<img src="..." />
<img src="..." />
...
</div>
And if you hover one of the images you want to add a border to this an remove the border if the mouse leaves the image. I assume you are using jQuery, so you could add each image a class e.g. <img class="record" src="..." /> and try the following javascript:
$(function() {
var colors = ["#FC3E6B","#24FF00","#0087F9","#F9F900"];
$('.record').hover(
function() {
var rand = Math.floor(Math.random()*colors.length);
$(this).css('border-style', 'solid');
$(this).css('border-width', '1px');
$(this).css('border-color', colors[rand]);
},
function() {
$(this).css('border-style', 'none');
}
);
}).call(this);
Each time the cursor enters an element (in your case an image) this will get a border, if the cursor leavs it the border will be removed.
Ok, first off: (colors.length - 1) is where you want to go, an array of length 3, has 2 as highest key (0-indexed!)
Second: can you post the actual HTML, or better still: get a jsfiddle up, so we can actually ammend your code, or fork your jsfiddle?
Third: I notice you're using jQuery, have you tried using $('#thumbnails').find('div'); to get your images array? what do you get then?
In case anyone reading this wonders, the reason the original example didn't work is because it is creating a closure. The inner function has access to the variables created in the outer function, but it gets the value of variables when the outer function returns.
In this case, when the code:
images[i].style.borderColor = colors[rand];
executed, the value of i would have been 4, which is outside the range, for each image.
See this for an explanation:
JavaScript closure inside loops – simple practical example
I'm trying to build a page which will display an image in a div and depending on what image it is this will populate 3 other separate divs with a mix of image and text content on the same page.
I just don't know where to start as all the variable tutorials/help I find either confuses the hell out of me or don't really apply to this particular situation.
So looking at it there is one large div (divA) and below that on the page there is another large div (divB) which contains three separate divs (divX, divY & divZ). I want the content of div's X,Y & Z to change depending on what is in div A. So if A has a variable of '1' then X,Y & Z will hold their own different pre designed '1' content. A'2' then X,Y & Z will hold their own '2' content....etc.
I will continue searching online but I thought someone could point me in the right direction or give me the run down on how to accomplish it.
Following code is filling the divs depending on the value of "mainWindow" using template as look up.
<div id="mainWindow">windowA</div>
<div>
<div id="smallWindowA"></div>
<div id="smallWindowB"></div>
<div id="smallWindowC"></div>
</div>
<script type="text/javascript">
var template = {
"windowA" : [ "contentAA", "contentAB", "contentAC" ]
};
function setContent() {
var content = document.getElementById("mainWindow").innerHTML;
document.getElementById("smallWindowA").innerHTML = template[content][0];
document.getElementById("smallWindowB").innerHTML = template[content][1];
document.getElementById("smallWindowC").innerHTML = template[content][2];
}
setContent();
</script>