I have following code for iframe
<div id="demoframe" class="content">
<iframe src="mysite.com" width="100%" height="500px" style="border:none"></iframe>
</div>
and following javascript code
<script>
(function($) {
$(window).load(function() {
$("body").mCustomScrollbar({
theme: "dark"
});
$("#demoframe").mCustomScrollbar({
theme: "dark"
});
});
})(jQuery);
</script>
However, only the scrollbar for body changes and not of iframe? What am I doing wrong here.
It's only adding the body element for CSS. Add an iframe element.
i guess you need to refer to the iframe:
$("#demoframe").find('iframe').mCustomScrollbar({theme:"dark"});
or
$("#demoframe iframe").mCustomScrollbar({theme:"dark"});
Related
I have embeded a youtube subscribe button on my wordpress but it is coming with padding-top:150%; as inline css from youtube.
How I can remove that padding to put subscribe button at the exact place.
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="UCShv7275jgHM0uvHxZUkG2g" data-layout="" data-count="default"></div>
output on this page sidebar.
http://www.jonathanfritzler.org/i-am/
If you have jQuery try adding this to the bottom of your html page:
<script>
$(document).ready(function() {
var videoList = document.getElementsByClassName("fluid-width-video-wrapper"); [0].
videoList.forEach(function(embededVideo) {
embededVideo.setAttribute("style", "padding-top: 0px;");
});
});
</script>
If you don't have jQuery, add this to the top of your html page:
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
It's not possible to override the CSS inside an external iframe. So when you embed a subscribe button or video from YouTube on your website, you won't be able to edit the content inside of that iframe in any way.
However, it is possible to get rid of that 150% padding-top, because it's not within the iframe.
At the time of writing, YouTube's code for an embedded subscription button is similar to this:
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="MyChannel" data-layout="full" data-count="default"></div>
This produces the following HTML on the webpage where you place the code (I've left out some of the code for brevity):
<div id="___ytsubscribe_0" style="[...]">
<div class="fluid-width-video-wrapper" style="padding-top: 150%;">
<iframe [...]></iframe>
</div>
</div>
That top-padding sits outside of the iframe, so you can target it with CSS. The CSS code below would remove the top padding:
/* remove 150% padding top added by youtube subscribe button */
#___ytsubscribe_0 .fluid-width-video-wrapper {
padding-top: 0 !important;
}
You can try to overwrite the padding-top attribute from class g-ytsubscribe in your own style.css.
I'm trying to hide an element in same-origin iframe. However, this son of a bi*ch blinks for a few ms before getting hidden. So what I did was added display: none and remove it after iframe is loaded - great. But now, when user clicks inner page link of iframe, which also contains element to be hidden, it still blinks (because display:none is now removed). I need to detect when to add it again, i. e. just before another page starts to load.
Testing here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script
Here is what I tried:
<html class="js">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
html.js #iframeID
{
display: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID').on('load', function()
{
$('#iframeID').contents().find('a').on('click', function()
{
$('html').addClass('js');
console.log('click');
});
console.log('loaded');
$('#iframeID').contents().find('#mySidenav').remove();
$('html').removeClass('js');
});
});
</script>
</head>
<body>
<iframe id="iframeID" height="800px" width="800px" src="https://www.w3schools.com/" ></iframe>
<script>
</script>
</body>
</html>
However, there are some a elements that don't load another page. In this example, try clicking on "TUTORIALS" at the top of that iframed webpage - it just opens up dropdown, not loads another page.
What should I do?
I noticed that "TUTORIALS" link has href="javascript:void(0)". Maybe I should be somehow selecting all a links without such href? But not sure if it's fool proof.
You can make use of load event on the iframe as such,
$('iframe').on('load', function(){
console.log('Iframe Loaded');
});
The iframe's load event is also called every time it's src changes.
$(document).ready(function(){
$('.iFrame_class').load(function(){
console.log('frame loaded');
});
});
Alternatively on start load solution:
Custom attribute for iframe:
iframe class="iFrame" src="some site" started="0"
Put this code to iframed page:
window.parent.$('.iFrame').attr("started","0"); //makes iframe started attr to false on page load
$(document.body).on("click","a", function() {
window.parent.$('.iFrame').attr("started","1");// makes iframe started attr to true for all clicked links
});
And listen; is started attribute changed to 1 on parent page?
I fixed the damn blinking by making 2 iframes and showing 2nd while 1st one is loading. While 1st one is loading, it's also hidden, becomes unhidden after it finishes loading. Anyway, here is my code, should help someone:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
iframe.js
{
display: none;
}
iframe.unclickable
{
pointer-events: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID1').on('load', function()
{
$('#iframeID1').contents().find('a[href!="javascript:void(0)"]').filter('a[target!="_blank"]').filter('a[target!="_top"]').filter('a[target!="_parent"]').on('click', function()
{
$('#iframeID1').addClass('js');
$('#iframeID2').removeClass('js');
});
$('#iframeID1').contents().find('#mySidenav').remove();
$('#iframeID1').removeClass('js');
$('#iframeID2').addClass('js');
$('#iframeID2').contents().find('html').html($('#iframeID1').contents().find('html').html());
});
});
</script>
</head>
<body>
<iframe id="iframeID1" height="800px" width="800px" src="https://www.w3schools.com/" class="js"></iframe>
<iframe id="iframeID2" height="800px" width="800px" src="https://www.w3schools.com/" class="js unclickable" ></iframe>
<script>
</script>
</body>
</html>
I am using squarespace (in retrospect a poor idea because of the difficulty of customizing with code), and I need to be able to identify the vimeo iframe within this div so I can use it in some javascript calls. However, the javascript does not recognize any such iframe element existing. I feel like either it's impossible to identify the iframe as it is currently shoved into the div (by squarespace), or I am missing a selector. Any help or pointers would be appreciated.
Here's the iframe I am trying to embed into squarespace:
<iframe src="http://player.vimeo.com/video/135481337?api=1&player_id=player1&wmode=opaque" width="500" frameborder="0" id="player1" class="vimeo" height="281"></iframe>
Here's the embedded iframe:
<div class="sqs-video-wrapper" data-load="false" data-html="<iframe src="http://player.vimeo.com/video/135481337?api=1&player_id=player1&wmode=opaque" width="500" frameborder="0" id="player1" class="vimeo" height="281"></iframe>" data-provider-name="" >
</div>
And here is my javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
alert("this alert is working");
// Enable the API on each Vimeo video
jQuery('iframe.vimeo').each(function(){
Froogaloop(this).addEvent('ready', ready);
});
function ready(playerID){
Froogaloop(playerID).addEvent('play', play(playerID));
Froogaloop(playerID).addEvent('finish', onFinish);
}
function play(playerID){
alert(playerID + " is playing!");
}
function onFinish() {
document.write('<style>.yui3-lightbox2-content {display: none !important;}</style>');
}
});
</script>
I've taken this from a working example of this api as seen in this link.
I am using iFrame to call common footer and header into a muti-site wordpress but the header and footer load much later than the rest of the site. Here is what I have for the footer:
<iframe scrolling="no" height="395px" frameborder="0" width="100%" src="http://domain.com/common-footer/" class="footer-frame"></iframe>
Is there a better way to do this or to improve this? Thanks much.
You could do this easily with jQuery with the .load() function. Use it like this:
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
HTML:
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
For more information about the .load() function: http://www.jquery-tutorial.net/ajax/the-load-method/
Hope this helps!
I tried adding the SlimScroll to an iframe, but for some reason it isn't working.
<div id="-my-profile"><iframe id="scroll" height="525" width="912" src="/index/8"></iframe></div>
<script type="text/javascript">
$(function(){
$('#scroll').slimScroll();
});
</script>
I read the documentation about slimscroll and I found nothing about iframe.
What could be the problem? Is it working only with divs?
Thank you.
in "/index/8" page add:
<script type="text/javascript">
$(function(){
$('body or .container or #content').slimScroll();
});
</script>
add scrolling="no" to iframe:
<div id="-my-profile"><iframe scrolling="no" height="525" width="912" src="/index/8"></iframe></div>