Develop Reference

Print function only works after second click

I have this function to print a DIV.
Whenever the page is loaded and I click in a "Print" link I have, the DIV is shown to be printed without CSS.
If I close Chrome's print visualization page and click in the "Print" link again, the DIV has CSS applied.
Any ideas why?
Javascript
function printDiv(divId) {
var printDivCSSpre =
'<link href="/static/assets/vendor/sb-admin-2-1.0.7/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">' +
'<link href="/static/assets/vendor/sb-admin-2-1.0.7/dist/css/sb-admin-2.css" rel="stylesheet">' +
'<div style="width:1000px; padding-right:20px;">';
var printDivCSSpost = '</div>';
$('body').append('<iframe id="print_frame" name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>');
$("link").clone().appendTo($("#print_frame").contents().find("head"));
window.frames["print_frame"].document.body.innerHTML =
printDivCSSpre + document.getElementById(divId).innerHTML + printDivCSSpost;
window.frames["print_frame"].window.focus();
var windowInstance = window.frames["print_frame"].window;
windowInstance.print();
}
HTML
<a id="print" href="#">
<i class="fa fa-print"></i> Print
</a>
<script>
$('#print').click(function () {
printDiv('report')
})
</script>
<div id="report" class="report">
<p># Generated Table#</p>
</div>
First click:
http://imgur.com/a/Go81Y
Closing the print preview page and clicking again in print
http://imgur.com/a/SCxJF

This happens because when you call your printDiv() function, css is also written using inner HTML and in this scenario CSS is not applied during first click because you wrote CSS to the elements even when they do not exist inside DIV.
The function to work as desired has to write DIV contents first and then CSS should be applied. I would say write css after contents of DIV or load on top of your HTML page and just write DIV contents.
Hope that helps.

Every thing is right just change the sequence. In browser debugger on first click it didn't show 'print_frame' in sources section while in second click it does (I am using chrome devtool).
So load in memory frame with css attributes during onload:
var windowInstance;
$(function(){
$('body').append('<iframe id="print_frame" name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>');
$("link").clone().appendTo($("#print_frame").contents().find("head"));
windowInstance = window.frames["print_frame"].window;
});
and onClick just append html
$('#print').click(function () {
var divId = 'report';
var printDivCSSpre ='<div id="printReportDiv" style="width:1000px; padding-right:20px;">';
var printDivCSSpost = '</div>';
window.frames["print_frame"].document.body.innerHTML = printDivCSSpre + document.getElementById(divId).innerHTML + printDivCSSpost;
window.frames["print_frame"].window.focus();
windowInstance.print();
});
updated jsfiddle

Try this one. The problem mainly arises because the css has not been applied to the page when the print command is initiated. setTimeout is one way to solve it as others have mentioned but it is really not possible to predict how much delay you will need. Slow internet connections will require high delays before you fire the print statement. The following code, however, only fires the print event after the css has been properly applied to the iframe.
$('#print').click(function () {
if($("#print_frame").length == 0) {
$('#report').after('<iframe id="print_frame" name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>');
}
var $head = $("#print_frame").contents().find("head");
// for now for ease I will just empty head
// ideally you would want to check if this is not empty
// append css only if empty
$head.empty();
$.ajax({
url : "https://dl.dropboxusercontent.com/u/7760475/reports.css",
dataType: "text",
success : function (reports) {
// grab css and apply its content to the iframe document
$head.append('<style>'+reports+'</style>');
$.ajax({
url : "https://dl.dropboxusercontent.com/u/7760475/bootstrap.css",
dataType: "text",
success : function (bootstrap) {
// grab another css and apply its content to the iframe document
// there may be better ways to load both css files at once but this works fine too
$head.append('<style>'+bootstrap+'</style>');
// css has been applied
// clone your div and print
var $body = $("#print_frame").contents().find('body');
// empty for ease
// but later append content only if empty
$body.empty();
$("#report").clone().appendTo($body);
$('#print_frame').get(0).contentWindow.print();
}
});
}
});
});

