I have a webpage that is 95% dynamically generated by user selections and content pulled from a DB.
As part of the website the user uses canvases (kind of like powerpoint) and save the completed canvases to images. The images are then stored in the HTML in a div that has display:none.
What I want is the ability to click a button or just press print and have those images be the only things selected to print. Even better would be to print each individual image on a different page.
I have tried using #media print in various combinations with display:none/block and visibility:hidden/visible, but that does not seem to work, there is always residual content on the page.
In fact I cannot even see a print preview of the entire page without adding:
#media print{
*{
display:block;
}
}
Am I having CSS print problems b/c the contents of the page are created dynamically? Or is there another question I should be asking?
Thanks in advance for any help!
To re-iterate my problem: I had images in html that were hidden in a div that was not displayed. I wanted to print only those images to a PDF.
For those interested here is my solution. My HTML looks like this:
<div id="head">
<div id="img_group" style="display:none">
<img href="img 1" />
<img href="img 2" />
</div>
</div>
<div id="contents"></div>
I tried a CSS solution that did not exactly work: #Radoslaw M
* {
display: none;
}
does not work because this overrides any display: block; that follows. So my solution was originally to combine display:none and visibility:hidden the following css worked to display only the id="img_group div:
body{
visibility:hidden;
}
#contents{
display:none;
}
#img_group{
visibility:visible;
}
However the problem with this solution is that visibility:hidden leaves blank space where the div tags should have been.
Here was my round about solution. I used some javascript, a print button, and jsPDF (http://jspdf.com/):
<div id="head">
<button id="print">Print</button>
<div id="img_group" style="display:none">
<img href="data:img 1" />
<img href="data:img 2" />
</div>
</div>
<div id="contents"></div>
<script>
var doc = new jsPDF('landscape','pt', 'computer');
var i = 0;
$('#img_group').find('img').each(function(){
if(i != 0){
doc.addPage();
}
var imgData = $(this).attr('href');
doc.addImage(imgData, 'JPEG', 0, 0, 1067, 600);
i++;
});
doc.save('test.pdf');
</script>
This solved my problem of printing these hidden images to a PDF and even allowed me to print each image to a different page in the PDF. I hope this solution helps anyone else who has this problem in the future!
Related
I am trying to create a site with a set of images that can be viewed by scrolling the page vertically or by clicking a button that links to the next image in the set using an anchor tag.
The images are centered vertically and horizontally inside a container that responds to the size of the browser window.
<a id="1">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
<tr valign="middle"><td align="center">
<img src="image.png">
</td></tr>
<tr><td>
Down
</td></tr>
</table>
</a>
I know of no other way to achieve this but to use tables though I am aware that it is very poor markup.
I have also found that the site renders correctly in Firefox 16.0.2 but not in Safari 5.0.6 where after the second image in the set the tables appear to grow in height exponentially.
How can I code this site for better accessibility and with proper markup?
The way I would probably do it without resorting to too many hacks would be to just put each image in a div, set some dimensions based on css, then use javascript to adjust accordingly.
Here is the sample HTML:
div class="item">
<img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
</div>
<div class="item">
<img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
</div>
The sample CSS:
html {height:100%;}
body {height:100%;}
div.item {
width:100%;
height:100%;
text-align:center;
}
div.item > img {
max-height:100%;
max-width:100%;
}
And finally the jquery which simply readjusts sizes on resize and at the start.
$(document).ready(function(){
//Setup function for sizing.
var win = $(window), body = $('body');
var els = $('div.item');
function DoResize() {
var height = win.height(),
width = body.width();
els.each(function(i,el){
var ele = $(el);
ele.height(height).width(width);
var img = ele.find('img');
var difference = (height - img.height())/2.0;
img.css('margin-top',difference+'px');
});
}
DoResize();
$(window).on('resize', DoResize);
});
I set up a jsfiddle for you to see it in action. It also readjusts for resizing of the window. It should work in most browsers even IE7 according to caniuse.com.
Update:
To include the captions and such you can do a variety of things. The easiest would be to add relative positioning to each item, then absolute positioning to each element you want to position with respect to each image.
You would do the html more or less like so:
<div class="item">
<img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
<div class="caption">
Caption for Item 1
</div>
<div class="link">
Item link
</div>
</div>
Then the style would just have updates for the other classes within the parent div.
I updated the jsfiddle here to show you some things you can do: link
Updated again:
Add the following script tag to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
before the Resizing script.
Damn Miltox beat me too it. His is better though. Just to say the reason safari was weird was you had multiple tables set at 100% height each stacked on top of each other so they were adding up, you should have had one big table. Miltox's answer will have fixed that all anyway.
I've been using javascript (with a very limited knowledge) to swap images but now I want to do it with text.
My question is, if I have 10 different paragraphs (link 1 shows paragraph 1, link 2 shows paragraph 2 etc), I don't understand where I can 'type' them. My images obviously link to a ready made file but I want my text to remain as text and I'm not sure how I assign this in either CSS or HTML etc.
CODE USED:
So far I have my CSS code to define my text content (that I want to change depending on the clicking) and my map content where I'm controlling the change in text:
#content
#content div {float:left;}
#content_map {width:595px; height: 595px; margin-bottom: 15px; margin-right:15px;}
#content_text {width:290px; height: 595px; margin-bottom: 15px;}
#content_profile {width:900px; height: 755px; margin-bottom: 15px;}
So my html so far for the map 'hotspots' are as an example:
<area shape="circle" coords="276,326,15" href="#" alt="Kinnloch" onclick="MM_swapImage('stboswells_01','','discover_kinnloch.png',1)"/>
<area shape="circle" coords="202,264,11" href="#" alt="Lochinver" onclick="MM_swapImage('stboswells_01','','discover_lochinver.png',1)"/>
...
etc
so basically I'm swapping images in the 'profile' div by the coordinates on the 'map' div and what i want to do is use these coordinates to also swop in text in my 'text' div so the first set of coords would change my text div to say 'Discover Kinnloch' and the second set of coordinates would change my text div to say 'Discover Lochinver' etc...
It almost sounds like you want expanding sections.
You could have the content already in the html hidden by CSS, and show it via javascript. Here's an example using jQuery.
<div class="container">
Header 1
<p class="container-body">This is a test.</p>
</div>
<div class="container">
Header 2
<p class="container-body">This is another test.</p>
</div>
Hidden by CSS:
.container-body {
display: none;
}
And toggled by the JavaScript:
$(".container a").click(function () {
$(".container-body", $(this).parent()).slideToggle();
});
Here's a quick fiddle showing it in action: http://jsfiddle.net/yv9QG/
Alternatively, if you're talking about swapping text in a target space it's only a few minor changes and you end up with something like this: http://jsfiddle.net/yv9QG/1/
In a Web Page, I'm trying to get the coords of an adress given by the user.
I'm trying to do something like: http://www.bufa.es/google-maps-latitud-longitud/
But I have a problem. The map is placed inside a div with this structure:
<div id="divgeolocalizacion" style="display:none;">
...
<div style="width:100%; clear:both;">
...
<div style="float:left; width:57%; margin-right:3%;">
<div id="map">
...
<div>
<div>
<div>
<div>
The user has a button on the page, which executes some javascript code. This code only changes the div display style to
"block". The problem is that the map is very very small. However, when I open developers's tools with F12, the image changes its size.
Why i'm getting this strange behaviour? Before you ask, I didn't have any "console.log()" on my javascript code.
Pd: When div's display style is initially set to "block" all works perfectly.
I found this solution by vaelico here: Google Maps Display:None Problem
To solve the problem is necessary to add this line in the javascript after changing the div's display style:
google.maps.event.trigger(map, "resize");
none and block are values of the display property, so you should have either
display: none;
or
display: block;
in your tag's style attribute, not the values alone.
I need to dynamically create iframes and to put some buttons (in column) on right of them, with buttons positions that follow the iframes ones.
I tried all the settings of
button.style.position = " "
inserting "absolute", "relative", etc. and trying to specify the pixel positions, but it doesn't work.
However, I have noticed that opening the same page with different browsers the buttons are placed in different positions.
I need a method that allows me to place the buttons at the right of the iframe, following its position and above all that returns the same result with all most used browsers.
What technique can I use?
Whats wrong with the basic premise of
<div id="left">
<iframe src="http://www.google.com"></iframe>
</div>
<div id="right">
<button>first button</button>
<button>second button</button>
</div>
#left, #right {
float:left;
width:46%;
height:300px;
margin:2%;
}
iframe {
width:100%;
}
button {
width:100%;
clear:right;
}
working example
How to show live preview in a small popup of linked page on mouse over on link ?
like this
http://cssglobe.com/lab/tooltip/03/
but live preview
You can use an iframe to display a preview of the page on mouseover:
.box{
display: none;
width: 100%;
}
a:hover + .box,.box:hover{
display: block;
position: relative;
z-index: 100;
}
This live preview for Wikipedia
<div class="box">
<iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">
</iframe>
</div>
remains open on mouseover.
Here's an example with multiple live previews:
.box{
display: none;
width: 100%;
}
a:hover + .box,.box:hover{
display: block;
position: relative;
z-index: 100;
}
Live previews for Wikipedia
<div class="box">
<iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">
</iframe>
</div>
and JQuery
<div class="box">
<iframe src="https://www.jquery.com/" width = "500px" height = "500px">
</iframe>
</div>
will appear when these links are moused over.
You can display a live preview of a link using javascript using the code below.
<embed src="https://www.w3schools.com/html/default.asp" width="60" height="40" />
<p id="p1">Cnet</p>
<p id="p2">Codegena</p>
<p id="p3">Apple</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">
<script type="text/javascript">
$(function() {
$('#p1 a').miniPreview({ prefetch: 'pageload' });
$('#p2 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'none' });
});
</script> <script src="http://codegena.com/assets/js/image-preview-for-link.js"></script>
Learn more about it at Codegena
id="p1" - Fetch image preview on page load.
id="p2" - Fetch preview on hover.
id="p3" - Fetch preview image each time you hover.
Another way is to use a website thumbnail/link preview service LinkPeek (even happens to show a screenshot of StackOverflow as a demo right now), URL2PNG, Browshot, Websnapr, or an alternative.
Personally I would avoid iframes and go with an embed tag to create the view in the mouseover box.
<embed src="http://www.btf-internet.com" width="600" height="400" />
I have done a little plugin to show a iframe window to preview a link.
Still in beta version.
Maybe it fits your case: https://github.com/Fischer-L/previewbox.
You could do the following:
Create (or find) a service that renders URLs as preview images
Load that image on mouse over and show it
If you are obsessive about being live, then use a Timer plug-in for jQuery to reload the image after some time
Of course this isn't actually live.
What would be more sensible is that you could generate preview images for certain URLs e.g. every day or every week and use them. I image that you don't want to do this manually and you don't want to show the users of your service a preview that looks completely different than what the site currently looks like.
HTML structure
<div id="app">
<div class="box">
<div class="title">How to preview link with iframe and javascript?</div>
<div class="note"><small>Note: Click to every link on content below to preview</small></div>
<div id="content">
We'll first attach all the events to all the links for which we want to preview with the addEventListener method. In this method we will create elements including the floating frame containing the preview pane, the preview pane off button, the iframe button to load the preview content.
</div>
<h3>Preview the link</h3>
<div id="result"></div>
</div>
We'll first attach all the events to all the links for which we want to preview with the addEventListener method. In this method we will create elements including the floating frame containing the preview pane, the preview pane off button, the iframe button to load the preview content.
<script type="text/javascript">
(()=>{
let content = document.getElementById('content');
let links = content.getElementsByTagName('a');
for (let index = 0; index < links.length; index++) {
const element = links[index];
element.addEventListener('click',(e)=>{
e.preventDefault();
openDemoLink(e.target.href);
})
}
function openDemoLink(link){
let div = document.createElement('div');
div.classList.add('preview_frame');
let frame = document.createElement('iframe');
frame.src = link;
let close = document.createElement('a');
close.classList.add('close-btn');
close.innerHTML = "Click here to close the example";
close.addEventListener('click', function(e){
div.remove();
})
div.appendChild(frame);
div.appendChild(close);
document.getElementById('result').appendChild(div);
}
})()
To see detail at How to live preview link