Develop Reference

How to put dynamically created multiple iframe in one div to flush them for printing

I have created multiple iframes, and for printing all of them together, I want to append those to one div, so that it can be used for printing. Could you please provide JavaScript or jQuery code for accessing code.
Code for creating iframe dynamically at run-time
var contentDiv = document.createElement("contentDiv" + count++);
var iframe = $('<iframe>', {
src: 'blank.htm',
id: 'printFrame',
frameborder: '0',
border: '0',
width: '100%',
height: '100%',
scrolling: 'no'
}).appendTo(contentDiv);
var frameNode = contentDiv.lastElementChild;
frameNode.setAttribute("src", url.getURL());
var printFrameDiv = document.getElementById("printContentDiv");
$(printFrameDiv).append(contentDiv);
Code for Printing the content
function onPrint(){
document.getElementById('printTag').hidden = true;
var dummyContent = document.getElementById("printContentDiv");
var iFrame = document.getElementById("printFrame");
dummyContent.innerHTML = iFrame.contentWindow.document.body.innerHTML;
window.print();
window.parent.closeMe();
}
This code currently printing only first iframe I have created dynamically.

Iframe not being created in correct place

I'm loading an iframe into a div on a page. If I use this it works fine:
<iframe src="http://myURL.com/embed/whatever/1213" id="frameID" frameBorder="0" width="100%" style="overflow:hidden"></iframe>
<script>
window.addEventListener( "message",
function (e) {
var frameHeight = e.data.height;
document.getElementById('frameID').height=frameHeight + "px";
},
false
);
</script>
But, I'd rather a total javascript solution so I use the following, but it loads the iframe at the end of the page instead of in the div as above.
<script>
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.src = 'http://myURL.com/embed/whatever/1213';
iframe.width = '100%';
iframe.id = 'frameID';
iframe.frameBorder = '0';
iframe.style = 'overflow:hidden';
window.addEventListener( "message",
function (e) {
var frameHeight = e.data.height;
alert(frameHeight);
document.getElementById('frameID').height=frameHeight + "px";
},
false
);
</script>
Why would it do that?

By using document.body.appendChild() you're appending it as a child of body.
Does the div have an id attribute? If you you could use:
document.getElementById('id-of-div').appendChild(iframe);
Does this help?

Ext.Ux.Printer Print Image doesn't work