Use inline CSS instead.
Reason: When we PRINT or save as PDF if fails to fetch external css Files, So we have to use Inline css.
edited your file please see: jsfiddle.net/ytzcwykz/18/

As other people mentioned it is hard to see your problem without seeing the working example of a problem, but just guessing from the code:
Browser is not able to load the CSS before your print() call.
Browser is not able to render the CSS before your print() call.
Keeping that in mind changing your JS function that way might do the trick
function printDiv(divId) {
$("link").clone().appendTo($("#print_frame").contents().find("head"));
window.frames["print_frame"].document.body.innerHTML =
printDivCSSpre + document.getElementById(divId).innerHTML + printDivCSSpost;
window.frames["print_frame"].window.focus();
var windowInstance = window.frames["print_frame"].window;
setTimeout(function() {
windowInstance.print();
}, 0);
}
The idea behind this function is to let browser execute it's code after we added changed the HTML/CSS code in the window - see Why is setTimeout(fn, 0) sometimes useful?
WARNING: this approach is not tested for your particular problem, and it might also not work because we escape/leave the mouse-click call-stack, calling print() method might be not possible out of user-interaction stack.
UPDATE: after looking in the posted jsfiddle - my assumption was correct, the browser needs some time to load and render the CSS, that is why calling the print() right after changing iframe contents doesn't give the desired result. There are 3.5 ways to solve that:
Use events to identify when iframe's document and window has finished loading and rendering. I tried two approaches, and failed so far, need to read docs more carefully about when document and window are behiving during the loading sequence:
we can do that from outside of iframe, i.e. listen to events of iframe element and it's children
we can do that from inside of iframe, i.e. add little javascript snippet inside which will send a message to the parent window when loading is done.
Consider forming the print result different, how about print style-sheets? I.e. add one more style sheet with print-media query to the parent doc and just call print on it?
Consider forming an iframe which is already loaded and ready to be printed, but replace just the table contents inside it.

As others mentioned, The problem here is that the CSS files used are external resources and browser takes time to download and cache it locally. Once it is cached, it would serve faster and that's why it works fine from the second click.
As Anton mentioned, setTimeout is the key here! You may probably increase the timeout seconds to make that work. I tried setting it to 500ms and that worked,
setTimeout(function(){windowInstance.print();},500);

how to set the variable for creating a clickTag in Javascript

how do I set up the variable in order to implement a clickTag in Javascript for an HTML5 banner ad? How do I get a reference to the URL that is set in which the banner clicks out to? I know how to do this in AS3. I'm new to programming & esp to Javascript. I am NOT using Swiffy nor am I using Flash & the <canvas>. I am using Google Web Designer with a generic environment.
inside my function I have
mainCTAClickOut= function (e) {
var clickTag = "?"; //here is where I'm having a problem
window.open(window.clickTag, "_blank");
}
What am I missing?

First on html5 banners there is no more clickTAG variable.
Html5 banner is some sort of Rich Media content which is a little bit different from the old-fashion flash banners.
Instead of clickTag, we have 'Exit' concept in Rich Media(Flash or html)
For html5 Rich Media here is the steps:
You should add the exit button as a div tag with some id like:
<div id="exit_button"> Click to Learn More </div>
Then you should add the function to handle the exit and associate a name to it(This name will be used later on the DoubleClick Studio UI).
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
3.Bound the function to click event on the div tag
document.getElementById('exit_button').addEventListener('click', bgExitHandler, false);
But remember before the step one you should already added and initialized the 'Enabler':
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
`// If true, start function. If false, listen for INIT.
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
// Start ad, initialize animation,
// load in your image assets, call Enabler methods,
// and/or include other Studio modules.
// Also, you can start the Polite Load
}`
For a complete guide on how to create html5 banner, please refer to the following link.
https://support.google.com/richmedia/answer/2672545?hl=en&ref_topic=2672541&vid=1-635799307124943767-943471333&rd=1

