let say i have a print button on couple of pages and whenever user click .
it will pop up the content in a modal and can print from there.Any idea will be appreciated.
I have couple of page with a print button . when user click it need to pul that content in a modal and than print from that modal.
I can't write the code for you right now but I can put you on the right track..
You need to use jquery to get the contents you want to print (likely $('body').html();) then create your modal div popup and add an iframe into the modal div. Then add to the iframes body (via $('iframe').document.body.append();) the print content. Then, call print on the iframe ($('iframe').window.print;)
Let me know if this makes sense?
EDIT: Here is some example code working with what I believe you want. (make sure you include jquery before this javascript code)
<body>
<script>
$(document).ready(function(){
$('#printmodal').click(function(){
// variables
var contents = $('#printable').html();
var frame = $('#printframe')[0].contentWindow.document;
// show the modal div
$('#modal').css({'display':'block'});
// open the frame document and add the contents
frame.open();
frame.write(contents);
frame.close();
// print just the modal div
$('#printframe')[0].contentWindow.print();
});
});
</script>
<style>
#modal {
display: none;
width: 100px;
height: 100px;
margin: 0 auto;
position: relative;
top: 100px;
}
</style>
<!-- Printable div (or you can just use any element) -->
<div id="printable">
<p>This is</p>
<p>printable</p>
</div>
<!-- Print link -->
<a id="printmodal" href="#">Print Me</a>
<!-- Modal div (intially hidden) -->
<div id="modal">
<iframe id="printframe" />
</div>
</body>
jsfiddle: http://jsfiddle.net/tsdexter/ke2rqt97/
Related
Hi I have a situation where I want to show a button to user to Suppose like:
"Print" on click this button I want to show print preview to user that is a html table which I want to print. But I do not want header and footer that is using my application to all pages to show in this print preview to user.
So how can I make this possible to printout a html page without header and footer only content part.
Please help me I have tried many solutions for this but did not get worked anymore. I am using php scripting language(Symfony2 framework)
Thanks in advance
<style>
#media print
{
#header{
display:none;
}
#footer{
display:none;
}
</style>
This will make your header and footer invisible at print preview or printing time.
In you css, add the classes and specify this class for the container element of the header and footer which has to be hide while printing.
#media print
{
.print
{
display: none !important;
}
}
Hide header and footer when you are printing.
<html>
<script>
function print1(){
document.getElementById("header").style.display="none";
document.getElementById("footer").style.display="none";
document.getElementById("print").style.display="none";
window.print();
}
</script>
<div id="header">Header</div>
<div id="content">content</div>
<div id="footer">Footer</div>
<input type="button" onclick="print1()" id="print" value="print">
</html>
I'm not a programmer, I've created a web site using a major hosting service's application. I want to insert code into a box provided by the hosting service that allows you to paste any HTML code.
I want to create a link on the site that opens a popup window to display text that I hard-code into the code. I don't want to jump to another HTML page.
I found the following code below that allows me to jump to another HTML page (it was set to CNN.com as an example). Is there a way to replace the action of jumping to another HTML page, with opening the popup and displaying the following example text "hello world". (please note in the code below, I deleted the opening and closing "a" tags at the beginning and end of the code since their inclusion causes problems when I type this question out on this web site).
Pop-up Window
Thanks
Easy to make popup window without Jquery. Just copy this code and paste. and clicl the open text. Popup shown.
<p>To display the box, click on the link <a href="#" onClick="document.getElementById('shadowing').style.display='block';
document.getElementById('box').style.display='block';">open</a>
</p>
<div id="shadowing"></div>
<div id="box">
<span id="boxclose" onClick="document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none'">close </span>
<div id="boxcontent">
And this is the static content of the box. <br><br>
Dynamic content in the next demo...
</div>
</div>
<style type="text/css">
#shadowing{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%; background-color: #CCA; z-index:10; opacity:0.5; filter: alpha(opacity=50);}
#box {display: none;position: fixed;top: 20%;left: 20%;width: 60%;height: 60%;max-height:400px;padding: 0; margin:0;border: 1px solid black;background-color: white;z-index:11; overflow: hidden;}
#boxclose{float:right;position:absolute; top: 0; right: 0px; background-image:url(images/close.gif);background-repeat:no-repeat; background-color:#CCC; border:1px solid black; width:20px;height:20px;margin-right:0px;}
#boxcontent{position:absolute;top:23px;left:0;right:0;bottom:0;margin:0 0 0 0;padding: 8px;overflow: auto;width:100%;height:100%; overflow:hidden;}
</style>
You can place the function in the <head> section OR you can pull the function from a .js file. This will open a window and load the url you want. It won't redirect the original page as you use the # instead of the actual url.
<script>
function popup(){
window.open('http://www.cnn.com','1426494439650','width=440,height=300,toolbar=0,menubar=0,location=1,status=1,scrollbars=1,resizable=1,left=0,top=0')
}
</script>
link
Good Day Professionals,
I'm using Colorbox plugin to display a certain div, but this issue appears.
the structure is as follow:
1- Hidden div to be displayed
2- Show btn to display the div
When I click the btn for the first time the div is displayed without any problems, but when I press ESC btn to close it and return the previous step again and click the btn the colorbox opens but without showing the div
This is the HTML code
<div class="to_be_show">
<!-- html structure is here -->
</div>
<p class="display">display</p>
This is the css style
.to_be_show{ width: 500px; height: 200px; background: red; display: none; }
This is the JS code
$('.display').click(function(){ $('.to_be_show').css('display','block'); });
$('.display').colorbox({opacity: 0.98,inline:true});
$(document).bind('cbox_closed', function() {$('.to_be_show').css('display','none'); });
So, What is the problem with my code ?!
-------- Update ----------
I know The problem but I don't know how to solve it !!!
I want to set the href attr of the display with Jquery as the content is loaded dynamically
and i use this and didn't work !!!
$('.show_album').colorbox({href:$(this).prev()});
Why ??!!
You can achieve this by creating inline color box
HTML Mark up
<div style="display:none">
<div class="to_be_show" id="to_be_show">
Element to be show
</div>
</div>
Display
css
.to_be_show {
width: 500px;
height: 200px;
background: red;
}
Js
$(document).ready(function () {
$(".inline").colorbox({
inline: true,
opacity: 0.98,
});
});
Here is working fiddle.
Don't forget to include
colorbox css & js
cheers!!!
I want to make a web app in which i have multiple pages i want that when i click on any link it should move to that page i got the code from site it works fine but i want that it does not show like the show Page1 Page but without onclick functions
without java script using ancchor tag
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
</body>
</html>
You can use CSS and checkboxes to get such a behaviour as written on this SITE.
The checkbox is the only HTML element which has two different states which can be exported/evaluated by CSS via the :checked property.
Cited from http://www.inserthtml.com/2012/04/css-click-states/:
HTML:
<form class="clickable">
<label for="the-checkbox">Click Me!</label>
<input type="checkbox" id="the-checkbox" />
<!-- This is the div we want to appear and disappear -->
<div class="appear">Some text to appear</div>
</form>
CSS:
.clickable .appear {
display: none;
}
.clickable input:checked ~ .appear {
display: block;
}
Check out the demo at the bottom of that page.
To select among more than two pages, you could maybe use radio buttons. Not tested, just as an idea ;)
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