i have downloaded the https://github.com/edspencer/Ext.ux.Printer and
import the Printer.js and Base.js
in Base.Js i added the image rendder code:
Ext.ux.Printer.imageRenderer = Ext.extend(Ext.ux.Printer.BaseRenderer, {
generateBody: function(image) {
return String.format("<div class='image-print'>{0}</div>", image.body.dom.innerHTML);
}
});
Ext.ux.Printer.registerRenderer('image', Ext.ux.Printer.imageRenderer);
this is the place display the image with id displayimage
items: [Printtoolbar,{
xtype : 'image',
id : 'displayimage',
style: {
'display': 'block',
'margin': 'auto'
},
width: 320,
height: 240,
}]
When Pressed Print Button Print The Image
var PrintImgBtn = Ext.getCmp('btnPrint');
PrintImgBtn.on('click', function(){
printImg = Ext.getCmp('displayimage');
Ext.ux.Printer.print(printImg);
Unfortunately when i pressed the print button,nothing happen.

You can just open a window and print it. In your button handler:
...
handler: function() {
var img = Ext.getCmp('displayimage');
if(img) {
var html = img.container.dom.innerHTML;
var win = window.open();
win.document.write(html);
win.print();
win.close();
}
}
...
Example with print: http://jsfiddle.net/wXfFN/3/

if your are using Iframe 'Ext.ux.iFrame', then you can use something like this
var iframe = this.down('iframe');
iframe.getFrame().contentWindow.print();
if you want to add some additional content along with iframe content
var iframe = this.down('iframe');
var contentWindow = iframe.getFrame().contentWindow;
var iFrameNewContent = "<div>This will be helpfull</div>" + contentWindow.document.body.innerHTML;
// set iFrameNewContent to content window
contentWindow.document.body.innerHTML = iFrameNewContent;
contentWindow.print();
Advantage is that all the styles applied to iframe content, you can see in print document
Also check this link whether it comes usefull
https://druckit.wordpress.com/2014/02/15/ext-js-4-printing-the-contents-of-an-ext-panel/

Tubeplayer causing elements to (briefly) reappear in chrome?

I'm working on some javascript to insert a youtube video into a page using the tubeplayer plugin. The video is inserted when the user clicks a link and is removed when the user clicks the close button.
For the most part, the script works fine. When the user clicks the close button, the button slides away, the video player fades out, the container fades out, and everything looks the way it did before the user clicked the link.
In Chrome, however, after everything has faded out, the video and the close button will occasionally re-appear in a brief flash. It's not consistent - it only occurs about half the time - but it looks bad.
I've tried all sorts of things to fix this - hiding elements, not hiding elements, removing elements at various point in the script - and it keeps happening. The only thing I'm certain of is that tubeplayer is a necessary element; if I take tubeplayer out and just show / hide the other elements, the flash does not occur.
I'm at a total loss about how to prevent this from happening. Any help would be hugely appreciated.
Here's my markup:
<section id="hero">
<div class="item-content">
<a href="http://www.youtube.com/watch?v=sC_IESaVT0A" class="youtube">
<img src="/dynamic-content/solutions/hero_content_mobility.png">
</a>
</div>
</section>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
jnet.ytplayer.init('#hero', 711, 400, '#000');
});
</script>
And the script:
ytplayer = {
$target:null,
height:null,
width:null,
background:null,
defaults:{
allowFullScreen: "true",
initialVideo: 'FtUtE_kv7DU',
preferredQuality: "default",
showControls: 1,
showRelated: 0,
autoPlay: 1,
autoHide: 3,
border: 0,
theme: 'dark',
wmode: 'opaque',
origin: document.domain,
swfobjectURL: "/assets/js/jquery/plugins_jq.js",
allowScriptAccess: "always",
playerID: "tubeplayer-player-container",
loadSWFObject: false,
iframed: true,
onPlayerEnded: function(){
ytplayer.removeVideo();
}
},
init:function(target, w, h, bg){
this.$target = $(target);
this.defaults.height = h;
this.defaults.width = w;
this.background = bg;
},
showVideo:function(link){
var id = $(link).attr("href").replace("http://www.youtube.com/watch?v=", "");
this.defaults.initialVideo = id;
var markup = "<div id='youtube-container'>";
markup += "<div id='youtube-player'>";
markup += "<div id='youtube-closeBtn'></div>";
markup += "<div id='youtube'></div>";
markup += "</div>";
markup += "</div>";
this.$target.prepend(markup);
$('#youtube-closeBtn').click(function(){
ytplayer.removeVideo();
});
$('#youtube-container').height(this.defaults.height);
$('#youtube-container').css('background', this.background);
$('#youtube').height(this.defaults.height);
$('#youtube').width(this.defaults.width);
$('#youtube-player').height(this.defaults.height);
$('#youtube-player').width(this.defaults.width);
$('#youtube-container').fadeIn(200);
$('#youtube-player').fadeIn(600, function() {
$('#youtube').tubeplayer(ytplayer.defaults);
$('#youtube-closeBtn').show();
$('#youtube-closeBtn').animate({ 'right' : '-=49' }, 600, function(){
});
});
},
removeVideo:function(){
$('#youtube-closeBtn').animate({'right' : '+=49'}, 200, function() {
$('#youtube-closeBtn').hide();
$('#youtube').tubeplayer('stop');
$('#youtube-player').fadeOut(600, function(){
$('#youtube-container').fadeOut(100, function(){
$('#youtube-container').remove();
});
});
})
}
}

How to get which element was clicked and the src attribute of said element in an iFrame

I have an iframe that's generated on-the-fly with the fancybox plugin. I want to get the clicked element inside of it and from that element get the src attribute but whenever I try I just get "undefined" as an answer.
what triggers the iframe creation is:
<a id="contentImageAJAX" class="iframe" href="/tools/images?keyword=cat" style="display:none;">g</a>
and
$('#contentImage').focus(function(){
var $contentImage = $('#contentImage');
$('a#contentImageAJAX').click().fancybox({
'width' : 1280,
'height': 600,
'centerOnScroll': true,
'hideOnContentClick' : true,
'onCleanup': function(){tryMe($contentImage);}
});
I found out that the iframe created is #fancybox-frame so I tried:
$('#fancybox-frame').load(function(){
$('#fancybox-frame').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
});
but it didn't work and "tryMe" is this function:
function tryMe($cImg){
console.log($('#fancybox-frame').contents().find('clickable').attr('src'));
}
I've been trying several iterations of this for hours any idea what am I missing?

The selector inside tryMe method is is wrong find('clickable'). I think you are looking for find('.clickable').
Try this
$('a#contentImageAJAX').click().fancybox({
'width' : 1280,
'height': 600,
'centerOnScroll': true,
'hideOnContentClick' : true,
'onCleanup': function(){parent.tryMe($contentImage);},
'onComplete': function(){
$('#fancybox-frame').contents().find('linkSelector').click(function(){
//Do you stuff here.
});
}
});