I have tried the following:
<button onclick="window.print()" class="uk-button uk-float-left"><?php echo JText::_('COM_CSTUDOMUS_IMPRIMIR'); ?></button>
Also:
self.print()
window.focus();window.print()
When I click on print it shows the main window and the popup window in the page which is going to be printed. I only need the contents of the popup window.
This is an example of print popup:
<div class="contentSection">
<div class="contentToPrint">
<!-- content to be printed here -->
</div>
</div>
<div class="contentSection">
Print This
</div>
<div class="contentSection termsToPrint">
<h4>Terms & conditions</h4>
<p>Management reserves the right to withdraw, amend or suspend this print job in the event of any unforeseen circumstances outside its reasonable control, with no liability to any third party.</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#printOut').click(function(e){
e.preventDefault();
var w = window.open();
var printOne = $('.contentToPrint').html();
var printTwo = $('.termsToPrint').html();
w.document.write('<html><head><title>Copy Printed</title></head><body><h1>Copy Printed</h1><hr />' + printOne + '<hr />' + printTwo) + '</body></html>';
w.window.print();
w.document.close();
return false;
});
});
</script>
//popup page
<html>
<head>
<title>Your popup</title>
</head>
<body>
<h1>Pop</h1>
<p>Print me</p>
<a href="print.html" onclick="window.print();return false;">
<img src="images/printer.png" height="32px" width="32px">
</a>
</body>
</html>
//Main page
<html>
<head>
<title>main</title>
</head>
<body>
<h1>Pop & print</h1>
<button onclick="pop();">Pop</button>
<script type="text/javascript">
var POP;
function pop() {
POP = window.open('popup.html', 'thePopup', 'width=350,height=350');
}
</script>
</body>
</html>
Related
Why this code is not working in FB App Messenger Browser (Webview).
Parent Window:
<html>
<head>
<script language="Javascript">
function showFBWindow(){
url = "allowfbchild.html"
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
}
</script>
</head>
<body>
<input type="button" OnClick="showFBWindow()" value="Open FB" />
</body>
</html>
Child Window(allowfbchild.html) :
<html>
<head>
<script language="Javascript">
function redirectToFB(){
window.opener.location.href="http://wwww.facebook.com";
self.close();
}
</script>
</head>
<body>
Allow the user to view FB
<br/>Are you sure?
<input type="button" value="Ok" OnClick="redirectToFB()" />
</body>
</html>
When clicking on redirectToFB() button. Its not working as per coded.
Created two simple html files test.html and frame.html and here I am loading frame.html inside the test.html. But calling functions of frame.html in the test.html is not working, its giving function not defined
test.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<h3 align="center">TEST AB TEST</h3>
<div id="load_frame" ></div>
<div style='padding:30px;background-color:red; '>
<input id="test_Button" type='button' value='test_Button'/>
</div>
<script>
$(function(){
$('#load_frame').append('<object data="frame.html"/>');
});
$("#test_Button").bind( "click",function(){
console.log('aaaaaaaa');
myFunction1();
});
</script>
</body>
</html>
frame.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<h3 align="center">TEST Frame</h3>
<div style='padding:30px;width:500px;'>
<input id="frame_button" type='button' value='frame_button'/>
</div>
<script>
function myFunction1() {
alert('Inside frame');
}
$("#frame_button").bind( "click",function(){
myFunction1();
console.log('aaaaaaaa');
});
</script>
</body>
</html>
Error
Uncaught ReferenceError: myFunction1 is not defined
You need to call the function in the context of the frame window
$("#test_Button").bind( "click",function(){
//reference to the frame window
var frameWindow =$('#load_frame object')[0].contentWindow;
// the function is a property of that window
frameWindow.myFunction1();
});
DEMO
You can not simply access the content of an other frame. This fact is implementet by browser vendors for security reasons.
If you really want to "talk" between frames you can use postMessage for that: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
This is my code :
I have used window onload function to populate ui elements but it is not working properly.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Regalo - Shop</title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/bootstrap.min.css" />
<script src="<%=request.getContextPath()%>/resources/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(window).on('load',function(){
alert("OK");
<c:forEach var="item" items="${itemList}">
var name= '${item.desktopbrand}';
var details='${item.details}';
var id = '${item.desktopid}';
var price = '${item.desktopid}';
var catagory = '${item.catagory}';
var spanTag = '<div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="img/Desktop/'+ id +'.jpg"> <div class="caption"><h3>'+ name+ '</h3> <p>'+ price+ '</div> </p> <p><button type="button" class="btn btn-success btn-lg" onclick="details()">Show Details</button></p><p><button type="button" class="btn btn-success btn-lg" onclick="addToCart()">Buy now</button></p></div></div></div>';
$("#" + catagory).append(spanTag);
</c:forEach>
});
</script>
</head>
<body>
<h1>Gens Cooner</h1>
<div id="gen" class="container"></div>
<h1>Ladies Cooner</h1>
<div id="lad" class="container"></div>
<h1>Childrens Cooner</h1>
<div id="chil" class="container"></div>
</body>
</html>
I try to find the issue but couldn't. Your help would be highly appreciated.
window.onload = function(){ alert('Working!!'); }
Use above function and make sure you use only one window.onload function in a page
I'm a newbie in Jquery. I'm trying to print text on a document dynamically. I have a JavaScript function that is supposed to display images using the jQuery prettyphoto plugin. My function does not show the images but when I paste the code on a html file it works fine. Please help. A sample of my code is here.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./index.css" type="text/css">
<script type="text/javascript" charset="utf-8" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="spin.min.js"></script>
<script type="text/javascript" charset="utf-8" src="custom-functions.js"></script>
<link rel="stylesheet" href="./prettyPhoto/css/prettyPhoto.css" type="text/css">
<script type="text/javascript" src="./prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a[rel^='prettyPhoto_related-content-images']").prettyPhoto({theme:'facebook'});
});
function showImages()
{
var stringData = '';
stringData = stringData + '<div id="related-content-images" >Related to this: <br/>'+
'<img id="not-hidden" src="images/sample-album-2.jpg" alt="" title="">'+
'<img id="related-images" src="images/sample-album-3.jpg" alt="" title="">'+
'<img id="related-images" src="images/sample-album-4.jpg" alt="" title=""></div>';
document.getElementById("content").innerHTML=''+stringData+'';
}
</script>
</head>
<body>
<div id="header"><div id="app-logo-image">
<img src="images/app-logo.png" id="app-logo"/></div>
<div id="header-form">
<input type="search" id="search-text-box" name="search-text-box" placeholder="Search">
<input type="submit" id="search-button" name="" value="Search">
</div>
</div>
<div id="container">
<div id="sub-header-menu">
<div id="music-albums">
<img src="images/music-albums-icon.png" id="music-albums-image"; onclick="fetch('music-albums');"/></div>
<div id="genres-icon">
<img src="images/genres-icon.png" id="genres-icon-image"onclick="fetch('music-genres');"/></div>
<div id="artist-icon">
<img src="images/artists-icon.png" id="artist-icon-image"onclick="fetch('music-artists');"/></div>
<div id="home-icon">
<img src="images/home-button.png" id="home-icon-image"/></div>
</div>
<div id="content" style="left:0%;">
click me
</div>
</div>
</body>
</html>
Your showImages function isn't executed until the link is clicked, however the prettyPhoto initialisation is only run once when the document finishes loading, and since showImages hasn't been run yet prettyPhotos can't find and enhance those images.
If you add this to the end of showImages everything should work:
$('#content a').prettyPhoto({theme:'facebook'});
I have Two pages. One is
<html>
<head>
<script language="javascript">
function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</script>
</head>
<body>
<a name="div1" href="javascript:;" onmousedown="toggleDiv('div1');"><p><b>Section 1</b> </p></a>
<div id="div1" style="display:none">
Content for section 1.
</div>
<a name="div2" href="javascript:;" onmousedown="toggleDiv('div2');"><p><b>Section 2</b></p></a>
<div id="div2" style="display:none">
Content for section 2.
</div>
</body>
</html>
On other page I have:
<html>
<head>
<title>Test</title>
</script>
</head>
<body>
Section 2
</div>
<script type="text/javascript">
if ( location.hash.length > 1 )
{
toggleDiv( location.hash.substring(1) );
}
</script>
</body>
</html>
What I like to achieve here is, when I click on "Section 2" on the second page, main page will open with "div2" content displayed. The above code doesn't work for me.
d is missing in id
Section 2
and this script should be in page 1
<script type="text/javascript">
if ( location.hash.length > 1 )
{
toggleDiv( location.hash.substring(1) );
}
</script>
Hope this will help
this is complete code of your page 1 (main.html)
<html>
<head>
</head>
<body>
<a name="div1" href="javascript:;" onmousedown="toggleDiv('div1');"><p><b>Section 1</b> </p></a>
<div id="div1" style="display:none">
Content for section 1.
</div>
<a name="div2" href="javascript:;" onmousedown="toggleDiv('div2');"><p><b>Section 2</b></p></a>
<div id="div2" style="display:none">
Content for section 2.
</div>
</body>
<script type="text/javascript">
if ( location.hash.length > 1 )
{
toggleDiv( location.hash.substring(1));
}
function toggleDiv(divid){
alert(divid);
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</script>
</html>
You cannot call Javascript function Like that...That won't work...you need to call the function inthe onLoad Event of the Page...like
<body onload="toggleDiv('div2')">
</body>
Else
Open The Popup and Use "Window opener" property.See this link http://www.w3schools.com/jsref/prop_win_opener.asp