From my understanding, GWD automatically generates the variable script. GWD makes you do steps via their wizard function and all it asks for is the destination URL which can be altered at any time thereafter.

Heloo Paulette,
I work for a spec database service (called OKNOK) and after studying some media kits, I can say that one way is to specify a global variable called clickTAG
<script>
var clickTAG = "%%DEST_URL_ESC%%";
</script>
And use that where you want to execute the click:
<a href="javascript: window.open(clickTAG, '_blank')">
<img src="image.png"/>
</a>

FOR FLASH CC HTML5 CANVAS USERS
I remember the nightmare of a client breathing down my neck and trying to fin an answer to this question, An I swore when I did I would come on to a site like this and help other poor stressed out developer and animators to solve the problem. So here goes step by step.
In your html5 syntax, in the HEAD section paste the code below:
<script>
var clickTAG = "www.yourURL.com";
</script>
replace the www.yourURL.com with your customers or whatever website you are targeting.
Move into the body section of your HTML and paste the following:
<a href="javascript: window.open(clickTAG, '_blank')">
<img src="image.png"/>
</a>
To target the entire stage of your banner delete the img src="image.png" bit and just place the above code in front of the canvas id="canvas" and finally place /a after the id="canvas" section. and bobs your aunty. You have a working clickTag on your Flash HTML5 canvas.Sorry if the fact you cant use opening and closing tags in these posts makes it harder to understand.
Have Fun Martin!

How to make an iframe auto-resize along with the dynamic changes on its content?

I have this js code I searched on auto-resizing iframe height with its content. It does what the user who posted this says it does. However, I now have this problem with dynamic content within the iframe.
The js code I have works only with the regular content of the page but not when there are dynamic changes going on within. For example, displaying texts through ajax call.
I've tried searching for other solutions to this but others did not work as well as what this code can do.
I'm hoping that there's someone who could help me update the code to meet what I currently need. I'm not very familiar with jquery/javascript to do this on my own. Thank you in advance! :)
This is the JS code:
function setIframeHeight(iframeId) {
var ifDoc, ifRef = document.getElementById(iframeId);
try {
ifDoc = ifRef.contentWindow.document.documentElement;
} catch (e) {
try {
ifDoc = ifRef.contentDocument.documentElement;
} catch (ee) {}
}
if (ifDoc) {
ifRef.height = 1;
ifRef.height = ifDoc.scrollHeight;
/* For width resize, enable below. */
//ifRef.width = 1;
//ifRef.width = ifDoc.scrollWidth;
}
}
I found this other code which enables iframe adapting to its dynamic content but I do not know how to make the code above and this work together. Please help me.
var iframe = document.getElementById("ifr").contentWindow;
iframe.$(".toggle_div").bind("change", function () {
$("#ifr").css({
height: iframe.$("body").outerHeight()
});
});
To summarize, I need a code that autoresizes iframe with its content and will autoresize again if there are changes on the size of the content.

The problem is that your page doesn't have any trigger indicating to resize when the iframe body resizes.
There also (as far as I know) isn't anything built into javascript that lets you watch for changes in an elements height.
You have two options.
If you are the owner of the iframe content, you can put a script in that page which can call to it's parent window telling the parent to run your resize script, or you can run a function which checks for changes say every second or so.
For the first method, you can follow the answer from here Can events fired from an iframe be handled by elements in its parent?
Otherwise just do a
setTimeout(function(){
$("#ifr").css({
height: iframe.$("body").outerHeight()
});
},1000);

function adjustMyFrameHeight()
{
var frame = getElement("myFrame");
var frameDoc = getIFrameDocument("myFrame");
frame.height = frameDoc.body.offsetHeight;
}
call this method on your iframe onload event and replace mtFrame to your iframe Id

image execCommand after ajax

