Develop Reference

how to increase iframe height when tab selected containts long content

I have included iframe to other web page as below
<script type="text/javascript">window.addEventListener("message", function(e){var $iframe=document.getElementById("my-iframe"); var eventName=e.data[0]; var data=e.data[1];switch(eventName){case "setHeight": $iframe.height=parseInt(data); break; case "scrollToTop": $iframe.scrollIntoView(); break;}}, false);
</script>
<div style="width:100%; text-align:left;" >
<iframe src="http://mywebpage.com/list?mode=iframe" frameborder="0" height="1000" width="100%" vspace="0" hspace="0" marginheight="5" marginwidth="5" scrolling="no" allowtransparency="true" id="my-iframe"></iframe>
</div>
I have three tabs in iframe page, first tab contains data which don't have long content but third tab having long content.
When i open third tab, iframe height doesn't get increased. Iframe height remains same when loaded for first time and remaining page's content gets hidden.
How can i fix this ?
I have used TBHTML tabs for tab rendering as below.
echo TbHtml::tabbableTabs($tabs);

you can use iframe-resizer jquery plugin to overcome this issue
http://davidjbradshaw.github.io/iframe-resizer/
example
http://davidjbradshaw.com/iframe-resizer/example/

For this you can use following code
document.getElementById("my-iframe").height = (document.getElementById('my-iframe').contentWindow.document.body.scrollHeight) + 'px';

Passing onclick handler as part of dynamic HTML content

I came across similar questions, but it did not have the exact problem/solution I was hoping for. I apologize in advance if this has been answered before and I missed it.
I have dynamic HTML code that I insert on AJAX return from db:
for(var i=0;i<data.Links.length;i++){
$('#vid-list').append('<li class="vid-item" onclick="startVideo(\''+data.Links[i]+'\')"><div class="thumb"><img src="'+ data.Thumb[i]+'"></div><div class="desc">'+data.Name[i]+'</div></li>');
}
data.links is an array of youtube embed links. data.Name is an array of titles, data.thumb is the respective thumbnail images and so on.
startVideo is a fucntion in my JS file defined as this:
$(function(){
function startVideo(srcUrl){
$('#popup2').style.display ='block';
document.getElementById('vid_frame').src=srcUrl;
}
});
It passes the link from the dynamic HTML to play the video in an iframe popup. The HTML code for that is :
<div class="vid-list-container">
<ul id="vid-list">
<!--need to insert videos here-->
</ul>
</div>
<div id="popup2" class="popup">
<iframe id="vid_frame" frameborder="0" height="315" src="" width="560" allowscriptaccess="always">
</iframe>
<a class="close" href="#" onclick="toggleVideo('hide')">
<img id="close-icon" src="../images/info-close-icon.png"></a></div>
</div>
So this is my problem: The HTML looks fine after loading. Data gets properly populated within the HTML elements.
But when I click on the video, no popup appears. i.e. startVideo() does not get called onClick event. This code worked fine with static HTML code. I read other questions and it was said that if the event happens after the dynamic element has completely loaded, there should not be problem with the binding.But that is not the case here.
Are there any other checks that I could do?

How to use iframe with blur and focus

I want to give action to iframe with blur and focus,
The scenario of my code is,I written a android question in webpage,beside that question I displayed android phone picture,what ever the code written below the question,the output will be shown in that picture and if you are out of browsing area,the title will shown as inactive.
action should be infocus or outfocus.
for this command I am writing,
<div class="andr_app">
<iframe src=" <%= request.getContextPath()%>/images/mob_empty.png" width="400px" height="800px" id="iFrameUrl${questionId}" class="mobileDisplayIframe" frameborder="0" scrolling="no"></iframe>
</div>
Please help me in this.

The iFrame element doesn't have focus or blur events, so you need to use the window.
var iframe = document.getElementById('iframe');
var iframeWindow = iframe.contentWindow;
iframeWindow.onfocus = function(){
//focussed
}
iframeWindow.onblur = function(){
//blurred
}
Reference: answer

Finally I got my answer,but not in iframe.
I change iframe to object,
<object data="<%= request.getContextPath()%>/images/mob_empty.png" width="325px" height="560px" style= "padding-right: 85px"; id="iFrameUrl${questionId}" id="iFrameUrl${questionId}" class="mobileDisplayIframe" frameborder="0" scrolling="no">
</object>

Why is jquery concatenating string twice?

I'm trying to play an embedded Youtube video after a button click (.playbutton).
The video is embedded as an iframe within a div named #youtubecontainer.
The easiest way to achieve this is to append '?autoplay=1' to the iframe's src attribute. (I know there is an API, but for now I need to do it this way.)
My HTML code is this
<div class="playbutton">
<img class="playicon">
</div>
<div id="youtubecontainer">
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520" frameborder="0" allowfullscreen></iframe>
</div>
Javascript code
$(function() {
//This controls YouTube playback via button
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', ($("#youtubecontainer iframe").attr('src') + '?autoplay=1'));
});
});
However, this appends'?autoplay=1' to the src twice, so it reads as follows and fails:
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520?autoplay=1?autoplay=1" frameborder="0" allowfullscreen=""></iframe>
Any ideas why?

Try to replace that autoplay before you add it. Because when you second click on it, you are adding again the ?autoplay=1 what has still there before.
Working DEMO
$("#youtubecontainer iframe").attr('src', $("#youtubecontainer iframe").attr('src').replace(/\?autoplay=1/, "") + '?autoplay=1');

You could try to save the original src of the iframe before the click event:
var source;
$(function() {
//This controls YouTube playback via button
source = $("#youtubecontainer iframe").attr('src');
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', source + '?autoplay=1');
});
});
Working fiddle: http://jsfiddle.net/robertrozas/notjtz3d/1/

How can i embed a youtube video using sencha

I had tried the iframe for embedding youtube video in sencha inside the html tag.
....
html:'<iframe>Youtube URL</iframe>'
....
I added the above code inside the second icon of the tab bar. The second icon is a scroll view.i.e i set it to scroll:'vertical'
My Problem is when i add youtube video.It comes like this...
Look.Only Part of the video is shown.
when i switch to other tab panel,the video appears as below.
Any Help!!!

I've done this using HTML inside a panel. of course it doesn't play embedded in the sencha app. It jumps to the youTube player.
html: '<div style="margin-left:12px; margin-top:20px"><h1>Syndicate Trailer</h1><p><iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/ewwtznVkSxA" frameborder="0"></iframe></p><h1>Prometheus Trailer</h1><p><iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/sftuxbvGwiU" frameborder="0"></iframe></p></div>'
This leaves the links in the video frame which didn't suit my app so I modified to use this instead:
html: '<div style="margin-left:12px; margin-top:20px"><h1>Eddies Cinema Slot </h1><p><embed id=\"yt\" src=\"http://www.youtube.com/watch?v=5a9-ORWn0fY\" type=\"application/x-shockwave-flash\" width=\"290\" height=\"260\"></embed></p></div>'