onlick event not working within a window.open - javascript

I'm trying to achieve an onclick event once window.open has opened. So that when the user clicks a button in the new window it works.
The onclick event works if it's not within the newly opened window.
<div class="show-dialog" id="content">
<script type="text/javascript">
var c = document.getElementById("content");
function resizeText(multiplier) { if (c.style.fontSize == "") {c.style.fontSize = "1.0em"; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + "em"; }
</script>
Make text bigger
Make text smaller
</div>
The javascript function enables clicking the links and increasing or decreasing the text. The open.window function opens the new window which is good and is working fine but within my window.open example the onlick event doesn't trigger. So I can't use the function :(
<span class="Show">Show<i class="fa fa-external-link-square fa-left"></i></span>
$(".Show a").click(function() {
var e = $(this).parent().next("div.show-dialog").html();
var t = window.open("", "mywindow1", "width=950,height=550,scrollbars=yes,toolbar=yes,menubar=yes");
t.document.write("<html><head>");
t.document.write("<style>body{font-size:2em;}</style>");
t.document.write("<script type='text/javascript'>
var c = document.getElementById('content');
function resizeText(multiplier) {
if (c.style.fontSize == '2em')
{ c.style.fontSize = '2em'; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + 'em';
}
</script>");
t.document.write("</head><body>");
$(t.document).find("body").html(e);
t.document.write("<a href='javascript:void(0);' onclick='resizeText(1)' id='plustext'>Make text bigger</a>
<a href='javascript:void(0);' onclick='resizeText(-1)' id='minustext'>Make text smaller</a>");
t.document.write("</body>");
t.document.write("</html");});
Any help would be greatly appreciated :)

In the end I managed to get the onclick even to work within the window.open.
I also was intergrating a function to increase and decrease the font-size within the window.open onclick.
// Creating window to open for text that are in div with class name show-dialog
$(".Show a").click(function() {
// Varible grabs content of show dialogs
var activityContent = $(this).parent().next("div.show-dialog").html();
// Establish varibale to create buttons to increase text
var userGUI = "<div class='userGUI'><a href='javascript:void(0);' onclick='resizeText(1)' id='plustext'><i class='fa fa-plus-square-o fa-2x'></i></a>
<a href='javascript:void(0);' onclick='resizeText(-1)' id='minustext'><i class='fa fa-minus-square-o fa-2x'></i></a><br>Increase / Decrease font size.</div>";
// Created variable for the window.open
var inWindow = window.open("", "mywindow1", "width=950,height=550,scrollbars=yes,toolbar=yes,menubar=yes");
// Writing to the inWindow variable
inWindow.document.write("<html><head>");
inWindow.document.write("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>");
inWindow.document.write("<title>Hello world</title>");
inWindow.document.write("<style>body{font-family: 'Open Sans', sans-serif; font-size: 18px; line-height: 1.8;}a{color:#663366;}a:hover{color:#844484;}.userGUI{float:right;}</style>");
inWindow.document.write("</head><body id='content'>");
$(inWindow.document).find("body").append(userGUI);
$(inWindow.document).find("body").append("<br><br>");
$(inWindow.document).find("body").append(activityContent);
inWindow.document.write("</body><script type='text/javascript'>
// Increase font size function
function resizeText(multiplier) {
var c = document.getElementById('content');
if (c.style.fontSize == '')
{ c.style.fontSize = '1.175em'; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + 'em';
}</script></html>");
inWindow.document.write("");
inWindow.document.close();
});
The html to this is in my question above ^.

Related

Change an a tag attribute in JavaScript based on screen width

I was trying to change the attribute of an a tag using media queries but I found out that media with a hyperlink is purely advisory. So, the alternative is to use JavaScript but I seem to be having trouble getting the screen.width to work.
JavaScript:
function adjustHeight(){
var actual_width=screen.width;
alert("width: " + actual_width);
if(actual_width < 1281) {
var h1= document.getElementById('procsLink').getAttribute('font-size');
alert("font-size: " + h1);
h1 = 35px;
document.getElementById('procsLink').setAttribute('<font></font>-size',h1)
}
return false;
}
Here is my Jsfiddle of the code: http://jsfiddle.net/Arandolph01/2DVv9/
Note: I know there is a way to have the link still appear after 'click' so you can see the changed attribute. (Not sure how)
What do I need to do to get the JavaScript to recognize the screen size? Is my a tag correct?
Thank you.
Here is the problem, there is no id on that anchor tag so adjust your html like this:
- added id to the anchor tag
- removed the actual link so you can see the a tag change font size
- removed the semicolon in the onclick
<span id="sigs" style="display: block;">
<li >
<a id="procsLink" href="#" onclick="adjustHeight()" class="sigsLink" >Manage Signatures</a>
</li>
</span>
Than your css like this:
#procsLink{
font-size: 14px;
}
And your JS like this:
function adjustHeight(){
var actual_width = window.innerWidth;
if(actual_width < 1281) {
var h1 = document.getElementById('procsLink');
var newFontSize = '35px';
h1.style.fontSize = newFontSize;
}
}
function adjustHeight(){
var actual_width =screen.width;
alert("width: " + actual_width);
if(actual_width < 1281) {
var h1 = document.getElementById('procsLink').getAttribute('font-size');
alert("font-size: " + h1);
h1 = "35px";
document.getElementById('procsLink').setAttribute('font-size',h1)
}
return false;
}
Add quote to 35px ;)
You missed the semicolon after:
document.getElementById('procsLink').setAttribute('<font></font>-size',h1)
And add quote to 35px.
Well your code is working fine now, I updated your fiddle
function adjustHeight(){
var actual_width = screen.width;
alert("width: " + actual_width + "px");
if(actual_width < 1281) {
var h1 = document.getElementById('procsLink').getAttribute('font-size');
alert("font-size: " + h1);
h1 = "35px";
document.getElementById('procsLink').setAttribute('<font></font>-size',h1);
}
return false;
}

How to use multiple javascript events in one HTML doc?

I have a page with 2 javascript events, one triggered from the mouse, the other from the keyboard. When I load the page I can get one or the other to work, but not both. If I press a key first that function will run, but then I cannot do the mouse click or another keystroke. And vice versa. I know jQuery makes this easier, but I'd rather not have my users download that for each page, so I'm trying to do this the old fashioned way. I have read as much about javascript events as I can find but I'm stuck here with this one ...
thanks in advance, Brad.
NOTE: in Chrome and Safari I get the above results, Firefox and Opera will only work with the keystroke function
<html>
<head>
<script>
function create(event) {
var x=event.clientX-14;
var y=event.clientY-33;
var output = document.write("<p id=\"text\" style=\"background-color: white; position: absolute; top:" + y + "px;left:" + x + "px;\";>You're Text, your M#jesty!</p>");
}
function type(event)
{
var letter_in = event.keyCode;
var letter = String.fromCharCode(letter_in);
//var shift = event.shiftKey;
//if (shift === false) {letter = String.toLowerCase;}
document.write(letter);
}
</script>
</head>
<body onmousedown="create(event)" onkeydown="type(event)">
</body>
</html>
It's because you're using document.write() which clears everything else on the page, including your handlers.
Calling document.write() after the document has been loaded implicitly calls document.open(), which clears the document.
So to fix this, you want to use something like innerHTML to only update the contents of an element within your page.
See this example:
<html>
<head>
</head>
<body onmousedown="create(event)" onkeydown="type(event)">
<div id="foo"></div>
<script>
function create(event) {
var x=event.clientX-14;
var y=event.clientY-33;
var output = document.getElementById("foo").innerHTML = "<p id=\"text\" style=\"background-color: white; position: absolute; top:" + y + "px;left:" + x + "px;\";>You're Text, your M#jesty!</p>";
}
function type(event)
{
var letter_in = event.keyCode;
var letter = String.fromCharCode(letter_in);
//var shift = event.shiftKey;
//if (shift === false) {letter = String.toLowerCase;}
document.getElementById("foo").innerHTML = letter;
}
</script>
</body>
</html>

popup in a popup, second popup has no focus?

Ok I know this is going to sound weird but it is what the client wants. I am working within a popup and when a user clicks on a datagrid cell within a certain column it will popup a html table with data. I have the second popup to display but it does not get focus. This is currently the code I am using to create the second popup. Any help to get the focus on this second popup would be great.
function onCellClick() {
var cmGrid = igtbl_getGridById("countermeasureDetailsGrid");
var cmCellID = cmGrid.ActiveCell.split("_");
if (cmCellID[3] === "3") {
var countermeasureID = igtbl_getCellById("countermeasureDetailsGrid_rc_" + cmCellID[2] + "_0").getValue();
var recordType = igtbl_getCellById("countermeasureDetailsGrid_rc_" + cmCellID[2] + "_4").getValue();
_crfPopupWindow = new crfPopupWindow(countermeasureID, recordType);
_crfPopupWindow.open();
_crfPopupWindow.focus();
}
}
function crfPopupWindow(countermeasureID, recordType) {
var crfPopup = new WindowDef();
crfPopup.target = "CRF_Popup.aspx?countermeasureID=" + countermeasureID + "&" + "recordType=" + recordType;
crfPopup.windowName = "CRFPopup";
crfPopup.toolBar = "no";
crfPopup.resizable = "yes";
crfPopup.scrollbars = "yes";
crfPopup.location = "yes";
crfPopup.width = 350;
crfPopup.height = 400;
return crfPopup;
}
EDIT: Solution
<script type="text/javascript" language="javascript">
function init() {
window.focus();
}
</script>
Have you checked that the 2nd popup has higher z-index CSS property?
First popup can have z-index of, say, 1000, but the second should have then 1001.
window.focus on page load This works

Changing JS code from clicking image to clicking link

I found the following JS online, which functions like:
If an image is clicked, open the image in new window and prompt for print. Once printed the window closes. I need this script modified to click a print link it prints an image then closes the new image window. So I want to change from clicking the image itself to clicking a link that says print image.
Here is the code:
<script type="text/javascript">
/* <![CDATA[ */
function makepage(src)
{
// We break the closing script tag in half to prevent
// the HTML parser from seeing it as a part of
// the *main* page.
return "<html>\n" +
"<head>\n" +
"<title>Temporary Printing Window</title>\n" +
"<script>\n" +
"function step1() {\n" +
" setTimeout('step2()', 10);\n" +
"}\n" +
"function step2() {\n" +
" window.print();\n" +
" window.close();\n" +
"}\n" +
"</scr" + "ipt>\n" +
"</head>\n" +
"<body onLoad='step1()'>\n" +
"<img src='" + src + "'/>\n" +
"</body>\n" +
"</html>\n";
}
function printme(evt)
{
if (!evt) {
// Old IE
evt = window.event;
}
var image = evt.target;
if (!image) {
// Old IE
image = window.event.srcElement;
}
src = image.src;
link = "about:blank";
var pw = window.open(link, "_new");
pw.document.open();
pw.document.write(makepage(src));
pw.document.close();
}
/* ]]> */
</script>
<img src="fortune.jpg" onclick="printme(event)" />
I do not know any JS so I apologize. I only do php/mysql.
Best Regards!
Jim.
<img src="someurl.jpg" id="imgid' />
Print the image
function printme(id)
{
var src = document.getElementById(id).src;
var link = "about:blank";
var pw = window.open(link, "_new");
pw.document.open();
pw.document.write(makepage(src));
pw.document.close();
}
In the old method, the printme function knows what image should be printed: the same image that was clicked; when you change the trigger, you need to tell the function explicitly what image you want to print. That is why we are adding an id to the image and pass it to printme function. But if you only have one image on the page, or if a spacial relation exists (like the link always being the immediate next node after the image), then we can do it differently and need no id.
I don't know what your link looks like, but assuming it's just a plain anchor:
Change from:
<img src="fortune.jpg" onclick="printme(event)" />
To:
<img id="printableImage" src="fortune.jpg" onclick="printme(event)" />
<a href="javascript:void(0);" onclick="printme('printableImage')" />
Then alter the printme() function to retrieve the image src from the passed in image element id (jQuery makes this easy):
function printme(printableImageId)
{
var src = $('#' + printableImageId).attr('src');
// the rest of the logic...
}
You'll need to modify the printMe function a bit, doing this should fix it:
function printme(evt)
{
if (!evt) {
// Old IE
evt = window.event;
}
var anchor = evt.target;
if (!anchor) {
// Old IE
anchor = window.event.srcElement;
}
src = anchor.href;
link = "about:blank";
var pw = window.open(link, "_new");
pw.document.open();
pw.document.write(makepage(src));
pw.document.close();
return false;
}
And then on your actual anchor you would do the following:
Print

Using javascript to print images

I would like to know if it's possible to use javascript to open a popup window containing an image, and at the same time have the print dialog show. Once someone clicks on print, the popup closes.
Is this easily attainable?
Another great solution!! All credit goes to Codescratcher
<script>
function ImagetoPrint(source)
{
return "<html><head><scri"+"pt>function step1(){\n" +
"setTimeout('step2()', 10);}\n" +
"function step2(){window.print();window.close()}\n" +
"</scri" + "pt></head><body onload='step1()'>\n" +
"<img src='" + source + "' /></body></html>";
}
function PrintImage(source)
{
var Pagelink = "about:blank";
var pwa = window.open(Pagelink, "_new");
pwa.document.open();
pwa.document.write(ImagetoPrint(source));
pwa.document.close();
}
</script>
PRINT
See the full example here.
popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();
Use this in the head block
<script type="text/javascript">
function printImg() {
pwin = window.open(document.getElementById("mainImg").src,"_blank");
pwin.onload = function () {window.print();}
}
</script>
use this in the body block
<img src="images.jpg" id="mainImg" />
<input type="button" value="Print Image" onclick="printImg()" />
This code will open YOUR_IMAGE_URL in a popup window, show print dialog and close popup window after print.
var popup;
function closePrint () {
if ( popup ) {
popup.close();
}
}
popup = window.open( YOUR_IMAGE_URL );
popup.onbeforeunload = closePrint;
popup.onafterprint = closePrint;
popup.focus(); // Required for IE
popup.print();
MDN Reference code
A cross browser solution printImage(document.getElementById('buzzBarcode').src)
/**
* Prints an image by temporarily opening a popup
* #param {string} src - image source to load
* #returns {void}
*/
function printImage(src) {
var win = window.open('about:blank', "_new");
win.document.open();
win.document.write([
'<html>',
' <head>',
' </head>',
' <body onload="window.print()" onafterprint="window.close()">',
' <img src="' + src + '"/>',
' </body>',
'</html>'
].join(''));
win.document.close();
}
img {
display: block;
margin: 10px auto;
}
button {
font-family: tahoma;
font-size: 12px;
padding: 6px;
display: block;
margin: 0 auto;
}
<img id="buzzBarcode" src="https://barcode.orcascan.com/qrcode/buzz.png?text=to infinity and beyond" width="150" height="150" />
Yea, just put the image on the screen, and then call window.print(); in javascript and it should popup.
(This is how Google Maps/Google Calendar do printing)
This works in Chrome:
<body ><img src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;">
<script type="text/javascript">
window.onload = function() {
window.print();
setTimeout(function() {
window.close();
}, 1);
};
</script>
</body>
I just spent 45 minutes on this "SIMPLE" problem, trying to get it the way I wanted it to operate.
I had an image inside an img tag, dynamically generated by a jQuery Barcode plugin that I had to print. I wanted it to print in another window and afterwards close the window. This was all supposed to happen after the user clicked a button inside a jQuery Grid plugin, inside a jQuery-UI dialog along with jQuery-UI dialog extender applied to it.
I adjusted everyone answers till I finally came up with this, maybe it can help someone.
w = window.open(document.getElementById("UB-canvas").src);
w.onload = function () { w.print(); }
w.onbeforeunload = setTimeout(function () { w.close(); },500);
w.onafterprint = setTimeout(function () { w.close(); },500);
The setTimeout is not just for shits and giggles, it's the only way I found Firefox 42 would hit those functions. It would just simply skip the .close() functions until I added a breakpoint to it, then it worked perfectly. So I'm assuming it created those window instances before it could apply the onbeforeload event function and onafterprint event functions, or something.
I wrote a coffee script function that does that (but without opening a new window):
#print_img = (url) ->
$children = $('body').children().hide()
$img = $('<img>', src: url)
$img.appendTo('body')
$img.on 'load', ->
window.print()
$(this).remove()
$children.show()
Or if you prefer in javascript:
this.print_img = function(url) {
var $children, $img;
$children = $('body').children().hide();
$img = $('<img>', {
src: url
});
$img.appendTo('body');
$img.on('load', function() {
window.print();
$(this).remove();
$children.show();
});
};
This function makes sure that the elements on the body are hidden and not redrawn into the DOM.
It also makes sure that the image is loaded before calling print (if the image is too large and the internet connection is slow, it may take a while to load the img, if you call print too soon, it will print an empty page)

Categories