I'm working on a WYSIWYG editor and experiencing a problem with the image handling using execCommand, the following is a simplified example of my page structue:
<div id="buttons_panel"><input id="img_submit" type="button"/></div>
<div id="img_handle" style="display:none;">
<div id="ajax_upload"></div> /* AJAX IMG UPLOAD FROM */
<div id="images"></div> /* DIV FOR ALL UPLOADED IMAGES DISPLAY */
</div>
<iframe id="text_content"></iframe>
the simplified JavaScript I'm using, basically showing the hidden div uploading an image with ajax and displaying all uploaded images:
<script>
$("#img_submit").click(function(){
$("#img_handle").show();
/* HANDLE IMG UPLOAD WITH AJAX AND RELOAD ALL IMAGES INTO #images DIV */
});
</script>
Now, all of this works just fine - as soon as the new image is uploaded with ajax I append it to the images div:
function loadImgs(){
var loadImages="PATH/TO/URL";
$.post(loadImages, {request:"loadImages"}, function(response){
$("#images").append(response);
insert_img();
});
}
Then, on click on either of the results i run the following function:
function insert_img(){$(".img_insert").click(function(){
var frame = document.getElementById('text_content'); frame.document.execCommand('InsertImage',false,"../PATH/TO/IMG");
});}
Now, here is where the execCommand refuses to work in firebug i get: "getElementById("text_content").document UNDEFIEND"
Every other execCommand functions I run on that page (ex: italic Bold, font-color etc..) works, but here it doesn't, can some one please help me figure out a solution?

The standard way to get hold of the document object within an <iframe> element is via its contentDocument property rather than document. This isn't supported in some older browsers but in those you can use contentWindow.document instead.
So, the following will work in all browsers except those which do not support contentDocument or contentWindow, which in practice are not around today:
function getIframeDocument(iframeEl) {
return iframeEl.contentDocument || iframeEl.contentWindow.document;
}
function insert_img(){
$(".img_insert").click(function() {
var frame = document.getElementById('text_content');
getIframeDocument(frame).execCommand('InsertImage',false,"../PATH/TO/IMG");
});
}

Flash in fullscreen mode works in <embed>, but not work within <a> tag

I have this code
<div id="c01" class="hider">
< a href="flash.swf" class="bump">flash</a>
</div>
and it displays flash content within a bumpbox (lightbox alternative) window. It works perfectly, but there is a fullscreen button in the flash animation and it do not works. The other button (to stop the animation) works ok.
I find out, that with this
<embed src="flash.swf" width="100%" height="100%" allowFullScreen="true"> </embed>
fullscreen button works fine, but the flash animation runs since the page is loaded and I have about 50 of those animations, so I need to run only one of them at a time. I need to make it clickable (within ) and with working fullscreen button at the same time. Is it possible? Thank you!

The issue you're having is actually coming from Mootools. Mootools has an Flash embed class called Swiff, which is what BumpBox uses when you pass an SWF in your link.
Unfortunately, I think you're either going to have to hack into BumpBox or Mootools to get full screen permission working.
If you look into the expanded version of BumpBox 2.0.1, you will see where Swiff is instantiated, around line 372:
var obj = new Swiff(content, {
id: 'video',
width: maxw-40,
height: maxh-40,
container: div
})
You may be able to pass in the additional parameter you require here, which would look something like this:
var obj = new Swiff(content, {
id: 'video',
width: maxw-40,
height: maxh-40,
container: div,
params: {
allowFullScreen: true
},
})
If that fails you will have to make the adjustment to the Swiff class itself. Open up Mootools and search for Swiff=new Class. That will lead you to the code that creates the Flash object. Finding the params list should be easy from there, it looks like:
params:{quality:"high",allowScriptAccess:"always",wMode:"window",swLiveConnect:true}
and you would just need to add the fullscreen permission:
params:{allowFullScreen:true,quality:"high",allowScriptAccess:"always",wMode:"window",swLiveConnect:true}

Some browsers can't open a Flash file without Flash container (embed).
The embed code in your post is fine, put it on a PHP page and replace:
src="flash.swf"
with
<?php echo $_GET['flashurl']; ?>
Then you can put as link: nameofphpscript.php?flashurl=flash.swf