Good afternoon,
I'm using two buttons on my site, each opens a different iframe.
The problem is that after clicking to open one, the other does not open simultaneously when clicking the other iframe button.
$(function() {
$('#load').click(function() {
if (!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
}
});
});
$(function() {
$('#load2').click(function() {
if (!$('#iframe').length) {
$('#iframeHolder2').html('<iframe id="iframe" scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
}
});
});
<center>
<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a>
<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
</center>
<br>
<br>
<br>
<div id="iframeHolder"></div>
<br>
<br>
<div id="iframeHolder2"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
Because that's exactly what if(!$('#iframe').length) is preventing in both of your buttons. When you append your new HTML to the page, it includes an element with id="iframe". So the next time you run that if statement, .length is greater than 0 so the check is false and the if block does not execute.
Without that if, you can open both:
$(function(){
$('#load').click(function(){
$('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
});
});
$(function(){
$('#load2').click(function(){
$('#iframeHolder2').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
});
});
<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a> <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
<br>
<br>
<br>
<div id="iframeHolder"></div>
<br>
<br>
<div id="iframeHolder2"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
Note: I also removed the id="iframe" from the appended HTML, since you don't want to append two elements with the same id to the page. If you need those elements to have IDs, they'll have to be unique.
If, on the other hand, you want to be able to switch between the two then you would want to put them in a single container rather than in their own containers:
$(function(){
$('#load').click(function(){
$('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
});
});
$(function(){
$('#load2').click(function(){
$('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
});
});
<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a> <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
<br>
<br>
<br>
<div id="iframeHolder"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
Note also that using 2 document.ready handlers is redundant. You don't need that much ceremony for each click handler, just create them both:
$(function(){
$('#load').click(function(){
$('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
});
$('#load2').click(function(){
$('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
});
});
Related
i'm using html2canvas js lib for convert webpage into jpg/png. when i'm used simple div or table in my target id and clicked on button to save webpage as an image. it worked. but whenever i'm use svg in my target id then it not work. it gives blank image in output.
code is :
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>
<script type="text/javascript">
function capture() {
$('#target').html2canvas({
onrendered: function (canvas) {
//Set hidden field's value to image data (base-64 string)
$('#img_val').val(canvas.toDataURL("image/png"));
//Submit the form manually
document.getElementById("myForm").submit();
}
});
}
</script>
<style type="text/css">
#target {
border: 1px solid #CCC;
padding: 5px;
margin: 5px;
}
h2, h3 {
color: #003d5d;
}
p {
color:#AA00BB;
}
#more {
font-family: Verdana;
color: purple;
background-color: #d8da3d;
}
</style>
<h2>Simple Implementation of html2canvas With JavaScript and PHP</h2>
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
<table>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td>
<input type="submit" value="Take Screenshot Of Div Below" onclick="capture();" />
</td>
<td align="right">
<a href="http://www.kubilayerdogan.net?p=304" style="font-family: Tahoma; font-size: 10pt; font-weight: bold;">
Documentation (Back to Site)</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="padding: 10px;">
<b>Div:</b>
</td>
<td>
<div id="target">
<div class="slides2" id="widget">
<img class="" src="//cdn.shopify.com/s/files/1/0797/1743/products/HK-CK_28785899-10b3-4f49-88be-975a69089e52_1024x1024.JPG?v=1464803870" style="width: 38%;">
<div class="custom" style="position: relative; top: -282px; left: 100px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="410" height="70" viewBox="0 0 2326 460" id="svg">
<defs>
<clipPath id="my-path">
<text id="texty" style="font-weight:bold;" x="60" y="300" font-size="350">sdasa</text>
</clipPath>
</defs>
<image xlink:href="Mother of Pearl.JPG" clip-path="url(#my-path)" width="100%" height="100%" id="filler" preserveAspectRatio="none"></image>
</svg>
</div>
</div>
</div>
</td>
</tr>
</table>
and i want output like as below image .. please help me to sort out of this problem.. thankyou in advance
image
I used this.. DOMtoImage Worked perfectly for me.
Just add the js link to html and run this script;
var node = document.getElementById('element_id');
domtoimage.toPng(node).then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
$("element_destiny").html('<img src="' + img.src + '" id="image_id" />');
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
I have but zero appitude to code anything. I am trying to build a small simple website and am almost done but have one little issue left to solve. I know this has been asked here before and I have tried to figure out how to make there circumstance work for me but can't. I have even tried the easy jquery fade in and fade out methods but can't get the id's correct or something?
All I want to do is fade in and out between the divs when the links are clicked.
I have tried and reviewed many examples here and still can't get it to connect at all.
Any help would be appreciated.
I have three links on a page that loads three different divs into a container. Everything is on the same page and everything works great other than I can't get them to fade in and out when the links are clicked. I have no problem loading the jquery library and doing it that way if that works best.
<head>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container'+idInfo).style.display = 'block';
}
</script>
<style type="text/css">
#container1, #container2, #container3 {
display:none;
overflow:hidden;
background-color: #E6E1E6
</style>
</head>
<body style="background-color: #E6E1E6">
<div id="container" style="position: fixed; width: 100%; z-index: 200;" >
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
</div>
</body>
</html>
You mentioned using jQuery, this is a basic idea. Comments in code should explain what is happening. I altered the HTML a little by adding some classes and some data attributes.
$("#linkDiv").on("click", "a", function(evt) { //use event bubbling so there is only one click hanlder
evt.preventDefault(); //stop click event
var anchor = $(this); //get the link that was clicked on
if (anchor.hasClass("active")) { //If has the class, it is already is active, nothing to do
return;
}
anchor.siblings().removeClass("active"); //find previous selectd link and unselect it
anchor.addClass("active"); //add class to current link and select it
var showTab = anchor.data("tab"); //read the data attribute data-tab to get item to show
var visibleContainer = $(".tab-container:visible");
var complete = function() { //function to call when fade out is complete
$(showTab).stop().fadeIn(300);
};
if (visibleContainer.length) { //make sure w have something to hide
$(visibleContainer).stop().fadeOut(100, complete); //if we do, fade out the element, when finished, call complete
} else {
complete(); //if first time, just show it
}
}).find("a").eq(0).trigger("click"); //click on first link to load tab content.
.tab-container {
display: none;
overflow: hidden;
}
#container1 {
background-color: #E60000;
}
#container2 {
background-color: #00E100;
}
#container3 {
background-color: #0000E6;
}
a.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" style="position: fixed; width: 100%; z-index: 200;">
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
Here's a simple example using jQuery - Not sure what you're end product is meant to look like but this should set you on the right foot.
Here's a sample snippet of the JS:
$(document).ready(function(){ //Wait for DOM to finish loading
$('.navigation a').click(function(){ //When the a link is clicked
var id = $(this).attr('href'); //grab its href as the ID of the target object
$('.hidden-content').fadeOut(500); //Fade out all the divs that are showing
$(id).fadeIn(500); //Fade in the target div
return false; //Prevent the default action of the a link
});
});
Check out the jsFiddle here: http://jsfiddle.net/pavkr/7vc2jj5j/
Here is some quick script to do the fading, but i would suggest you to use jQuery for same since it will be cross-browser.
Just update your script block, and it will work, no need to change any other code
Vanilla JS
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
fadeIn(document.getElementById('container'+idInfo), 20);
}
function fadeIn(element, duration) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
//alert("here");
}, duration);
}
</script>
Using jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv(idInfo) {
$('#divLinks div').hide(200, function(){
//Show the clicked
$('#container'+idInf).fadeIn(200);
});
}
</script>
So I have been able to make some progress with my problem but have encountered something a little unexpected/confusing. I have been able to add my script to my web page, however, the two do not work together. Without the script, the page appears as I would like. With the script, the script runs and overrides the web page. What happens is a random picture shows up in the top left corner of the screen, but nothing from the html file appears. I have included all my code (html, javascript, css) and if anyone can provide some guidance it would be really greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
<title>Monroe Public Library</title>
</head>
<body>
<div id="pageContent">
<div id="head">
<img src="mpl.jpg" alt="Monroe Public Library" />
</div>
<div id="links">
<ul class = "nav">
<span>Quick Links</span>
<li>Home Page</li>
<li>Online Catalog</li>
<li>Friends of MPL</li>
<li>New Books and Other Good Reading</li>
<li>Ohio Virtual Library</li>
<li>Internet Public Library</li>
<li>Services and Collection</li>
<li>Adult Programs</li>
<li>Teen Central</li>
<li>Children's Room</li>
<li>Computers at MPL</li>
<li>Computer Rules and Procedures</li>
<li>Staff Directory</li>
<li>Library Records</li>
</ul>
</div>
<div id="main">
<h2>Library Records</h2>
<p>To view the library records, enter your username and password.</p>
<form id="login" method="post" action="">
<p>
<label for="username" class="center" id="input"> Username:</label>
<input type="text" id="username" name="username" size="20" />
</p>
<p>
<label for="password" class="center" id="input"> Password:</label>
<input type="password" id="password" name="password" size="20" />
</p>
<p>
<label for="captcha" id="input">As a final security check, enter the 5 numbers you see displayed below.</label>
<input type="text" id="captcha" name="captcha" size="6" />
</p>
<p id="login"> </p>
<p id="login">
</p>
<script src="mpl.js"></script>
<p align="center"><img src="" alt="" name="number1" width="70" height="100" id="number1"><img src="" alt="" name="number2" width="70" height="100" id="number2"><img src="" alt="" name="number3" width="70" height="100" id="number3"><img src="" alt="" name="number4" width="70" height="100" id="number4"><img src="" alt="" name="number5" width="70" height="100" id="number5"></p>
<div id="images">
</div>
<p align="center">
<input type="submit" value="View Library Records" />
</p>
</form>
</div>
<div id="address">
<span class="addressBold">Monroe Public Library</span>
580 Main Street, Monroe, OH 45050
<span class="addressBold">Phone</span>(513) 555-0211
<span class="addressBold">Fax</span>(513) 555-0241
</div>
</div>
</body>
</html>
window.onload = function ()
{
//http://www.java-scripts.net/javascripts/Random-Image-Script.phtml
var pictureNumbers=new Array()
//specify random images below. You can have as many as you wish
pictureNumbers[1]="0.jpg"
pictureNumbers[2]="1.jpg"
pictureNumbers[3]="2.jpg"
pictureNumbers[4]="3.jpg"
pictureNumbers[5]="4.jpg"
pictureNumbers[6]="5.jpg"
pictureNumbers[7]="6.jpg"
pictureNumbers[8]="7.jpg"
pictureNumbers[9]="8.jpg"
pictureNumbers[10]="9.jpg"
var randomNumber = Math.floor(Math.random()*pictureNumbers.length)
if (randomNumber==0)
{
randomNumber=1
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==1)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==2)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==3)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==4)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==5)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==6)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==7)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==8)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==9)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==10)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
}
#charset "UTF-8";
/* CSS Document */
body
{
margin-top:0;
font-family:Georgia, "Times New Roman", Times, serif;
background-color:#FFC;
}
#head
{
background-color:orange;
}
#page
{
width: auto;
margin" 0 auto;
background-color: white;
border-top: none;
}
#links
{
position:absolute;
width:10em;
border: 1px solid blue;
top: 72px;
background-color: white;
}
#main
{
margin-left: 12em;
}
#login
{
padding-top: 1em;
padding-left: 2em;
padding-bottom: 5em;
border: 1px solid blue;
}
#address
{
padding-top: 2em;
padding-left: 2em;
border-top: 1px solid blue;
}
#pageContent #main h2 {
color: #00F;
}
#input
{
background-color: orange;
padding-right: 20%;
}
Your problem is document.write. You should either be creating an element and appending it to a parent element in the DOM, or changing the src attribute of an existing element.
Creating Elements and appending them
var parent = document.getElementById("parent"),
img = document.createElement("img")
img.setAttribute("src","your-file-name.jpg")
parent.appendChild(img)
Example
Here is a simplified example of what you are doing.
Fiddle: http://jsfiddle.net/L3WYH/1/
HTML
<div id="picture-frame"></div>
JS
var pictureNumbers = [],
pictureCount = 10
for ( var i = 1; i <= pictureCount; i++ )
pictureNumbers[i] = i + ".jpg"
var randomNumber = Math.ceil(Math.random()*(pictureNumbers.length - 1)),
element = document.getElementById("picture-frame"),
image = document.createElement("img")
image.setAttribute("src", pictureNumbers[randomNumber])
element.appendChild(image)
To expand on #Gary's comment to the original post:
The calls to document.write(...) are what's causing your problem. Upon firing the 'onload' event, the browser closes the document for writing. Any subsequent calls to document.write will literally overwrite the whole page.
To fix this, you will need to do one of two things:
Make your calls to document.write outside of the window.onload event
Do as #MBottens mentioned in his answer, where you append new <img> elements to a DIV tag.
I have an iframe in a page and i want to get the current url for that iframe and update an input text with that url.
I found that i can get the url for the iframe using
document.getElementById("iframe_id").contentWindow.location.href
<iframe id="iframe" name="iframe" src="" width="100%" height="100%" style="border-width: 0px; border-color:#ffffff; border-style: solid;" scrolling="no" border="0" class="auto-style1" frameborder="0" marginheight="0" marginwidth="0"> </iframe>
<script type="text/javascript">
var link = document.getElementById("iframe").contentWindow.location.href ;
document.Show.link.value = link;
</script>
<strong>link for the iframe :</strong>
<input name="link" type="text" size="100" />
<a onclick="document.all.iframe.src=''" href="url" target="iframe">LINK</a>
that didnt work.
I dont know how to use it and update input text with that url every time the ifram's url changes
iframe url may change if some one clicks on link inside it
best regards,
Your iframe code is wrong. There it comes :
<iframe id="iframe" src="url_of_your_iframe" ... ></iframe>
<input type="text" id="input" />
<script type="text/javascript">
(function() {
document.getElementById('input').value = document.getElementById('iframe').src;
})();
</script>
That's it.
Edit : wait, your iframe's url changes when? how?
NOTE: You cannot access elements of an IFRAME (including contentWindow) if page within the IFRAME belongs to a different domain than the parent page due to Same Origin Policy (Quote from - Yuriy Galanter)
However here's a simple and basic browser that uses keyup to search; maybe it'll come in handy for you.
If you decide to add buttons to go forward and back in history you can use history.back();, and history.forward(); for that particular purpose.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type="text/css">
span.style {
cursor: pointer;
font-family: Sans-Serif;
font-size: 1.5em;
font-weight: bold;
padding: 0 .5em;
color: #666;
}
span.style:hover {
color: #999;
}
span.style:active {
color: #000;
}
input#goto {
width: 80%;
font-family: Sans-Serif;
font-size: 1.25em;
}
iframe#browsensearch {
width: 100%;
height: 90%;
}
</style>
<script type='text/javascript'>
$(document).ready(function() {
$("#goto").click(function() {
$(this).select();
});
$("#bing").click(function() {
var sitesgohere = document.getElementById("browsensearch");
sitesgohere.src = "http://www.bing.com/";
$("#goto").val("bing.com");
});
$("#goto").keyup(function(e) {
var val = $(this).val(),
sitesgohere = document.getElementById("browsensearch");
sitesgohere.src = "http://" + val;
});
});
</script>
<form name="sites" align="center">
<span id="bing" class="style">Bing</span>
<input id="goto" type="text" placeholder="http:// added by default" />
</form>
<iframe id="browsensearch" src="http://theextinctionprotocol.wordpress.com/2013/10/01/large-fireball-seen-acoss-six-midwestern-states/" width="100%" height="100%" allowtransparency="true" frameBorder="0">
Your browser does not support IFRAME's
</iframe>
I am trying to print the contents in the iframe. The Below code is working fine.
HTML:
<div id="containerDiv">
<p>
<table cellpadding="1" width="100%" height="100%" cellspacing="0" border="0">
<tr>
<td align="right" ><img src="Images/printer1.png" alt="Print" id="imgprint" onclick="printticket()" style="display:none;cursor:pointer;padding-top:2px;" /></td>
</tr>
<tr>
<td align="center">
<iframe id="OverlayDis" name="OverlayDis" scrolling="yes" src="Default1.aspx" allowtransparency="true"
runat="server" frameborder="0" style="background-color: white; width: 980px; height: 500px;"></iframe>
</td>
</tr>
<tr>
<td align="center"><input type="button" style="background-color:#400000;border:solid 1px black;color:White;font-weight:bold" id="closeLink" href="javascript:void(0);" value="Close"/></td>
</tr>
</table>
</p>
</div>
JS:
window.frames["OverlayDis"].focus();
window.frames["OverlayDis"].print();
But I have problem with font size.the Visible font size is not come in hardcopy.The page have 12px size of all text but the output printing come 8pt and less.
what happening?
#media print
{
body{font-family:verdana; font-size:10px;}
span.subheader{font-family: Verdana; font-size: 12px; font-weight: bold;}
span.sign{float:right;padding-right:20px;padding-top:20px;font-size:12px;font-weight:20px;font-weight: bold;}
}
#media screen
{
body{font-family:verdana; font-size:10px;}
span.subheader{font-family: Verdana; font-size: 12px; font-weight: bold;}
span.sign{float:right;padding-right:20px;padding-top:20px;font-size:12px;font-weight:20px;font-weight: bold;}
}
I added this style to my page for printing but this is not working still so small font printing..Another thing is i have used lightbox plugin to display for this frame.
var test;
Event.observe(window, 'load', function () {
test = new Lightbox('containerDiv');
});
function OpenOverlay(url)
{
document.getElementById('OverlayDis').src = url;
test.open();
Event.observe('closeLink', 'click', function () {
test.close();
});
}
What is my mistake?
Use a print stylesheet in the iframe's document.
I change the popup instead of iframe and make print and close Now working!!